From dd50f95b55248a695577022c70df6ba5e95845a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Wed, 19 Jul 2023 11:29:03 +0200
Subject: [PATCH] Experimental filters: add empty state and adjust popover ui
 (#3950)

---
 .changeset/spotty-papayas-pretend.md          |  5 +++
 package-lock.json                             | 14 +++----
 package.json                                  |  2 +-
 .../components/ExpressionFilters.tsx          | 17 ++++++---
 .../ConditionalFilter/ConditionalFilters.tsx  | 37 ++++++-------------
 .../ConditionalFilter/FiltersArea.tsx         | 35 ++++++++----------
 .../ConditionalFilter/LoadingFiltersArea.tsx  | 27 ++++++++++++++
 7 files changed, 80 insertions(+), 57 deletions(-)
 create mode 100644 .changeset/spotty-papayas-pretend.md
 create mode 100644 src/components/ConditionalFilter/LoadingFiltersArea.tsx

diff --git a/.changeset/spotty-papayas-pretend.md b/.changeset/spotty-papayas-pretend.md
new file mode 100644
index 000000000..29938678a
--- /dev/null
+++ b/.changeset/spotty-papayas-pretend.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Experimental filters: add empty state and adjust popover ui
diff --git a/package-lock.json b/package-lock.json
index 3833e3c66..9337be3ca 100644
--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.105.tgz",
-      "integrity": "sha512-UfI8NWknBCEJfFakQM71W5DghQZZT+WNU4C0t/A6xHxQQj8qOxoilOeFy+e7rqtovx3x0tkcWIlVy2TTbuJDKg==",
+      "version": "0.8.0-pre.106",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.106.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.105.tgz",
-      "integrity": "sha512-UfI8NWknBCEJfFakQM71W5DghQZZT+WNU4C0t/A6xHxQQj8qOxoilOeFy+e7rqtovx3x0tkcWIlVy2TTbuJDKg==",
+      "version": "0.8.0-pre.106",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.106.tgz",
+      "integrity": "sha512-0wg1XXsmpaVfT6KMKgbGcNajXxITgAzXZIFp5x1bs1UTiJgmxYSnhs+h2ikz+m6nozEUGeiyOncl5wyw9aOYWw==",
       "requires": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom-interactions": "^0.5.0",
diff --git a/package.json b/package.json
index 5db371856..79d7003bc 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx b/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx
index 71833812b..a83d18619 100644
--- a/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx
+++ b/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}
-          paddingY={4}
+          paddingTop={3}
+          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>
diff --git a/src/components/ConditionalFilter/ConditionalFilters.tsx b/src/components/ConditionalFilter/ConditionalFilters.tsx
index 38efb0fbf..3014c753c 100644
--- a/src/components/ConditionalFilter/ConditionalFilters.tsx
+++ b/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 (
-    <Box>
-      {valueProvider.loading ? (
-        <Box
-          __minWidth="700px"
-          __minHeight="100px"
-          paddingX={5}
-          paddingY={4}
-          display="flex"
-          gap={3}
-          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} />
-      )}
+  return valueProvider.loading ? (
+    <LoadingFiltersArea />
+  ) : (
+    <Box
+      padding={3}
+      backgroundColor="interactiveNeutralSecondaryHovering"
+      borderBottomLeftRadius={2}
+      borderBottomRightRadius={2}
+    >
+      <FiltersArea onConfirm={handleConfirm} />
     </Box>
   );
 };
diff --git a/src/components/ConditionalFilter/FiltersArea.tsx b/src/components/ConditionalFilter/FiltersArea.tsx
index 516aa6889..31d9e0709 100644
--- a/src/components/ConditionalFilter/FiltersArea.tsx
+++ b/src/components/ConditionalFilter/FiltersArea.tsx
@@ -60,28 +60,25 @@ export const FiltersArea = ({ onConfirm }: FiltersAreaProps) => {
   };
 
   return (
-    <Box
-      paddingX={5}
-      paddingY={3}
-      backgroundColor="interactiveNeutralSecondaryHovering"
-      borderBottomLeftRadius={2}
-      borderBottomRightRadius={2}
+    <_ExperimentalFilters
+      leftOptions={leftOperandsProvider.operands}
+      // @ts-expect-error
+      value={value}
+      onChange={handleStateChange}
     >
-      <_ExperimentalFilters
-        leftOptions={leftOperandsProvider.operands}
-        // @ts-expect-error
-        value={value}
-        onChange={handleStateChange}
-      >
-        <_ExperimentalFilters.Footer>
-          <_ExperimentalFilters.AddRowButton>
-            + Add row
-          </_ExperimentalFilters.AddRowButton>
+      <_ExperimentalFilters.Footer>
+        <_ExperimentalFilters.AddRowButton>
+          + Add row
+        </_ExperimentalFilters.AddRowButton>
+        <Box display="flex" gap={3}>
+          <_ExperimentalFilters.ClearButton>
+            Clear
+          </_ExperimentalFilters.ClearButton>
           <_ExperimentalFilters.ConfirmButton onClick={() => onConfirm(value)}>
             Save
           </_ExperimentalFilters.ConfirmButton>
-        </_ExperimentalFilters.Footer>
-      </_ExperimentalFilters>
-    </Box>
+        </Box>
+      </_ExperimentalFilters.Footer>
+    </_ExperimentalFilters>
   );
 };
diff --git a/src/components/ConditionalFilter/LoadingFiltersArea.tsx b/src/components/ConditionalFilter/LoadingFiltersArea.tsx
new file mode 100644
index 000000000..8122564b1
--- /dev/null
+++ b/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>
+);