diff --git a/.changeset/cuddly-glasses-move.md b/.changeset/cuddly-glasses-move.md new file mode 100644 index 000000000..8975e7657 --- /dev/null +++ b/.changeset/cuddly-glasses-move.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": patch +--- + +Experimental filters: warning banner for legacy filter presets diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index f53fec7c8..16e370e31 100644 --- a/locale/defaultMessages.json +++ b/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" diff --git a/src/components/AppLayout/ListFilters/ListFilters.tsx b/src/components/AppLayout/ListFilters/ListFilters.tsx index b475f4a7f..69a2e6546 100644 --- a/src/components/AppLayout/ListFilters/ListFilters.tsx +++ b/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 @@ -34,6 +35,7 @@ export const ListFilters = ({ return ( <> + {filtersEnabled && } { + 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 ( + + + {formatMessage(messages.alertText, { + presetNames: ( + + {legacyPresets.map(p => p.name).join(", ")} + + ), + })} + + + ); + } + 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", + }, +}); diff --git a/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts b/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts index 9aa556133..d8f3523d1 100644 --- a/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts +++ b/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts @@ -32,8 +32,10 @@ export const useUrlValueProvider = ( const { data, loading, fetchQueries } = initialState; const [value, setValue] = useState([]); + 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; diff --git a/src/products/index.tsx b/src/products/index.tsx index 9939d3036..51de51cc8 100644 --- a/src/products/index.tsx +++ b/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> = ({ 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> = ({ location }) => { ); return ( - + );