Save sorting order when changing view (#2353)

Signed-off-by: vshakirova <vshakirova@mirantis.com>

src/renderer/components/+cluster/cluster-issues.tsx

@@ -134,6 +134,7 @@ export class ClusterIssues extends React.Component<Props> {
           <>Warnings: {warnings.length}</>
         </SubHeader>
         <Table
+          tableId="cluster_issues"
           items={warnings}
           virtual
           selectable

src/renderer/components/+pod-security-policies/pod-security-policies.tsx

@@ -20,7 +20,7 @@ export class PodSecurityPolicies extends React.Component {
     return (
       <KubeObjectListLayout
         isConfigurable
-        tableId="access_roles"
+        tableId="access_pod_security_policies"
         className="PodSecurityPolicies"
         isClusterScoped={true}
         store={podSecurityPoliciesStore}

src/renderer/components/+storage-volumes/volume-details-list.tsx

@@ -64,6 +64,7 @@ export class VolumeDetailsList extends React.Component<Props> {
       <div className="VolumeDetailsList flex column">
         <DrawerTitle title="Persistent Volumes"/>
         <Table
+          tableId="storage_volume_details_list"
           items={persistentVolumes}
           selectable
           virtual={virtual}

src/renderer/components/+workloads-pods/pod-details-list.tsx

@@ -135,6 +135,7 @@ export class PodDetailsList extends React.Component<Props> {
       <div className="PodDetailsList flex column">
         {showTitle && <DrawerTitle title="Pods"/>}
         <Table
+          tableId="workloads_pod_details_list"
           items={pods}
           selectable
           virtual={virtual}

src/renderer/components/+workloads-pods/pod-tolerations.tsx

@@ -43,6 +43,7 @@ const getTableRow = (toleration: IToleration) => {
 export function PodTolerations({ tolerations }: Props) {
   return (
     <Table
+      tableId="workloads_pod_tolerations"
       selectable
       scrollable={false}
       sortable={sortingCallbacks}

src/renderer/components/item-object-list/item-list-layout.tsx

@@ -413,7 +413,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
   renderList() {
     const {
       store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks, detailsItem,
-      tableProps = {},
+      tableProps = {}, tableId
     } = this.props;
     const { isReady, removeItemsDialog, items } = this;
     const { selectedItems } = store;
@@ -426,6 +426,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
         )}
         {isReady && (
           <Table
+            tableId={tableId}
             virtual={virtual}
             selectable={hasDetailsView}
             sortable={sortingCallbacks}

src/renderer/components/table/table.storage.ts

@@ -0,0 +1,22 @@
+import { createStorage } from "../../utils";
+import { TableSortParams } from "./table";
+
+export interface TableStorageModel {
+  sortParams: {
+    [tableId: string]: Partial<TableSortParams>;
+  }
+}
+
+export const tableStorage = createStorage<TableStorageModel>("table_settings", {
+  sortParams: {}
+});
+
+export function getSortParams(tableId: string): Partial<TableSortParams> {
+  return tableStorage.get().sortParams[tableId];
+}
+
+export function setSortParams(tableId: string, sortParams: Partial<TableSortParams>) {
+  tableStorage.merge(draft => {
+    draft.sortParams[tableId] = sortParams;
+  });
+}

src/renderer/components/table/table.tsx

@@ -3,7 +3,6 @@ import "./table.scss";
 import React from "react";
 import { orderBy } from "lodash";
 import { observer } from "mobx-react";
-import { observable } from "mobx";
 import { autobind, cssNames, noop } from "../../utils";
 import { TableRow, TableRowElem, TableRowProps } from "./table-row";
 import { TableHead, TableHeadElem, TableHeadProps } from "./table-head";
@@ -11,6 +10,8 @@ import { TableCellElem } from "./table-cell";
 import { VirtualList } from "../virtual-list";
 import { createPageParam } from "../../navigation";
 import { ItemObject } from "../../item.store";
+import { getSortParams, setSortParams } from "./table.storage";
+import { computed } from "mobx";
 
 export type TableSortBy = string;
 export type TableOrderBy = "asc" | "desc" | string;
@@ -19,6 +20,7 @@ export type TableSortCallback<D = any> = (data: D) => string | number | (string
 export type TableSortCallbacks = { [columnId: string]: TableSortCallback };
 
 export interface TableProps extends React.DOMAttributes<HTMLDivElement> {
+  tableId?: string;
   items?: ItemObject[];  // Raw items data
   className?: string;
   autoSize?: boolean;   // Setup auto-sizing for all columns (flex: 1 0)
@@ -62,13 +64,17 @@ export class Table extends React.Component<TableProps> {
     sortSyncWithUrl: true,
   };
 
-  @observable sortParams: Partial<TableSortParams> = Object.assign(
+  componentDidMount() {
-    this.props.sortSyncWithUrl ? {
+    const { sortable, tableId } = this.props;
-      sortBy: sortByUrlParam.get(),
+
-      orderBy: orderByUrlParam.get(),
+    if (sortable && !tableId) {
-    } : {},
+      console.error("[Table]: sorted table requires props.tableId to be specified");
-    this.props.sortByDefault,
+    }
-  );
+  }
+
+  @computed get sortParams() {
+    return Object.assign({}, this.props.sortByDefault, getSortParams(this.props.tableId));
+  }
 
   renderHead() {
     const { sortable, children } = this.props;
@@ -113,7 +119,7 @@ export class Table extends React.Component<TableProps> {
 
   @autobind()
   protected onSort({ sortBy, orderBy }: TableSortParams) {
-    this.sortParams = { sortBy, orderBy };
+    setSortParams(this.props.tableId, { sortBy, orderBy });
     const { sortSyncWithUrl, onSort } = this.props;
 
     if (sortSyncWithUrl) {