Introduce filters to discount list page

.changeset/khaki-cats-smash.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Introduce filters to discount list page

src/components/ConditionalFilter/UI/constrains.ts

@@ -1,7 +1,8 @@
 import { Row } from "./types";
 
 export const getItemConstraint = (constraint: Row["constraint"]) => ({
-  disableRemoveButton: !constraint?.removable,
+  // eslint-disable-next-line @typescript-eslint/key-spacing, @typescript-eslint/no-unnecessary-boolean-literal-compare
+  disableRemoveButton: constraint?.removable === false,
   disableLeftOperator: constraint?.disabled?.includes("left") ?? false,
   disableCondition: constraint?.disabled?.includes("condition") ?? false,
   disableRightOperator: constraint?.disabled?.includes("right") ?? false,

src/components/ConditionalFilter/queryVariables.ts

@@ -1,8 +1,10 @@
 import {
   AttributeInput,
+  DateTimeFilterInput,
   DecimalFilterInput,
   GlobalIdFilterInput,
   ProductWhereInput,
+  PromotionWhereInput,
 } from "@dashboard/graphql";
 
 import { FilterContainer } from "./FilterElement";
@@ -165,3 +167,17 @@ export const createProductQueryVariables = (
     return p;
   }, {} as ProductWhereInput);
 };
+
+export const creatDiscountsQueryVariables = (
+  value: FilterContainer,
+): PromotionWhereInput => {
+  return value.reduce((p, c) => {
+    if (typeof c === "string" || Array.isArray(c)) return p;
+
+    p[c.value.value as "endDate" | "startDate"] = createStaticQueryPart(
+      c.condition.selected,
+    ) as DateTimeFilterInput;
+
+    return p;
+  }, {} as PromotionWhereInput);
+};

src/discounts/components/DiscountListPage/DiscountListPage.tsx

@@ -1,3 +1,5 @@
+import { ExpressionFilters } from "@dashboard/components/AppLayout/ListFilters/components/ExpressionFilters";
+import { LegacyFiltersPresetsAlert } from "@dashboard/components/AppLayout/ListFilters/components/LegacyFiltersPresetsAlert";
 import SearchInput from "@dashboard/components/AppLayout/ListFilters/components/SearchInput";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { DashboardCard } from "@dashboard/components/Card";
@@ -102,17 +104,29 @@ const DiscountListPage: React.FC<DiscountListPageProps> = ({
       </TopNav>
 
       <DashboardCard>
-        <Box __width="320px" marginLeft={4} marginBottom={2}>
-          {/* TODO: remove when new fileters will be implemented */}
-          <SearchInput
-            initialSearch={initialSearch}
-            placeholder={intl.formatMessage({
-              id: "+bhokL",
-              defaultMessage: "Search discounts...",
-            })}
-            onSearchChange={onSearchChange}
-          />
+        <LegacyFiltersPresetsAlert />
+        <Box
+          display="grid"
+          __gridTemplateColumns="auto 1fr"
+          gap={4}
+          paddingBottom={2}
+          paddingX={6}
+        >
+          <Box display="flex" alignItems="center" gap={4}>
+            <ExpressionFilters data-test-id="filters-button" />
+            <Box __width="320px">
+              <SearchInput
+                initialSearch={initialSearch}
+                placeholder={intl.formatMessage({
+                  id: "+bhokL",
+                  defaultMessage: "Search discounts...",
+                })}
+                onSearchChange={onSearchChange}
+              />
+            </Box>
+          </Box>
         </Box>
+
         <DiscountListDatagrid {...listProps} onRowClick={handleRowClick} />
       </DashboardCard>
     </ListPageLayout>

src/discounts/filters/provider.tsx

@@ -0,0 +1,29 @@
+import { ConditionalFilterContext } from "@dashboard/components/ConditionalFilter/context/context";
+import { useContainerState } from "@dashboard/components/ConditionalFilter/useContainerState";
+import React, { FC } from "react";
+
+import { useDiscountFilterAPIProvider } from "./useDiscountFilterAPIProvider";
+import { useFilterLeftOperandsProvider } from "./useFilterLeftOperandsProvider";
+import { useUrlValueProvider } from "./useUrlValueProvider";
+
+export const ConditionalDiscountFilterProvider: FC<{
+  locationSearch: string;
+}> = ({ children, locationSearch }) => {
+  const apiProvider = useDiscountFilterAPIProvider();
+  const valueProvider = useUrlValueProvider(locationSearch);
+  const leftOperandsProvider = useFilterLeftOperandsProvider();
+  const containerState = useContainerState(valueProvider);
+
+  return (
+    <ConditionalFilterContext.Provider
+      value={{
+        apiProvider,
+        valueProvider,
+        leftOperandsProvider,
+        containerState,
+      }}
+    >
+      {children}
+    </ConditionalFilterContext.Provider>
+  );
+};

src/discounts/filters/useDiscountFilterAPIProvider.ts

@@ -0,0 +1,16 @@
+import { FilterAPIProvider } from "@dashboard/components/ConditionalFilter/API/FilterAPIProvider";
+
+export const useDiscountFilterAPIProvider = (): FilterAPIProvider => {
+  const fetchRightOptions = async () => {
+    return [];
+  };
+
+  const fetchLeftOptions = async () => {
+    return [];
+  };
+
+  return {
+    fetchRightOptions,
+    fetchLeftOptions,
+  };
+};

src/discounts/filters/useFilterLeftOperandsProvider.ts

@@ -0,0 +1,29 @@
+import { LeftOperand } from "@dashboard/components/ConditionalFilter/LeftOperandsProvider";
+import { AttributeInputTypeEnum } from "@dashboard/graphql";
+import unionBy from "lodash/unionBy";
+import { useState } from "react";
+
+export const STATIC_OPTIONS: LeftOperand[] = [
+  {
+    value: "startDate",
+    label: "Start date",
+    type: AttributeInputTypeEnum.DATE_TIME,
+    slug: "startDate",
+  },
+  {
+    value: "endDate",
+    label: "End date",
+    type: AttributeInputTypeEnum.DATE_TIME,
+    slug: "endDate",
+  },
+];
+
+export const useFilterLeftOperandsProvider = () => {
+  const [operands, setOperands] = useState<LeftOperand[]>(STATIC_OPTIONS);
+
+  return {
+    operands,
+    setOperands: (options: LeftOperand[]) =>
+      setOperands(prev => unionBy([...prev, ...options], "value")),
+  };
+};

src/discounts/filters/useUrlValueProvider.ts

@@ -0,0 +1,110 @@
+import { InitialStateResponse } from "@dashboard/components/ConditionalFilter/API/InitialStateResponse";
+import {
+  FilterContainer,
+  FilterElement,
+} from "@dashboard/components/ConditionalFilter/FilterElement";
+import { FilterValueProvider } from "@dashboard/components/ConditionalFilter/FilterValueProvider";
+import { TokenArray } from "@dashboard/components/ConditionalFilter/ValueProvider/TokenArray";
+import { UrlEntry } from "@dashboard/components/ConditionalFilter/ValueProvider/UrlToken";
+import { stringify } from "qs";
+import { useEffect, useState } from "react";
+import useRouter from "use-react-router";
+
+type Structure = Array<string | UrlEntry | Structure>;
+
+const prepareStructure = (filterValue: FilterContainer): Structure =>
+  filterValue.map(f => {
+    if (typeof f === "string") {
+      return f;
+    }
+
+    if (Array.isArray(f)) {
+      return prepareStructure(f);
+    }
+
+    return f.asUrlEntry();
+  });
+
+export const useUrlValueProvider = (
+  locationSearch: string,
+): FilterValueProvider => {
+  const router = useRouter();
+  const params = new URLSearchParams(locationSearch);
+  const [value, setValue] = useState<FilterContainer>([]);
+
+  const activeTab = params.get("activeTab");
+  const query = params.get("query");
+  const before = params.get("before");
+  const after = params.get("after");
+  params.delete("asc");
+  params.delete("sort");
+  params.delete("activeTab");
+  params.delete("query");
+  params.delete("before");
+  params.delete("after");
+
+  const tokenizedUrl = new TokenArray(params.toString());
+
+  useEffect(() => {
+    const emptyInitialState = InitialStateResponse.empty();
+    emptyInitialState.attribute = {
+      startDate: {
+        choices: [],
+        inputType: "DATE_TIME",
+        label: "Start date",
+        slug: "start-date",
+        value: "start-date",
+      },
+      endDate: {
+        choices: [],
+        inputType: "DATE_TIME",
+        label: "End date",
+        slug: "end-date",
+        value: "end-date",
+      },
+    };
+
+    setValue(tokenizedUrl.asFilterValuesFromResponse(emptyInitialState));
+  }, [locationSearch]);
+
+  const persist = (filterValue: FilterContainer) => {
+    router.history.replace({
+      pathname: router.location.pathname,
+      search: stringify({
+        ...prepareStructure(filterValue),
+        ...{ activeTab: activeTab || undefined },
+        ...{ query: query || undefined },
+        ...{ before: before || undefined },
+        ...{ after: after || undefined },
+      }),
+    });
+    setValue(filterValue);
+  };
+
+  const clear = () => {
+    router.history.replace({
+      pathname: router.location.pathname,
+    });
+    setValue([]);
+  };
+
+  const isPersisted = (element: FilterElement) => {
+    return value.some(p => FilterElement.isCompatible(p) && p.equals(element));
+  };
+
+  const getTokenByName = (name: string) => {
+    return tokenizedUrl.asFlatArray().find(token => token.name === name);
+  };
+
+  const count = value.filter(v => typeof v !== "string").length;
+
+  return {
+    value,
+    loading: false,
+    persist,
+    clear,
+    isPersisted,
+    getTokenByName,
+    count,
+  };
+};

src/discounts/index.tsx

@@ -11,6 +11,7 @@ import {
   DiscountListUrlQueryParams,
   DiscountListUrlSortField,
 } from "./discountsUrls";
+import { ConditionalDiscountFilterProvider } from "./filters/provider";
 import {
   saleAddPath,
   saleListPath,
@@ -45,7 +46,11 @@ const SaleListView: React.FC<RouteComponentProps<{}>> = ({ location }) => {
       qs,
       DiscountListUrlSortField,
     );
-    return <DiscountList params={params} />;
+    return (
+      <ConditionalDiscountFilterProvider locationSearch={location.search}>
+        <DiscountList params={params} />;
+      </ConditionalDiscountFilterProvider>
+    );
   }
 
   return <SaleListViewComponent params={params} />;

src/discounts/views/DiscountList/DiscountList.tsx

@@ -1,3 +1,5 @@
+import { useConditionalFilterContext } from "@dashboard/components/ConditionalFilter";
+import { creatDiscountsQueryVariables } from "@dashboard/components/ConditionalFilter/queryVariables";
 import DeleteFilterTabDialog from "@dashboard/components/DeleteFilterTabDialog";
 import SaveFilterTabDialog from "@dashboard/components/SaveFilterTabDialog";
 import { WindowTitle } from "@dashboard/components/WindowTitle";
@@ -44,11 +46,15 @@ export const DiscountList: React.FC<DiscountListProps> = ({ params }) => {
   usePaginationReset(discountListUrl, params, settings.rowNumber);
   const paginationState = createPaginationState(settings.rowNumber, params);
 
+  const { valueProvider } = useConditionalFilterContext();
+  const where = creatDiscountsQueryVariables(valueProvider.value);
+
   const queryVariables = React.useMemo(
     () => ({
       ...paginationState,
       sort: getSortQueryVariables(params),
       where: {
+        ...where,
         ...(params?.query && {
           name: { eq: params.query },
         }),
@@ -68,7 +74,6 @@ export const DiscountList: React.FC<DiscountListProps> = ({ params }) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, resetFilters, handleSearchChange] = createFilterHandlers({
     createUrl: discountListUrl,
-    // TODO: implement getFilterQueryParam when new filter will be implemented
     getFilterQueryParam: () => 0,
     navigate,
     params,