Category listing datagrid

.changeset/strange-carrots-juggle.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Introduce datagrid on category listing page

cypress/e2e/catalog/categories.js

@@ -3,10 +3,7 @@
 
 import faker from "faker";
 
-import {
-  CATEGORIES_LIST_SELECTORS,
-  categoryRow,
-} from "../../elements/catalog/categories/categories-list";
+import { CATEGORIES_LIST_SELECTORS } from "../../elements/catalog/categories/categories-list";
 import { CATEGORY_DETAILS_SELECTORS } from "../../elements/catalog/categories/category-details";
 import { BUTTON_SELECTORS } from "../../elements/shared/button-selectors";
 import { SHARED_ELEMENTS } from "../../elements/shared/sharedElements";
@@ -17,6 +14,7 @@ import {
 } from "../../support/api/requests/Category";
 import * as channelsUtils from "../../support/api/utils/channelsUtils";
 import * as productsUtils from "../../support/api/utils/products/productsUtils";
+import { ensureCanvasStatic } from "../../support/customCommands/sharedElementsOperations/canvas";
 import {
   createCategory,
   updateCategory,
@@ -109,9 +107,13 @@ describe("As an admin I want to manage categories", () => {
         .click();
       createCategory({ name: categoryName, description: categoryName })
         .visit(categoryDetailsUrl(category.id))
-        .contains(CATEGORY_DETAILS_SELECTORS.categoryChildrenRow, categoryName)
-        .scrollIntoView()
-        .should("be.visible");
+        .get(SHARED_ELEMENTS.dataGridTable)
+        .scrollIntoView();
+      ensureCanvasStatic(SHARED_ELEMENTS.dataGridTable);
+
+      cy.contains(SHARED_ELEMENTS.dataGridTable, categoryName).should(
+        "be.visible",
+      );
       getCategory(category.id).then(categoryResp => {
         expect(categoryResp.children.edges[0].node.name).to.eq(categoryName);
       });
@@ -136,19 +138,22 @@ describe("As an admin I want to manage categories", () => {
     "should be able to remove product from category. TC: SALEOR_0204",
     { tags: ["@category", "@allEnv", "@stable"] },
     () => {
+      cy.addAliasToGraphRequest("productBulkDelete");
       cy.visit(categoryDetailsUrl(category.id))
         .get(CATEGORY_DETAILS_SELECTORS.productsTab)
         .click();
-      cy.contains(CATEGORY_DETAILS_SELECTORS.productRow, product.name)
-        .find(BUTTON_SELECTORS.checkbox)
+      ensureCanvasStatic(SHARED_ELEMENTS.dataGridTable);
+      cy.contains(SHARED_ELEMENTS.dataGridTable, product.name).should(
+        "be.visible",
+      );
+      // selects first row
+      cy.clickGridCell(0, 0);
+      cy.get(CATEGORY_DETAILS_SELECTORS.deleteCategoriesButton)
         .click()
-        .get(BUTTON_SELECTORS.deleteIcon)
-        .click()
-        .addAliasToGraphRequest("productBulkDelete")
         .get(BUTTON_SELECTORS.submit)
         .click()
         .confirmationMessageShouldDisappear();
-      cy.contains(CATEGORY_DETAILS_SELECTORS.productRow, product.name)
+      cy.contains(SHARED_ELEMENTS.dataGridTable, product.name)
         .should("not.exist")
         .waitForRequestAndCheckIfNoErrors("@productBulkDelete");
       getCategory(category.id).then(categoryResp => {
@@ -164,7 +169,12 @@ describe("As an admin I want to manage categories", () => {
       cy.visit(urlList.categories)
         .get(SHARED_ELEMENTS.searchInput)
         .type(category.name);
-      cy.contains(SHARED_ELEMENTS.tableRow, category.name).click();
+      ensureCanvasStatic(SHARED_ELEMENTS.dataGridTable);
+      cy.contains(SHARED_ELEMENTS.dataGridTable, category.name).should(
+        "be.visible",
+      );
+      // opens first row details
+      cy.clickGridCell(1, 0);
       cy.contains(SHARED_ELEMENTS.header, category.name).should("be.visible");
     },
   );
@@ -174,14 +184,14 @@ describe("As an admin I want to manage categories", () => {
     { tags: ["@category", "@allEnv", "@stable"] },
     () => {
       const categoryName = `${startsWith}${faker.datatype.number()}`;
+      cy.addAliasToGraphRequest("CategoryDelete");
 
       createCategoryRequest({
         name: categoryName,
       }).then(categoryResp => {
         cy.visit(categoryDetailsUrl(categoryResp.id))
           .get(BUTTON_SELECTORS.deleteButton)
           .click()
-          .addAliasToGraphRequest("CategoryDelete")
           .get(BUTTON_SELECTORS.submit)
           .click()
           .waitForRequestAndCheckIfNoErrors("@CategoryDelete");
@@ -222,35 +232,43 @@ describe("As an admin I want to manage categories", () => {
     () => {
       const firstCategoryName = `${startsWith}${faker.datatype.number()}`;
       const secondCategoryName = `${startsWith}${faker.datatype.number()}`;
-      let firstCategory;
-      let secondCategory;
+      cy.addAliasToGraphRequest("CategoryBulkDelete");
 
       createCategoryRequest({
         name: firstCategoryName,
-      }).then(categoryResp => {
-        firstCategory = categoryResp;
       });
-
       createCategoryRequest({
         name: secondCategoryName,
-      }).then(categoryResp => {
-        secondCategory = categoryResp;
-        cy.visit(urlList.categories)
-          .searchInTable(startsWith)
-          .get(categoryRow(firstCategory.id))
-          .find(BUTTON_SELECTORS.checkbox)
-          .click()
-          .get(categoryRow(secondCategory.id))
-          .find(BUTTON_SELECTORS.checkbox)
-          .click()
-          .get(BUTTON_SELECTORS.deleteIcon)
-          .click()
-          .addAliasToGraphRequest("CategoryBulkDelete")
-          .get(BUTTON_SELECTORS.submit)
-          .click()
-          .waitForRequestAndCheckIfNoErrors("@CategoryBulkDelete");
-        cy.get(categoryRow(firstCategory.id)).should("not.exist");
-        cy.get(categoryRow(secondCategory.id)).should("not.exist");
+      }).then(() => {
+        cy.visit(urlList.categories).searchInTable(startsWith);
+        ensureCanvasStatic(SHARED_ELEMENTS.dataGridTable);
+        cy.get(SHARED_ELEMENTS.firstRowDataGrid)
+          .invoke("text")
+          .then(firstOnListCategoryName => {
+            cy.get(SHARED_ELEMENTS.secondRowDataGrid)
+              .invoke("text")
+              .then(secondOnListCategoryName => {
+                // deletes two first rows from categories list view
+                cy.clickGridCell(0, 0);
+                cy.clickGridCell(0, 1);
+
+                cy.get(CATEGORY_DETAILS_SELECTORS.deleteCategoriesButton)
+                  .click()
+                  .get(BUTTON_SELECTORS.submit)
+                  .click()
+                  .waitForRequestAndCheckIfNoErrors("@CategoryBulkDelete");
+                ensureCanvasStatic(SHARED_ELEMENTS.dataGridTable);
+
+                cy.contains(
+                  SHARED_ELEMENTS.dataGridTable,
+                  firstOnListCategoryName,
+                ).should("not.exist");
+                cy.contains(
+                  SHARED_ELEMENTS.dataGridTable,
+                  secondOnListCategoryName,
+                ).should("not.exist");
+              });
+          });
       });
     },
   );
@@ -263,6 +281,7 @@ describe("As an admin I want to manage categories", () => {
       const mainCategoryName = `${startsWith}${faker.datatype.number()}`;
       let subCategory;
       let mainCategory;
+      cy.addAliasToGraphRequest("CategoryBulkDelete");
 
       createCategoryRequest({
         name: mainCategoryName,
@@ -277,14 +296,16 @@ describe("As an admin I want to manage categories", () => {
         .then(categoryResp => {
           subCategory = categoryResp;
           cy.visit(categoryDetailsUrl(mainCategory.id))
-            .get(categoryRow(subCategory.id))
-            .find(BUTTON_SELECTORS.checkbox)
-            .click()
-            .get(BUTTON_SELECTORS.deleteIcon)
+            .get(SHARED_ELEMENTS.dataGridTable)
+            .scrollIntoView();
+          ensureCanvasStatic(SHARED_ELEMENTS.dataGridTable);
+          // selects first row of subcategories
+          cy.clickGridCell(0, 0);
+          cy.get(CATEGORY_DETAILS_SELECTORS.deleteCategoriesButton)
             .click()
-            .addAliasToGraphRequest("CategoryBulkDelete")
             .get(BUTTON_SELECTORS.submit)
             .click()
+            .confirmationMessageShouldDisappear()
             .waitForRequestAndCheckIfNoErrors("@CategoryBulkDelete");
           getCategory(subCategory.id).should("be.null");
           getCategory(mainCategory.id);

cypress/elements/catalog/categories/category-details.js

@@ -6,4 +6,5 @@ export const CATEGORY_DETAILS_SELECTORS = {
   productsTab: '[data-test-id="products-tab"]',
   addProducts: '[data-test-id="add-products"]',
   productRow: '[data-test-id="product-row"]',
+  deleteCategoriesButton: '[data-test-id="delete-categories-button"]',
 };

cypress/elements/shared/sharedElements.js

@@ -7,6 +7,8 @@ export const SHARED_ELEMENTS = {
   dataGridTable: "[data-testid='data-grid-canvas']",
   skeleton: '[data-test-id="skeleton"]',
   table: 'table[class*="Table"]',
+  firstRowDataGrid: "[data-testid='glide-cell-1-0']",
+  secondRowDataGrid: "[id='glide-cell-1-1']",
   tableRow: '[data-test-id*="id"], [class*="MuiTableRow"]',
   notificationSuccess:
     '[data-test-id="notification"][data-test-type="success"]',

cypress/support/pages/catalog/categoriesPage.js

@@ -14,17 +14,16 @@ export function updateCategory({ name, description }) {
 
 export function fillUpCategoryGeneralInfo({ name, description }) {
   return cy
+    .get(CATEGORY_DETAILS_SELECTORS.nameInput)
+    .clearAndType(name)
     .get(CATEGORY_DETAILS_SELECTORS.descriptionInput)
     .find(SHARED_ELEMENTS.contentEditable)
     .should("be.visible")
+
     .get(CATEGORY_DETAILS_SELECTORS.descriptionInput)
     .click()
     .get(CATEGORY_DETAILS_SELECTORS.descriptionInput)
-    .find(SHARED_ELEMENTS.contentEditable)
-    .get(CATEGORY_DETAILS_SELECTORS.descriptionInput)
-    .clearAndType(description)
-    .get(CATEGORY_DETAILS_SELECTORS.nameInput)
-    .clearAndType(name);
+    .clearAndType(description);
 }
 
 export function saveCategory(alias = "CategoryCreate") {

locale/defaultMessages.json

@@ -545,6 +545,9 @@
     "context": "product variants, title",
     "string": "Variants"
   },
+  "1X6HtI": {
+    "string": "All Categories"
+  },
   "1div9r": {
     "string": "Search Attribute"
   },
@@ -1775,10 +1778,6 @@
     "context": "webhooks and events section name",
     "string": "Webhooks & Events"
   },
-  "BHQrgz": {
-    "context": "number of subcategories",
-    "string": "Subcategories"
-  },
   "BJtUQI": {
     "context": "button",
     "string": "Add"
@@ -2320,6 +2319,9 @@
     "context": "Webhook details objects",
     "string": "Objects"
   },
+  "F7DxHw": {
+    "string": "Subcategories"
+  },
   "F8gsds": {
     "context": "unpublish page, button",
     "string": "Unpublish"
@@ -3048,9 +3050,6 @@
     "context": "dialog search placeholder",
     "string": "Search by collection name, etc..."
   },
-  "JiXNEV": {
-    "string": "Search Category"
-  },
   "Jj0de8": {
     "context": "voucher status",
     "string": "Scheduled"
@@ -4291,6 +4290,9 @@
     "context": "header",
     "string": "Create Variant"
   },
+  "T83iU7": {
+    "string": "Search categories..."
+  },
   "T8rvXs": {
     "context": "order subtotal price",
     "string": "Subtotal"
@@ -4644,10 +4646,6 @@
   "VOiUXQ": {
     "string": "Used to calculate rates for shipping for products of this product type, when specific weight is not given"
   },
-  "VQLIXd": {
-    "context": "product",
-    "string": "Name"
-  },
   "VSj89H": {
     "context": "fulfill button label",
     "string": "Fulfill anyway"
@@ -5232,6 +5230,9 @@
   "ZMy18J": {
     "string": "You have reached your channel limit, you will be no longer able to add channels to your store. If you would like to up your limit, contact your administration staff about raising your limits."
   },
+  "ZN5IZl": {
+    "string": "Bulk categories delete"
+  },
   "ZPOyI1": {
     "context": "fulfilled fulfillment, section header",
     "string": "Fulfilled from {warehouseName}"
@@ -5650,6 +5651,9 @@
     "context": "product attribute type",
     "string": "Multiple Select"
   },
+  "cLcy6F": {
+    "string": "Number of products"
+  },
   "cMFlOp": {
     "context": "input label",
     "string": "New Password"
@@ -5750,6 +5754,9 @@
     "context": "config type section title",
     "string": "Configuration Type"
   },
+  "cxOmce": {
+    "string": "Bulk products delete"
+  },
   "cy8sV7": {
     "context": "volume units types",
     "string": "Volume"
@@ -6577,10 +6584,6 @@
     "context": "tooltip content when product is in preorder",
     "string": "This product is still in preorder. You will be able to fulfill it after it reaches it’s release date"
   },
-  "k8ZJ5L": {
-    "context": "number of products",
-    "string": "No. of Products"
-  },
   "k8bltk": {
     "string": "No Results"
   },
@@ -6682,6 +6685,9 @@
     "context": "balance amound missing error message",
     "string": "Balance amount is missing"
   },
+  "kgVqk1": {
+    "string": "Category name"
+  },
   "ki7Mr8": {
     "context": "product export to csv file, header",
     "string": "Export Settings"
@@ -7415,6 +7421,9 @@
     "context": "order line total price",
     "string": "Total"
   },
+  "qU/z0Q": {
+    "string": "Bulk category delete"
+  },
   "qZHHed": {
     "context": "stock exceeded dialog title",
     "string": "Not enough stock"
@@ -7584,9 +7593,6 @@
     "context": "header",
     "string": "Top Products"
   },
-  "rrbzZt": {
-    "string": "No subcategories found"
-  },
   "rs815i": {
     "context": "text field label",
     "string": "Group name"
@@ -8192,10 +8198,6 @@
     "context": "draft order",
     "string": "Created"
   },
-  "vy7fjd": {
-    "context": "tab name",
-    "string": "All Categories"
-  },
   "vzce9B": {
     "context": "customer gift cards card subtitle",
     "string": "Only five newest gift cards are shown here"