Introduce new column picker in Order Draft list (#3869)

.changeset/moody-queens-end.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Introduce new column picker in Order Draft list datagrid

src/config.ts

@@ -81,6 +81,7 @@ export const defaultListSettings: AppListViewSettings = {
   },
   [ListViews.DRAFT_LIST]: {
     rowNumber: PAGINATE_BY,
+    columns: ["number", "date", "customer", "total"],
   },
   [ListViews.NAVIGATION_LIST]: {
     rowNumber: PAGINATE_BY,

src/orders/components/OrderDraftListDatagrid/OrderDraftListDatagrid.tsx

@@ -1,32 +1,34 @@
-// @ts-strict-ignore
+import { ColumnPicker } from "@dashboard/components/Datagrid/ColumnPicker/ColumnPicker";
-import ColumnPicker from "@dashboard/components/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 { TablePaginationWithContext } from "@dashboard/components/TablePagination";
-import { OrderDraftListQuery } from "@dashboard/graphql";
 import useLocale from "@dashboard/hooks/useLocale";
+import { OrderDraft } from "@dashboard/orders/types";
 import { OrderDraftListUrlSortField, orderUrl } from "@dashboard/orders/urls";
-import { ListProps, RelayToFlat, SortPage } from "@dashboard/types";
+import { ListProps, SortPage } from "@dashboard/types";
 import { Item } from "@glideapps/glide-data-grid";
 import { Box } from "@saleor/macaw-ui/next";
 import React, { useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
 
-import { createGetCellContent, getColumns } from "./datagrid";
+import {
+  createGetCellContent,
+  orderDraftListStaticColumnsAdapter,
+} from "./datagrid";
 import { messages } from "./messages";
 import { canBeSorted } from "./utils";
 
 interface OrderDraftListDatagridProps
   extends ListProps,
     SortPage<OrderDraftListUrlSortField> {
-  orders: RelayToFlat<OrderDraftListQuery["draftOrders"]>;
+  orders: OrderDraft[];
   hasRowHover?: boolean;
   onRowClick?: (id: string) => void;
-  onSelectOrderDraftIds;
+  onSelectOrderDraftIds: (ids: number[], clearSelection: () => void) => void;
 }
 
 export const OrderDraftListDatagrid = ({
@@ -44,33 +46,40 @@ export const OrderDraftListDatagrid = ({
   const { locale } = useLocale();
   const datagridState = useDatagridChangeState();
 
-  const availableColumns = useMemo(() => getColumns(intl, sort), [intl, sort]);
+  const handleColumnChange = useCallback(
+    picked => {
+      if (onUpdateListSettings) {
+        onUpdateListSettings("columns", picked.filter(Boolean));
+      }
+    },
+    [onUpdateListSettings],
+  );
 
-  const {
+  const memoizedStaticColumns = useMemo(
-    columns,
+    () => orderDraftListStaticColumnsAdapter(intl, sort),
-    availableColumnsChoices,
+    [intl, sort],
-    columnChoices,
+  );
-    defaultColumns,
+
-    onColumnMoved,
+  const { handlers, staticColumns, visibleColumns, selectedColumns } =
-    onColumnResize,
+    useColumns({
-    onColumnsChange,
+      staticColumns: memoizedStaticColumns,
-    picker,
+      selectedColumns: settings?.columns ?? [],
-  } = useColumnsDefault(availableColumns);
+      onSave: handleColumnChange,
+    });
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   const getCellContent = useCallback(
-    createGetCellContent({ orders, columns, locale }),
+    createGetCellContent({ orders, columns: visibleColumns, locale }),
-    [columns, locale, orders],
+    [visibleColumns, locale, orders],
   );
 
   const handleHeaderClick = useCallback(
     (col: number) => {
-      const columnName = columns[col].id as OrderDraftListUrlSortField;
+      const columnName = visibleColumns[col].id as OrderDraftListUrlSortField;
       if (canBeSorted(columnName)) {
         onSort(columnName);
       }
     },
-    [columns, onSort],
+    [visibleColumns, onSort],
   );
 
   const handleRowClick = useCallback(
@@ -102,7 +111,7 @@ export const OrderDraftListDatagrid = ({
         freezeColumns={1}
         hasRowHover={hasRowHover}
         loading={disabled}
-        availableColumns={columns}
+        availableColumns={visibleColumns}
         verticalBorder={col => col > 0}
         getCellContent={getCellContent}
         getCellError={() => false}
@@ -111,27 +120,16 @@ export const OrderDraftListDatagrid = ({
         rows={orders?.length ?? 0}
         selectionActions={() => null}
         onRowSelectionChange={onSelectOrderDraftIds}
-        onColumnMoved={onColumnMoved}
+        onColumnResize={handlers.onResize}
-        onColumnResize={onColumnResize}
+        onColumnMoved={handlers.onMove}
         onHeaderClicked={handleHeaderClick}
         onRowClick={handleRowClick}
         rowAnchor={handleRowAnchor}
-        renderColumnPicker={defaultProps => (
+        renderColumnPicker={() => (
           <ColumnPicker
-            {...defaultProps}
+            staticColumns={staticColumns}
-            IconButtonProps={{
+            selectedColumns={selectedColumns}
-              ...defaultProps.IconButtonProps,
+            onSave={handlers.onChange}
-              disabled: orders.length === 0,
-            }}
-            availableColumns={availableColumnsChoices}
-            initialColumns={columnChoices}
-            defaultColumns={defaultColumns}
-            onSave={onColumnsChange}
-            hasMore={false}
-            loading={false}
-            onFetchMore={() => undefined}
-            onQueryChange={picker.setQuery}
-            query={picker.query}
           />
         )}
       />

src/orders/components/OrderDraftListDatagrid/datagrid.test.ts

@@ -1,5 +1,4 @@
-import { OrderDraftListQuery } from "@dashboard/graphql";
+import { OrderDraft } from "@dashboard/orders/types";
-import { RelayToFlat } from "@dashboard/types";
 
 import { getCustomerName } from "./datagrid";
 
@@ -11,7 +10,7 @@ describe("getCustomerName", () => {
         firstName: "John",
         lastName: "Doe",
       },
-    } as RelayToFlat<NonNullable<OrderDraftListQuery["draftOrders"]>>[number];
+    } as OrderDraft;
 
     // Act
     const result = getCustomerName(data);
@@ -27,7 +26,7 @@ describe("getCustomerName", () => {
         city: "New York",
       },
       userEmail: "john@doe.com",
-    } as RelayToFlat<NonNullable<OrderDraftListQuery["draftOrders"]>>[number];
+    } as OrderDraft;
 
     // Act
     const result = getCustomerName(data);
@@ -38,9 +37,7 @@ describe("getCustomerName", () => {
 
   it("should return - when no user email and billing address", () => {
     // Arrange
-    const data = {} as RelayToFlat<
+    const data = {} as OrderDraft;
-      NonNullable<OrderDraftListQuery["draftOrders"]>
-    >[number];
 
     // Act
     const result = getCustomerName(data);

src/orders/components/OrderDraftListDatagrid/datagrid.ts

@@ -1,12 +1,11 @@
-// @ts-strict-ignore
 import {
   moneyCell,
   readonlyTextCell,
 } from "@dashboard/components/Datagrid/customCells/cells";
 import { AvailableColumn } from "@dashboard/components/Datagrid/types";
 import { Locale } from "@dashboard/components/Locale";
-import { OrderDraftListQuery } from "@dashboard/graphql";
+import { OrderDraft } from "@dashboard/orders/types";
-import { RelayToFlat, Sort } from "@dashboard/types";
+import { Sort } from "@dashboard/types";
 import { getColumnSortDirectionIcon } from "@dashboard/utils/columns/getColumnSortDirectionIcon";
 import { GridCell, Item } from "@glideapps/glide-data-grid";
 import moment from "moment";
@@ -14,32 +13,35 @@ import { IntlShape } from "react-intl";
 
 import { columnsMessages } from "./messages";
 
-export const getColumns = (intl: IntlShape, sort: Sort): AvailableColumn[] => [
+export const orderDraftListStaticColumnsAdapter = (
-  {
+  intl: IntlShape,
-    id: "number",
+  sort: Sort,
-    title: intl.formatMessage(columnsMessages.number),
+): AvailableColumn[] =>
-    width: 100,
+  [
-    icon: getColumnSortDirectionIcon(sort, "number"),
+    {
-  },
+      id: "number",
-  {
+      title: intl.formatMessage(columnsMessages.number),
-    id: "date",
+      width: 100,
-    title: intl.formatMessage(columnsMessages.date),
+    },
-    width: 200,
+    {
-    icon: getColumnSortDirectionIcon(sort, "date"),
+      id: "date",
-  },
+      title: intl.formatMessage(columnsMessages.date),
-  {
+      width: 200,
-    id: "customer",
+    },
-    title: intl.formatMessage(columnsMessages.customer),
+    {
-    width: 200,
+      id: "customer",
-    icon: getColumnSortDirectionIcon(sort, "customer"),
+      title: intl.formatMessage(columnsMessages.customer),
-  },
+      width: 200,
-  {
+    },
-    id: "total",
+    {
-    title: intl.formatMessage(columnsMessages.total),
+      id: "total",
-    width: 200,
+      title: intl.formatMessage(columnsMessages.total),
-    icon: getColumnSortDirectionIcon(sort, "total"),
+      width: 200,
-  },
+    },
-];
+  ].map(column => ({
+    ...column,
+    icon: getColumnSortDirectionIcon(sort, column.id),
+  }));
 
 export const createGetCellContent =
   ({
@@ -47,15 +49,15 @@ export const createGetCellContent =
     locale,
     columns,
   }: {
-    orders: RelayToFlat<OrderDraftListQuery["draftOrders"]>;
+    orders: OrderDraft[];
     columns: AvailableColumn[];
     locale: Locale;
   }) =>
   ([column, row]: Item): GridCell => {
-    const rowData = orders[row];
+    const rowData: OrderDraft | undefined = orders[row];
     const columnId = columns[column]?.id;
 
-    if (!columnId) {
+    if (!columnId || !rowData) {
       return readonlyTextCell("");
     }
 
@@ -76,12 +78,12 @@ export const createGetCellContent =
             readonly: true,
           },
         );
+      default:
+        return readonlyTextCell("");
     }
   };
 
-export function getCustomerName(
+export function getCustomerName(rowData: OrderDraft) {
-  rowData: RelayToFlat<OrderDraftListQuery["draftOrders"]>[number],
-) {
   if (rowData?.billingAddress?.firstName && rowData?.billingAddress?.lastName) {
     return `${rowData.billingAddress.firstName} ${rowData.billingAddress.lastName}`;
   }

src/orders/types.ts

@@ -1,10 +1,12 @@
 import {
   MarkAsPaidStrategyEnum,
   OrderDetailsFragment,
+  OrderDraftListQuery,
   OrderRefundDataQuery,
   TransactionEventFragment,
   TransactionItemFragment,
 } from "@dashboard/graphql";
+import { RelayToFlat } from "@dashboard/types";
 
 /** Check if order has transactions & feature flag enabled */
 export const orderHasTransactions = (order: OrderDetailsFragment): boolean =>
@@ -38,6 +40,10 @@ export type OrderRefundSharedType = Pick<
     keyof OrderRefundData
 >;
 
+export type OrderDraft = RelayToFlat<
+  NonNullable<OrderDraftListQuery["draftOrders"]>
+>[number];
+
 /** Type of the trasaction event (e.g. CHARGE_SUCCESS -> CHARGE) */
 export type TransactionEventType =
   | "REFUND"