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

@@ -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

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>

src/components/ConditionalFilter/useContainerState.ts

@@ -103,16 +103,35 @@ 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) {
       newValue.push("AND");
     }
 
     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,

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;
 }

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];

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;
 }) =>
   [
     {

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;
   };
 };