feat: Introduce URL table params feature

package.json

@@ -40,6 +40,7 @@
     "@tanstack/react-pacer": ">= 0.15.0",
     "@tanstack/react-query": ">= 5.83.0",
     "p-all": ">= 4.0.0",
+    "qs": ">= 6.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "use-deep-compare": "^1.3.0"

src/components/TableToolsTable/TableToolsTable.js

@@ -15,6 +15,7 @@
 import TableToolbar from '@redhat-cloud-services/frontend-components/TableToolbar';
 
 import useTableTools from '~/hooks/useTableTools';
+import useTableSearchParams from '~/hooks/useTableSearchParams';
 import { TableStateProvider, FilterModal, TableViewToggle } from '~/components';
 
 const TableToolsTable = ({
@@ -34,6 +35,7 @@
   paginationProps,
   ...tablePropsRest
 }) => {
+  const searchParamsState = useTableSearchParams(options);
   const {
     view,
     loading,
@@ -49,10 +51,34 @@
     externalTotal,
     {
       treeTable,
-      filters,
+      filters: {
+        ...(filters || {}),
+        activeFilters: {
+          ...filters?.activeFilters,
+          ...(searchParamsState?.filters || {}),
+        },
+      },
       columns,
       toolbarProps: toolbarPropsProp,
       tableProps: tablePropsRest,
+      ...(searchParamsState
+        ? {
+            ...(searchParamsState.page
+              ? { page: parseInt(searchParamsState.page) }
+              : {}),
+            ...(searchParamsState.perPage
+              ? { perPage: parseInt(searchParamsState.perPage) }
+              : {}),
+            ...(searchParamsState.sort
+              ? {
+                  sortBy: {
+                    ...searchParamsState.sort,
+                    index: parseInt(searchParamsState.sort.index),
+                  },
+                }
+              : {}),
+          }
+        : {}),
       ...options,
     },
   );
@@ -125,7 +151,7 @@
 
 /**
  * This component is a wrapper around the Patternfly Table component(s), the FEC PrimaryToolbar and combines them with the `useTableTools` hook
  * If no {@link TableContext}
  *
  *
  *  @param   {object}             props                     Component Props

src/components/TableToolsTable/TableToolsTableExperiments.stories.js

@@ -4,6 +4,8 @@
 import {
   Card,
   CardBody,
+  Content,
+  ContentVariants,
   Spinner,
   Button,
   Label,
@@ -536,4 +538,62 @@
   render: (args) => <AccessItemsExample {...args} />,
 };
 
+const UrlParamsExample = () => {
+  const exampleUrl =
+    'perPage=20&page=1&filters[title][0]=ds&filters[rating-above][0]=4&sort[index]=1&sort[direction]=desc';
+  const searchParams = new URLSearchParams(exampleUrl);
+  const [searchParamsState, setSearchParamsState] = useState();
+  const setSearchParams = useCallback((params) => {
+    setSearchParamsState(params);
+  }, []);
+
+  const {
+    loading,
+    result: { data, meta: { total } = {} } = {},
+    error,
+  } = useExampleDataQuery({
+    endpoint: '/api',
+    useTableState: true,
+  });
+
+  return (
+    <>
+      <Content component="p">
+        <strong>URL would be:</strong>{' '}
+        {decodeURI(searchParamsState?.toString() || '')}
+      </Content>
+      <TableToolsTable
+        loading={loading}
+        items={data}
+        total={total}
+        error={error}
+        columns={columns}
+        filters={{
+          filterConfig: filters,
+        }}
+        options={{
+          debug: true,
+          ...defaultOptions,
+          onSelect: true,
+          searchParams,
+          setSearchParams,
+        }}
+      />
+    </>
+  );
+};
+
+export const UrlParamsStory = {
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={queryClient}>
+        <TableStateProvider>
+          <Story />
+        </TableStateProvider>
+      </QueryClientProvider>
+    ),
+  ],
+  render: (args) => <UrlParamsExample {...args} />,
+};
+
 export default meta;

src/hooks/useFilterConfig/useFilterConfig.js

@@ -81,6 +81,8 @@ const useFilterConfig = (options) => {
       : {},
   );
 
+  // TODO with URL params it can (for some reason) happen that initial values get debounced
+  // and the first request won't include filters.
   const debouncedSetState = useDebouncedCallback(setTableState, { wait: 500 });
 
   useEffect(() => {

src/hooks/usePagination/hooks/usePaginationState.js

@@ -8,13 +8,13 @@ import useTableState from '~/hooks/useTableState';
 import { TABLE_STATE_NAMESPACE } from '../constants';
 
 const usePaginationState = (options) => {
-  const { perPage = 10, serialisers } = options;
+  const { perPage = 10, page = 1, serialisers } = options;
   const defaultState = useMemo(() => {
     return {
       perPage,
-      page: 1,
+      page,
     };
-  }, [perPage]);
+  }, [perPage, page]);
   const resetPage = useCallback(
     (currentState) => {
       return {

src/hooks/useTableSearchParams/hooks/useSearchParamsState.js

@@ -0,0 +1,22 @@
+import { useCallback, useRef } from 'react';
+import { parse, stringify } from 'qs';
+
+const useSearchParamsState = ({ searchParams, setSearchParams }) => {
+  const searchParamsState = useRef(
+    searchParams ? parse(searchParams.toString()) : undefined,
+  );
+
+  const setSearchParamsState = useCallback(
+    (params) => {
+      setSearchParams(new URLSearchParams(stringify(params)));
+    },
+    [setSearchParams],
+  );
+
+  return [
+    searchParams && searchParamsState.current,
+    setSearchParams && setSearchParamsState,
+  ];
+};
+
+export default useSearchParamsState;

src/hooks/useTableSearchParams/index.js

@@ -0,0 +1 @@
+export { default } from './useTableSearchParams';

src/hooks/useTableSearchParams/useTableSearchParams.js

@@ -0,0 +1,30 @@
+import { useDeepCompareEffect } from 'use-deep-compare';
+import { useFullTableState } from '~/hooks';
+
+import useSearchParamsState from './hooks/useSearchParamsState';
+
+const useTableSearchParams = ({ searchParams, setSearchParams }) => {
+  const fullTableState = useFullTableState();
+  const {
+    tableState: { pagination: { state: pagination } = {}, filters, sort } = {},
+  } = fullTableState || {};
+
+  const [searchParamsState, setSearchParamsState] = useSearchParamsState({
+    searchParams,
+    setSearchParams,
+  });
+
+  useDeepCompareEffect(() => {
+    if (setSearchParamsState) {
+      setSearchParamsState({
+        ...(pagination || {}),
+        filters,
+        ...(sort ? { sort } : {}),
+      });
+    }
+  }, [pagination, filters, sort, setSearchParamsState]);
+
+  return searchParamsState;
+};
+
+export default useTableSearchParams;

src/hooks/useTableSort/useTableSort.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useDeepCompareMemo } from 'use-deep-compare';
 
 import useTableState, { useRawTableState } from '~/hooks/useTableState';
@@ -41,7 +41,14 @@ const useTableSort = (columns, options = {}) => {
     serialisers: { sort: serialiser } = {},
     onSort: onSortOption,
   } = options;
-
+  const defaultState = useMemo(
+    () =>
+      initialSortBy || {
+        index: 0,
+        direction: 'asc',
+      },
+    [initialSortBy],
+  );
   const { tableView } = useRawTableState() || {};
   const offset = columnOffset({ ...options, tableView });
 
@@ -57,10 +64,7 @@ const useTableSort = (columns, options = {}) => {
   );
   const [sortBy, setSortBy] = useTableState(
     TABLE_STATE_NAMESPACE,
-    initialSortBy || {
-      index: 0,
-      direction: 'asc',
-    },
+    defaultState,
     stateOptions,
   );
 

src/support/factories/filters.js

@@ -45,7 +45,7 @@ export const rating = {
   label: 'Rating above',
   items: [...new Array(5)].map((_, idx) => ({
     label: [...new Array(idx + 1)].map(() => '★'),
-    value: idx + 1,
+    value: `${idx + 1}`,
   })),
   filterSerialiser: (_config, value) => `.rating >= ${value}`,
 };