Persist Table Filters in the API Explorer (#2936)

* fix: allow changing the categories of a checkbox tree

* feat: allow setting the current selection in the checkbox tree

* feat: allow setting the current selection in the select

* feat: add a way to access the tables internal state (filters, search, ...)

* feat: add useQueryParams hook

* feat: persist the table state of the api explorer in the url

* Use react-use instead of writing own hooks

* Resolve review comments

* Rename selectedChilds to selecetedChildren

* Add changesets

* Support passing a separate state name to useQueryParamState

This allows to use the useQueryParamState hook multiple time per route and have a separate state.

* refactor: fix typo...

plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx

@@ -15,7 +15,14 @@
  */
 
 import { ApiEntityV1alpha1, Entity } from '@backstage/catalog-model';
-import { Table, TableFilter, TableColumn, useApi } from '@backstage/core';
+import {
+  Table,
+  TableColumn,
+  TableFilter,
+  TableState,
+  useApi,
+  useQueryParamState,
+} from '@backstage/core';
 import { Chip, Link } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React from 'react';
@@ -120,6 +127,10 @@ export const ApiExplorerTable = ({
   loading,
   error,
 }: ExplorerTableProps) => {
+  const [queryParamState, setQueryParamState] = useQueryParamState<TableState>(
+    'apiTable',
+  );
+
   if (error) {
     return (
       <div>
@@ -142,6 +153,8 @@ export const ApiExplorerTable = ({
       }}
       data={entities}
       filters={filters}
+      initialState={queryParamState}
+      onStateChange={setQueryParamState}
     />
   );
 };