IFS Proto Side by Side: Includes filter tied to query

polaris-react/playground/OrdersPage.tsx

@@ -606,7 +606,8 @@ function OrdersIndexTableWithFilters(
 
   const handleContainsRemove = (value: string[]) => {
     setContains('');
-    handleFilterOrders({contains: ''});
+    setQueryValue('');
+    handleFilterOrders({queryValue: '', contains: ''});
   };
 
   const handlePaymentStatusChange = (value: string[]) => {
@@ -645,7 +646,7 @@ function OrdersIndexTableWithFilters(
       change: handleQueryValueChange,
       remove: handleQueryValueRemove,
       emptyValue: '',
-      label: 'Include',
+      label: 'Search',
     },
     contains: {
       set: setContains,
@@ -865,48 +866,42 @@ function OrdersIndexTableWithFilters(
 
   Object.entries({
     contains,
-    queryValue,
     status,
     paymentStatus,
     fulfillmentStatus,
   }).forEach(([key, value]) => {
-    if (isEmpty(value)) return;
+    const shouldShowIncludesWithQueryValue =
+      key === 'contains' && queryValue.length > 0;
+
+    if (isEmpty(value)) {
+      if (key !== 'contains' || !shouldShowIncludesWithQueryValue) {
+        return;
+      }
+    }
+
+    let filterValue = value;
+    if (shouldShowIncludesWithQueryValue) {
+      filterValue = value ? `${value}, ${queryValue}` : queryValue;
+    }
 
     const savedValue = savedViewFilters[selectedView]?.find(
       (filter) => filter.key === key,
     )?.value;
 
     appliedFilters.push({
       key,
-      value,
-      label: getHumanReadableValue(handlers[key].label, value),
-      unsavedChanges: selectedView === 0 ? true : isUnsaved(value, savedValue),
+      value: filterValue,
+      label: getHumanReadableValue(handlers[key].label, filterValue),
+      unsavedChanges:
+        selectedView === 0 ? true : isUnsaved(filterValue, savedValue),
       onRemove: handlers[key].remove,
     });
   });
 
-  // const appliedFiltersWithQuery = [
-  //   ...appliedFilters,
-  //   {
-  //     key: 'queryValue',
-  //     value: queryValue,
-  //     label: handlers.queryValue.label,
-  //     onRemove: handlers.queryValue.remove,
-  //   },
-  // ];
-
-  const appliedFiltersWithoutQuery = appliedFilters.filter(
-    ({key}) => key !== 'queryValue',
-  );
-
-  const savedViewFiltersWithoutQuery = savedViewFilters.filter(
-    ({key}) => key !== 'queryValue',
-  );
-
   const appliedFilterMatchesSavedFilter = (
     appliedFilter: AppliedFilterInterface,
   ) => {
-    const savedFilter = savedViewFiltersWithoutQuery[selectedView]?.find(
+    const savedFilter = savedViewFilters[selectedView]?.find(
       (savedFilter) => savedFilter.key === appliedFilter.key,
     );
 
@@ -929,14 +924,14 @@ function OrdersIndexTableWithFilters(
     sortSelected[0] !== savedSortSelected[selectedView];
 
   const isAllViewAndFiltersAreApplied =
-    selectedView === 0 && appliedFiltersWithoutQuery.length > 0;
+    selectedView === 0 && appliedFilters.length > 0;
 
   const appliedFilterCountDoesNotEqualSavedFilterCount =
-    appliedFiltersWithoutQuery.length !==
-    savedViewFiltersWithoutQuery[selectedView]?.length;
+    appliedFilters.length !== savedViewFilters[selectedView]?.length;
 
-  const appliedFiltersDoNotMatchSavedFilters =
-    !appliedFiltersWithoutQuery.every(appliedFilterMatchesSavedFilter);
+  const appliedFiltersDoNotMatchSavedFilters = !appliedFilters.every(
+    appliedFilterMatchesSavedFilter,
+  );
 
   const hasUnsavedFilterChange =
     isAllViewAndFiltersAreApplied ||
@@ -952,6 +947,7 @@ function OrdersIndexTableWithFilters(
     filtersDoNotMatch: selectedView > 0 && appliedFiltersDoNotMatchSavedFilters,
   });
 
+  console.table(appliedFilters);
   console.table(savedViewFilters[selectedView]);
 
   const hasUnsavedChanges = hasUnsavedSortChange || hasUnsavedFilterChange;
@@ -961,15 +957,24 @@ function OrdersIndexTableWithFilters(
     return new Promise((resolve) => setTimeout(resolve, ms));
   };
 
-  const getFiltersToSave = () => {
-    return Object.entries({
-      contains,
-      queryValue,
-      status,
-      paymentStatus,
-      fulfillmentStatus,
-    })
-      .filter(([, value]) => value !== undefined)
+  const getFiltersToSave = (saveQueryValueToIncludes?: boolean) => {
+    const filtersToSave = saveQueryValueToIncludes
+      ? {
+          contains: contains ? `${contains}, ${queryValue}` : queryValue,
+          status,
+          paymentStatus,
+          fulfillmentStatus,
+        }
+      : {
+          queryValue,
+          contains,
+          status,
+          paymentStatus,
+          fulfillmentStatus,
+        };
+
+    return Object.entries(filtersToSave)
+      .filter(([, value]) => !isEmpty(value))
       .map(([key, value]) => {
         return {key, value, label: handlers[key].label};
       });
@@ -1049,16 +1054,16 @@ function OrdersIndexTableWithFilters(
   };
 
   const handleSaveViewFilters = async (
-    index: number,
+    view: number,
     nextFilters?: SavedViewFilter[],
     nextSortSelected?: string,
   ) => {
     const nextSavedFilters = [...savedViewFilters];
     const nextSavedSortSelected = [...savedSortSelected];
-    nextSavedSortSelected[index] = nextSortSelected
+    nextSavedSortSelected[view] = nextSortSelected
       ? nextSortSelected
       : sortSelected[0];
-    nextSavedFilters[index] = nextFilters
+    nextSavedFilters[view] = nextFilters
       ? nextFilters
       : appliedFilters.map(({key, value, label}) => ({
           key,
@@ -1113,21 +1118,28 @@ function OrdersIndexTableWithFilters(
   const handleSaveViewAs = async (index: number, name: string) => {
     setViewNames((names) => [...names, name]);
     setSelectedView(index);
-    const nextFilters = getFiltersToSave();
+    const nextFilters = getFiltersToSave(true);
     const nextSortSelected = sortSelected[0];
     await handleSaveViewFilters(0, []);
     return handleSaveViewFilters(index, nextFilters, nextSortSelected);
   };
 
   const handleSave = async (name: string) => {
     let saved = false;
+    const nextFilters = getFiltersToSave(true);
     const index = !name ? selectedView : viewNames.indexOf(name);
     setLoading(true);
 
     if (index <= 0) {
       saved = await handleSaveViewAs(viewNames.length, name);
     } else {
-      saved = await handleSaveViewFilters(index);
+      saved = await handleSaveViewFilters(index, nextFilters);
+    }
+
+    const nextContains = nextFilters.find(({key}) => key === 'contains')?.value;
+    if (nextContains) {
+      setQueryValue('');
+      setContains(nextContains);
     }
 
     setLoading(false);