Experimental filters: add empty state and adjust popover ui (#3950)

.changeset/spotty-papayas-pretend.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Experimental filters: add empty state and adjust popover ui

package-lock.json

@@ -27,7 +27,7 @@
         "@material-ui/lab": "^4.0.0-alpha.61",
         "@material-ui/styles": "^4.11.4",
         "@reach/auto-id": "^0.16.0",
-        "@saleor/macaw-ui": "0.8.0-pre.105",
+        "@saleor/macaw-ui": "0.8.0-pre.106",
         "@saleor/sdk": "0.6.0",
         "@sentry/react": "^6.0.0",
         "@types/faker": "^5.1.6",
@@ -7947,9 +7947,9 @@
       }
     },
     "node_modules/@saleor/macaw-ui": {
-      "version": "0.8.0-pre.105",
+      "version": "0.8.0-pre.106",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.105.tgz",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.106.tgz",
-      "integrity": "sha512-UfI8NWknBCEJfFakQM71W5DghQZZT+WNU4C0t/A6xHxQQj8qOxoilOeFy+e7rqtovx3x0tkcWIlVy2TTbuJDKg==",
+      "integrity": "sha512-0wg1XXsmpaVfT6KMKgbGcNajXxITgAzXZIFp5x1bs1UTiJgmxYSnhs+h2ikz+m6nozEUGeiyOncl5wyw9aOYWw==",
       "dependencies": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom-interactions": "^0.5.0",
@@ -41209,9 +41209,9 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.8.0-pre.105",
+      "version": "0.8.0-pre.106",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.105.tgz",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.106.tgz",
-      "integrity": "sha512-UfI8NWknBCEJfFakQM71W5DghQZZT+WNU4C0t/A6xHxQQj8qOxoilOeFy+e7rqtovx3x0tkcWIlVy2TTbuJDKg==",
+      "integrity": "sha512-0wg1XXsmpaVfT6KMKgbGcNajXxITgAzXZIFp5x1bs1UTiJgmxYSnhs+h2ikz+m6nozEUGeiyOncl5wyw9aOYWw==",
       "requires": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom-interactions": "^0.5.0",

package.json

@@ -34,7 +34,7 @@
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
-    "@saleor/macaw-ui": "0.8.0-pre.105",
+    "@saleor/macaw-ui": "0.8.0-pre.106",
     "@saleor/sdk": "0.6.0",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",

src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx

@@ -8,21 +8,28 @@ export const ExpressionFilters = () => (
       <Button>Show filters</Button>
     </Popover.Trigger>
     <Popover.Content align="start">
-      <Box>
+      <Box
+        __minHeight="250px"
+        __minWidth="636px"
+        display="grid"
+        __gridTemplateRows="auto 1fr"
+      >
         <Box
-          paddingX={5}
+          paddingTop={3}
-          paddingY={4}
+          paddingX={3}
+          paddingBottom={1.5}
           display="flex"
           gap={1}
           alignItems="center"
           justifyContent="space-between"
           backgroundColor="surfaceNeutralPlain"
+          borderTopLeftRadius={2}
+          borderTopRightRadius={2}
         >
           <Text variant="body" size="medium">
-            Filter conditions
+            Conditions
           </Text>
           <Box display="flex" alignItems="center" gap={2}>
-            <Button variant="tertiary">Clear filters</Button>
             <Popover.Close>
               <Button variant="tertiary" icon={<CloseIcon />} />
             </Popover.Close>

src/components/ConditionalFilter/ConditionalFilters.tsx

@@ -1,9 +1,10 @@
-import { _ExperimentalFilters, Box, Divider } from "@saleor/macaw-ui/next";
+import { Box } from "@saleor/macaw-ui/next";
 import React, { FC } from "react";
 
 import { useConditionalFilterContext } from "./context";
 import { FilterContainer } from "./FilterElement";
 import { FiltersArea } from "./FiltersArea";
+import { LoadingFiltersArea } from "./LoadingFiltersArea";
 
 export const ConditionalFilters: FC = () => {
   const { valueProvider } = useConditionalFilterContext();
@@ -12,30 +13,16 @@ export const ConditionalFilters: FC = () => {
     valueProvider.persist(value);
   };
 
-  return (
+  return valueProvider.loading ? (
-    <Box>
+    <LoadingFiltersArea />
-      {valueProvider.loading ? (
+  ) : (
-        <Box
+    <Box
-          __minWidth="700px"
+      padding={3}
-          __minHeight="100px"
+      backgroundColor="interactiveNeutralSecondaryHovering"
-          paddingX={5}
+      borderBottomLeftRadius={2}
-          paddingY={4}
+      borderBottomRightRadius={2}
-          display="flex"
+    >
-          gap={3}
+      <FiltersArea onConfirm={handleConfirm} />
-          flexDirection="column"
-        >
-          <_ExperimentalFilters.Skeleton height={7} />
-          <_ExperimentalFilters.Skeleton height={7} />
-          <_ExperimentalFilters.Skeleton height={7} />
-          <Divider />
-          <Box display="flex" gap={4} justifyContent="space-between">
-            <_ExperimentalFilters.Skeleton height={7} __width="20%" />
-            <_ExperimentalFilters.Skeleton height={7} __width="20%" />
-          </Box>
-        </Box>
-      ) : (
-        <FiltersArea onConfirm={handleConfirm} />
-      )}
     </Box>
   );
 };

src/components/ConditionalFilter/FiltersArea.tsx

@@ -60,28 +60,25 @@ export const FiltersArea = ({ onConfirm }: FiltersAreaProps) => {
   };
 
   return (
-    <Box
+    <_ExperimentalFilters
-      paddingX={5}
+      leftOptions={leftOperandsProvider.operands}
-      paddingY={3}
+      // @ts-expect-error
-      backgroundColor="interactiveNeutralSecondaryHovering"
+      value={value}
-      borderBottomLeftRadius={2}
+      onChange={handleStateChange}
-      borderBottomRightRadius={2}
     >
-      <_ExperimentalFilters
+      <_ExperimentalFilters.Footer>
-        leftOptions={leftOperandsProvider.operands}
+        <_ExperimentalFilters.AddRowButton>
-        // @ts-expect-error
+          + Add row
-        value={value}
+        </_ExperimentalFilters.AddRowButton>
-        onChange={handleStateChange}
+        <Box display="flex" gap={3}>
-      >
+          <_ExperimentalFilters.ClearButton>
-        <_ExperimentalFilters.Footer>
+            Clear
-          <_ExperimentalFilters.AddRowButton>
+          </_ExperimentalFilters.ClearButton>
-            + Add row
-          </_ExperimentalFilters.AddRowButton>
           <_ExperimentalFilters.ConfirmButton onClick={() => onConfirm(value)}>
             Save
           </_ExperimentalFilters.ConfirmButton>
-        </_ExperimentalFilters.Footer>
+        </Box>
-      </_ExperimentalFilters>
+      </_ExperimentalFilters.Footer>
-    </Box>
+    </_ExperimentalFilters>
   );
 };

src/components/ConditionalFilter/LoadingFiltersArea.tsx

@@ -0,0 +1,27 @@
+import { _ExperimentalFilters, Box, Divider } from "@saleor/macaw-ui/next";
+import React from "react";
+
+export const LoadingFiltersArea = () => (
+  <Box
+    padding={3}
+    backgroundColor="interactiveNeutralSecondaryHovering"
+    borderBottomLeftRadius={2}
+    borderBottomRightRadius={2}
+    display="flex"
+    flexDirection="column"
+  >
+    <Box display="flex" flexDirection="column" gap={3} height="100%">
+      <_ExperimentalFilters.Skeleton height={7} />
+      <_ExperimentalFilters.Skeleton height={7} />
+      <_ExperimentalFilters.Skeleton height={7} />
+    </Box>
+    <Divider />
+    <Box display="flex" gap={4} justifyContent="space-between">
+      <_ExperimentalFilters.Skeleton height={7} __width="60px" />
+      <Box display="flex" gap={3}>
+        <_ExperimentalFilters.Skeleton height={7} __width="60px" />
+        <_ExperimentalFilters.Skeleton height={7} __width="60px" />
+      </Box>
+    </Box>
+  </Box>
+);