From eb5ccbb187febf751547cdd713eb803446ebd7df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <chyla1988@gmail.com>
Date: Mon, 30 Sep 2024 13:35:05 +0200
Subject: [PATCH] Clear empty container state on close button click in filters
 (#5184)

* Clear empty container state on close button click

* Add changeset

* Fix select channel and click on price column
---
 .changeset/itchy-moose-listen.md              |  5 +++++
 .../components/ExpressionFilters.tsx          |  6 ++---
 .../ConditionalFilter/useContainerState.ts    | 22 ++++++++++++++++++-
 src/components/Datagrid/types.ts              |  2 +-
 .../ProductListDatagrid.tsx                   |  4 ++--
 .../ProductListDatagrid/datagrid.ts           |  2 +-
 .../ProductListDatagrid/usePriceClick.ts      |  8 ++++---
 7 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/itchy-moose-listen.md

diff --git a/.changeset/itchy-moose-listen.md b/.changeset/itchy-moose-listen.md
new file mode 100644
index 00000000000..06d38c45e94
--- /dev/null
+++ b/.changeset/itchy-moose-listen.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Clicking a select channel on a product list and then click close button clear filter state, so when you click again select button, only one channel filter will be selected
diff --git a/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx b/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx
index fe956223c19..59bcca6f8c0 100644
--- a/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx
+++ b/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx
@@ -10,7 +10,7 @@ import { useIntl } from "react-intl";
 export const ExpressionFilters = () => {
   const { formatMessage } = useIntl();
   const { valueProvider, containerState, filterWindow } = useConditionalFilterContext();
-  const clickOutside = () => {
+  const clearEmpty = () => {
     containerState.clearEmpty();
   };
 
@@ -23,7 +23,7 @@ export const ExpressionFilters = () => {
           })}
         </DropdownButton>
       </Popover.Trigger>
-      <Popover.Content align="start" onInteractOutside={clickOutside}>
+      <Popover.Content align="start" onInteractOutside={clearEmpty}>
         <Box __minHeight="250px" __minWidth="636px" display="grid" __gridTemplateRows="auto 1fr">
           <Popover.Arrow fill="default1" />
           <Box
@@ -41,7 +41,7 @@ export const ExpressionFilters = () => {
             <Text>{formatMessage(conditionalFilterMessages.popoverTitle)}</Text>
             <Box display="flex" alignItems="center" gap={2}>
               <Popover.Close>
-                <Button variant="tertiary" icon={<CloseIcon />} />
+                <Button variant="tertiary" icon={<CloseIcon />} onClick={clearEmpty} />
               </Popover.Close>
             </Box>
           </Box>
diff --git a/src/components/ConditionalFilter/useContainerState.ts b/src/components/ConditionalFilter/useContainerState.ts
index 3b6e7fa9cd7..76d8072b68f 100644
--- a/src/components/ConditionalFilter/useContainerState.ts
+++ b/src/components/ConditionalFilter/useContainerState.ts
@@ -103,7 +103,8 @@ export const useContainerState = (valueProvider: FilterValueProvider) => {
 
     setValue(v => removeElement(v, index));
   };
-  const create = (element: FilterElement) => {
+
+  const createNewValue = (value: FilterContainer, element: FilterElement) => {
     const newValue: FilterContainer = [];
 
     if (value.length > 0) {
@@ -111,8 +112,26 @@ export const useContainerState = (valueProvider: FilterValueProvider) => {
     }
 
     newValue.push(element);
+
+    return newValue;
+  };
+
+  const create = (element: FilterElement) => {
+    const newValue = createNewValue(value, element);
+
     setValue(v => v.concat(newValue));
   };
+
+  // This function was created to cover a case when on click outside filter handler
+  // fire state update, but applied of those state change happened after create function call,
+  // so we have not removed empty values in container
+  const createAndRemoveEmpty = (element: FilterElement) => {
+    const filteredValue = removeEmptyElements(value, valueProvider);
+    const newValue = createNewValue(filteredValue, element);
+
+    setValue(() => filteredValue.concat(newValue));
+  };
+
   const exist = (slug: string) => {
     return value.some(entry => FilterElement.isCompatible(entry) && entry.value.value === slug);
   };
@@ -128,6 +147,7 @@ export const useContainerState = (valueProvider: FilterValueProvider) => {
 
   return {
     create,
+    createAndRemoveEmpty,
     exist,
     updateBySlug,
     createEmpty,
diff --git a/src/components/Datagrid/types.ts b/src/components/Datagrid/types.ts
index f7bd78682e4..28c2d882a20 100644
--- a/src/components/Datagrid/types.ts
+++ b/src/components/Datagrid/types.ts
@@ -10,5 +10,5 @@ export interface AvailableColumn {
   hasMenu?: boolean;
   icon?: string;
   themeOverride?: Partial<Theme>;
-  action?: (id: string) => void;
+  action?: (id: string) => boolean;
 }
diff --git a/src/products/components/ProductListDatagrid/ProductListDatagrid.tsx b/src/products/components/ProductListDatagrid/ProductListDatagrid.tsx
index 3ca9cdda4cc..c261ca45d6a 100644
--- a/src/products/components/ProductListDatagrid/ProductListDatagrid.tsx
+++ b/src/products/components/ProductListDatagrid/ProductListDatagrid.tsx
@@ -184,9 +184,9 @@ export const ProductListDatagrid: React.FC<ProductListDatagridProps> = ({
       const action = getCellAction(visibleColumns, col);
 
       if (action) {
-        action(products[row].id);
+        const result = action(products[row].id);
 
-        return;
+        if (result) return;
       }
 
       const rowData = products[row];
diff --git a/src/products/components/ProductListDatagrid/datagrid.ts b/src/products/components/ProductListDatagrid/datagrid.ts
index c7983f50cc3..9888a21a808 100644
--- a/src/products/components/ProductListDatagrid/datagrid.ts
+++ b/src/products/components/ProductListDatagrid/datagrid.ts
@@ -51,7 +51,7 @@ export const productListStaticColumnAdapter = ({
 }: {
   intl: IntlShape;
   sort: Sort<ProductListUrlSortField>;
-  onPriceClick: ((productId: string) => void) | undefined;
+  onPriceClick: ((productId: string) => boolean) | undefined;
 }) =>
   [
     {
diff --git a/src/products/components/ProductListDatagrid/usePriceClick.ts b/src/products/components/ProductListDatagrid/usePriceClick.ts
index 6dd22591390..606af12f6fb 100644
--- a/src/products/components/ProductListDatagrid/usePriceClick.ts
+++ b/src/products/components/ProductListDatagrid/usePriceClick.ts
@@ -4,13 +4,15 @@ import { createChannelFilterElement } from "@dashboard/products/components/Produ
 export const usePriceClick = ({ isChannelSelected }: { isChannelSelected: boolean }) => {
   const { filterWindow, containerState } = useConditionalFilterContext();
 
-  return (productId: string) => {
-    if (!productId || isChannelSelected) return;
+  return (productId: string): boolean => {
+    if (!productId || isChannelSelected) return false;
 
-    containerState.create(createChannelFilterElement());
+    containerState.createAndRemoveEmpty(createChannelFilterElement());
 
     window.scrollTo({ top: 0, behavior: "smooth" });
 
     filterWindow.setOpen(true);
+
+    return true;
   };
 };