feat(#1349080): Add facet search bar in example app

Author: botisSmile

front/example-app/src/components/Facets/FacetLoadMore.tsx

@@ -1,47 +1,118 @@
-import { Button, Collapse, FormGroup } from '@mui/material'
+import React, { ChangeEvent, useMemo, useState } from 'react'
+import { Button, FormGroup, TextField, styled } from '@mui/material'
 import {
   IFetch,
   IGraphqlAggregation,
   IGraphqlAggregationOption,
   IGraphqlViewMoreFacetOption,
+  LoadStatus,
 } from '@elastic-suite/gally-admin-shared'
 
+const SearchOption = styled(TextField)(() => ({
+  width: '100%',
+}))
+
+const NoOption = styled('div')(({ theme }) => ({
+  color: '#AA0000',
+  backgroundColor: '#FFEEEE',
+  marginBottom: theme.spacing(1),
+  padding: theme.spacing(1),
+}))
+
 interface IProps {
   filter: IGraphqlAggregation
   id: string
-  loadMore: (filter: IGraphqlAggregation) => void
+  loadMore: (filter: IGraphqlAggregation, optionSearch?: string) => void
   moreOptions?: IFetch<IGraphqlViewMoreFacetOption[]>
   renderOption: (option: IGraphqlAggregationOption) => JSX.Element
 }
 
+function getFirstLabelsString(items: IGraphqlAggregationOption[]): string {
+  const labels = items.slice(0, 2).map((i) => i.label)
+  if (items.length > 2) {
+    labels.push('...')
+  }
+  return labels.join(', ')
+}
+
 function FacetLoadMore(props: IProps): JSX.Element {
   const { filter, id, loadMore, moreOptions, renderOption } = props
-  const open = moreOptions?.data?.length > 0
 
-  function handleToggleMore(): void {
-    loadMore(filter)
+  const [optionSearch, setOptionSearch] = useState<string>('')
+  const [showMore, setShowMore] = useState<boolean>(false)
+
+  const searchOptionLabel = useMemo(() => {
+    const labels = getFirstLabelsString(filter.options)
+    return labels ? `Search (${labels})` : 'Search'
+  }, [filter.options])
+
+  function handleToggleMore(showMoreEnabled: boolean): void {
+    setShowMore(showMoreEnabled)
+    if (showMoreEnabled) {
+      loadMore(filter, optionSearch)
+    }
   }
 
+  function handleOptionSearchChange(value: string): void {
+    setOptionSearch(value)
+    if (!value) {
+      setShowMore(false)
+    } else {
+      setShowMore(true)
+    }
+    loadMore(filter, value)
+  }
+
+  const options =
+    showMore &&
+    !moreOptions?.error &&
+    moreOptions?.status === LoadStatus.SUCCEEDED
+      ? moreOptions?.data
+      : filter.options
+
+  const showShowMore = !showMore || options === filter.options
+  const canShowToggleButtons = Boolean(filter.hasMore) && !optionSearch
+
   return (
     <>
-      {!moreOptions?.data && (
-        <FormGroup aria-labelledby={id}>
-          {filter.options.map(renderOption)}
-        </FormGroup>
+      {Boolean(filter.hasMore) && (
+        <>
+          <SearchOption
+            id="outlined-basic"
+            label={searchOptionLabel}
+            variant="outlined"
+            name="searchOption"
+            value={optionSearch}
+            onChange={(e: ChangeEvent<HTMLInputElement>): void =>
+              handleOptionSearchChange(e.target.value)
+            }
+            size="small"
+          />
+          {Boolean(optionSearch) &&
+            ((moreOptions?.status === LoadStatus.SUCCEEDED &&
+              moreOptions?.data?.length < 1) ||
+              Boolean(moreOptions?.error)) && (
+              <NoOption>
+                {moreOptions?.error
+                  ? 'An error occured'
+                  : `No value matching the search "${optionSearch}"`}
+              </NoOption>
+            )}
+        </>
       )}
-      <Collapse in={open}>
-        <FormGroup aria-labelledby={id}>
-          {moreOptions?.data?.map(renderOption)}
-        </FormGroup>
-      </Collapse>
-      {Boolean(filter.hasMore) && !open && (
+      <FormGroup aria-labelledby={id}>{options?.map(renderOption)}</FormGroup>
+      {canShowToggleButtons && (showShowMore || Boolean(moreOptions?.error)) ? (
         <Button
           disabled={Boolean(moreOptions?.error)}
-          onClick={handleToggleMore}
+          onClick={(): void => handleToggleMore(true)}
         >
           {moreOptions?.error ? 'An error occured' : 'Show more'}
         </Button>
-      )}
+      ) : null}
+
+      {canShowToggleButtons && !showShowMore && !moreOptions?.error ? (
+        <Button onClick={(): void => handleToggleMore(false)}>Show less</Button>
+      ) : null}
     </>
   )
 }

front/example-app/src/hooks/useDocuments.ts

@@ -101,7 +101,7 @@ export function useDocuments(
   )
 
   const loadMore = useCallback(
-    (filter: IGraphqlAggregation) => {
+    (filter: IGraphqlAggregation, optionSearch?: string) => {
       const variables: IGraphqlViewMoreFacetOptionsVariables = {
         aggregation: filter.field,
         localizedCatalog: String(localizedCatalogId),
@@ -110,6 +110,9 @@ export function useDocuments(
       if (search) {
         variables.search = search
       }
+      if (optionSearch) {
+        variables.optionSearch = optionSearch
+      }
       graphqlApi<IGraphqlViewMoreFacetOptions>(
         getMoreFacetOptionsQuery(queryFilters),
         variables as unknown as Record<string, unknown>

front/example-app/src/hooks/useProducts.ts

@@ -124,7 +124,7 @@ export function useProducts(
   )
 
   const loadMore = useCallback(
-    (filter: IGraphqlAggregation) => {
+    (filter: IGraphqlAggregation, optionSearch?: string) => {
       const variables: IGraphqlViewMoreProductFacetOptionsVariables = {
         aggregation: filter.field,
         localizedCatalog: String(localizedCatalogId),
@@ -135,6 +135,9 @@ export function useProducts(
       if (search) {
         variables.search = search
       }
+      if (optionSearch) {
+        variables.optionSearch = optionSearch
+      }
       if (currentCategoryId) {
         variables.currentCategoryId = currentCategoryId
       }