unsaved changes not being recognized on filter removal

Shopify · Aug 27, 2024 · 4f66531 · 4f66531
1 parent 13206bb
commit 4f66531
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 7 deletions.
diff --git a/polaris-react/playground/OrdersPage.tsx b/polaris-react/playground/OrdersPage.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState, useMemo} from 'react';
 import {
   ChartVerticalIcon,
   AppsIcon,
@@ -683,7 +683,7 @@ function OrdersIndexTableWithFilters(
       remove: handleStatusRemove,
       label: 'Status',
       emptyValue: [],
-      locked: selectedView === 3 || selectedView === 4,
+      locked: selectedView > 0 && selectedView < 5,
     },
     paymentStatus: {
       set: setPaymentStatus,
@@ -863,9 +863,31 @@ function OrdersIndexTableWithFilters(
     });
   });
 
-  const hasUnsavedChanges = appliedFilters.some(
-    (filter) => filter.unsavedChanges,
-  );
+  const appliedFilterMatchesSavedFilter = (
+    appliedFilter: AppliedFilterInterface,
+  ) => {
+    const savedFilter = savedViewFilters[selectedView].find(
+      (savedFilter) => savedFilter.key === appliedFilter.key,
+    );
+
+    if (!savedFilter) {
+      return false;
+    } else if (typeof appliedFilter.value === 'string') {
+      return appliedFilter.value === savedFilter.value;
+    } else {
+      const hasSameArrayValue =
+        new Set(savedFilter.value).difference(new Set(appliedFilter.value))
+          .size === 0;
+
+      return hasSameArrayValue;
+    }
+  };
+
+  const hasUnsavedChanges =
+    (!savedViewFilters[selectedView] && appliedFilters.length > 0) ||
+    (appliedFilters.length === 0 &&
+      savedViewFilters[selectedView].length > 0) ||
+    !appliedFilters.every(appliedFilterMatchesSavedFilter);
 
   // ---- View event handlers
   const sleep = (ms: number) => {

diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.tsx
@@ -358,7 +358,7 @@ export function IndexFilters({
         onQueryChange(searchFilterValue ? searchFilterValue + value : value);
         setSearchOnlyValue(value);
       } else {
-        onQueryChange(searchOnlyValue ? value + searchOnlyValue : value);
+        onQueryChange(searchOnlyValue ? `${value},${searchOnlyValue}` : value);
         setSearchFilterValue(value);
       }
     },
@@ -377,7 +377,13 @@ export function IndexFilters({
       setSearchFilterValue(augmentedQuery);
       setSearchOnlyValue('');
     }
-  }, [mode, searchFilterValue, searchOnlyValue, handleShowFilters]);
+  }, [
+    mode,
+    searchFilterValue,
+    searchOnlyValue,
+    onQueryChange,
+    handleShowFilters,
+  ]);
 
   const handleQueryClear = useCallback(
     (input: 'searchOnly' | 'searchFilter') => () => {
@@ -455,6 +461,7 @@ export function IndexFilters({
     let searchFilter;
 
     const supportsSavedFilters =
+      !hideQueryField &&
       !hideFilters &&
       primaryAction &&
       (primaryAction.type === 'save' || primaryAction.type === 'save-as');
@@ -481,6 +488,7 @@ export function IndexFilters({
   }, [
     queryValue,
     hideFilters,
+    hideQueryField,
     primaryAction,
     appliedFilters,
     searchFilterValue,