Experimental filters: adjusts UI and fix types errors (#3996)

.changeset/forty-apricots-notice.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Experimental filters: adjusts UI and fix types errors

locale/defaultMessages.json

@@ -1084,6 +1084,10 @@
     "context": "acre-ft unit",
     "string": "acre-ft"
   },
+  "5ZYUn5": {
+    "context": "Filter and element text",
+    "string": "And"
+  },
   "5ZvuVw": {
     "string": "No products matching given query"
   },
@@ -1128,6 +1132,10 @@
     "context": "product field",
     "string": "Export Variant SKU"
   },
+  "5o84YO": {
+    "context": "Filter where element text",
+    "string": "Where"
+  },
   "5pHBSU": {
     "context": "switch button",
     "string": "Product type uses Variant Attributes"
@@ -1742,6 +1750,10 @@
   "AyQkmp": {
     "string": "Sorting by this column is not available"
   },
+  "AyW1j6": {
+    "context": "Clear filters button text",
+    "string": "Clear all fields"
+  },
   "AzMSmb": {
     "context": "caption",
     "string": "If enabled this attribute can be used as a column in product table."
@@ -1771,6 +1783,10 @@
   "B52Em/": {
     "string": "Address line 1"
   },
+  "B5KI59": {
+    "context": "Empty filters text",
+    "string": "Add filter to start"
+  },
   "B5yE8S": {
     "context": "dialog header",
     "string": "Unassign Categories From Sale"
@@ -3280,6 +3296,14 @@
     "context": "Charged transaction amount, data display header",
     "string": "Charged"
   },
+  "LdNCP/": {
+    "context": "Filter or element text",
+    "string": "Or"
+  },
+  "LeJClL": {
+    "context": "Popover title",
+    "string": "Conditions"
+  },
   "Ljtqmt": {
     "context": "page header, order id unknown",
     "string": "Order"
@@ -4084,6 +4108,10 @@
     "context": "PageTypeDeleteWarningDialog single consent label",
     "string": "Yes, I want to delete this page type and assigned pages"
   },
+  "RZDxej": {
+    "context": "Popover trigger text (button)",
+    "string": "Filters {count, plural, =0 {} other {({count})} }"
+  },
   "RZmdM3": {
     "context": "delete page types",
     "string": "{counter,plural,one{Are you sure you want to delete this page type? After doing so you won’t be able to revert changes.} other{Are you sure you want to delete {displayQuantity} page types? After doing so you won’t be able to revert changes.}}"
@@ -7198,6 +7226,10 @@
     "context": "dialog title",
     "string": "Delete Warehouse"
   },
+  "nyhf9b": {
+    "context": "Add filter button text",
+    "string": "+ Add filter"
+  },
   "o5KXAN": {
     "context": "delete webhook",
     "string": "Are you sure you want to delete {name}?"
@@ -8344,6 +8376,10 @@
   "wTHjt3": {
     "string": "Search Orders..."
   },
+  "wUQCnQ": {
+    "context": "Save filters button text",
+    "string": "Save"
+  },
   "wWTUrM": {
     "string": "No activities found"
   },

package-lock.json

@@ -27,7 +27,7 @@
         "@material-ui/lab": "^4.0.0-alpha.61",
         "@material-ui/styles": "^4.11.4",
         "@reach/auto-id": "^0.16.0",
-        "@saleor/macaw-ui": "0.8.0-pre.109",
+        "@saleor/macaw-ui": "0.8.0-pre.111",
         "@saleor/sdk": "0.6.0",
         "@sentry/react": "^6.0.0",
         "@types/faker": "^5.1.6",
@@ -8795,9 +8795,9 @@
       }
     },
     "node_modules/@saleor/macaw-ui": {
-      "version": "0.8.0-pre.109",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.109.tgz",
-      "integrity": "sha512-lTIe2ha18IBQk+Fy8boo1USi0Z6ISPT2jOqBd2dAP+PkPwM5quAR8hfEICuOUmac8qzjZBCQ/uv2FLbue9rquA==",
+      "version": "0.8.0-pre.111",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.111.tgz",
+      "integrity": "sha512-MvanJYWg7ASHc4Qq+XbXYJ7HgubyRjOuD4j3plTBopyNrAMXNie7h4TOgBjuL3FYTTAM6gUt4CwQPnwWe378eA==",
       "dependencies": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom-interactions": "^0.5.0",
@@ -41264,9 +41264,9 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.8.0-pre.109",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.109.tgz",
-      "integrity": "sha512-lTIe2ha18IBQk+Fy8boo1USi0Z6ISPT2jOqBd2dAP+PkPwM5quAR8hfEICuOUmac8qzjZBCQ/uv2FLbue9rquA==",
+      "version": "0.8.0-pre.111",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.111.tgz",
+      "integrity": "sha512-MvanJYWg7ASHc4Qq+XbXYJ7HgubyRjOuD4j3plTBopyNrAMXNie7h4TOgBjuL3FYTTAM6gUt4CwQPnwWe378eA==",
       "requires": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom-interactions": "^0.5.0",

package.json

@@ -34,7 +34,7 @@
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
-    "@saleor/macaw-ui": "0.8.0-pre.109",
+    "@saleor/macaw-ui": "0.8.0-pre.111",
     "@saleor/sdk": "0.6.0",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",

src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx

@@ -1,14 +1,32 @@
-import { ConditionalFilters } from "@dashboard/components/ConditionalFilter";
-import { Box, Button, CloseIcon, Popover, Text } from "@saleor/macaw-ui/next";
-import React from "react";
+import {
+  conditionalFilterMessages,
+  ConditionalFilters,
+  useConditionalFilterContext,
+} from "@dashboard/components/ConditionalFilter";
+import {
+  Box,
+  Button,
+  CloseIcon,
+  DropdownButton,
+  Popover,
+  Text,
+} from "@saleor/macaw-ui/next";
+import React, { useState } from "react";
+import { useIntl } from "react-intl";
 
 export const ExpressionFilters = () => {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
+  const { formatMessage } = useIntl();
+  const { valueProvider } = useConditionalFilterContext();
 
   return (
     <Popover open={open} onOpenChange={open => setOpen(open)}>
       <Popover.Trigger>
-        <Button>Show filters</Button>
+        <DropdownButton>
+          {formatMessage(conditionalFilterMessages.popoverTrigger, {
+            count: valueProvider.count,
+          })}
+        </DropdownButton>
       </Popover.Trigger>
       <Popover.Content align="start">
         <Box
@@ -17,6 +35,7 @@ export const ExpressionFilters = () => {
           display="grid"
           __gridTemplateRows="auto 1fr"
         >
+          <Popover.Arrow fill="surfaceNeutralPlain" />
           <Box
             paddingTop={3}
             paddingX={3}
@@ -30,7 +49,7 @@ export const ExpressionFilters = () => {
             borderTopRightRadius={2}
           >
             <Text variant="body" size="medium">
-              Conditions
+              {formatMessage(conditionalFilterMessages.popoverTitle)}
             </Text>
             <Box display="flex" alignItems="center" gap={2}>
               <Popover.Close>

src/components/ConditionalFilter/API/queries.ts

@@ -18,7 +18,7 @@ export const initialDynamicLeftOperands = gql`
 export const initialDynamicOperands = gql`
   query _GetChannelOperands {
     channels {
-      id
+      id: slug
       name
       slug
     }

src/components/ConditionalFilter/FilterValueProvider.ts

@@ -5,4 +5,5 @@ export interface FilterValueProvider {
   loading: boolean;
   persist: (newValue: FilterContainer) => void;
   clear: () => void;
+  count: number;
 }

src/components/ConditionalFilter/FiltersArea.tsx

@@ -1,20 +1,31 @@
-import { _ExperimentalFilters, Box, FilterEvent } from "@saleor/macaw-ui/next";
+import {
+  _ExperimentalFilters,
+  Box,
+  FilterEvent,
+  Row,
+} from "@saleor/macaw-ui/next";
 import React, { FC } from "react";
 
 import { useConditionalFilterContext } from "./context";
 import { FilterContainer } from "./FilterElement";
 import { LeftOperand } from "./LeftOperandsProvider";
+import { useFiltersAreaTranslations } from "./messages";
 import { useFilterContainer } from "./useFilterContainer";
 import { ErrorEntry } from "./Validation";
 
 interface FiltersAreaProps {
   onConfirm: (value: FilterContainer) => void;
-  errors?: ErrorEntry[]
+  errors?: ErrorEntry[];
   onCancel?: () => void;
 }
 
-export const FiltersArea: FC<FiltersAreaProps> = ({ onConfirm, onCancel, errors }) => {
+export const FiltersArea: FC<FiltersAreaProps> = ({
+  onConfirm,
+  onCancel,
+  errors,
+}) => {
   const { apiProvider, leftOperandsProvider } = useConditionalFilterContext();
+  const translations = useFiltersAreaTranslations();
 
   const {
     value,
@@ -67,21 +78,27 @@ export const FiltersArea: FC<FiltersAreaProps> = ({ onConfirm, onCancel, errors
   return (
     <_ExperimentalFilters
       leftOptions={leftOperandsProvider.operands}
-      // @ts-expect-error
-      value={value}
+      value={value as Array<string | Row>}
       onChange={handleStateChange}
       error={errors}
+      locale={translations.locale}
     >
       <_ExperimentalFilters.Footer>
-        <_ExperimentalFilters.AddRowButton>
-          + Add row
+        <_ExperimentalFilters.AddRowButton variant="tertiary">
+          {translations.addFilter}
         </_ExperimentalFilters.AddRowButton>
         <Box display="flex" gap={3}>
-          <_ExperimentalFilters.ClearButton onClick={onCancel}>
-            Clear
+          <_ExperimentalFilters.ClearButton
+            onClick={onCancel}
+            variant="tertiary"
+          >
+            {translations.clearFilters}
           </_ExperimentalFilters.ClearButton>
-          <_ExperimentalFilters.ConfirmButton onClick={() => onConfirm(value)} disabled={hasEmptyRows}>
-            Save
+          <_ExperimentalFilters.ConfirmButton
+            onClick={() => onConfirm(value)}
+            disabled={hasEmptyRows}
+          >
+            {translations.saveFilters}
           </_ExperimentalFilters.ConfirmButton>
         </Box>
       </_ExperimentalFilters.Footer>

src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts

@@ -41,7 +41,7 @@ export const useUrlValueProvider = (
   }, []);
 
   useEffect(() => {
-    if (loading) return
+    if (loading) return;
 
     setValue(tokenizedUrl.asFilterValuesFromResponse(data));
   }, [data, loading]);
@@ -61,10 +61,13 @@ export const useUrlValueProvider = (
     setValue([]);
   };
 
+  const count = value.filter(v => typeof v !== "string").length;
+
   return {
     value,
     loading,
     persist,
     clear,
+    count,
   };
 };

src/components/ConditionalFilter/index.ts

@@ -1 +1,3 @@
 export * from "./ConditionalFilters";
+export * from "./context";
+export * from "./messages";

src/components/ConditionalFilter/messages.tsx

@@ -0,0 +1,65 @@
+import { defineMessages, useIntl } from "react-intl";
+
+export const conditionalFilterMessages = defineMessages({
+  popoverTrigger: {
+    defaultMessage: "Filters {count, plural, =0 {} other {({count})} }",
+    id: "RZDxej",
+    description: "Popover trigger text (button)",
+  },
+  popoverTitle: {
+    defaultMessage: "Conditions",
+    id: "LeJClL",
+    description: "Popover title",
+  },
+  addFilter: {
+    defaultMessage: "+ Add filter",
+    id: "nyhf9b",
+    description: "Add filter button text",
+  },
+  clearFilters: {
+    defaultMessage: "Clear all fields",
+    id: "AyW1j6",
+    description: "Clear filters button text",
+  },
+  saveFilters: {
+    defaultMessage: "Save",
+    id: "wUQCnQ",
+    description: "Save filters button text",
+  },
+  emptyFilters: {
+    defaultMessage: "Add filter to start",
+    id: "B5KI59",
+    description: "Empty filters text",
+  },
+  filterWhereElement: {
+    defaultMessage: "Where",
+    id: "5o84YO",
+    description: "Filter where element text",
+  },
+  filterAndElement: {
+    defaultMessage: "And",
+    id: "5ZYUn5",
+    description: "Filter and element text",
+  },
+  filterOrElement: {
+    defaultMessage: "Or",
+    id: "LdNCP/",
+    description: "Filter or element text",
+  },
+});
+
+export const useFiltersAreaTranslations = () => {
+  const { formatMessage } = useIntl();
+
+  return {
+    addFilter: formatMessage(conditionalFilterMessages.addFilter),
+    clearFilters: formatMessage(conditionalFilterMessages.clearFilters),
+    saveFilters: formatMessage(conditionalFilterMessages.saveFilters),
+    locale: {
+      WHERE: formatMessage(conditionalFilterMessages.filterWhereElement),
+      AND: formatMessage(conditionalFilterMessages.filterAndElement),
+      OR: formatMessage(conditionalFilterMessages.filterOrElement),
+      noValueText: formatMessage(conditionalFilterMessages.emptyFilters),
+    },
+  };
+};

src/graphql/fragmentTypes.generated.ts

@@ -8,8 +8,8 @@
       const result: PossibleTypesResultData = {
   "possibleTypes": {
     "DeliveryMethod": [
-      "Warehouse",
-      "ShippingMethod"
+      "ShippingMethod",
+      "Warehouse"
     ],
     "Event": [
       "AccountChangeEmailRequested",
@@ -290,48 +290,48 @@
       "Order"
     ],
     "TranslatableItem": [
-      "ProductTranslatableContent",
-      "CollectionTranslatableContent",
-      "CategoryTranslatableContent",
       "AttributeTranslatableContent",
       "AttributeValueTranslatableContent",
-      "ProductVariantTranslatableContent",
+      "CategoryTranslatableContent",
+      "CollectionTranslatableContent",
+      "MenuItemTranslatableContent",
       "PageTranslatableContent",
-      "ShippingMethodTranslatableContent",
+      "ProductTranslatableContent",
+      "ProductVariantTranslatableContent",
       "SaleTranslatableContent",
-      "VoucherTranslatableContent",
-      "MenuItemTranslatableContent"
+      "ShippingMethodTranslatableContent",
+      "VoucherTranslatableContent"
     ],
     "TranslationTypes": [
-      "ProductTranslation",
-      "CollectionTranslation",
-      "CategoryTranslation",
       "AttributeTranslation",
       "AttributeValueTranslation",
-      "ProductVariantTranslation",
+      "CategoryTranslation",
+      "CollectionTranslation",
+      "MenuItemTranslation",
       "PageTranslation",
-      "ShippingMethodTranslation",
+      "ProductTranslation",
+      "ProductVariantTranslation",
       "SaleTranslation",
-      "VoucherTranslation",
-      "MenuItemTranslation"
+      "ShippingMethodTranslation",
+      "VoucherTranslation"
     ],
     "UserOrApp": [
-      "User",
-      "App"
+      "App",
+      "User"
     ],
     "_Entity": [
-      "App",
       "Address",
-      "User",
-      "Group",
-      "ProductVariant",
-      "Product",
-      "ProductType",
-      "ProductMedia",
+      "App",
       "Category",
       "Collection",
+      "Group",
       "Order",
-      "PageType"
+      "PageType",
+      "Product",
+      "ProductMedia",
+      "ProductType",
+      "ProductVariant",
+      "User"
     ]
   }
 };

src/graphql/hooks.generated.ts

@@ -5504,7 +5504,7 @@ export type _GetDynamicLeftOperandsQueryResult = Apollo.QueryResult<Types._GetDy
 export const _GetChannelOperandsDocument = gql`
     query _GetChannelOperands {
   channels {
-    id
+    id: slug
     name
     slug
   }