feat: add filtering using nuqs in the Clusters page

package.json

@@ -18,6 +18,8 @@
     "@types/react": "^19.0.1",
     "axios": "^1.7.9",
     "date-fns": "^4.1.0",
+    "lodash.debounce": "4.0.8",
+    "nuqs": "2.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0"
@@ -26,8 +28,8 @@
     "@eslint/compat": "^1.2.4",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.17.0",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^18.19.68",
-    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^8.18.2",
     "@typescript-eslint/parser": "^8.18.2",
     "@vitejs/plugin-react": "^4.3.4",
@@ -43,7 +45,12 @@
     "vite": "^6.0.3"
   },
   "lint-staged": {
-    "*.{js,ts,tsx}": ["prettier --write", "eslint --fix --quiet"],
-    "*.{css,md}": ["prettier --write"]
+    "*.{js,ts,tsx}": [
+      "prettier --write",
+      "eslint --fix --quiet"
+    ],
+    "*.{css,md}": [
+      "prettier --write"
+    ]
   }
 }

src/app/AppLayout/AppLayout.tsx

@@ -8,12 +8,10 @@ import {
   PageSidebar,
   PageSidebarBody,
   PageToggleButton,
-  Nav,
-  NavItem,
-  NavList,
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import { RedhatIcon } from '@patternfly/react-icons';
+import SidebarNavigation from './SidebarNavigation';
 
 interface IAppLayout {
   children: React.ReactNode;
@@ -52,27 +50,11 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
     </Masthead>
   );
 
-  const PageNav = (
-    <Nav aria-label="Nav">
-      <NavList>
-        <NavItem itemId={0} to="/">
-          Overview
-        </NavItem>
-        <NavItem itemId={1} to="/accounts">
-          Accounts
-        </NavItem>
-        <NavItem itemId={2} to="/clusters">
-          Clusters
-        </NavItem>
-        <NavItem itemId={3} to="/servers">
-          Servers
-        </NavItem>
-      </NavList>
-    </Nav>
-  );
   const sidebar = (
     <PageSidebar isSidebarOpen={isSidebarOpen} id="vertical-sidebar">
-      <PageSidebarBody>{PageNav}</PageSidebarBody>
+      <PageSidebarBody>
+        <SidebarNavigation />
+      </PageSidebarBody>
     </PageSidebar>
   );
 

src/app/AppLayout/SidebarNavigation.tsx

@@ -0,0 +1,62 @@
+import { Nav, NavList, NavItem, NavExpandable } from '@patternfly/react-core';
+import React from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+
+const SidebarNavigation: React.FunctionComponent = () => {
+  const location = useLocation();
+
+  return (
+    <Nav aria-label="Nav">
+      <NavList>
+        <NavItem itemId="overview">
+          <NavLink to="/" end>
+            Overview
+          </NavLink>
+        </NavItem>
+        <NavItem itemId="accounts">
+          <NavLink to="/accounts">Accounts</NavLink>
+        </NavItem>
+
+        <NavExpandable title="Clusters" groupId="clusters-group" isExpanded={location.pathname.startsWith('/clusters')}>
+          <NavItem
+            groupId="clusters-group"
+            itemId="clusters-active"
+            isActive={location.pathname === '/clusters' && !location.search}
+          >
+            <NavLink to="/clusters" end>
+              Active
+            </NavLink>
+          </NavItem>
+          <NavItem
+            groupId="clusters-group"
+            itemId="clusters-history"
+            isActive={location.pathname === '/clusters' && location.search === '?archived=true'}
+          >
+            <NavLink to="/clusters?archived=true">History</NavLink>
+          </NavItem>
+        </NavExpandable>
+
+        <NavExpandable title="Servers" groupId="servers-group" isExpanded={location.pathname.startsWith('/servers')}>
+          <NavItem
+            groupId="servers-group"
+            itemId="servers-active"
+            isActive={location.pathname === '/servers' && !location.search}
+          >
+            <NavLink to="/servers" end>
+              Active
+            </NavLink>
+          </NavItem>
+          <NavItem
+            groupId="servers-group"
+            itemId="servers-history"
+            isActive={location.pathname === '/servers' && location.search === '?archived=true'}
+          >
+            <NavLink to="/servers?archived=true">History</NavLink>
+          </NavItem>
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+};
+
+export default SidebarNavigation;

src/app/Clusters/Clusters.tsx

@@ -1,40 +1,74 @@
 import { PageSection, PageSectionVariants, Panel, TextContent, Text } from '@patternfly/react-core';
-import React, { useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import React from 'react';
 import ClustersTable from './components/ClustersTable';
 import ClustersTableToolbar from './components/ClustersTableToolbar';
+import { parseAsArrayOf, parseAsString, parseAsStringEnum, parseAsBoolean, useQueryStates } from 'nuqs';
+import { CloudProvider, ClusterStates } from '@app/types/types';
+import { useLocation } from 'react-router-dom';
+
+const filterParams = {
+  status: {
+    ...parseAsStringEnum<ClusterStates>(Object.values(ClusterStates)),
+    defaultValue: null as ClusterStates | null,
+  },
+  provider: parseAsArrayOf(parseAsStringEnum<CloudProvider>(Object.values(CloudProvider))).withDefault([]),
+  accountName: parseAsString.withDefault(''),
+  archived: parseAsBoolean.withDefault(false),
+};
 
 const Clusters: React.FunctionComponent = () => {
-  const [searchValue, setSearchValue] = useState<string>('');
   const location = useLocation();
-  const queryParams = new URLSearchParams(location.search);
-  const cloudProviderFilter = queryParams.get('cloudProvider');
-  const [statusSelection, setStatusSelection] = useState('');
-  const [providerSelections, setProviderSelections] = useState<string[]>([]);
+  const [{ status, provider, accountName, archived }, setQuery] = useQueryStates(filterParams);
+
+  // console.log('Clusters render:', {
+  //   pathname: location.pathname,
+  //   search: location.search,
+  //   state: { archived, status, provider, accountName },
+  // });
+
+  // React to URL changes
+  React.useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const newArchived = params.get('archived') === 'true';
+
+    // console.log('URL changed:', {
+    //   current: archived,
+    //   new: newArchived,
+    //   search: location.search,
+    // });
+
+    if (archived !== newArchived) {
+      setQuery({
+        archived: newArchived,
+        status: null,
+        provider: [],
+      });
+    }
+  }, [location.search, archived, setQuery]);
 
   return (
     <React.Fragment>
       <PageSection variant={PageSectionVariants.light}>
         <TextContent>
-          <Text component="h1">Clusters</Text>
+          <Text component="h1">Clusters {archived ? '- History' : '- Active'}</Text>
         </TextContent>
       </PageSection>
       <PageSection variant={PageSectionVariants.light} isFilled>
         <Panel>
           <ClustersTableToolbar
-            searchValue={searchValue}
-            setSearchValue={setSearchValue}
-            statusSelection={statusSelection}
-            setStatusSelection={setStatusSelection}
-            providerSelections={providerSelections}
-            setProviderSelections={setProviderSelections}
-            onSearchChange={setSearchValue}
+            searchValue={accountName}
+            setSearchValue={value => setQuery({ accountName: value })}
+            statusSelection={status}
+            setStatusSelection={value => setQuery({ status: value })}
+            providerSelections={provider}
+            setProviderSelections={value => setQuery({ provider: value || [] })}
+            archived={archived}
           />
           <ClustersTable
-            searchValue={searchValue}
-            statusFilter={statusSelection}
-            cloudProviderFilter={cloudProviderFilter}
-            providerSelections={providerSelections}
+            searchValue={accountName}
+            statusFilter={status}
+            providerSelections={provider}
+            archived={archived}
           />
         </Panel>
       </PageSection>