Save sorting order when changing view (#2353)

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

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(
-    this.props.sortSyncWithUrl ? {
-      sortBy: sortByUrlParam.get(),
-      orderBy: orderByUrlParam.get(),
-    } : {},
-    this.props.sortByDefault,
-  );
+  componentDidMount() {
+    const { sortable, tableId } = this.props;
+
+    if (sortable && !tableId) {
+      console.error("[Table]: sorted table requires props.tableId to be specified");
+    }
+  }
+
+  @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) {