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

.github/CODEOWNERS

@@ -848,6 +848,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

@@ -863,6 +863,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,51 @@
+/*
+ * 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 { LOCAL_STORAGE_PREFIX } from './constants';
+
+type IStorageEngine = typeof window.localStorage;
+
+class Storage {
+  engine: IStorageEngine = window.localStorage;
+  prefix: string = LOCAL_STORAGE_PREFIX;
+
+  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() {
+  return new Storage();
+}

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

@@ -0,0 +1,17 @@
+/*
+ * 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 PropertySort<T> {
+  field: keyof T;
+  direction: 'asc' | 'desc';
+}
+
+export interface PersistData<T> {
+  pageSize?: number;
+  sort?: PropertySort<T>;
+}

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

@@ -0,0 +1,130 @@
+/*
+ * 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 { renderHook, act } from '@testing-library/react-hooks';
+import { useEuiTablePersist } from './use_table_persist';
+import { createStorage } from './storage'; // Mock this if it's external
+
+jest.mock('./storage');
+
+describe('useEuiTablePersist', () => {
+  const mockStorage = {
+    get: jest.fn(),
+    set: jest.fn(),
+  };
+
+  beforeEach(() => {
+    (createStorage as jest.Mock).mockReturnValue(mockStorage);
+    mockStorage.get.mockClear();
+    mockStorage.set.mockClear();
+  });
+
+  it('should initialize with default values if local storage is empty', () => {
+    mockStorage.get.mockReturnValueOnce(undefined);
+
+    const { result } = renderHook(() => useEuiTablePersist({ tableId: 'testTable' }));
+
+    expect(result.current.pageSize).toBe(50); // Default initialPageSize
+    expect(result.current.sorting).toBe(true); // Allow sorting by default
+    expect(mockStorage.get).toHaveBeenCalledWith('testTable', undefined);
+  });
+
+  it('should initialize with values from local storage', () => {
+    const persistedData = { pageSize: 25, sort: { field: 'name', direction: 'asc' } };
+    mockStorage.get.mockReturnValueOnce(persistedData);
+
+    const { result } = renderHook(() => useEuiTablePersist({ tableId: 'testTable' }));
+
+    expect(result.current.pageSize).toBe(25);
+    expect(result.current.sorting).toEqual({ sort: { field: 'name', direction: 'asc' } });
+  });
+
+  it('should update pageSize and sort in state and local storage when onTableChange is called', () => {
+    const persistedData = { pageSize: 25, sort: { field: 'name', direction: 'asc' } };
+    mockStorage.get.mockReturnValueOnce(persistedData);
+
+    const { result } = renderHook(() => useEuiTablePersist({ tableId: 'testTable' }));
+
+    const nextCriteria = {
+      page: { size: 100 },
+      sort: { field: 'age', direction: 'desc' },
+    };
+
+    act(() => {
+      result.current.onTableChange(nextCriteria as Criteria<any>);
+    });
+
+    expect(result.current.pageSize).toBe(100);
+    expect(result.current.sorting).toEqual({ sort: { field: 'age', direction: 'desc' } });
+    expect(mockStorage.set).toHaveBeenCalledWith('testTable', {
+      pageSize: 100,
+      sort: { field: 'age', direction: 'desc' },
+    });
+  });
+
+  it('should call customOnTableChange if provided', () => {
+    const customOnTableChange = jest.fn();
+
+    const { result } = renderHook(() =>
+      useEuiTablePersist({
+        tableId: 'testTable',
+        customOnTableChange,
+      })
+    );
+
+    const nextCriteria = {
+      page: { size: 20 },
+      sort: { field: 'age', direction: 'desc' },
+    };
+
+    act(() => {
+      result.current.onTableChange(nextCriteria as Criteria<any>);
+    });
+
+    expect(customOnTableChange).toHaveBeenCalledWith(nextCriteria);
+  });
+
+  it('should maintain sort and pageSize if new values are not provided on change', () => {
+    const persistedData = { pageSize: 25, sort: { field: 'name', direction: 'asc' } };
+    mockStorage.get.mockReturnValueOnce(persistedData);
+
+    const { result } = renderHook(() => useEuiTablePersist({ tableId: 'testTable' }));
+
+    act(() => {
+      result.current.onTableChange({}); // Empty change
+    });
+
+    expect(result.current.pageSize).toBe(25);
+    expect(result.current.sorting).toEqual({ sort: { field: 'name', direction: 'asc' } });
+    expect(mockStorage.set).not.toHaveBeenCalled();
+  });
+
+  it('should remove sort in state and local storage if field is an empty string', () => {
+    const persistedData = { pageSize: 25, sort: { field: 'name', direction: 'asc' } };
+    mockStorage.get.mockReturnValueOnce(persistedData);
+
+    const { result } = renderHook(() => useEuiTablePersist({ tableId: 'testTable' }));
+
+    const nextCriteria = {
+      page: { size: 100 },
+      sort: { field: '', direction: 'asc' },
+    };
+
+    act(() => {
+      result.current.onTableChange(nextCriteria as Criteria<any>);
+    });
+
+    expect(result.current.pageSize).toBe(100);
+    expect(result.current.sorting).toEqual(true);
+    expect(mockStorage.set).toHaveBeenCalledWith('testTable', {
+      pageSize: 100,
+      sort: undefined,
+    });
+  });
+});