[On-week] Add persisting page size and sorting for Management tables

.github/CODEOWNERS

@@ -841,6 +841,7 @@ packages/shared-ux/router/types @elastic/appex-sharedux
 packages/shared-ux/storybook/config @elastic/appex-sharedux
 packages/shared-ux/storybook/mock @elastic/appex-sharedux
 packages/shared-ux/modal/tabbed @elastic/appex-sharedux
+packages/shared-ux/table_persist @elastic/appex-sharedux
 packages/kbn-shared-ux-utility @elastic/appex-sharedux
 x-pack/plugins/observability_solution/slo @elastic/obs-ux-management-team
 x-pack/packages/kbn-slo-schema @elastic/obs-ux-management-team

package.json

@@ -855,6 +855,7 @@
     "@kbn/shared-ux-storybook-config": "link:packages/shared-ux/storybook/config",
     "@kbn/shared-ux-storybook-mock": "link:packages/shared-ux/storybook/mock",
     "@kbn/shared-ux-tabbed-modal": "link:packages/shared-ux/modal/tabbed",
+    "@kbn/shared-ux-table-persist": "link:packages/shared-ux/table_persist",
     "@kbn/shared-ux-utility": "link:packages/kbn-shared-ux-utility",
     "@kbn/slo-plugin": "link:x-pack/plugins/observability_solution/slo",
     "@kbn/slo-schema": "link:x-pack/packages/kbn-slo-schema",

packages/shared-ux/table_persist/README.md

@@ -0,0 +1,51 @@
+# @kbn/shared-ux-table-persist
+
+This package contains the `useEuiTablePersist` hook that can be used in components
+containing Eui tables for storing their page size ("rows per page" value) or
+the current sort criteria in local storage so that the user's preferences for
+these properties can persist.
+
+The package also exports some table-related constants (e.g. `DEFAULT_PAGE_SIZE_OPTIONS`)
+for use across tables in Kibana Stack Management for consistency.
+
+Usage:
+
+```
+interface Props {
+  items: T[];
+}
+
+const MyTableComponent: FunctionComponent<Props> = ({ items }) => {
+  const columns = [
+    {
+      field: 'name',
+      name: 'Name',
+      sortable: true,
+    },
+    ...
+  ];
+
+  const { pageSize, sorting, onTableChange } = useEuiTablePersist<T>({
+    tableId: 'myTableId',
+    initialPageSize: 50,
+    initialSort: {
+      field: 'name',
+      direction: 'asc',
+    },
+  });
+
+  const pagination = {
+    pageSize,
+    pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,
+  };
+
+  return (
+    <EuiInMemoryTable
+      items={items}
+      columns={columns}
+      pagination={pagination}
+      sorting={sorting}
+    />
+  );
+};
+```

packages/shared-ux/table_persist/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { useEuiTablePersist, DEFAULT_PAGE_SIZE_OPTIONS } from './src';

packages/shared-ux/table_persist/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/packages/shared-ux/table_persist'],
+};

packages/shared-ux/table_persist/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/shared-ux-table-persist",
+  "owner": "@elastic/appex-sharedux"
+}

packages/shared-ux/table_persist/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/shared-ux-table-persist",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

packages/shared-ux/table_persist/src/constants.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100];
+export const DEFAULT_INITIAL_PAGE_SIZE = 50;
+
+export const LOCAL_STORAGE_PREFIX = 'tablePersist';

packages/shared-ux/table_persist/src/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { useEuiTablePersist } from './use_table_persist';
+export { DEFAULT_PAGE_SIZE_OPTIONS } from './constants';

packages/shared-ux/table_persist/src/storage.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+type IStorageEngine = typeof window.localStorage;
+
+export class Storage {
+  constructor(private readonly engine: IStorageEngine, private readonly prefix: string) {}
+
+  encode(val: unknown) {
+    return JSON.stringify(val);
+  }
+
+  decode(val: string | null) {
+    if (typeof val === 'string') {
+      return JSON.parse(val);
+    }
+  }
+
+  encodeKey(key: string) {
+    return `${this.prefix}:${key}`;
+  }
+
+  set(key: string, val: unknown) {
+    this.engine.setItem(this.encodeKey(key), this.encode(val));
+    return val;
+  }
+
+  has(key: string) {
+    return this.engine.getItem(this.encodeKey(key)) != null;
+  }
+
+  get<T>(key: string, _default?: T) {
+    if (this.has(key)) {
+      return this.decode(this.engine.getItem(this.encodeKey(key)));
+    } else {
+      return _default;
+    }
+  }
+}
+
+export function createStorage(deps: { engine: IStorageEngine; prefix: string }) {
+  return new Storage(deps.engine, deps.prefix);
+}

packages/shared-ux/table_persist/src/types.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export interface PersistData<T> {
+  pageSize?: number;
+  sort?: {
+    field: keyof T;
+    direction: 'asc' | 'desc';
+  };
+}

packages/shared-ux/table_persist/src/use_table_persist.ts

@@ -0,0 +1,81 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { Criteria } from '@elastic/eui';
+import { PropertySort } from '@elastic/eui/src/services/sort/property_sort';
+import {
+  DEFAULT_INITIAL_PAGE_SIZE,
+  LOCAL_STORAGE_PREFIX,
+  DEFAULT_PAGE_SIZE_OPTIONS,
+} from './constants';
+import { createStorage } from './storage';
+import { validatePersistData } from './validate_persist_data';
+import { PersistData } from './types';
+
+interface EuiTablePersistProps<T> {
+  /** A unique id that will be included in the local storage variable for this table. */
+  tableId: string;
+  /** (Optional) Specifies a custom onTableChange handler. */
+  customOnTableChange?: (change: Criteria<T>) => void;
+  /** (Optional) Specifies a custom initial table sorting. */
+  initialSort?: PropertySort;
+  /** (Optional) Specifies a custom initial page size for the table.
+   * Defaults to {@link DEFAULT_INITIAL_PAGE_SIZE} */
+  initialPageSize?: number;
+  /** (Optional) Specifies custom page size options for the table.
+   * Defaults to {@link DEFAULT_PAGE_SIZE_OPTIONS} */
+  pageSizeOptions?: number[];
+}
+
+/**
+ * A hook that stores and retrieves from local storage the table page size and sort criteria.
+ * Returns the persisting page size and sort and the onTableChange handler that should be passed
+ * as props to an Eui table component.
+ */
+export const useEuiTablePersist = <T extends object>({
+  tableId,
+  customOnTableChange,
+  initialSort,
+  initialPageSize,
+  pageSizeOptions,
+}: EuiTablePersistProps<T>) => {
+  const storage = createStorage({
+    engine: window.localStorage,
+    prefix: LOCAL_STORAGE_PREFIX,
+  });
+
+  const storedPersistData = storage.get(tableId, undefined);
+
+  const { pageSize: storagePageSize, sort: storageSort }: PersistData<T> = validatePersistData(
+    storedPersistData,
+    pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS
+  );
+
+  const pageSize = storagePageSize ?? initialPageSize ?? DEFAULT_INITIAL_PAGE_SIZE;
+  const sort = storageSort ?? initialSort;
+  const sorting = sort && { sort };
+
+  const onTableChange = (nextValues: Criteria<T>) => {
+    if (customOnTableChange) {
+      customOnTableChange(nextValues);
+    }
+    const newPersistData: PersistData<T> = {};
+    newPersistData.pageSize = nextValues.page?.size ?? storagePageSize;
+    const newSort = nextValues?.sort;
+    newPersistData.sort = newSort?.field
+      ? newSort
+      : newSort?.direction
+      ? undefined // If field is an empty string and direction has value, it means sort is removed
+      : storageSort; // If both field and direction are undefined, there is no change on sort so use the stored one
+    if (newPersistData.pageSize !== storagePageSize || newPersistData.sort !== storageSort) {
+      storage.set(tableId, newPersistData);
+    }
+  };
+
+  return { pageSize, sorting, onTableChange };
+};

packages/shared-ux/table_persist/src/validate_persist_data.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * A utility function used to validate a table persist data.
+ * If any of the properties is not valid, it is returned with undefined value.
+ *
+ * @param data The data to be validated
+ * @param pageSizeOptions The table page size options that are available
+ */
+export const validatePersistData = (data: any, pageSizeOptions: number[]) => {
+  const pageSize = data?.pageSize;
+  const sort = data?.sort;
+
+  let validatedPageSize = pageSize;
+  let validatedSort = sort;
+
+  if (pageSize) {
+    if (typeof pageSize !== 'number' || !pageSizeOptions.includes(pageSize)) {
+      validatedPageSize = undefined;
+    }
+  }
+
+  if (sort) {
+    const field = sort.field;
+    const direction = sort.direction;
+    if (!(typeof field === 'string') || !(direction === 'asc' || direction === 'desc')) {
+      validatedSort = undefined;
+    }
+  }
+
+  return { pageSize: validatedPageSize, sort: validatedSort };
+};