Drop dynamic column toggles in column picker

.changeset/empty-scissors-grow.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Drop dynamic column toggles in column picker

cypress/e2e/products/productsList/columnPicker.js

@@ -0,0 +1,137 @@
+/// <reference types="cypress"/>
+/// <reference types="../../../support"/>
+
+import { PRODUCT_DETAILS, SHARED_ELEMENTS } from "../../../elements";
+import { PRODUCTS_LIST } from "../../../elements/catalog/products/products-list";
+import { LOCAL_STORAGE_FOR_COLUMN_PICKER } from "../../../fixtures";
+import { urlList } from "../../../fixtures/urlList";
+import { ensureCanvasStatic } from "../../../support/customCommands/sharedElementsOperations/canvas";
+import { columnPickerPage } from "../../../support/pages";
+
+describe("As an admin I should be able to use column picker", () => {
+  beforeEach(() => {
+    cy.clearSessionData().loginUserViaRequest();
+  });
+
+  it(
+    "should be able to add new dynamic column to grid on product list via search. TC: SALEOR_2610",
+    { tags: ["@critical", "@allEnv", "@stable"] },
+    () => {
+      const dynamicColumnToBeSearched = "ABV";
+      cy.addAliasToGraphRequest("AvailableColumnAttributes");
+      cy.visit(urlList.products);
+
+      ensureCanvasStatic(PRODUCTS_LIST.dataGridTable);
+      columnPickerPage.openColumnPicker();
+      columnPickerPage.openDynamicColumnsSearch();
+      columnPickerPage.typeNameInSearchColumnInput(dynamicColumnToBeSearched);
+      cy.waitForRequestAndCheckIfNoErrors("@AvailableColumnAttributes");
+      cy.get(SHARED_ELEMENTS.dynamicColumnSelector)
+        .should("have.length", 1)
+        .should("contain.text", dynamicColumnToBeSearched)
+        .find("button")
+        .click();
+      cy.get(SHARED_ELEMENTS.dynamicColumnSelector)
+        .invoke("text")
+        .then(selectedColumnName => {
+          cy.get(SHARED_ELEMENTS.dynamicColumnContainer)
+            // do not check by visible text just data-test-id since often text has ellipsis
+            .find(`[data-test-id="column-name-${selectedColumnName}"]`)
+            .should("be.visible");
+          // newly added dynamic column is alway placed as last one on grid
+          cy.get(SHARED_ELEMENTS.dataGridTable)
+            .find("th")
+            .last()
+            .should("have.text", selectedColumnName);
+        });
+    },
+  );
+  it(
+    "should be able to remove dynamic column from picker on products list. TC: SALEOR_2611",
+    { tags: ["@productsList", "@allEnv", "@stable"] },
+    () => {
+      const listConfigLocalStorage = JSON.stringify(
+        LOCAL_STORAGE_FOR_COLUMN_PICKER.listConfigWithAttributeColumnPicker,
+      );
+      // local storage is updated to avoid not necessary action of adding dynamic column in the beginning of test
+      cy.window().then(win => {
+        win.localStorage.setItem("listConfig", listConfigLocalStorage);
+      });
+      cy.visit(urlList.products);
+      ensureCanvasStatic(PRODUCTS_LIST.dataGridTable);
+      columnPickerPage.openColumnPicker();
+      cy.get(SHARED_ELEMENTS.dynamicColumnContainer)
+        .find(SHARED_ELEMENTS.selectedDynamicColumnNameSelector)
+        .should("have.length", 1)
+        .invoke("text")
+        .then(columnName => {
+          cy.get(SHARED_ELEMENTS.dynamicColumnContainer)
+            .find(SHARED_ELEMENTS.removeSelectedDynamicColumnButton)
+            .should("be.visible")
+            .should("have.length", 1)
+            .click();
+          cy.get(SHARED_ELEMENTS.dynamicColumnContainer)
+            .find(SHARED_ELEMENTS.removeSelectedDynamicColumnButton)
+            .should("not.exist");
+          cy.get(SHARED_ELEMENTS.dynamicColumnContainer)
+            .find(columnName)
+            .should("not.exist");
+        });
+    },
+  );
+  it(
+    "should validate: that there is always at least one active static column, use pagination when searching dynamic columns, hiding column picker works. TC: SALEOR_2612",
+    { tags: ["@productsList", "@allEnv", "@stable"] },
+    () => {
+      cy.addAliasToGraphRequest("ProductDetails");
+      // local storage accepts only strings
+      const listConfigLocalStorage = JSON.stringify(
+        LOCAL_STORAGE_FOR_COLUMN_PICKER.localStorageWithSingleStaticColumn,
+      );
+      // local storage is updated to make sure only one static column is active
+      cy.window().then(win => {
+        win.localStorage.setItem("listConfig", listConfigLocalStorage);
+      });
+      cy.visit(urlList.products);
+      ensureCanvasStatic(PRODUCTS_LIST.dataGridTable);
+      columnPickerPage.openColumnPicker();
+      cy.get(SHARED_ELEMENTS.activeStaticColumnOnGridButton).should(
+        "have.length",
+        1,
+        "There should be only one active static column",
+      );
+      columnPickerPage.openDynamicColumnsSearch();
+
+      cy.get(SHARED_ELEMENTS.paginationBackOnColumnPicker).should(
+        "have.attr",
+        "disabled",
+      );
+      cy.get(SHARED_ELEMENTS.paginationForwardOnColumnPicker).click();
+      cy.get(SHARED_ELEMENTS.paginationBackOnColumnPicker).should(
+        "not.have.attr",
+        "disabled",
+      );
+      columnPickerPage
+        .selectDynamicColumnAtIndex(1)
+        .invoke("text")
+        .then(selectedColumnName => {
+          cy.get(SHARED_ELEMENTS.dynamicColumnContainer)
+            // do not check by visible text just data-test-id since often text has ellipsis
+            .find(`[data-test-id*="${selectedColumnName}"]`)
+            .should("be.visible");
+          // newly added dynamic column is alway placed as last one on grid
+          cy.get(SHARED_ELEMENTS.dataGridTable)
+            .find("th")
+            .last()
+            .should("have.text", selectedColumnName);
+          //next line hides picker
+          cy.get(SHARED_ELEMENTS.pageHeader).click({ force: true });
+          cy.get(SHARED_ELEMENTS.dynamicColumnContainer).should("not.exist");
+          // now it checks does picking record from grid works when picker is gone
+          cy.clickGridCell(1, 1);
+          cy.waitForRequestAndCheckIfNoErrors("@ProductDetails");
+          cy.get(PRODUCT_DETAILS.productUpdateFormSection).should("be.visible");
+        });
+    },
+  );
+});

cypress/elements/catalog/products/product-details.js

@@ -28,4 +28,5 @@ export const PRODUCT_DETAILS = {
   editVariant: '[data-test-id="row-action-button"]',
   firstRowDataGrid: "[data-testid='glide-cell-1-0']",
   dataGridTable: "[data-testid='data-grid-canvas']",
+  productUpdateFormSection: "[data-test-id='product-update-form']",
 };

cypress/elements/shared/sharedElements.js

@@ -9,7 +9,19 @@ export const SHARED_ELEMENTS = {
   table: 'table[class*="Table"]',
   firstRowDataGrid: "[data-testid='glide-cell-1-0']",
   secondRowDataGrid: "[id='glide-cell-1-1']",
+  openColumnPickerButton: "[data-test-id='open-column-picker-button']",
+  openDynamicColumnsSearchButton: "[data-test-id='open-dynamic-search']",
   tableRow: '[data-test-id*="id"], [class*="MuiTableRow"]',
+  activeStaticColumnOnGridButton: '[data-state="on"]',
+  dynamicColumnSelector: '[data-test-id="dynamic-column"]',
+  dynamicColumnNameSelector: '[data-test-id^="dynamic-column-name"]',
+  dynamicColumnSearchInput: '[data-test-id="search-columns"]',
+  selectedDynamicColumnNameSelector: '[data-test-id^="column-name-"]',
+  removeSelectedDynamicColumnButton:
+    '[data-test-id^="remove-dynamic-col-button"]',
+  dynamicColumnContainer: '[data-test-id="dynamic-col-container"]',
+  paginationForwardOnColumnPicker: '[data-test-id="pagination-forward"]',
+  paginationBackOnColumnPicker: '[data-test-id="pagination-back"]',
   notificationSuccess:
     '[data-test-id="notification"][data-test-type="success"]',
   notificationFailure: '[data-test-id="notification"][data-test-type="error"]',

cypress/fixtures/index.js

@@ -3,3 +3,4 @@ export { orderDraftCreateDemoResponse } from "./errors/demo/orderDratCreate";
 export { urlList } from "./urlList";
 export { ONE_PERMISSION_USERS, TEST_ADMIN_USER } from "./users";
 export { MESSAGES } from "./messages";
+export * as LOCAL_STORAGE_FOR_COLUMN_PICKER from "./localStorage/columnPickerMocks";

cypress/fixtures/localStorage/columnPickerMocks.js

@@ -0,0 +1,139 @@
+export const listConfigWithAttributeColumnPicker = {
+  APPS_LIST: {
+    rowNumber: 100,
+  },
+  ATTRIBUTE_VALUE_LIST: {
+    rowNumber: 10,
+  },
+  CATEGORY_LIST: {
+    rowNumber: 20,
+  },
+  COLLECTION_LIST: {
+    rowNumber: 20,
+  },
+  CUSTOMER_LIST: {
+    rowNumber: 20,
+  },
+  DRAFT_LIST: {
+    rowNumber: 20,
+    columns: ["number", "date", "customer", "total"],
+  },
+  NAVIGATION_LIST: {
+    rowNumber: 20,
+  },
+  ORDER_LIST: {
+    rowNumber: 20,
+    columns: ["number", "date", "customer", "payment", "status", "total"],
+  },
+  PAGES_LIST: {
+    rowNumber: 20,
+  },
+  PLUGIN_LIST: {
+    rowNumber: 20,
+  },
+  PRODUCT_LIST: {
+    columns: [
+      "name",
+      "availability",
+      "description",
+      "price",
+      "productType",
+      "date",
+      "attribute:QXR0cmlidXRlOjIx",
+    ],
+    rowNumber: 20,
+  },
+  SALES_LIST: {
+    rowNumber: 20,
+  },
+  SHIPPING_METHODS_LIST: {
+    rowNumber: 20,
+  },
+  STAFF_MEMBERS_LIST: {
+    rowNumber: 20,
+  },
+  PERMISSION_GROUP_LIST: {
+    rowNumber: 20,
+  },
+  VOUCHER_LIST: {
+    rowNumber: 20,
+  },
+  WAREHOUSE_LIST: {
+    rowNumber: 20,
+  },
+  WEBHOOK_LIST: {
+    rowNumber: 20,
+  },
+  TRANSLATION_ATTRIBUTE_VALUE_LIST: {
+    rowNumber: 10,
+  },
+  " GIFT_CARD_LIST": {
+    rowNumber: 20,
+  },
+};
+
+export const localStorageWithSingleStaticColumn = {
+  APPS_LIST: {
+    rowNumber: 100,
+  },
+  ATTRIBUTE_VALUE_LIST: {
+    rowNumber: 10,
+  },
+  CATEGORY_LIST: {
+    rowNumber: 20,
+  },
+  COLLECTION_LIST: {
+    rowNumber: 20,
+  },
+  CUSTOMER_LIST: {
+    rowNumber: 20,
+  },
+  DRAFT_LIST: {
+    rowNumber: 20,
+    columns: ["number", "date", "customer", "total"],
+  },
+  NAVIGATION_LIST: {
+    rowNumber: 20,
+  },
+  ORDER_LIST: {
+    rowNumber: 20,
+    columns: ["number", "date", "customer", "payment", "status", "total"],
+  },
+  PAGES_LIST: {
+    rowNumber: 20,
+  },
+  PLUGIN_LIST: {
+    rowNumber: 20,
+  },
+  PRODUCT_LIST: {
+    columns: ["name"],
+    rowNumber: 20,
+  },
+  SALES_LIST: {
+    rowNumber: 20,
+  },
+  SHIPPING_METHODS_LIST: {
+    rowNumber: 20,
+  },
+  STAFF_MEMBERS_LIST: {
+    rowNumber: 20,
+  },
+  PERMISSION_GROUP_LIST: {
+    rowNumber: 20,
+  },
+  VOUCHER_LIST: {
+    rowNumber: 20,
+  },
+  WAREHOUSE_LIST: {
+    rowNumber: 20,
+  },
+  WEBHOOK_LIST: {
+    rowNumber: 20,
+  },
+  TRANSLATION_ATTRIBUTE_VALUE_LIST: {
+    rowNumber: 10,
+  },
+  " GIFT_CARD_LIST": {
+    rowNumber: 20,
+  },
+};

cypress/support/pages/columnPicker.js

@@ -0,0 +1,22 @@
+import { SHARED_ELEMENTS } from "../../elements/shared/sharedElements";
+
+export function openColumnPicker() {
+  cy.get(SHARED_ELEMENTS.openColumnPickerButton).click();
+}
+export function openDynamicColumnsSearch() {
+  cy.get(SHARED_ELEMENTS.openDynamicColumnsSearchButton).click();
+}
+export function selectDynamicColumnAtIndex(columnIndex) {
+  return cy
+    .get(SHARED_ELEMENTS.dynamicColumnNameSelector)
+    .eq(columnIndex)
+    .click();
+}
+export function typeNameInSearchColumnInput(columnName) {
+  return cy
+    .get(SHARED_ELEMENTS.dynamicColumnSearchInput)
+    .should("be.visible")
+    .click()
+    .type(columnName)
+    .blur();
+}

cypress/support/pages/index.js

@@ -38,4 +38,5 @@ export * as priceListComponent from "./catalog/products/priceListComponent";
 export * as variantsPage from "./catalog/products/VariantsPage";
 export * as channelsPage from "./channelsPage";
 export * as pagesPage from "./pagesPage";
+export * as columnPickerPage from "./columnPicker";
 export * as pageDetailsPage from "./pageDetailsPage";

src/categories/components/CategoryListDatagrid/CategoryListDatagrid.tsx

@@ -110,7 +110,7 @@ export const CategoryListDatagrid = ({
         onRowSelectionChange={onSelectCategoriesIds}
         renderColumnPicker={() => (
           <ColumnPicker
-            onSave={handlers.onChange}
+            onToggle={handlers.onToggle}
             selectedColumns={selectedColumns}
             staticColumns={staticColumns}
           />

src/collections/components/CollectionListDatagrid/CollectionListDatagrid.tsx

@@ -27,7 +27,6 @@ interface CollectionListDatagridProps
     SortPage<CollectionListUrlSortField> {
   collections: Collections;
   loading: boolean;
-  columnPickerSettings: string[];
   selectedChannelId: string;
   hasRowHover?: boolean;
   onSelectCollectionIds: (
@@ -48,7 +47,6 @@ export const CollectionListDatagrid = ({
   onRowClick,
   rowAnchor,
   disabled,
-  columnPickerSettings,
   onSelectCollectionIds,
   onSort,
   filterDependency,
@@ -76,9 +74,7 @@ export const CollectionListDatagrid = ({
     handlers,
     visibleColumns,
     staticColumns,
-    dynamicColumns,
     selectedColumns,
-    columnCategories,
     recentlyAddedColumn,
   } = useColumns({
     staticColumns: collectionListStaticColumns,
@@ -181,12 +177,8 @@ export const CollectionListDatagrid = ({
         renderColumnPicker={() => (
           <ColumnPicker
             staticColumns={staticColumns}
-            dynamicColumns={dynamicColumns}
             selectedColumns={selectedColumns}
-            columnCategories={columnCategories}
-            onDynamicColumnSelect={handlers.onDynamicColumnSelect}
-            columnPickerSettings={columnPickerSettings}
-            onSave={handlers.onChange}
+            onToggle={handlers.onToggle}
           />
         )}
       />