From 66976d547be83678b403dbdfc11caccbf3700e21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dro=C5=84?= Date: Wed, 12 Jul 2023 13:59:17 +0200 Subject: [PATCH] Drop dynamic column toggles in column picker (#3878) * Drop dynamic column toggles * Replace removal icon * Add changeset * Add docs * Update docs * Fix types on order draft datagrid * Adjust collections column picker to new architecture * Adjust categories column picker to new architecture * Test column picker: adding, removing and searching for dynamic columns in picker (#3901) * test - column picker. Adding, removing and searching for dynamic columns in picker. * update tests tame with TC ids * removed unused row checks on products list view * Lint files --------- Co-authored-by: wojteknowacki <124166231+wojteknowacki@users.noreply.github.com> --- .changeset/empty-scissors-grow.md | 5 + .../e2e/products/productsList/columnPicker.js | 137 +++++++++++++++ .../catalog/products/product-details.js | 1 + cypress/elements/shared/sharedElements.js | 12 ++ cypress/fixtures/index.js | 1 + .../localStorage/columnPickerMocks.js | 139 +++++++++++++++ cypress/support/pages/columnPicker.js | 22 +++ cypress/support/pages/index.js | 1 + .../CategoryListDatagrid.tsx | 2 +- .../CollectionListDatagrid.tsx | 10 +- .../CollectionListPage.stories.tsx | 1 - .../CollectionListPage/CollectionListPage.tsx | 1 - .../views/CollectionList/CollectionList.tsx | 3 - .../ColumnPicker/ColumnPicker.md | 33 ++-- .../Datagrid/ColumnPicker/ColumnPicker.tsx | 30 +--- .../ColumnPickerAvailableNodes.tsx | 21 ++- .../ColumnPicker/ColumnPickerCategories.tsx | 19 +-- .../ColumnPickerDynamicColumns.tsx | 57 ++++--- .../ColumnPicker/useColumnPickerSettings.ts | 41 ----- .../Datagrid/ColumnPicker/useColumns.test.ts | 158 +++++------------- .../Datagrid/ColumnPicker/useColumns.ts | 68 +++----- .../Datagrid/ColumnPicker/utils.tsx | 21 +-- .../OrderDraftListDatagrid.tsx | 2 +- .../OrderListDatagrid/OrderListDatagrid.tsx | 2 +- .../ProductListDatagrid.tsx | 10 +- .../ProductListPage.stories.tsx | 2 - .../ProductListPage/ProductListPage.tsx | 6 - .../views/ProductList/ProductList.tsx | 8 +- 28 files changed, 476 insertions(+), 337 deletions(-) create mode 100644 .changeset/empty-scissors-grow.md create mode 100644 cypress/e2e/products/productsList/columnPicker.js create mode 100644 cypress/fixtures/localStorage/columnPickerMocks.js create mode 100644 cypress/support/pages/columnPicker.js rename src/components/{ => Datagrid}/ColumnPicker/ColumnPicker.md (76%) delete mode 100644 src/components/Datagrid/ColumnPicker/useColumnPickerSettings.ts diff --git a/.changeset/empty-scissors-grow.md b/.changeset/empty-scissors-grow.md new file mode 100644 index 00000000000..cbb4b148f4f --- /dev/null +++ b/.changeset/empty-scissors-grow.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": minor +--- + +Drop dynamic column toggles in column picker diff --git a/cypress/e2e/products/productsList/columnPicker.js b/cypress/e2e/products/productsList/columnPicker.js new file mode 100644 index 00000000000..e8a487e3fed --- /dev/null +++ b/cypress/e2e/products/productsList/columnPicker.js @@ -0,0 +1,137 @@ +/// +/// + +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"); + }); + }, + ); +}); diff --git a/cypress/elements/catalog/products/product-details.js b/cypress/elements/catalog/products/product-details.js index e1bd9bb985e..a99a9db2924 100644 --- a/cypress/elements/catalog/products/product-details.js +++ b/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']", }; diff --git a/cypress/elements/shared/sharedElements.js b/cypress/elements/shared/sharedElements.js index adf2995ffeb..1dbf46e9944 100644 --- a/cypress/elements/shared/sharedElements.js +++ b/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"]', diff --git a/cypress/fixtures/index.js b/cypress/fixtures/index.js index 1b918768b42..8c3355f747b 100644 --- a/cypress/fixtures/index.js +++ b/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"; diff --git a/cypress/fixtures/localStorage/columnPickerMocks.js b/cypress/fixtures/localStorage/columnPickerMocks.js new file mode 100644 index 00000000000..fdd67b34b20 --- /dev/null +++ b/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, + }, +}; diff --git a/cypress/support/pages/columnPicker.js b/cypress/support/pages/columnPicker.js new file mode 100644 index 00000000000..8f6d16a8395 --- /dev/null +++ b/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(); +} diff --git a/cypress/support/pages/index.js b/cypress/support/pages/index.js index 43934874bbe..78c2bbabc4c 100644 --- a/cypress/support/pages/index.js +++ b/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"; diff --git a/src/categories/components/CategoryListDatagrid/CategoryListDatagrid.tsx b/src/categories/components/CategoryListDatagrid/CategoryListDatagrid.tsx index 96d2d8f4ee4..3d4651d99ee 100644 --- a/src/categories/components/CategoryListDatagrid/CategoryListDatagrid.tsx +++ b/src/categories/components/CategoryListDatagrid/CategoryListDatagrid.tsx @@ -110,7 +110,7 @@ export const CategoryListDatagrid = ({ onRowSelectionChange={onSelectCategoriesIds} renderColumnPicker={() => ( diff --git a/src/collections/components/CollectionListDatagrid/CollectionListDatagrid.tsx b/src/collections/components/CollectionListDatagrid/CollectionListDatagrid.tsx index ba68dd64e9e..81d797abdc8 100644 --- a/src/collections/components/CollectionListDatagrid/CollectionListDatagrid.tsx +++ b/src/collections/components/CollectionListDatagrid/CollectionListDatagrid.tsx @@ -27,7 +27,6 @@ interface CollectionListDatagridProps SortPage { 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={() => ( )} /> diff --git a/src/collections/components/CollectionListPage/CollectionListPage.stories.tsx b/src/collections/components/CollectionListPage/CollectionListPage.stories.tsx index a68d14a8337..58a8e8faba9 100644 --- a/src/collections/components/CollectionListPage/CollectionListPage.stories.tsx +++ b/src/collections/components/CollectionListPage/CollectionListPage.stories.tsx @@ -34,7 +34,6 @@ const props: CollectionListPageProps = { collections, selectedChannelId: "123", filterOpts: collectionListFilterOpts, - columnPickerSettings: ["name"], selectedCollectionIds: [], hasPresetsChanged: () => false, onAll: () => undefined, diff --git a/src/collections/components/CollectionListPage/CollectionListPage.tsx b/src/collections/components/CollectionListPage/CollectionListPage.tsx index 70d1a724e6a..2ffe65df520 100644 --- a/src/collections/components/CollectionListPage/CollectionListPage.tsx +++ b/src/collections/components/CollectionListPage/CollectionListPage.tsx @@ -34,7 +34,6 @@ export interface CollectionListPageProps SortPage { onTabUpdate: (tabName: string) => void; selectedChannelId: string; - columnPickerSettings: string[]; collections: Collections; loading: boolean; selectedCollectionIds: string[]; diff --git a/src/collections/views/CollectionList/CollectionList.tsx b/src/collections/views/CollectionList/CollectionList.tsx index 2a2b793f289..117304d9795 100644 --- a/src/collections/views/CollectionList/CollectionList.tsx +++ b/src/collections/views/CollectionList/CollectionList.tsx @@ -1,7 +1,6 @@ // @ts-strict-ignore import ActionDialog from "@dashboard/components/ActionDialog"; import useAppChannel from "@dashboard/components/AppLayout/AppChannelContext"; -import { useColumnPickerSettings } from "@dashboard/components/Datagrid/ColumnPicker/useColumnPickerSettings"; import DeleteFilterTabDialog from "@dashboard/components/DeleteFilterTabDialog"; import SaveFilterTabDialog from "@dashboard/components/SaveFilterTabDialog"; import { @@ -56,7 +55,6 @@ export const CollectionList: React.FC = ({ params }) => { const { updateListSettings, settings } = useListSettings( ListViews.COLLECTION_LIST, ); - const { columnPickerSettings } = useColumnPickerSettings("COLLECTION_LIST"); usePaginationReset(collectionListUrl, params, settings.rowNumber); const { channel } = useAppChannel(false); @@ -211,7 +209,6 @@ export const CollectionList: React.FC = ({ params }) => { tabs={presets.map(tab => tab.name)} loading={loading} disabled={loading} - columnPickerSettings={columnPickerSettings} collections={collections} settings={settings} onSort={handleSort} diff --git a/src/components/ColumnPicker/ColumnPicker.md b/src/components/Datagrid/ColumnPicker/ColumnPicker.md similarity index 76% rename from src/components/ColumnPicker/ColumnPicker.md rename to src/components/Datagrid/ColumnPicker/ColumnPicker.md index fd328ea1cf3..50e1ad864f0 100644 --- a/src/components/ColumnPicker/ColumnPicker.md +++ b/src/components/Datagrid/ColumnPicker/ColumnPicker.md @@ -2,7 +2,7 @@ ### System Architecture -image +image ### Column types @@ -34,35 +34,32 @@ attribute:QXR0cmlidXRlOjIx - dynamic columns - array of dynamic columns for the column picker - column categories - array of column categories, which is abstraction for dynamic column. For example attributes is a column category, whereas Flavor attribute is an actual column value. This object has all API-related properties, like search handler, fetch more props, etc. - selected columns - array of column IDs which are selected in the column picker. It is saved in local storage -- dynamic column settings - array of column IDs which are selected in the left section of the column picker. It is saved in local storage. - recently added column - this value is used in datagrid component to enable auto-scroll to newly added column - handlers: - column resize handler (for datagrid) - column reorder handler (for datagrid) - - column visibility handler (for column picker) - - dynamic column selection handler (for column picker) + - column selection toggle (for column picker) + - customUpdateVisible - used to manually update visible columns state. For now it is required to update arrow icon in the datagrid columns -In order to use this hook, you need to provide four things: +In order to use this hook, you need to provide two/three things: - `staticColumns` - array of static columns in datagrid-ready format (`AvailableColumns[]`) -- `columnCategories` - array of column categories +- `columnCategories` - array of column categories (only if there are any dynamic columns) - state & setter of column settings which we get from `useListSettings` -- state of column picker settings which we get from `useColumnPickerSettings` ## Adapting new views -### Column picker settings +### Selected columns in LS -Firstly, in the view file, we need to provide two settings object, one for the selected columns and one for the dynamic column settings. We should use `useColumnPickerSettings` and `useListSettings` hook for that. The first settings object manages columns selected for the datagrid (visible columns). The second manages state of seleceted dynamic columns (if we pick a value from left side of column picked, it is then displayed on the right side of the picker as dynamic column with togglable visibility). Toggling the visiblity saves the column in the first settings object. - -The reason why column picker settings object needs to be in the view file and cannot be integrated into internal logic of useColumns is because we use column picker settings in the query. We need to know which columns are selected in order to fetch the correct data from the API. +Firstly, in the view file, we need to provide settings object which holds seleted columns IDs. We should use `useListSettings` hook for that. ```tsx -const { columnPickerSettings, setDynamicColumnsSettings } = - useColumnPickerSettings("PRODUCT_LIST"); +const { updateListSettings, settings } = useListSettings( + ListViews.PRODUCT_LIST, +); // Translates columnIDs to api IDs -const filteredColumnIds = columnPickerSettings +const filteredColumnIds = settings.columns .filter(isAttributeColumnValue) .map(getAttributeIdFromColumnValue); @@ -131,12 +128,12 @@ export const parseDynamicColumnsForProductListView = ({ name: "Attributes", prefix: "attribute", availableNodes: parseAttributesColumns( - attributesData, + attributesData, // all attributes activeAttributeSortId, sort, ), selectedNodes: parseAttributesColumns( - gridAttributesData, + gridAttributesData, // selected attributes activeAttributeSortId, sort, ), @@ -151,7 +148,7 @@ export const parseDynamicColumnsForProductListView = ({ Here we only have 1 column category, attributes. `attributesData` is the result of the first query, `gridAttributesData` is the result of the second query. We also provide pagination props, which are used in the column picker. -Queries which are used in this case are for categories. Let's look at the first query: +Let's have a look at the first query: ```tsx export const availableColumnAttribues = gql` @@ -185,7 +182,7 @@ export const availableColumnAttribues = gql` This query is used to fetch all **available** attributes. It is paginated and has a search filter and results are displayed in the left part of the column picker. -The second query is similar, but it has a filter of IDs, which come from local storage settings (useColumnPickerSettngs): +The second query is similar, but it has a filter of IDs, which come from local storage settings (useListSettings): ```tsx export const gridAttributes = gql` diff --git a/src/components/Datagrid/ColumnPicker/ColumnPicker.tsx b/src/components/Datagrid/ColumnPicker/ColumnPicker.tsx index 85595ef8b98..025a1235b85 100644 --- a/src/components/Datagrid/ColumnPicker/ColumnPicker.tsx +++ b/src/components/Datagrid/ColumnPicker/ColumnPicker.tsx @@ -22,9 +22,7 @@ export interface ColumnPickerProps { dynamicColumns?: AvailableColumn[] | null | undefined; selectedColumns: string[]; columnCategories?: ColumnCategory[]; - columnPickerSettings?: string[]; - onSave: (columns: string[]) => void; - onDynamicColumnSelect?: (columns: string[]) => void; + onToggle: (columnId: string) => void; } export const ColumnPicker = ({ @@ -32,23 +30,11 @@ export const ColumnPicker = ({ selectedColumns, columnCategories, dynamicColumns, - columnPickerSettings, - onDynamicColumnSelect, - onSave, + onToggle, }: ColumnPickerProps) => { const [pickerOpen, setPickerOpen] = useState(false); const [expanded, setExpanded] = useState(false); - const renderCategories = - columnCategories && - typeof onDynamicColumnSelect === "function" && - columnPickerSettings; - - const handleToggle = (id: string) => - selectedColumns.includes(id) - ? onSave(selectedColumns.filter(currentId => currentId !== id)) - : onSave([...selectedColumns, id]); - return (