Merge pull request #211 from Elastic-Suite/feat-1309381-CategoriesMov…

…eRuleManagerFieldsetIntoMainBlock

feat(#1309381): [Categories] Move Rule Manager fieldset into the main…

packages/components/src/components/stateful/Merchandize/Merchandize.tsx

@@ -5,20 +5,26 @@ import {
   ICategory,
   IOptions,
   IParsedCategoryConfiguration,
+  IRuleCombination,
   getFieldConfig,
   getFieldState,
+  isRuleValid,
   isVirtualCategoryEnabled,
 } from '@elastic-suite/gally-admin-shared'
 
-import { useResource } from '../../../hooks'
+import { useResource, useRuleOperators } from '../../../hooks'
 import { selectBundles, useAppSelector } from '../../../store'
 
 import DropDownWithoutError from '../../atoms/form/DropDownWithoutError'
 import Switch from '../../atoms/form/Switch'
+import RulesManager from '../RulesManager/RulesManager'
 
 interface IProps {
   catConf: IParsedCategoryConfiguration
-  onChange?: (name: string, value: boolean | string) => void | Promise<void>
+  onChange?: (
+    name: string,
+    value: boolean | string | IRuleCombination
+  ) => void | Promise<void>
   sortOptions: IOptions<string>
   category: ICategory
 }
@@ -39,6 +45,11 @@ function Merchandize({
     ])
   )
 
+  // Rule engine operators
+  const ruleOperators = useRuleOperators()
+
+  const isValid = !catConf?.isVirtual || isRuleValid(catConf?.virtualRule)
+
   function handleChange(value: string | boolean, event: SyntheticEvent): void {
     onChange((event.target as HTMLInputElement).name, value)
   }
@@ -98,6 +109,30 @@ function Merchandize({
           </Grid>
         )}
       </Grid>
+      {isVirtualCategoryEnabled(bundles) &&
+      ruleOperators &&
+      catConf?.isVirtual ? (
+        <Grid
+          item
+          xs={6}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '28px',
+          }}
+        >
+          <RulesManager
+            label={t('virtualRule.title')}
+            active={catConf?.isVirtual}
+            onChange={(value): void => {
+              onChange('virtualRule', value)
+            }}
+            rule={catConf?.virtualRule}
+            ruleOperators={ruleOperators}
+            error={!isValid}
+          />
+        </Grid>
+      ) : null}
     </Paper>
   )
 }

packages/components/src/pages/admin/merchandize/categories.tsx

@@ -11,7 +11,6 @@ import {
   LoadStatus,
   isError,
   isRuleValid,
-  isVirtualCategoryEnabled,
   parseCatConf,
   savePositions,
   serializeCatConf,
@@ -28,15 +27,13 @@ import {
   useRuleOperators,
 } from '../../../hooks'
 import { findCategory } from '../../../services'
-import { selectBundles, useAppSelector } from '../../../store'
 
 import Placeholder from '../../../components/atoms/Placeholder/Placeholder'
 import TitleBlock from '../../../components/molecules/layout/TitleBlock/TitleBlock'
 import TwoColsLayout from '../../../components/molecules/layout/twoColsLayout/TwoColsLayout'
 import CatalogSwitcher from '../../../components/stateful/CatalogSwitcher/CatalogSwitcher'
 import CategoryTree from '../../../components/stateful/CategoryTree/CategoryTree'
 import ProductsContainer from '../../../components/stateful/ProductsContainer/ProductsContainer'
-import RulesManager from '../../../components/stateful/RulesManager/RulesManager'
 
 const pagesSlug = ['merchandize', 'categories']
 
@@ -45,7 +42,6 @@ function AdminMerchandizeCategories(): JSX.Element {
   const fetchApi = useApiFetch()
   const { t } = useTranslation('categories')
   const [isLoading, setIsLoading] = useState(false)
-  const bundles = useAppSelector(selectBundles)
   const { catalogId, localizedCatalogId, localizedCatalogIdWithDefault } =
     useContext(catalogContext)
 
@@ -126,14 +122,13 @@ function AdminMerchandizeCategories(): JSX.Element {
   // Product positions
   const prevProductPositions = useRef<string>('')
 
-  function handleUpdateCat(name: string, val: boolean | string): void {
+  function handleUpdateCat(
+    name: string,
+    val: boolean | string | IRuleCombination
+  ): void {
     setCatConf((catConf) => ({ ...catConf, [name]: val }))
   }
 
-  function handleUpdateRule(rule: IRuleCombination): void {
-    setCatConf((catConf) => ({ ...catConf, virtualRule: rule }))
-  }
-
   function handleSelectCategory(category: ICategory): void {
     setSelectedCategoryItem(category)
     setCatConf(null)
@@ -200,33 +195,16 @@ function AdminMerchandizeCategories(): JSX.Element {
   return (
     <>
       <TwoColsLayout
-        left={[
+        left={
           <TitleBlock key="categories" title={t(pagesSlug.at(-1))}>
-            <>
-              <CatalogSwitcher />
-              <CategoryTree
-                categories={categories.data}
-                selectedItem={selectedCategoryItem}
-                onSelect={handleSelectCategory}
-              />
-            </>
-          </TitleBlock>,
-          isVirtualCategoryEnabled(bundles) && ruleOperators && (
-            <TitleBlock
-              key="virtualRule"
-              title={catConf?.isVirtual ? t('virtualRule.title') : ''}
-            >
-              <RulesManager
-                active={catConf?.isVirtual}
-                onChange={handleUpdateRule}
-                rule={catConf?.virtualRule}
-                ruleOperators={ruleOperators}
-                error={!isValid}
-                small
-              />
-            </TitleBlock>
-          ),
-        ]}
+            <CatalogSwitcher />
+            <CategoryTree
+              categories={categories.data}
+              selectedItem={selectedCategoryItem}
+              onSelect={handleSelectCategory}
+            />
+          </TitleBlock>
+        }
       >
         {Boolean(selectedCategoryItem?.id && localizedCatalogIdWithDefault) && (
           <Placeholder placeholder={t('placeholder')}>