[VectorSearch] #1279426 - Add description as tooltip in list

Elastic-Suite · Mar 11, 2024 · e9214aa · e9214aa
1 parent f130f1b
commit e9214aa
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/front/example-app/src/components/VectorSearch/ProductList.tsx b/front/example-app/src/components/VectorSearch/ProductList.tsx
@@ -166,7 +166,9 @@ function ProductList(props: IProps): JSX.Element {
             return (
               <tr key={item.id}>
                 <td>{item.sku}</td>
-                <td>{item.name}</td>
+                <td title={item.description ? item.description.replace(/(<([^>]+)>)/, '') : ''}>
+                  {item.name}
+                </td>
                 <RightAlignedCell>{item.score.toFixed(4)}</RightAlignedCell>
               </tr>
             )

diff --git a/front/example-app/src/services/vectorSearchDocuments.ts b/front/example-app/src/services/vectorSearchDocuments.ts
@@ -23,6 +23,11 @@ export function transformVectorSearchDocumentsIntoProducts(
               document.source.name.length > 0
                 ? (document.source?.name[0] as string)
                 : '',
+            description:
+              Array.isArray(document.source?.description) &&
+              document.source.description.length > 0
+                ? (document.source?.description[0] as string)
+                : '',
             score: Number(document.score),
             image: document.source?.image as string,
             stock: document.source?.stock ?? undefined,

diff --git a/front/example-app/src/types/product.ts b/front/example-app/src/types/product.ts
@@ -14,6 +14,7 @@ export interface IProductsHook extends IEntitiesHook {
 export interface IProduct extends Omit<IGraphqlProduct, 'price'> {
   price?: number
   image?: string
+  description?: string
 }
 
 export interface IProductAutoComplete extends IProduct {