Experimental filters: warning banner for legacy filter presets (#4033)

.changeset/cuddly-glasses-move.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Experimental filters: warning banner for legacy filter presets

locale/defaultMessages.json

@@ -5949,6 +5949,10 @@
     "context": "product inventory, checkbox",
     "string": "Variant currently in preorder"
   },
+  "eIGXwJ": {
+    "context": "Alert text",
+    "string": "You are using an old version of filter presets. The following presets: {presetNames} must be updated to continue using filters"
+  },
   "eLJQSh": {
     "context": "column title gift card",
     "string": "Gift Card"

src/components/AppLayout/ListFilters/ListFilters.tsx

@@ -6,6 +6,7 @@ import React, { ReactNode } from "react";
 
 import { ExpressionFilters } from "./components/ExpressionFilters";
 import { FiltersSelect } from "./components/FiltersSelect";
+import { LegacyFiltersPresetsAlert } from "./components/LegacyFiltersPresetsAlert";
 import SearchInput from "./components/SearchInput";
 
 export interface ListFiltersProps<TKeys extends string = string>
@@ -34,6 +35,7 @@ export const ListFilters = <TFilterKeys extends string = string>({
 
   return (
     <>
+      {filtersEnabled && <LegacyFiltersPresetsAlert />}
       <Box
         display="grid"
         __gridTemplateColumns="auto 1fr"

src/components/AppLayout/ListFilters/components/LegacyFiltersPresetsAlert.tsx

@@ -0,0 +1,46 @@
+import { TokenType } from "@dashboard/components/ConditionalFilter/ValueProvider/UrlToken";
+import { getStatusColor } from "@dashboard/misc";
+import { storageUtils } from "@dashboard/products/views/ProductList/filters";
+import { Box, Text } from "@saleor/macaw-ui/next";
+import React from "react";
+import { defineMessages, useIntl } from "react-intl";
+
+export const LegacyFiltersPresetsAlert = () => {
+  const presets = storageUtils.getFilterTabs();
+  const { formatMessage } = useIntl();
+
+  const legacyPresets = presets.filter(
+    preset => !preset.data.match(`[${Object.values(TokenType)}][0-9].`),
+  );
+
+  if (legacyPresets.length > 0) {
+    return (
+      <Box
+        __backgroundColor={getStatusColor("warning")}
+        paddingX={7}
+        paddingY={5}
+        marginBottom={5}
+      >
+        <Text>
+          {formatMessage(messages.alertText, {
+            presetNames: (
+              <Text variant="bodyStrong">
+                {legacyPresets.map(p => p.name).join(", ")}
+              </Text>
+            ),
+          })}
+        </Text>
+      </Box>
+    );
+  }
+  return null;
+};
+
+const messages = defineMessages({
+  alertText: {
+    defaultMessage:
+      "You are using an old version of filter presets. The following presets: {presetNames} must be updated to continue using filters",
+    description: "Alert text",
+    id: "eIGXwJ",
+  },
+});

src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts

@@ -32,8 +32,10 @@ export const useUrlValueProvider = (
   const { data, loading, fetchQueries } = initialState;
   const [value, setValue] = useState<FilterContainer>([]);
 
+  const activeTab = params.get("activeTab");
   params.delete("asc");
   params.delete("sort");
+  params.delete("activeTab");
 
   const tokenizedUrl = new TokenArray(params.toString());
   const fetchingParams = tokenizedUrl.getFetchingParams();
@@ -51,7 +53,10 @@ export const useUrlValueProvider = (
   const persist = (filterValue: FilterContainer) => {
     router.history.replace({
       pathname: router.location.pathname,
-      search: stringify(prepareStructure(filterValue)),
+      search: stringify({
+        ...prepareStructure(filterValue),
+        ...{ activeTab: activeTab || undefined },
+      }),
     });
     setValue(filterValue);
   };
@@ -64,8 +69,8 @@ export const useUrlValueProvider = (
   };
 
   const isPersisted = (element: FilterElement) => {
-    return value.some(p => FilterElement.isCompatible(p) && p.equals(element))
+    return value.some(p => FilterElement.isCompatible(p) && p.equals(element));
-  }
+  };
 
   const count = value.filter(v => typeof v !== "string").length;
 

src/products/index.tsx

@@ -1,4 +1,5 @@
 import { ConditionalProductFilterProvider } from "@dashboard/components/ConditionalFilter/context";
+import { useFlag } from "@dashboard/featureFlags";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
 import { getArrayQueryParam } from "@dashboard/utils/urls";
@@ -32,6 +33,8 @@ import ProductVariantCreateComponent from "./views/ProductVariantCreate";
 
 const ProductList: React.FC<RouteComponentProps<any>> = ({ location }) => {
   const qs = parseQs(location.search.substr(1)) as any;
+  const productListingPageFiltersFlag = useFlag("product_filters");
+
   const params: ProductListUrlQueryParams = asSortParams(
     {
       ...qs,
@@ -45,7 +48,11 @@ const ProductList: React.FC<RouteComponentProps<any>> = ({ location }) => {
   );
 
   return (
-    <ConditionalProductFilterProvider locationSearch={location.search}>
+    <ConditionalProductFilterProvider
+      locationSearch={
+        productListingPageFiltersFlag.enabled ? location.search : ""
+      }
+    >
       <ProductListComponent params={params} />
     </ConditionalProductFilterProvider>
   );