Apply grid persistance on other views (#4868)

* Apply grid persistance on other views

* Create beige-ducks-matter.md

* Update beige-ducks-matter.md

.changeset/beige-ducks-matter.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Now you can see columns and their ordering that you previously selected when swtich betetween listing pages.

src/categories/components/CategoryListDatagrid/CategoryListDatagrid.tsx

@@ -52,6 +52,7 @@ export const CategoryListDatagrid = ({
     [onUpdateListSettings],
   );
   const { handlers, selectedColumns, staticColumns, visibleColumns } = useColumns({
+    gridName: "category_list",
     staticColumns: memoizedStaticColumns,
     selectedColumns: settings?.columns ?? [],
     onSave: handleColumnChange,

src/collections/components/CollectionListDatagrid/CollectionListDatagrid.tsx

@@ -61,6 +61,7 @@ export const CollectionListDatagrid = ({
   );
   const { handlers, visibleColumns, staticColumns, selectedColumns, recentlyAddedColumn } =
     useColumns({
+      gridName: "collection_list",
       staticColumns: collectionListStaticColumns,
       selectedColumns: settings?.columns ?? [],
       onSave: onColumnChange,

src/components/Datagrid/ColumnPicker/withPersistance.ts

@@ -48,5 +48,5 @@ export const selectedWithPersistance = (
 ) => {
   if (persistedColumns.length === 0) return selectedColumns;
 
-  return persistedColumns.map(column => column.identifier());
+  return persistedColumns.filter(column => !column.isEmpty()).map(column => column.identifier());
 };

src/components/Datagrid/persistance/persistedColumn.ts

@@ -35,4 +35,8 @@ export class PersistedColumn {
   public identifier() {
     return this.id;
   }
+
+  public isEmpty() {
+    return this.id === "empty";
+  }
 }

src/customers/components/CustomerListDatagrid/CustomerListDatagrid.tsx

@@ -60,6 +60,7 @@ export const CustomerListDatagrid = ({
   );
   const { handlers, visibleColumns, staticColumns, selectedColumns, recentlyAddedColumn } =
     useColumns({
+      gridName: "customer_list",
       staticColumns: customerListStaticColumns,
       selectedColumns: settings?.columns ?? [],
       onSave: onColumnChange,

src/discounts/components/DiscountListDatagrid/DiscountListDatagrid.tsx

@@ -52,6 +52,7 @@ export const DiscountListDatagrid = ({
   );
   const { handlers, visibleColumns, staticColumns, selectedColumns, recentlyAddedColumn } =
     useColumns({
+      gridName: "discount_list",
       staticColumns: discountListStaticColumns,
       selectedColumns: settings?.columns ?? [],
       onSave: onColumnChange,

src/discounts/components/SaleListDatagrid/SaleListDatagrid.tsx

@@ -57,6 +57,7 @@ export const SaleListDatagrid = ({
   );
   const { handlers, visibleColumns, staticColumns, selectedColumns, recentlyAddedColumn } =
     useColumns({
+      gridName: "sale_list",
       staticColumns: collectionListStaticColumns,
       selectedColumns: settings?.columns ?? [],
       onSave: onColumnChange,

src/discounts/components/VoucherListDatagrid/VoucherListDatagrid.tsx

@@ -58,6 +58,7 @@ export const VoucherListDatagrid = ({
   );
   const { handlers, visibleColumns, recentlyAddedColumn, staticColumns, selectedColumns } =
     useColumns({
+      gridName: "voucher_list",
       selectedColumns: settings?.columns ?? [],
       staticColumns: vouchersListStaticColumns,
       onSave: onColumnChange,

src/giftCards/GiftCardsList/GiftCardsListDatagrid/GiftCardsListDatagrid.tsx

@@ -58,6 +58,7 @@ export const GiftCardsListDatagrid = () => {
   );
   const { handlers, staticColumns, visibleColumns, selectedColumns, recentlyAddedColumn } =
     useColumns({
+      gridName: "gift_cards_list",
       staticColumns: availableColumns,
       selectedColumns: settings?.columns ?? [],
       onSave: onColumnChange,

src/orders/components/OrderDraftListDatagrid/OrderDraftListDatagrid.tsx

@@ -53,6 +53,7 @@ export const OrderDraftListDatagrid = ({
     [intl, sort],
   );
   const { handlers, staticColumns, visibleColumns, selectedColumns } = useColumns({
+    gridName: "order_drafts_list",
     staticColumns: memoizedStaticColumns,
     selectedColumns: settings?.columns ?? [],
     onSave: handleColumnChange,

src/orders/components/OrderListDatagrid/OrderListDatagrid.tsx

@@ -53,6 +53,7 @@ export const OrderListDatagrid: React.FC<OrderListDatagridProps> = ({
     [emptyColumn, intl, sort],
   );
   const { handlers, staticColumns, visibleColumns, selectedColumns } = useColumns({
+    gridName: "order_list",
     staticColumns: memoizedStaticColumns,
     selectedColumns: settings?.columns ?? [],
     onSave: handleColumnChange,

src/pages/components/PageListDatagrid/PageListDatagrid.tsx

@@ -54,6 +54,7 @@ export const PageListDatagrid = ({
   );
   const { handlers, visibleColumns, staticColumns, selectedColumns, recentlyAddedColumn } =
     useColumns({
+      gridName: "page_list",
       staticColumns: pageListStaticColumns,
       selectedColumns: settings?.columns ?? [],
       onSave: onColumnChange,