Draft

front/example-app/src/components/SearchBar/SearchBar.tsx

@@ -63,10 +63,9 @@ function getCategoryPathLabel(path: string[], categories: ICategory[], separator
     const category = categories.find((category: ICategory) => category.id === path[0])
     path.shift()
     console.log('newPath', path)
-    // label = category?.name +
-    //     (category?.children.length > 0  ? '/' : '') +
-    //     getCategoryPathLabel(path, category?.children ?? [], separator)
-    label = `${category?.name}/${getCategoryPathLabel(path, category.children, separator)}`
+    label = category?.name +
+         (category?.children?.length > 0  ? '/' : '') +
+        getCategoryPathLabel(path, category?.children ?? [], separator)
   }
 
   return label.split('/').join(' / ');
@@ -102,9 +101,7 @@ function SearchBar(props: IProps): JSX.Element {
       }
     }) ?? []
 
-  options.concat(products.data?.categories.collection ?? [])
-
-  options = products.data?.categories.collection ?? [];
+  options = options.concat(products.data?.categories.collection ?? [])
 
 
   console.log('options', options)

front/example-app/src/types/category.ts

@@ -0,0 +1,6 @@
+import {ICategory} from "@elastic-suite/gally-admin-shared";
+
+
+export interface ICategoryAutoComplete extends ICategory {
+  type: 'category'
+}

front/example-app/src/types/product.ts

@@ -34,3 +34,7 @@ export interface IProduct extends Omit<IGraphqlProduct, 'price'> {
   price?: number
   image?: string
 }
+
+export interface IProductAutoComplete extends IProduct {
+  type: 'product'
+}