[UI] Remember filter settings in local storage #2039 (#2352)

Author: olgenn

frontend/src/hooks/useProjectFilter.ts

@@ -0,0 +1,44 @@
+import { useEffect, useMemo } from 'react';
+
+import { SelectCSDProps } from 'components';
+
+import { useGetProjectsQuery } from 'services/project';
+
+import { useLocalStorageState } from './useLocalStorageState';
+
+type Args = {
+    localStorePrefix: string;
+};
+
+export const useProjectFilter = ({ localStorePrefix }: Args) => {
+    const [selectedProject, setSelectedProject] = useLocalStorageState<SelectCSDProps.Option | null>(
+        `${localStorePrefix}-project_name`,
+        null,
+    );
+
+    const { data: projectsData } = useGetProjectsQuery();
+
+    const projectOptions = useMemo<SelectCSDProps.Options>(() => {
+        if (!projectsData?.length) return [];
+
+        return projectsData.map((project) => ({ label: project.project_name, value: project.project_name }));
+    }, [projectsData]);
+
+    useEffect(() => {
+        if (!projectsData || !selectedProject) {
+            return;
+        }
+
+        const hasSelectedProject = projectsData.some(({ project_name }) => selectedProject?.value === project_name);
+
+        if (!hasSelectedProject) {
+            setSelectedProject(null);
+        }
+    }, [projectsData]);
+
+    return {
+        projectOptions,
+        selectedProject,
+        setSelectedProject,
+    } as const;
+};

frontend/src/pages/Fleets/List/hooks.tsx

@@ -1,15 +1,14 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { format } from 'date-fns';
 
 import { Button, ListEmptyMessage, NavigateLink, StatusIndicator, TableProps } from 'components';
-import { SelectCSDProps } from 'components';
 
 import { DATE_TIME_FORMAT } from 'consts';
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
+import { useProjectFilter } from 'hooks/useProjectFilter';
 import { getFleetInstancesLinkText, getFleetPrice, getFleetStatusIconType } from 'libs/fleet';
 import { ROUTES } from 'routes';
-import { useGetProjectsQuery } from 'services/project';
 
 export const useEmptyMessages = ({
     clearFilters,
@@ -100,17 +99,9 @@ export const useColumnsDefinitions = () => {
     return { columns } as const;
 };
 
-export const useFilters = () => {
-    const [onlyActive, setOnlyActive] = useLocalStorageState<boolean>('fleet-list-is-active', true);
-    const [selectedProject, setSelectedProject] = useState<SelectCSDProps.Option | null>(null);
-
-    const { data: projectsData } = useGetProjectsQuery();
-
-    const projectOptions = useMemo<SelectCSDProps.Options>(() => {
-        if (!projectsData?.length) return [];
-
-        return projectsData.map((project) => ({ label: project.project_name, value: project.project_name }));
-    }, [projectsData]);
+export const useFilters = (localStorePrefix = 'fleet-list-page') => {
+    const [onlyActive, setOnlyActive] = useLocalStorageState<boolean>(`${localStorePrefix}-is-active`, true);
+    const { selectedProject, setSelectedProject, projectOptions } = useProjectFilter({ localStorePrefix });
 
     const clearFilters = () => {
         setOnlyActive(false);

frontend/src/pages/Instances/List/hooks/useFilters.ts

@@ -1,24 +1,13 @@
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import { SelectCSDProps } from 'components';
-
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
-import { useGetProjectsQuery } from 'services/project';
+import { useProjectFilter } from 'hooks/useProjectFilter';
 
-export const useFilters = () => {
+export const useFilters = (localStorePrefix = 'instances-list-page') => {
     const [searchParams, setSearchParams] = useSearchParams();
-
-    const [onlyActive, setOnlyActive] = useLocalStorageState<boolean>('instances-list-is-active', false);
-    const [selectedProject, setSelectedProject] = useState<SelectCSDProps.Option | null>(null);
-
-    const { data: projectsData } = useGetProjectsQuery();
-
-    const projectOptions = useMemo<SelectCSDProps.Options>(() => {
-        if (!projectsData?.length) return [];
-
-        return projectsData.map((project) => ({ label: project.project_name, value: project.project_name }));
-    }, [projectsData]);
+    const [onlyActive, setOnlyActive] = useLocalStorageState<boolean>(`${localStorePrefix}-is-active`, false);
+    const { selectedProject, setSelectedProject, projectOptions } = useProjectFilter({ localStorePrefix });
 
     const clearFilters = () => {
         setOnlyActive(false);

frontend/src/pages/Models/List/hooks.tsx

@@ -1,13 +1,13 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
 import { format } from 'date-fns';
 
 import { Button, ListEmptyMessage, NavigateLink, SelectCSDProps, TableProps } from 'components';
 
 import { DATE_TIME_FORMAT } from 'consts';
+import { useProjectFilter } from 'hooks/useProjectFilter';
 import { ROUTES } from 'routes';
-import { useGetProjectsQuery } from 'services/project';
 
 import { getModelGateway } from '../helpers';
 
@@ -118,19 +118,12 @@ export const useEmptyMessages = ({
 
 type Args = {
     projectSearchKey?: string;
+    localStorePrefix?: string;
 };
 
-export const useFilters = ({ projectSearchKey }: Args) => {
+export const useFilters = ({ projectSearchKey, localStorePrefix = 'models-list-page' }: Args) => {
     const [searchParams] = useSearchParams();
-    const [selectedProject, setSelectedProject] = useState<SelectCSDProps.Option | null>(null);
-
-    const { data: projectsData } = useGetProjectsQuery();
-
-    const projectOptions = useMemo<SelectCSDProps.Options>(() => {
-        if (!projectsData?.length) return [];
-
-        return projectsData.map((project) => ({ label: project.project_name, value: project.project_name }));
-    }, [projectsData]);
+    const { selectedProject, setSelectedProject, projectOptions } = useProjectFilter({ localStorePrefix });
 
     const setSelectedOptionFromParams = (
         searchKey: string,

frontend/src/pages/Runs/List/hooks/useFilters.ts

@@ -1,10 +1,10 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { SelectCSDProps } from 'components';
 
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
-import { useGetProjectsQuery } from 'services/project';
+import { useProjectFilter } from 'hooks/useProjectFilter';
 
 type Args = {
     localStorePrefix: string;
@@ -14,17 +14,9 @@ type Args = {
 
 export const useFilters = ({ localStorePrefix, projectSearchKey }: Args) => {
     const [searchParams] = useSearchParams();
-    const [selectedProject, setSelectedProject] = useState<SelectCSDProps.Option | null>(null);
+    const { selectedProject, setSelectedProject, projectOptions } = useProjectFilter({ localStorePrefix });
     const [onlyActive, setOnlyActive] = useLocalStorageState<boolean>(`${localStorePrefix}-is-active`, false);
 
-    const { data: projectsData } = useGetProjectsQuery();
-
-    const projectOptions = useMemo<SelectCSDProps.Options>(() => {
-        if (!projectsData?.length) return [];
-
-        return projectsData.map((project) => ({ label: project.project_name, value: project.project_name }));
-    }, [projectsData]);
-
     const setSelectedOptionFromParams = (
         searchKey: string,
         options: SelectCSDProps.Options | null,

frontend/src/pages/Volumes/List/hooks.tsx

@@ -1,17 +1,16 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { format } from 'date-fns';
 
 import { Button, ListEmptyMessage, NavigateLink, StatusIndicator } from 'components';
-import { SelectCSDProps } from 'components';
 
 import { DATE_TIME_FORMAT } from 'consts';
 import { useNotifications } from 'hooks';
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
+import { useProjectFilter } from 'hooks/useProjectFilter';
 import { getServerError } from 'libs';
 import { getStatusIconType } from 'libs/volumes';
 import { ROUTES } from 'routes';
-import { useGetProjectsQuery } from 'services/project';
 import { useDeleteVolumesMutation } from 'services/volume';
 
 export const useVolumesTableEmptyMessages = ({
@@ -102,17 +101,9 @@ export const useColumnsDefinitions = () => {
     return { columns } as const;
 };
 
-export const useFilters = (storagePrefix?: string) => {
-    const [onlyActive, setOnlyActive] = useLocalStorageState<boolean>(`${storagePrefix}volume-list-is-active`, true);
-    const [selectedProject, setSelectedProject] = useState<SelectCSDProps.Option | null>(null);
-
-    const { data: projectsData } = useGetProjectsQuery();
-
-    const projectOptions = useMemo<SelectCSDProps.Options>(() => {
-        if (!projectsData?.length) return [];
-
-        return projectsData.map((project) => ({ label: project.project_name, value: project.project_name }));
-    }, [projectsData]);
+export const useFilters = (localStorePrefix = 'volume-list-page') => {
+    const [onlyActive, setOnlyActive] = useLocalStorageState<boolean>(`${localStorePrefix}-is-active`, true);
+    const { selectedProject, setSelectedProject, projectOptions } = useProjectFilter({ localStorePrefix });
 
     const clearFilters = () => {
         setOnlyActive(false);