Merge branch 'main' into 4182-voucher-codes-datagrid

.changeset/eight-cobras-burn.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Change gql codegen config to typescript and reflect env vars

.changeset/nervous-beds-vanish.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Due to UI changes - staff members and variants tests fixes

.changeset/proud-flowers-remember.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Update e2e scenarios for new filters

codegen.ts

@@ -0,0 +1,18 @@
+import { CodegenConfig } from '@graphql-codegen/cli'
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const config: CodegenConfig = {
+  schema: process.env.API_URI,
+  generates: {
+    './introspection.json': {
+      plugins: ['introspection']
+    },
+    './schema.graphql': {
+      plugins: ['schema-ast']
+    }
+  }
+}
+
+export default config

cypress/e2e/products/productsList/filteringProducts.js

@@ -14,15 +14,15 @@ import {
 } from "../../../support/api/utils/products/productsUtils";
 import { createShipping } from "../../../support/api/utils/shippingUtils";
 import {
+  filterProductsWithNewFilters,
   selectChannel,
-  selectFilterOption,
   selectProductsOutOfStock,
 } from "../../../support/pages/catalog/products/productsListPage";
 
 /*
   Todo: https://github.com/saleor/saleor-dashboard/issues/4300
 */
-describe.skip("As an admin I should be able to filter products", () => {
+describe("As an admin I should be able to filter products", () => {
   const startsWith = "ACyFilterProducts-";
   const name = `${startsWith}${faker.datatype.number()}`;
   const stockQuantity = 747;
@@ -93,23 +93,23 @@ describe.skip("As an admin I should be able to filter products", () => {
   });
 
   const filterProductsBy = [
-    { type: "category", testCase: "SALEOR_2601" },
-    { type: "productType", testCase: "SALEOR_2602" },
-    { type: "collection", testCase: "SALEOR_2603" },
+    { type: "Category", testCase: "SALEOR_2601" },
+    { type: "Product type", testCase: "SALEOR_2602" },
+    { type: "Collection", testCase: "SALEOR_2603" },
   ];
   filterProductsBy.forEach(filterBy => {
     it(
       `should filter products by ${filterBy.type}. TC: ${filterBy.testCase}`,
       { tags: ["@productsList", "@allEnv", "@stable"] },
       () => {
         cy.addAliasToGraphRequest("ProductList");
-        selectFilterOption(filterBy.type, name);
+        filterProductsWithNewFilters(filterBy.type, name);
         cy.get(SHARED_ELEMENTS.dataGridTable).contains(name).should("exist");
       },
     );
   });
 
-  it(
+  it.skip(
     "should filter products out of stock. TC: SALEOR_2604",
     { tags: ["@productsList", "@allEnv", "@stable"] },
     () => {

cypress/e2e/staffMembers.js

@@ -207,9 +207,11 @@ describe("Staff members", () => {
         .get(SHARED_ELEMENTS.searchInput)
         .type(`${email} {enter}`)
         .waitForRequestAndCheckIfNoErrors("@StaffList");
-      cy.get(STAFF_MEMBERS_LIST_SELECTORS.usersEmails)
-        .should("contain.text", email.toLowerCase())
-        .click();
+      cy.get(SHARED_ELEMENTS.dataGridTable)
+        .contains(email.toLowerCase())
+        .should("exist");
+      // selects first row
+      cy.clickGridCell(0, 0);
       cy.get(STAFF_MEMBER_DETAILS_SELECTORS.staffEmail)
         .click()
         .clear()

cypress/elements/catalog/products/products-list.js

@@ -1,4 +1,12 @@
 export const PRODUCTS_LIST = {
+  newFilters: {
+    saveFiltersButton: "[data-test-id='save-filters-button']",
+    rightInput: "[data-test-id='right-0']",
+    dropDownOptions: "[data-test-id='select-option']",
+    leftInput: "[data-test-id='left-0']",
+    showFiltersButton: "[data-test-id='filters-button']",
+    addFilterButton: "[data-test-id='add-filter-button']",
+  },
   productsList: "[data-test-id^='id-']",
   dataGridTable: "[data-testid='data-grid-canvas']",
   productsNames: "[data-test-id='name']",

cypress/support/pages/catalog/products/VariantsPage.js

@@ -164,17 +164,18 @@ export function selectOptionsAttribute(attributeName) {
 }
 
 export function selectBooleanAttributeToTrue() {
-  cy.get(VARIANTS_SELECTORS.attributeSelector).click();
+  cy.get(VARIANTS_SELECTORS.attributeSelector).first().click();
 }
 
 export function selectDateAttribute() {
   cy.get(VARIANTS_SELECTORS.attributeSelector)
+    .first()
     .find("input")
     .type(formatDate(new Date()));
 }
 
 export function selectNumericAttribute(numeric) {
-  cy.get(VARIANTS_SELECTORS.attributeSelector).type(numeric);
+  cy.get(VARIANTS_SELECTORS.attributeSelector).first().type(numeric);
 }
 
 export function selectAttributeWithType({ attributeType, attributeName }) {

cypress/support/pages/catalog/products/productsListPage.js

@@ -54,6 +54,19 @@ export function selectFilterOption(filter, optionName) {
     .click();
   submitFilters();
 }
+export function filterProductsWithNewFilters(filter, optionName) {
+  cy.get(PRODUCTS_LIST.newFilters.showFiltersButton).click();
+  cy.get(PRODUCTS_LIST.newFilters.addFilterButton).click();
+  cy.get(PRODUCTS_LIST.newFilters.leftInput).click();
+  cy.get(PRODUCTS_LIST.newFilters.dropDownOptions).contains(filter).click();
+  cy.get(PRODUCTS_LIST.newFilters.rightInput)
+    .click()
+    .invoke("attr", "aria-expanded")
+    .should("eq", "true");
+  cy.get(PRODUCTS_LIST.newFilters.rightInput).type(optionName);
+  cy.get(PRODUCTS_LIST.newFilters.dropDownOptions).contains(optionName).click();
+  cy.get(PRODUCTS_LIST.newFilters.saveFiltersButton).click();
+}
 
 export function selectAttributeFilter(attributeSlug, attributeValue) {
   selectFilterByAttribute(attributeSlug);

package.json

@@ -322,7 +322,7 @@
     "check-types": "npm run check-types:src && npm run check-types:playwright",
     "extract-json-messages": "formatjs extract 'src/**/*.{ts,tsx}' --out-file locale/defaultMessages.json --format scripts/formatter.js",
     "extract-messages": "npm run extract-json-messages",
-    "fetch-schema": "graphql-codegen --config ./fetch-schema.yml",
+    "fetch-schema": "graphql-codegen --config ./codegen.ts",
     "heroku-postbuild": "npm run build",
     "serve:lhci": "cross-env NODE_ENV=production npm run server",
     "prestart": "npm run build-types",

src/components/AppLayout/ListFilters/ListFilters.tsx

@@ -45,7 +45,7 @@ export const ListFilters = <TFilterKeys extends string = string>({
       >
         <Box display="flex" alignItems="center" gap={4}>
           {filtersEnabled ? (
-            <ExpressionFilters />
+            <ExpressionFilters data-test-id="filters-button" />
           ) : (
             <FiltersSelect<TFilterKeys>
               errorMessages={errorMessages}

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

@@ -26,7 +26,7 @@ export const ExpressionFilters = () => {
   return (
     <Popover open={open} onOpenChange={open => setOpen(open)}>
       <Popover.Trigger>
-        <DropdownButton>
+        <DropdownButton data-test-id="filters-button">
           {formatMessage(conditionalFilterMessages.popoverTrigger, {
             count: valueProvider.count,
           })}

src/components/ConditionalFilter/FiltersArea.tsx

@@ -87,16 +87,22 @@ export const FiltersArea: FC<FiltersAreaProps> = ({
         <Filters.AddRowButton
           variant="tertiary"
           disabled={value.length > MAX_VALUE_ITEMS}
+          data-test-id="add-filter-button"
         >
           {translations.addFilter}
         </Filters.AddRowButton>
         <Box display="flex" gap={3}>
-          <Filters.ClearButton onClick={onCancel} variant="tertiary">
+          <Filters.ClearButton
+            onClick={onCancel}
+            variant="tertiary"
+            data-test-id="reset-all-filters-button"
+          >
             {translations.clearFilters}
           </Filters.ClearButton>
           <Filters.ConfirmButton
             onClick={() => onConfirm(value)}
             disabled={hasEmptyRows}
+            data-test-id="save-filters-button"
           >
             {translations.saveFilters}
           </Filters.ConfirmButton>