don't include queryValue in appliedFilters

Shopify · Sep 6, 2024 · 6d28dcd · 6d28dcd
1 parent 8b96133
commit 6d28dcd
Showing 1 changed file with 25 additions and 6 deletions.
diff --git a/polaris-react/playground/OrdersPage.tsx b/polaris-react/playground/OrdersPage.tsx
@@ -881,7 +881,6 @@ function OrdersIndexTableWithFilters(
   const appliedFilters: AppliedFilterInterface[] = [];
 
   Object.entries({
-    queryValue,
     contains,
     status,
     paymentStatus,
@@ -902,6 +901,25 @@ function OrdersIndexTableWithFilters(
     });
   });
 
+  const appliedFiltersWithQueryValue = [
+    ...appliedFilters,
+    {
+      key: 'queryValue',
+      value: queryValue,
+      label: getHumanReadableValue(handlers.queryValue.label, queryValue),
+      unsavedChanges:
+        selectedView === 0
+          ? true
+          : isUnsaved(
+              queryValue,
+              savedViewFilters[selectedView].find(
+                (filter) => filter.key === 'queryValue',
+              )?.value,
+            ),
+      onRemove: handlers.queryValue.remove,
+    },
+  ];
+
   const appliedFilterMatchesSavedFilter = (
     appliedFilter: AppliedFilterInterface,
   ) => {
@@ -923,10 +941,11 @@ function OrdersIndexTableWithFilters(
   };
 
   const hasUnsavedChanges =
-    (!savedViewFilters[selectedView] && appliedFilters.length > 0) ||
-    (appliedFilters.length === 0 &&
+    (!savedViewFilters[selectedView] &&
+      appliedFiltersWithQueryValue.length > 0) ||
+    (appliedFiltersWithQueryValue.length === 0 &&
       savedViewFilters[selectedView]?.length > 0) ||
-    !appliedFilters.every(appliedFilterMatchesSavedFilter);
+    !appliedFiltersWithQueryValue.every(appliedFilterMatchesSavedFilter);
 
   // ---- View event handlers
   const sleep = (ms: number) => {
@@ -990,7 +1009,7 @@ function OrdersIndexTableWithFilters(
       const nextSavedFilters = [...savedViewFilters];
       nextSavedFilters[index] = nextFilters
         ? nextFilters
-        : appliedFilters.map(({key, value, label}) => ({
+        : appliedFiltersWithQueryValue.map(({key, value, label}) => ({
             key,
             value,
             label,
@@ -1000,7 +1019,7 @@ function OrdersIndexTableWithFilters(
       await sleep(300);
       return true;
     },
-    [appliedFilters, savedViewFilters],
+    [appliedFiltersWithQueryValue, savedViewFilters],
   );
 
   const handleCreateNewView = async (name: string) => {