feat: add support for context-specific search facets

src/components/Header/index.tsx

@@ -21,7 +21,7 @@ const Header: FC<Props> = (props: Props) => {
         {/* Label */}
         <Box marginX={3}>
           <Inline space={2}>
-            <Text weight="semibold">{currentDocument ? 'Insert Media' : 'Browse Media'}</Text>
+            <Text weight="semibold">{currentDocument ? 'Insert Image' : 'Browse Assets'}</Text>
             {currentDocument && (
               <Text>
                 <Icon symbol="arrow-right" />

src/components/SearchFacetsControl/index.tsx

@@ -12,10 +12,34 @@ const SearchFacetsControl: FC = () => {
   // Redux
   const dispatch = useDispatch()
   const searchFacets = useTypedSelector(state => state.assets.searchFacets)
+  const document = useTypedSelector(state => state.document)
+
+  const isTool = !document
+
+  // Manually filter facets based on current context, whether it's invoked as a tool, or via selection through
+  // via custom asset source.
+  const filteredFacets = FACETS.filter(facet => {
+    if (facet.type === 'group' || facet.type === 'divider') {
+      return true
+    }
+
+    if (facet.contexts === 'all') {
+      return true
+    }
+
+    if (isTool) {
+      return facet.contexts.includes('tool')
+    } else {
+      // TODO: in future, determine whether we're inserting into a file or image field.
+      // For now, it's only possible to insert into image fields.
+      return facet.contexts.includes('image')
+    }
+  })
 
   // Determine if there are any remaining facets
   // (This operates under the assumption that only one of each facet can be active at any given time)
-  const remainingSearchFacets = FACETS.filter(facet => facet).length - searchFacets.length > 0
+  const remainingSearchFacets =
+    filteredFacets.filter(facet => facet).length - searchFacets.length > 0
 
   const renderMenuFacets = (
     facets: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputProps)[]
@@ -61,21 +85,19 @@ const SearchFacetsControl: FC = () => {
             fontSize={1}
             icon={AddCircleIcon}
             mode="bleed"
-            // mode="ghost"
             text="Add filter"
             tone="primary"
           />
         }
         id="facets"
-        menu={<Menu>{renderMenuFacets(FACETS)}</Menu>}
+        menu={<Menu>{renderMenuFacets(filteredFacets)}</Menu>}
         placement="right-start"
       />
 
       {/* Clear facets button */}
       {searchFacets.length > 0 && (
         <Button
           fontSize={1}
-          // mode="ghost"
           mode="bleed"
           onClick={() => dispatch(assetsSearchFacetsClear())}
           text="Clear"

src/constants.ts

@@ -135,6 +135,7 @@ export const SEARCH_FACET_OPERATORS: SearchFacetOperators = {
 export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputProps)[] = [
   // Tags
   {
+    contexts: 'all',
     field: 'tags',
     name: 'tag',
     operatorType: 'references',
@@ -144,6 +145,7 @@ export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputPr
   },
   // In use
   {
+    contexts: 'all',
     name: 'inUse',
     operatorType: 'is',
     options: [
@@ -168,6 +170,7 @@ export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputPr
   },
   // Title
   {
+    contexts: 'all',
     field: 'title',
     name: 'title',
     operatorType: 'empty',
@@ -178,6 +181,7 @@ export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputPr
   },
   // Alt text
   {
+    contexts: 'all',
     field: 'altText',
     name: 'altText',
     operatorType: 'empty',
@@ -188,6 +192,7 @@ export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputPr
   },
   // Description
   {
+    contexts: 'all',
     field: 'description',
     name: 'description',
     operatorType: 'empty',
@@ -202,6 +207,7 @@ export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputPr
   },
   // Has transparency
   {
+    contexts: ['image', 'tool'],
     field: 'metadata.isOpaque',
     name: 'isOpaque',
     operatorType: 'equalTo',
@@ -227,6 +233,7 @@ export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputPr
   },
   // Size
   {
+    contexts: 'all',
     field: 'size',
     modifier: 'kb',
     modifiers: [
@@ -257,6 +264,7 @@ export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputPr
   },
   // File type
   {
+    contexts: ['file', 'tool'],
     name: 'type',
     operatorType: 'is',
     operatorTypes: ['is', 'isNot'],
@@ -292,6 +300,7 @@ export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputPr
   },
   // Orientation
   {
+    contexts: ['image', 'tool'],
     name: 'orientation',
     operatorType: 'is',
     operatorTypes: ['is', 'isNot'],
@@ -318,6 +327,7 @@ export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputPr
   },
   // Width
   {
+    contexts: ['image', 'tool'],
     field: 'metadata.dimensions.width',
     name: 'width',
     operatorType: 'greaterThan',
@@ -335,6 +345,7 @@ export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputPr
   },
   // Height
   {
+    contexts: ['image', 'tool'],
     field: 'metadata.dimensions.height',
     name: 'height',
     operatorType: 'greaterThan',

src/types/index.ts

@@ -8,6 +8,14 @@ type CustomFields = {
   title?: string
 }
 
+type SearchFacetInputCommon = {
+  contexts: 'all' | ('file' | 'image' | 'tool')[]
+  name: string
+  operatorType: SearchFacetOperatorType
+  operatorTypes?: (SearchFacetOperatorType | null)[]
+  title: string
+}
+
 export type Asset = FileAsset | ImageAsset
 
 export type AssetItem = {
@@ -119,36 +127,25 @@ export type SearchFacetInputNumberModifier = {
   title: string
 }
 
-export type SearchFacetInputNumberProps = {
+export type SearchFacetInputNumberProps = SearchFacetInputCommon & {
   field: string
   modifier?: string
   modifiers?: SearchFacetInputNumberModifier[]
-  name: string
-  operatorType: SearchFacetOperatorType
-  operatorTypes?: (SearchFacetOperatorType | null)[]
-  title: string
   type: 'number'
   value?: number
 }
 
-export type SearchFacetInputSearchableProps = {
+export type SearchFacetInputSearchableProps = SearchFacetInputCommon & {
   field: string
   name: string
-  operatorType: SearchFacetOperatorType
-  operatorTypes?: (SearchFacetOperatorType | null)[]
   options?: SearchFacetInputSelectListItemProps[]
-  title: string
   type: 'searchable'
   value?: ReactSelectOption
 }
 
-export type SearchFacetInputSelectProps = {
+export type SearchFacetInputSelectProps = SearchFacetInputCommon & {
   field?: string
-  name: string
-  operatorType: SearchFacetOperatorType
-  operatorTypes?: (SearchFacetOperatorType | null)[]
   options: SearchFacetInputSelectListItemProps[]
-  title: string
   type: 'select'
   value: string
 }
@@ -159,13 +156,9 @@ export type SearchFacetInputSelectListItemProps = {
   value: string
 }
 
-export type SearchFacetInputStringProps = {
+export type SearchFacetInputStringProps = SearchFacetInputCommon & {
   field: string
   modifier?: string
-  name: string
-  operatorType: SearchFacetOperatorType
-  operatorTypes?: (SearchFacetOperatorType | null)[]
-  title: string
   type: 'string'
   value?: string
 }