feat: #1259178 call to previewProducts instead of products in categor…

…y page
Elastic-Suite · Nov 22, 2023 · 5a817c8 · 5a817c8
1 parent 7010528
commit 5a817c8
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 17 deletions.
diff --git a/packages/components/src/components/stateful/ProductsContainer/ProductsContainer.tsx b/packages/components/src/components/stateful/ProductsContainer/ProductsContainer.tsx
@@ -14,6 +14,7 @@ import {
   IParsedCategoryConfiguration,
   IProductFieldFilterInput,
   IProductPositions,
+  IRuleEngineOperators,
   ISortingOption,
   LoadStatus,
   getProductPosition,
@@ -52,15 +53,17 @@ interface IProps {
   onSave: (result: string) => void
   prevCatConf: MutableRefObject<IParsedCategoryConfiguration>
   prevProductPositions: MutableRefObject<string>
-  productGraphqlFilters: IProductFieldFilterInput
+  productGraphqlFilters?: IProductFieldFilterInput
   hasEditLink?: boolean
   editLink?: string
   localizedCatalogIdWithDefault: string
+  ruleOperators: IRuleEngineOperators
 }
 
 function ProductsContainer(props: IProps): JSX.Element {
   const {
     catConf,
+    ruleOperators,
     category,
     isLoading,
     isValid,
@@ -232,10 +235,7 @@ function ProductsContainer(props: IProps): JSX.Element {
           onValSearchOnChange={onValSearchOnChange}
           isInputAdornmentClickable
         />
-        {Boolean(
-          catConf &&
-            (!catConf.virtualRule || productGraphqlFilters || category?.id)
-        ) && (
+        {Boolean(catConf && (!catConf.virtualRule || category?.id)) && (
           <ProductsTopAndBottom
             ref={tableRef}
             category={category}
@@ -251,6 +251,8 @@ function ProductsContainer(props: IProps): JSX.Element {
             sortValue={defaultSorting}
             searchValue={search}
             nbTopProducts={nbTopRows}
+            catConf={catConf}
+            ruleOperators={ruleOperators}
             hasEditLink={hasEditLink}
             editLink={editLink}
           />

diff --git a/packages/components/src/components/stateful/ProductsTopAndBottom/ProductsTopAndBottom.tsx b/packages/components/src/components/stateful/ProductsTopAndBottom/ProductsTopAndBottom.tsx
@@ -10,8 +10,10 @@ import { useTranslation } from 'next-i18next'
 import {
   ICategory,
   IGraphqlProductPosition,
+  IParsedCategoryConfiguration,
   IProductFieldFilterInput,
   IProductPositions,
+  IRuleEngineOperators,
 } from '@elastic-suite/gally-admin-shared'
 
 import { selectConfiguration, useAppSelector } from '../../../store'
@@ -41,6 +43,8 @@ interface IProps {
   sortValue: string
   searchValue: string
   nbTopProducts: number
+  catConf: IParsedCategoryConfiguration
+  ruleOperators: IRuleEngineOperators
   hasEditLink?: boolean
   editLink?: string
 }
@@ -63,6 +67,8 @@ function ProductsTopAndBottom(
     sortValue,
     searchValue,
     nbTopProducts,
+    catConf,
+    ruleOperators,
     hasEditLink,
     editLink,
   } = props
@@ -90,6 +96,8 @@ function ProductsTopAndBottom(
               searchValue={searchValue}
               configuration={configuration}
               setNbTopRows={setNbTopRows}
+              catConf={catConf}
+              ruleOperators={ruleOperators}
               hasEditLink={hasEditLink}
               editLink={editLink}
             />
@@ -106,6 +114,8 @@ function ProductsTopAndBottom(
             searchValue={searchValue}
             configuration={configuration}
             nbTopProducts={nbTopProducts}
+            catConf={catConf}
+            ruleOperators={ruleOperators}
             hasEditLink={hasEditLink}
             editLink={editLink}
           />

diff --git a/packages/components/src/components/stateful/TopAndBottomTable/BottomTable.tsx b/packages/components/src/components/stateful/TopAndBottomTable/BottomTable.tsx
@@ -12,13 +12,17 @@ import {
   ICategory,
   IConfigurations,
   IGraphqlSearchProducts,
+  IParsedCategoryConfiguration,
   IProductFieldFilterInput,
+  IRuleEngineOperators,
   ITableRow,
   ProductRequestType,
+  cleanBeforeSaveCatConf,
   defaultPageSize,
   defaultRowsPerPageOptions,
-  getSearchProductsQuery,
+  getSearchPreviewProductsQuery,
   productTableheader,
+  serializeCatConf,
 } from '@elastic-suite/gally-admin-shared'
 
 import { catalogContext } from '../../../contexts'
@@ -40,6 +44,8 @@ interface IProps {
   searchValue: string
   configuration: IConfigurations
   nbTopProducts: number
+  catConf: IParsedCategoryConfiguration
+  ruleOperators: IRuleEngineOperators
   hasEditLink?: boolean
   editLink?: string
 }
@@ -59,6 +65,8 @@ function BottomTable(
     searchValue,
     configuration,
     nbTopProducts,
+    catConf,
+    ruleOperators,
     hasEditLink,
     editLink,
   } = props
@@ -78,13 +86,20 @@ function BottomTable(
         sortValue && sortValue !== 'category__position'
           ? { [sortValue]: 'asc' }
           : {},
+      currentCategoryConfiguration: catConf
+        ? JSON.stringify(
+            cleanBeforeSaveCatConf(serializeCatConf(catConf, ruleOperators))
+          )
+        : undefined,
     }),
     [
       category,
       currentPage,
       localizedCatalogIdWithDefault,
       rowsPerPage,
       sortValue,
+      catConf,
+      ruleOperators,
     ]
   )
   const filters = productGraphqlFilters ? [productGraphqlFilters] : []
@@ -108,7 +123,7 @@ function BottomTable(
   }
 
   const [products] = useGraphqlApi<IGraphqlSearchProducts>(
-    getSearchProductsQuery(filters),
+    getSearchPreviewProductsQuery(filters),
     variables
   )
 

diff --git a/packages/components/src/components/stateful/TopAndBottomTable/TopTable.tsx b/packages/components/src/components/stateful/TopAndBottomTable/TopTable.tsx
@@ -10,13 +10,17 @@ import {
   IConfigurations,
   IGraphqlProductPosition,
   IGraphqlSearchProducts,
+  IParsedCategoryConfiguration,
   IProductFieldFilterInput,
   IProductPositions,
+  IRuleEngineOperators,
   ITableRow,
   LoadStatus,
   ProductRequestType,
-  getSearchProductsQuery,
+  cleanBeforeSaveCatConf,
+  getSearchPreviewProductsQuery,
   productTableheader,
+  serializeCatConf,
 } from '@elastic-suite/gally-admin-shared'
 
 import { catalogContext } from '../../../contexts'
@@ -37,6 +41,8 @@ interface IProps {
   configuration: IConfigurations
   searchValue: string
   setNbTopRows: (value: number) => void
+  catConf: IParsedCategoryConfiguration
+  ruleOperators: IRuleEngineOperators
   hasEditLink?: boolean
   editLink?: string
 }
@@ -54,6 +60,8 @@ function TopTable(props: IProps): JSX.Element {
     configuration,
     searchValue,
     setNbTopRows,
+    catConf,
+    ruleOperators,
     hasEditLink,
     editLink,
   } = props
@@ -64,8 +72,13 @@ function TopTable(props: IProps): JSX.Element {
       currentCategoryId: category?.id,
       localizedCatalog: localizedCatalogIdWithDefault,
       requestType: ProductRequestType.CATALOG,
+      currentCategoryConfiguration: catConf
+        ? JSON.stringify(
+            cleanBeforeSaveCatConf(serializeCatConf(catConf, ruleOperators))
+          )
+        : undefined,
     }),
-    [category, localizedCatalogIdWithDefault]
+    [category, localizedCatalogIdWithDefault, catConf, ruleOperators]
   )
   const filters = productGraphqlFilters ? [productGraphqlFilters] : []
   if (topProductsIds.length > 0) {
@@ -86,7 +99,7 @@ function TopTable(props: IProps): JSX.Element {
   }
 
   const [products] = useGraphqlApi<IGraphqlSearchProducts>(
-    getSearchProductsQuery(filters),
+    getSearchPreviewProductsQuery(filters),
     variables
   )
 

diff --git a/packages/components/src/pages/admin/merchandize/categories.tsx b/packages/components/src/pages/admin/merchandize/categories.tsx
@@ -25,7 +25,6 @@ import {
   useFetchApi,
   useResource,
   useResourceOperations,
-  useRuleEngineGraphqlFilters,
   useRuleOperators,
 } from '../../../hooks'
 import { findCategory } from '../../../services'
@@ -124,10 +123,6 @@ function AdminMerchandizeCategories(): JSX.Element {
 
   const isValid = !catConf?.isVirtual || isRuleValid(catConf?.virtualRule)
 
-  // Rule engine graphql filters
-  const [productGraphqlFilters, setRuleEngineGraphqlFilters] =
-    useRuleEngineGraphqlFilters(catConf, ruleOperators)
-
   // Product positions
   const prevProductPositions = useRef<string>('')
 
@@ -142,7 +137,6 @@ function AdminMerchandizeCategories(): JSX.Element {
   function handleSelectCategory(category: ICategory): void {
     setSelectedCategoryItem(category)
     setCatConf(null)
-    setRuleEngineGraphqlFilters(null)
   }
 
   const graphqlApi = useApiGraphql()
@@ -238,13 +232,13 @@ function AdminMerchandizeCategories(): JSX.Element {
           <Placeholder placeholder={t('placeholder')}>
             <ProductsContainer
               catConf={catConf}
+              ruleOperators={ruleOperators}
               category={selectedCategoryItem}
               isValid={isValid}
               onChange={handleUpdateCat}
               onSave={onSave}
               prevCatConf={prevCatConf}
               prevProductPositions={prevProductPositions}
-              productGraphqlFilters={productGraphqlFilters}
               isLoading={isLoading}
               localizedCatalogIdWithDefault={localizedCatalogIdWithDefault}
             />

diff --git a/packages/shared/src/constants/graphql.ts b/packages/shared/src/constants/graphql.ts
@@ -25,6 +25,35 @@ export function getSearchProductsQuery(
   })
 }
 
+export function getSearchPreviewProductsQuery(
+  filter: IProductFieldFilterInput | IProductFieldFilterInput[] = null,
+  withAggregations = false
+): string {
+  const productQueryContent = getSearchProductsQueryContent(
+    filter,
+    withAggregations
+  )
+  return jsonToGraphQLQuery({
+    query: {
+      __name: 'getPreviewProducts',
+      __variables: {
+        ...productQueryContent.variables,
+        currentCategoryConfiguration: 'String',
+      },
+      products: {
+        __aliasFor: 'previewProducts',
+        __args: {
+          ...productQueryContent.args,
+          currentCategoryConfiguration: new VariableType(
+            'currentCategoryConfiguration'
+          ),
+        },
+        ...productQueryContent.fields,
+      },
+    },
+  })
+}
+
 function getSearchProductsQueryContent(
   filter: IProductFieldFilterInput | IProductFieldFilterInput[] = null,
   withAggregations = false

diff --git a/packages/shared/src/services/rules.test.ts b/packages/shared/src/services/rules.test.ts
@@ -8,6 +8,7 @@ import {
 } from '../types'
 
 import {
+  cleanBeforeSaveCatConf,
   isAttributeRule,
   isCombinationRule,
   isRuleValid,
@@ -193,6 +194,21 @@ describe('Rules service', () => {
     })
   })
 
+  describe('cleanBeforeSaveCatConf', () => {
+    it('should remove useless data on category configuration before save', () => {
+      const newCatConf = {
+        ...catConf,
+        id: 0,
+        '@id': '/category_configurations/0',
+      }
+      expect(cleanBeforeSaveCatConf(newCatConf)).toEqual(
+        expect.not.objectContaining({
+          '@id': '/category_configurations/0',
+        })
+      )
+    })
+  })
+
   describe('isRuleValid', () => {
     it('should validate a rule', () => {
       expect(isRuleValid(parsedVirtualRule)).toEqual(true)

diff --git a/packages/shared/src/services/rules.ts b/packages/shared/src/services/rules.ts
@@ -107,6 +107,18 @@ export function serializeCatConf(
   }
 }
 
+export function cleanBeforeSaveCatConf(
+  catConf: ICategoryConfiguration | IParsedCategoryConfiguration
+): ICategoryConfiguration | IParsedCategoryConfiguration {
+  const catConfCleaned = { ...catConf }
+  if (!catConf.id) {
+    delete catConfCleaned['@id']
+    delete catConfCleaned.id
+  }
+
+  return catConfCleaned
+}
+
 export function isRuleValid(rule?: IRule): boolean {
   if (!rule) {
     return true