feat(ui): remember pagination option, project search selection jumps into project

ui/src/features/project/list/project-list-filter.tsx

@@ -3,7 +3,9 @@ import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { AutoComplete, Button } from 'antd';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
+import { paths } from '@ui/config/paths';
 import { listProjects } from '@ui/gen/service/v1alpha1/service-KargoService_connectquery';
 
 export const ProjectListFilter = ({
@@ -15,20 +17,33 @@ export const ProjectListFilter = ({
 }) => {
   const { data } = useQuery(listProjects);
   const [filter, setFilter] = useState(init || '');
+  const navigate = useNavigate();
+
+  const filteredProjects = data?.projects.filter((p) =>
+    p.metadata?.name.toLowerCase().includes(filter.toLowerCase())
+  );
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && filteredProjects?.length === 1) {
+      const selectedProject = filteredProjects[0].metadata?.name;
+      navigate(paths.project.replace(':name', selectedProject));
+    }
+  };
+
+  const handleSelect = (value: string) => {
+    navigate(paths.project.replace(':name', value));
+  };
 
   return (
     <div className='flex items-center w-2/3'>
       <AutoComplete
         placeholder='Filter...'
-        options={data?.projects.map((p) => ({ value: p.metadata?.name }))}
+        options={filteredProjects?.map((p) => ({ value: p.metadata?.name }))}
         onChange={setFilter}
         className='w-full mr-2'
         value={filter}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            onChange(filter);
-          }
-        }}
+        onKeyDown={handleKeyDown}
+        onSelect={handleSelect}
       />
       <Button type='primary' onClick={() => onChange(filter)}>
         <FontAwesomeIcon icon={faMagnifyingGlass} />

ui/src/features/project/list/projects-list.tsx

@@ -1,53 +1,72 @@
 import { createQueryOptions, useQuery, useTransport } from '@connectrpc/connect-query';
 import { useQueries } from '@tanstack/react-query';
 import { Empty, Pagination } from 'antd';
-import { useState } from 'react';
 
 import { LoadingState } from '@ui/features/common';
 import {
   listProjects,
   listStages
 } from '@ui/gen/service/v1alpha1/service-KargoService_connectquery';
 
+import { useLocalStorage } from '../../../utils/use-local-storage';
+
 import { ProjectItem } from './project-item/project-item';
 import { ProjectListFilter } from './project-list-filter';
 import * as styles from './projects-list.module.less';
 
+const PAGE_SIZE_KEY = 'projects-page-size';
+const PAGE_NUMBER_KEY = 'projects-page-number';
+const FILTER_KEY = 'projects-filter';
+
 export const ProjectsList = () => {
-  const [pageSize, setPageSize] = useState(9);
-  const [page, setPage] = useState(1);
-  const [filter, setFilter] = useState('');
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE_KEY, 10);
+  const [page, setPage] = useLocalStorage(PAGE_NUMBER_KEY, 1);
+  const [filter, setFilter] = useLocalStorage(FILTER_KEY, '');
 
   const { data, isLoading } = useQuery(listProjects, {
     pageSize: pageSize,
     page: page - 1,
     filter
   });
 
+  useEffect(() => {
+    if (data && page > Math.ceil(data.total / pageSize)) {
+      setPage(Math.ceil(data.total / pageSize) || 1);
+    }
+  }, [data, page, pageSize, setPage]);
+
   const transport = useTransport();
   const stageData = useQueries({
     queries: (data?.projects || []).map((proj) => {
       return createQueryOptions(listStages, { project: proj?.metadata?.name }, { transport });
     })
   });
 
+  const handlePaginationChange = (newPage: number, newPageSize: number) => {
+    setPage(newPage);
+    setPageSize(newPageSize);
+  };
+
+  const handleFilterChange = (newFilter: string) => {
+    setFilter(newFilter);
+    setPage(1);
+  };
+
   if (isLoading) return <LoadingState />;
 
   if (!data || data.projects.length === 0) return <Empty />;
 
   return (
     <>
       <div className='flex items-center mb-6'>
-        <ProjectListFilter onChange={setFilter} init={filter} />
+        <ProjectListFilter onChange={handleFilterChange} init={filter} />
         <Pagination
           total={data?.total || 0}
           className='ml-auto flex-shrink-0'
           pageSize={pageSize}
           current={page}
-          onChange={(page, pageSize) => {
-            setPage(page);
-            setPageSize(pageSize);
-          }}
+          onChange={handlePaginationChange}
+          showSizeChanger
         />
       </div>
       <div className={styles.list}>