djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add order details new column picker (#3934)

Browse source 
Co-authored-by: Renata <renata.gajzlerowicz@gmail.com>
Co-authored-by: wojteknowacki <124166231+wojteknowacki@users.noreply.github.com>
Co-authored-by: wojteknowacki <wojciech.nowacki@saleor.io>
This commit is contained in:
Paweł Chyła 2023-07-25 15:13:57 +02:00 committed by GitHub
parent 9d0233e466
commit 8592c6a4dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 386 additions and 232 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/gold-crews-cry.md Normal file
View file

@ -0,0 +1,5 @@
---
"saleor-dashboard": minor
---
Introduce new column picker on order details datagrids

78
cypress/e2e/orders/draftOrders.js
View file

@ -13,7 +13,11 @@ import {
createCustomer,
updateOrdersSettings,
} from "../../support/api/requests/";
import { createShipping, getDefaultChannel } from "../../support/api/utils/";
import {
createShipping,
createUnconfirmedOrder,
getDefaultChannel,
} from "../../support/api/utils/";
import * as productsUtils from "../../support/api/utils/products/productsUtils";
import { ensureCanvasStatic } from "../../support/customCommands/sharedElementsOperations/canvas";
import {
@ -24,10 +28,12 @@ import {
describe("Draft orders", () => {
const startsWith = "CyDraftOrders-";
const randomName = startsWith + faker.datatype.number();
let customer;
let defaultChannel;
let warehouse;
let address;
let variantsList;
let shippingMethod;
before(() => {
cy.clearSessionData().loginUserViaRequest();
@ -46,19 +52,25 @@ describe("Draft orders", () => {
randomName,
addresses.plAddress,
true,
);
).then(customerResp => {
customer = customerResp.user;
});
createShipping({
channelId: defaultChannel.id,
name: randomName,
address: addresses.plAddress,
});
})
.then(({ warehouse: warehouseResp }) => {
.then(
({ warehouse: warehouseResp, shippingMethod: shippingMethodResp }) => {
warehouse = warehouseResp;
shippingMethod = shippingMethodResp;
productsUtils.createTypeAttributeAndCategoryForProduct({
name: randomName,
});
})
},
)
.then(
({
productType: productTypeResp,
@ -74,8 +86,11 @@ describe("Draft orders", () => {
categoryId: categoryResp.id,
});
},
cy.checkIfDataAreNotNull({ defaultChannel, warehouse, address }),
);
)
.then(({ variantsList: variantsResp, product }) => {
variantsList = variantsResp;
cy.checkIfDataAreNotNull({ defaultChannel, warehouse, address });
});
});
beforeEach(() => {
@ -115,4 +130,53 @@ describe("Draft orders", () => {
});
},
);
it(
"should be able to turn of all but one static columns on draft orders detail. TC: SALEOR_2135",
{ tags: ["@orders", "@allEnv", "@stable"] },
() => {
let order;
createUnconfirmedOrder({
customerId: customer.id,
channelId: defaultChannel.id,
shippingMethod,
variantsList,
address,
warehouse: warehouse.id,
}).then(({ order: orderResp }) => {
order = orderResp;
cy.visit(urlList.orders + `${order.id}`);
cy.openColumnPicker();
cy.get(SHARED_ELEMENTS.staticColumnContainer)
.should("contain.text", "Product")
.should("contain.text", "SKU")
.should("contain.text", "Variant")
.should("contain.text", "Quantity")
.should("contain.text", "Price")
.should("contain.text", "Total")
.should("contain.text", "Status");
// switching off all but one static columns
cy.get(SHARED_ELEMENTS.gridStaticSkuButton).click();
cy.get(SHARED_ELEMENTS.gridStaticVariantNameButton).click();
cy.get(SHARED_ELEMENTS.gridStaticQuantityButton).click();
cy.get(SHARED_ELEMENTS.gridStaticPriceButton).click();
cy.get(SHARED_ELEMENTS.gridStaticTotalButton).click();
cy.get(SHARED_ELEMENTS.gridStaticStatusButton).click();
cy.get(SHARED_ELEMENTS.gridStaticProductButton).should(
"have.attr",
"data-state",
"on",
);
cy.get(SHARED_ELEMENTS.dataGridTable)
.find("th")
// on draft first th is empty so length need to be 2
.should("have.length", 2)
.last()
.should("have.text", "Product");
//next line hides picker
cy.get(SHARED_ELEMENTS.pageHeader).click({ force: true });
cy.get(SHARED_ELEMENTS.dynamicColumnContainer).should("not.exist");
});
},
);
});

43
cypress/e2e/orders/orders.js
View file

@ -574,4 +574,47 @@ describe("Orders", () => {
});
},
);
it(
"should be able to turn off all but one static columns on orders detail. TC: SALEOR_2136",
{ tags: ["@orders", "@allEnv", "@stable"] },
() => {
let order;
createReadyToFulfillOrder({
customerId: customer.id,
channelId: defaultChannel.id,
shippingMethod,
variantsList,
address,
}).then(({ order: orderResp }) => {
order = orderResp;
cy.visit(urlList.orders + `${order.id}`);
cy.openColumnPicker();
cy.get(SHARED_ELEMENTS.staticColumnContainer)
.should("contain.text", "Product")
.should("contain.text", "SKU")
.should("contain.text", "Variant")
.should("contain.text", "Quantity")
.should("contain.text", "Price")
.should("contain.text", "Total");
// switching off all but one static columns
cy.get(SHARED_ELEMENTS.gridStaticSkuButton).click();
cy.get(SHARED_ELEMENTS.gridStaticVariantNameButton).click();
cy.get(SHARED_ELEMENTS.gridStaticQuantityButton).click();
cy.get(SHARED_ELEMENTS.gridStaticPriceButton).click();
cy.get(SHARED_ELEMENTS.gridStaticTotalButton).click();
cy.get(SHARED_ELEMENTS.gridStaticProductButton).should(
"have.attr",
"data-state",
"on",
);
cy.get(SHARED_ELEMENTS.dataGridTable)
.find("th")
.should("have.length", 1)
.should("have.text", "Product");
//next line hides picker
cy.get(SHARED_ELEMENTS.pageHeader).click({ force: true });
cy.get(SHARED_ELEMENTS.dynamicColumnContainer).should("not.exist");
});
},
);
});

8
cypress/elements/shared/sharedElements.js
View file

@ -16,11 +16,19 @@ export const SHARED_ELEMENTS = {
activeStaticColumnOnGridButton: '[data-state="on"]',
dynamicColumnSelector: '[data-test-id="dynamic-column"]',
dynamicColumnNameSelector: '[data-test-id^="dynamic-column-name"]',
gridStaticSkuButton: '[data-test-id="stat-col-sku"]',
gridStaticVariantNameButton: '[data-test-id="stat-col-variantName"]',
gridStaticQuantityButton: '[data-test-id="stat-col-quantity"]',
gridStaticPriceButton: '[data-test-id="stat-col-price"]',
gridStaticStatusButton: '[data-test-id="stat-col-status"]',
gridStaticTotalButton: '[data-test-id="stat-col-total"]',
gridStaticProductButton: '[data-test-id="stat-col-product"]',
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"]',
staticColumnContainer: '[data-test-id="static-col-container"]',
paginationForwardOnColumnPicker: '[data-test-id="pagination-forward"]',
paginationBackOnColumnPicker: '[data-test-id="pagination-back"]',
notificationSuccess:

3
cypress/support/customCommands/sharedElementsOperations/selects.js
View file

@ -23,6 +23,9 @@ Cypress.Commands.add("clickSubmitButton", () =>
Cypress.Commands.add("clickConfirmButton", () =>
cy.get(BUTTON_SELECTORS.confirm).click(),
);
Cypress.Commands.add("openColumnPicker", () =>
cy.get(SHARED_ELEMENTS.openColumnPickerButton).click(),
);
Cypress.Commands.add("createNewOption", (selectSelector, newOption) => {
cy.get(selectSelector).type(newOption);

2
src/components/Datagrid/ColumnPicker/ColumnPicker.tsx
View file

@ -60,7 +60,7 @@ export const ColumnPicker = ({
}
/>
</Popover.Trigger>
<Popover.Content className={sprinkles({ margin: 1.5 })}>
<Popover.Content className={sprinkles({ margin: 1.5 })} align="end">
<Box
display="grid"
gridTemplateColumns={expanded ? 2 : 1}

5
src/components/Datagrid/Datagrid.tsx
View file

@ -182,6 +182,11 @@ export const Datagrid: React.FC<DatagridProps> = ({
const columnIndex = availableColumns.findIndex(
column => column.id === recentlyAddedColumn,
);
if (columnIndex === -1) {
return;
}
const datagridScroll = editor.current.scrollTo;
datagridScroll(columnIndex, 0, "horizontal", 0, 0, { hAlign: "start" });
}

18
src/config.ts
View file

@ -60,6 +60,8 @@ export interface AppListViewSettings {
[ListViews.WEBHOOK_LIST]: ListSettings;
[ListViews.TRANSLATION_ATTRIBUTE_VALUE_LIST]: ListSettings;
[ListViews.GIFT_CARD_LIST]: ListSettings;
[ListViews.ORDER_DETAILS_LIST]: ListSettings;
[ListViews.ORDER_DRAFT_DETAILS_LIST]: ListSettings;
}
export const defaultListSettings: AppListViewSettings = {
@ -138,6 +140,22 @@ export const defaultListSettings: AppListViewSettings = {
rowNumber: PAGINATE_BY,
columns: ["giftCardCode", "status", "tag", "product", "usedBy", "balance"],
},
[ListViews.ORDER_DETAILS_LIST]: {
rowNumber: PAGINATE_BY,
columns: ["product", "sku", "variantName", "quantity", "price", "total"],
},
[ListViews.ORDER_DRAFT_DETAILS_LIST]: {
rowNumber: PAGINATE_BY,
columns: [
"product",
"status",
"sku",
"variantName",
"quantity",
"price",
"total",
],
},
};
export const APP_VERSION =

85
src/orders/components/OrderDetailsDatagrid/OrderDetailsDatagrid.tsx
View file

@ -1,20 +1,25 @@
// @ts-strict-ignore
import ColumnPicker from "@dashboard/components/ColumnPicker";
import { ColumnPicker } from "@dashboard/components/Datagrid/ColumnPicker/ColumnPicker";
import { useColumns } from "@dashboard/components/Datagrid/ColumnPicker/useColumns";
import Datagrid from "@dashboard/components/Datagrid/Datagrid";
import { useColumnsDefault } from "@dashboard/components/Datagrid/hooks/useColumnsDefault";
import {
DatagridChangeStateContext,
useDatagridChangeState,
} from "@dashboard/components/Datagrid/hooks/useDatagridChange";
import { OrderLineFragment } from "@dashboard/graphql";
import useListSettings from "@dashboard/hooks/useListSettings";
import { productPath } from "@dashboard/products/urls";
import { ListViews } from "@dashboard/types";
import { ExternalLinkIcon } from "@saleor/macaw-ui/next";
import React, { useCallback } from "react";
import React, { useCallback, useMemo } from "react";
import { useIntl } from "react-intl";
import { Link } from "react-router-dom";
import { messages as orderMessages } from "../OrderListDatagrid/messages";
import { useColumns, useGetCellContent } from "./datagrid";
import {
createGetCellContent,
orderDetailsStaticColumnsAdapter,
} from "./datagrid";
import { messages } from "./messages";
interface OrderDetailsDatagridProps {
@ -29,24 +34,44 @@ export const OrderDetailsDatagrid = ({
const intl = useIntl();
const datagrid = useDatagridChangeState();
const availableColumns = useColumns();
const { updateListSettings, settings } = useListSettings(
ListViews.ORDER_DETAILS_LIST,
);
const orderDetailsStaticColumns = useMemo(
() => orderDetailsStaticColumnsAdapter(intl),
[intl],
);
const handleColumnChange = useCallback(
picked => {
if (updateListSettings) {
updateListSettings("columns", picked.filter(Boolean));
}
},
[updateListSettings],
);
const {
availableColumnsChoices,
columnChoices,
columns,
defaultColumns,
onColumnMoved,
onColumnResize,
onColumnsChange,
picker,
} = useColumnsDefault(availableColumns);
handlers,
visibleColumns,
staticColumns,
selectedColumns,
recentlyAddedColumn,
} = useColumns({
staticColumns: orderDetailsStaticColumns,
selectedColumns: settings?.columns ?? [],
onSave: handleColumnChange,
});
const getCellContent = useGetCellContent({
columns,
const getCellContent = useCallback(
createGetCellContent({
columns: visibleColumns,
data: lines,
loading,
});
}),
[intl, visibleColumns, loading],
);
const getMenuItems = useCallback(
index => [
@ -76,31 +101,21 @@ export const OrderDetailsDatagrid = ({
rowMarkers="none"
columnSelect="single"
freezeColumns={1}
availableColumns={columns}
availableColumns={visibleColumns}
emptyText={intl.formatMessage(orderMessages.emptyText)}
getCellContent={getCellContent}
getCellError={() => false}
menuItems={getMenuItems}
rows={loading ? 1 : lines.length}
selectionActions={() => null}
onColumnResize={onColumnResize}
onColumnMoved={onColumnMoved}
renderColumnPicker={defaultProps => (
onColumnResize={handlers.onResize}
onColumnMoved={handlers.onMove}
recentlyAddedColumn={recentlyAddedColumn}
renderColumnPicker={() => (
<ColumnPicker
{...defaultProps}
IconButtonProps={{
...defaultProps.IconButtonProps,
disabled: lines.length === 0,
}}
availableColumns={availableColumnsChoices}
initialColumns={columnChoices}
defaultColumns={defaultColumns}
onSave={onColumnsChange}
hasMore={false}
loading={false}
onFetchMore={() => undefined}
onQueryChange={picker.setQuery}
query={picker.query}
staticColumns={staticColumns}
selectedColumns={selectedColumns}
onToggle={handlers.onToggle}
/>
)}
/>

37
src/orders/components/OrderDetailsDatagrid/datagrid.ts
View file

@ -10,16 +10,13 @@ import { AvailableColumn } from "@dashboard/components/Datagrid/types";
import { OrderLineFragment } from "@dashboard/graphql";
import { getDatagridRowDataIndex } from "@dashboard/misc";
import { GridCell, Item } from "@glideapps/glide-data-grid";
import { useCallback, useMemo } from "react";
import { useIntl } from "react-intl";
import { IntlShape } from "react-intl";
import { columnsMessages } from "./messages";
export const useColumns = (): AvailableColumn[] => {
const intl = useIntl();
const columns = useMemo(
() => [
export const orderDetailsStaticColumnsAdapter = (
intl: IntlShape,
): AvailableColumn[] => [
{
id: "product",
title: intl.formatMessage(columnsMessages.product),
@ -50,12 +47,7 @@ export const useColumns = (): AvailableColumn[] => {
title: intl.formatMessage(columnsMessages.total),
width: 150,
},
],
[intl],
);
return columns;
};
];
interface GetCellContentProps {
columns: AvailableColumn[];
@ -63,23 +55,19 @@ interface GetCellContentProps {
loading: boolean;
}
export const useGetCellContent = ({
columns,
data,
loading,
}: GetCellContentProps) => {
const getCellContent = useCallback(
export const createGetCellContent =
({ columns, data, loading }: GetCellContentProps) =>
([column, row]: Item, { added, removed }: GetCellContentOpts): GridCell => {
if (loading) {
return loadingCell();
}
const columnId = columns[column].id;
const columnId = columns[column]?.id;
const rowData = added.includes(row)
? undefined
: data[getDatagridRowDataIndex(row, removed)];
if (!rowData) {
if (!rowData || !columnId) {
return readonlyTextCell("", false);
}
@ -113,12 +101,7 @@ export const useGetCellContent = ({
default:
return readonlyTextCell("", false);
}
},
[columns, data, loading],
);
return getCellContent;
};
};
const readonyOptions: Partial<GridCell> = {
allowOverlay: false,

81
src/orders/components/OrderDraftDetailsDatagrid/OrderDraftDetailsDatagrid.tsx
View file

@ -1,26 +1,32 @@
// @ts-strict-ignore
import ColumnPicker from "@dashboard/components/ColumnPicker";
import { ColumnPicker } from "@dashboard/components/Datagrid/ColumnPicker/ColumnPicker";
import { useColumns } from "@dashboard/components/Datagrid/ColumnPicker/useColumns";
import Datagrid from "@dashboard/components/Datagrid/Datagrid";
import { useColumnsDefault } from "@dashboard/components/Datagrid/hooks/useColumnsDefault";
import {
DatagridChangeOpts,
DatagridChangeStateContext,
useDatagridChangeState,
} from "@dashboard/components/Datagrid/hooks/useDatagridChange";
import { useEmptyColumn } from "@dashboard/components/Datagrid/hooks/useEmptyColumn";
import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql";
import useListSettings from "@dashboard/hooks/useListSettings";
import { productUrl } from "@dashboard/products/urls";
import { ListViews } from "@dashboard/types";
import {
Box,
ExternalLinkIcon,
sprinkles,
TrashBinIcon,
} from "@saleor/macaw-ui/next";
import React, { useCallback } from "react";
import React, { useCallback, useMemo } from "react";
import { useIntl } from "react-intl";
import { Link } from "react-router-dom";
import { FormData } from "../OrderDraftDetailsProducts/OrderDraftDetailsProducts";
import { useColumns, useGetCellContent } from "./datagrid";
import {
orderDraftDetailsStaticColumnsAdapter,
useGetCellContent,
} from "./datagrid";
import { messages } from "./messages";
interface OrderDraftDetailsDatagridProps {
@ -40,21 +46,40 @@ export const OrderDraftDetailsDatagrid = ({
const intl = useIntl();
const datagrid = useDatagridChangeState();
const { availableColumns } = useColumns();
const { updateListSettings, settings } = useListSettings(
ListViews.ORDER_DRAFT_DETAILS_LIST,
);
const emptyColumn = useEmptyColumn();
const orderDraftDetailsStaticColumns = useMemo(
() => orderDraftDetailsStaticColumnsAdapter(emptyColumn, intl),
[emptyColumn, intl],
);
const handleColumnChange = useCallback(
picked => {
if (updateListSettings) {
updateListSettings("columns", picked.filter(Boolean));
}
},
[updateListSettings],
);
const {
availableColumnsChoices,
columnChoices,
columns,
defaultColumns,
onColumnMoved,
onColumnResize,
onColumnsChange,
picker,
} = useColumnsDefault(availableColumns);
handlers,
visibleColumns,
staticColumns,
selectedColumns,
recentlyAddedColumn,
} = useColumns({
staticColumns: orderDraftDetailsStaticColumns,
selectedColumns: settings?.columns ?? [],
onSave: handleColumnChange,
});
const getCellContent = useGetCellContent({
columns,
columns: visibleColumns,
lines,
errors,
});
@ -138,31 +163,21 @@ export const OrderDraftDetailsDatagrid = ({
columnSelect="none"
freezeColumns={2}
verticalBorder={col => col > 1}
availableColumns={columns}
availableColumns={visibleColumns}
emptyText={intl.formatMessage(messages.emptyText)}
getCellContent={getCellContent}
getCellError={() => false}
menuItems={getMenuItems}
rows={lines.length}
selectionActions={() => null}
onColumnResize={onColumnResize}
onColumnMoved={onColumnMoved}
renderColumnPicker={defaultProps => (
onColumnResize={handlers.onResize}
onColumnMoved={handlers.onMove}
recentlyAddedColumn={recentlyAddedColumn}
renderColumnPicker={() => (
<ColumnPicker
{...defaultProps}
IconButtonProps={{
...defaultProps.IconButtonProps,
disabled: lines.length === 0,
}}
availableColumns={availableColumnsChoices}
initialColumns={columnChoices}
defaultColumns={defaultColumns}
onSave={onColumnsChange}
hasMore={false}
loading={false}
onFetchMore={() => undefined}
onQueryChange={picker.setQuery}
query={picker.query}
selectedColumns={selectedColumns}
staticColumns={staticColumns}
onToggle={handlers.onToggle}
/>
)}
onChange={handleDatagridChange}

27
src/orders/components/OrderDraftDetailsDatagrid/datagrid.ts
View file

@ -8,7 +8,6 @@ import {
thumbnailCell,
} from "@dashboard/components/Datagrid/customCells/cells";
import { GetCellContentOpts } from "@dashboard/components/Datagrid/Datagrid";
import { useEmptyColumn } from "@dashboard/components/Datagrid/hooks/useEmptyColumn";
import { AvailableColumn } from "@dashboard/components/Datagrid/types";
import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql";
import useLocale from "@dashboard/hooks/useLocale";
@ -21,18 +20,15 @@ import { useOrderLineDiscountContext } from "@dashboard/products/components/Orde
import getOrderErrorMessage from "@dashboard/utils/errors/order";
import { GridCell, Item } from "@glideapps/glide-data-grid";
import { DefaultTheme, useTheme } from "@saleor/macaw-ui/next";
import { useMemo } from "react";
import { IntlShape, useIntl } from "react-intl";
import { lineAlertMessages } from "../OrderDraftDetailsProducts/messages";
import { columnsMessages } from "./messages";
export const useColumns = () => {
const emptyColumn = useEmptyColumn();
const intl = useIntl();
const availableColumns = useMemo(
() => [
export const orderDraftDetailsStaticColumnsAdapter = (
emptyColumn: AvailableColumn,
intl: IntlShape,
) => [
emptyColumn,
{
id: "product",
@ -66,17 +62,10 @@ export const useColumns = () => {
},
{
id: "status",
title: "Status",
title: intl.formatMessage(columnsMessages.status),
width: 250,
},
],
[emptyColumn, intl],
);
return {
availableColumns,
};
};
];
interface GetCellContentProps {
columns: AvailableColumn[];
@ -102,13 +91,13 @@ export const useGetCellContent = ({
return readonlyTextCell("", false);
}
const columnId = columns[column].id;
const columnId = columns[column]?.id;
const change = changes.current[getChangeIndex(columnId, row)]?.data;
const rowData = added.includes(row)
? undefined
: lines[getDatagridRowDataIndex(row, removed)];
if (!rowData) {
if (!rowData || !columnId) {
return readonlyTextCell("", false);
}

4
src/orders/components/OrderDraftDetailsDatagrid/messages.ts
View file

@ -24,6 +24,10 @@ export const columnsMessages = defineMessages({
defaultMessage: "Total",
description: "total price of ordered products",
},
status: {
id: "tzMNF3",
defaultMessage: "Status",
},
});
export const messages = defineMessages({

2
src/types.ts
View file

@ -30,6 +30,8 @@ export enum ListViews {
DRAFT_LIST = "DRAFT_LIST",
NAVIGATION_LIST = "NAVIGATION_LIST",
ORDER_LIST = "ORDER_LIST",
ORDER_DETAILS_LIST = "ORDER_DETAILS_LIST",
ORDER_DRAFT_DETAILS_LIST = "ORDER_DRAFT_DETAILS_LIST",
PAGES_LIST = "PAGES_LIST",
PAGE_TYPES_LIST = "PAGE_TYPES_LIST",
PLUGINS_LIST = "PLUGIN_LIST",