tech: migrate Tests and Test Suites slices to Zustand (#837)

* tech: migrate Tests to Zustand store
   - replace Redux slice with Zustand store
* tech: migrate Test Suites to Zustand store
   - replace Redux slice with Zustand store

src/AppRoot.tsx

@@ -28,6 +28,9 @@ import {useAppDispatch} from '@redux/hooks';
 import {useApiEndpoint} from '@services/apiEndpoint';
 import {useGetClusterConfigQuery} from '@services/config';
 
+import {initializeTestSuitesStore} from '@store/testSuites';
+import {initializeTestsStore} from '@store/tests';
+
 import {useTelemetry, useTelemetryValue} from '@telemetry/hooks';
 
 import anonymizeQueryString from '@utils/anonymizeQueryString';
@@ -47,6 +50,9 @@ const AppRoot: React.FC = () => {
   const telemetry = useTelemetry();
   const apiEndpoint = useApiEndpoint();
 
+  const [TestsProvider] = initializeTestsStore();
+  const [TestSuitesProvider] = initializeTestSuitesStore();
+
   const {currentData: clusterConfig, refetch: refetchClusterConfig} = useGetClusterConfigQuery();
 
   // Pause/resume telemetry based on the cluster settings
@@ -116,6 +122,8 @@ const AppRoot: React.FC = () => {
     .append(DashboardContext.Provider, {value: dashboardValue})
     .append(PermissionsProvider, {scope: permissionsScope, resolver: permissionsResolver})
     .append(MainContext.Provider, {value: mainContextValue})
+    .append(TestsProvider, {})
+    .append(TestSuitesProvider, {})
     .append(ModalHandler, {})
     .append(ModalOutletProvider, {})
     .render(

src/components/organisms/EntityList/EntityListContent/EntityListContent.tsx

@@ -30,6 +30,7 @@ import {StyledFiltersSection} from './EntityListContent.styled';
 
 const EntityListContent: React.FC<EntityListBlueprint> = props => {
   const {
+    itemKey,
     pageTitle,
     pageTitleAddon,
     pageDescription: PageDescription,
@@ -53,7 +54,7 @@ const EntityListContent: React.FC<EntityListBlueprint> = props => {
   const [isApplyingFilters, setIsApplyingFilters] = useState(false);
   const [isLoadingNext, setIsLoadingNext] = useState(false);
 
-  const {dispatch, isClusterAvailable} = useContext(MainContext);
+  const {isClusterAvailable} = useContext(MainContext);
   const {setModalConfig, setModalOpen} = useContext(ModalContext);
   const apiEndpoint = useApiEndpoint();
   const mayCreate = usePermission(Permissions.createEntity);
@@ -67,7 +68,7 @@ const EntityListContent: React.FC<EntityListBlueprint> = props => {
       selector: searchParams.get('selector')?.split(',').filter(Boolean) ?? undefined,
     });
     if (!isEqual(filters, queryFilters)) {
-      dispatch(setQueryFilters(filters));
+      setQueryFilters(filters);
     }
   }, []);
 
@@ -92,12 +93,12 @@ const EntityListContent: React.FC<EntityListBlueprint> = props => {
   }, [queryFilters]);
 
   const resetFilters = () => {
-    dispatch(setQueryFilters(initialFiltersState));
+    setQueryFilters(initialFiltersState);
   };
 
   const onScrollBottom = () => {
     setIsLoadingNext(true);
-    dispatch(setQueryFilters({...queryFilters, pageSize: queryFilters.pageSize + initialPageSize}));
+    setQueryFilters({...queryFilters, pageSize: queryFilters.pageSize + initialPageSize});
   };
 
   useEffect(() => {
@@ -159,7 +160,7 @@ const EntityListContent: React.FC<EntityListBlueprint> = props => {
       </PageHeader>
 
       <EntityGrid
-        itemKey="dataItem.name"
+        itemKey={itemKey}
         maxColumns={2}
         data={data}
         Component={CardComponent}

src/components/organisms/EntityList/EntityListFilters/LabelsFilter/LabelsFilter.tsx

@@ -1,9 +1,7 @@
-import {useContext, useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
 
 import {FilterFilled} from '@ant-design/icons';
 
-import {MainContext} from '@contexts';
-
 import {Button, Input, Title} from '@custom-antd';
 
 import usePressEnter from '@hooks/usePressEnter';
@@ -28,8 +26,6 @@ const defaultKeyValuePair: Entity = {
 const LabelsFilter: React.FC<FilterProps> = props => {
   const {setFilters, filters, isFiltersDisabled, width} = props;
 
-  const {dispatch} = useContext(MainContext);
-
   const [isVisible, setVisibilityState] = useState(false);
   const [labelsMapping, setLabelsMapping] = useState<EntityArray>([]);
 
@@ -133,14 +129,14 @@ const LabelsFilter: React.FC<FilterProps> = props => {
       return;
     }
 
-    dispatch(setFilters({...filters, selector: resultedFilters, pageSize: initialPageSize}));
+    setFilters({...filters, selector: resultedFilters, pageSize: initialPageSize});
     onOpenChange(false);
   };
 
   const resetFilters = () => {
     setLabelsMapping([defaultKeyValuePair]);
     onOpenChange(false);
-    dispatch(setFilters({...filters, selector: [], pageSize: initialPageSize}));
+    setFilters({...filters, selector: [], pageSize: initialPageSize});
   };
 
   const menu = (

src/components/organisms/EntityList/EntityListFilters/StatusFilter/StatusFilter.tsx

@@ -1,11 +1,9 @@
-import {useCallback, useContext, useMemo, useState} from 'react';
+import {useCallback, useMemo, useState} from 'react';
 
 import {FilterFilled} from '@ant-design/icons';
 
 import {capitalize} from 'lodash';
 
-import {MainContext} from '@contexts';
-
 import {FilterProps} from '@models/filters';
 
 import {
@@ -26,8 +24,6 @@ const statusList = ['queued', 'running', 'passed', 'failed', 'aborted'];
 const StatusFilter: React.FC<FilterProps> = props => {
   const {filters, setFilters, isFiltersDisabled} = props;
 
-  const {dispatch} = useContext(MainContext);
-
   const [isVisible, setVisibilityState] = useState(false);
 
   const onOpenChange = (flag: boolean) => {
@@ -37,19 +33,17 @@ const StatusFilter: React.FC<FilterProps> = props => {
   const handleClick = useCallback(
     (status: string) => {
       if (filters.status.includes(status)) {
-        dispatch(
-          setFilters({
-            ...filters,
-            status: filters.status.filter((currentStatus: string) => {
-              return status !== currentStatus;
-            }),
-          })
-        );
+        setFilters({
+          ...filters,
+          status: filters.status.filter((currentStatus: string) => {
+            return status !== currentStatus;
+          }),
+        });
       } else {
-        dispatch(setFilters({...filters, status: [...filters.status, status], pageSize: initialPageSize}));
+        setFilters({...filters, status: [...filters.status, status], pageSize: initialPageSize});
       }
     },
-    [dispatch, setFilters, filters]
+    [setFilters, filters]
   );
 
   const renderedStatuses = useMemo(() => {
@@ -69,7 +63,7 @@ const StatusFilter: React.FC<FilterProps> = props => {
   }, [filters.status, handleClick]);
 
   const resetFilter = () => {
-    dispatch(setFilters({...filters, status: [], pageSize: initialPageSize}));
+    setFilters({...filters, status: [], pageSize: initialPageSize});
     onOpenChange(false);
   };
 

src/components/organisms/EntityList/EntityListFilters/TextSearchFilter/TextSearchFilter.tsx

@@ -1,11 +1,9 @@
-import {useContext, useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
 import {useDebounce} from 'react-use';
 
 import {SearchOutlined} from '@ant-design/icons';
 import {Input} from 'antd';
 
-import {MainContext} from '@contexts';
-
 import {FilterProps} from '@models/filters';
 
 import {initialPageSize} from '@redux/initialState';
@@ -15,8 +13,6 @@ import Colors from '@styles/Colors';
 const TextSearchFilter: React.FC<FilterProps> = props => {
   const {filters, setFilters, isFiltersDisabled} = props;
 
-  const {dispatch} = useContext(MainContext);
-
   const [inputValue, setInputValue] = useState(filters.textSearch);
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -25,7 +21,7 @@ const TextSearchFilter: React.FC<FilterProps> = props => {
 
   const [, cancel] = useDebounce(
     () => {
-      dispatch(setFilters({...filters, textSearch: inputValue, pageSize: initialPageSize}));
+      setFilters({...filters, textSearch: inputValue, pageSize: initialPageSize});
     },
     300,
     [inputValue]

src/components/pages/TestSuites/TestSuitesList/TestSuiteCard.tsx

@@ -4,7 +4,7 @@ import {MainContext} from '@contexts';
 
 import useInViewport from '@hooks/useInViewport';
 
-import {TestSuiteWithExecutionRedux} from '@models/testSuite';
+import {TestSuiteWithExecution} from '@models/testSuite';
 
 import EntityGridItemPure, {Item} from '@molecules/EntityGrid/EntityGridItemPure';
 
@@ -13,26 +13,26 @@ import {useGetTestSuiteExecutionMetricsQuery} from '@services/testSuiteExecution
 import {PollingIntervals} from '@utils/numbers';
 
 export interface TestSuiteCardProps {
-  item: TestSuiteWithExecutionRedux;
+  item: TestSuiteWithExecution;
   onClick: (item: Item) => void;
   onAbort: (item: Item) => void;
 }
 
-const TestSuiteCard: FC<TestSuiteCardProps> = ({item: {dataItem, latestExecution}, onClick, onAbort}) => {
+const TestSuiteCard: FC<TestSuiteCardProps> = ({item: {testSuite, latestExecution}, onClick, onAbort}) => {
   const {isClusterAvailable} = useContext(MainContext);
 
   const ref = useRef(null);
   const isInViewport = useInViewport(ref);
 
   const {data: metrics} = useGetTestSuiteExecutionMetricsQuery(
-    {id: dataItem.name, last: 7, limit: 13},
+    {id: testSuite.name, last: 7, limit: 13},
     {skip: !isInViewport || !isClusterAvailable, pollingInterval: PollingIntervals.halfMin}
   );
 
   return (
     <EntityGridItemPure
       ref={ref}
-      item={dataItem}
+      item={testSuite}
       latestExecution={latestExecution}
       onClick={onClick}
       onAbort={onAbort}

src/components/pages/TestSuites/TestSuitesList/TestSuitesList.tsx

@@ -1,4 +1,4 @@
-import {FC, useCallback, useContext, useEffect} from 'react';
+import {FC, useCallback, useContext} from 'react';
 
 import {MainContext} from '@contexts';
 import {ModalConfig} from '@contexts/ModalContext';
@@ -13,17 +13,10 @@ import {EntityListContent} from '@organisms';
 
 import {usePluginSlot} from '@plugins/hooks';
 
-import {useAppSelector} from '@redux/hooks';
-import {initialTestSuitesFiltersState} from '@redux/initialState';
-import {
-  selectTestSuites,
-  selectTestSuitesFilters,
-  setTestSuites,
-  setTestSuitesFilters,
-} from '@redux/reducers/testSuitesSlice';
-
 import {useAbortAllTestSuiteExecutionsMutation, useGetTestSuitesQuery} from '@services/testSuites';
 
+import {initialFilters, useTestSuitesField, useTestSuitesSync} from '@store/testSuites';
+
 import {PollingIntervals} from '@utils/numbers';
 
 import EmptyTestSuites from './EmptyTestSuites';
@@ -41,17 +34,18 @@ const createModal: ModalConfig = {
 };
 
 const TestSuitesList: FC = () => {
-  const {dispatch, isClusterAvailable} = useContext(MainContext);
-  const queryFilters = useAppSelector(selectTestSuitesFilters);
-
-  const {data, isLoading, isFetching} = useGetTestSuitesQuery(queryFilters || null, {
+  const {isClusterAvailable} = useContext(MainContext);
+  const [filters, setFilters] = useTestSuitesField('filters');
+
+  const {
+    data: testSuites,
+    isLoading,
+    isFetching,
+  } = useGetTestSuitesQuery(filters || null, {
     pollingInterval: PollingIntervals.everySecond,
     skip: !isClusterAvailable,
   });
-
-  useEffect(() => {
-    dispatch(setTestSuites(data || []));
-  }, [data]);
+  useTestSuitesSync({testSuites});
 
   const [abortAll] = useAbortAllTestSuiteExecutionsMutation();
   const onItemClick = useDashboardNavigate((item: TestSuite) => `/test-suites/${item.name}`);
@@ -65,6 +59,7 @@ const TestSuitesList: FC = () => {
 
   return (
     <EntityListContent
+      itemKey="testSuite.name"
       CardComponent={TestSuiteCard}
       onItemClick={onItemClick}
       onItemAbort={onItemAbort}
@@ -74,11 +69,11 @@ const TestSuitesList: FC = () => {
       addEntityButtonText="Add a new test suite"
       pageDescription={PageDescription}
       emptyDataComponent={EmptyTestSuites}
-      initialFiltersState={initialTestSuitesFiltersState}
+      initialFiltersState={initialFilters}
       dataTest="add-a-new-test-suite-btn"
-      queryFilters={queryFilters}
-      setQueryFilters={setTestSuitesFilters}
-      data={useAppSelector(selectTestSuites)}
+      queryFilters={filters}
+      setQueryFilters={setFilters}
+      data={testSuites}
       isLoading={isLoading}
       isFetching={isFetching}
       createModalConfig={createModal}

src/components/pages/Tests/TestsList/TestCard.tsx

@@ -4,7 +4,7 @@ import {MainContext} from '@contexts';
 
 import useInViewport from '@hooks/useInViewport';
 
-import {TestWithExecutionRedux} from '@models/test';
+import {TestWithExecution} from '@models/test';
 
 import EntityGridItemPure, {Item} from '@molecules/EntityGrid/EntityGridItemPure';
 
@@ -13,26 +13,26 @@ import {useGetTestExecutionMetricsQuery} from '@services/tests';
 import {PollingIntervals} from '@utils/numbers';
 
 export interface TestCardProps {
-  item: TestWithExecutionRedux;
+  item: TestWithExecution;
   onClick: (item: Item) => void;
   onAbort: (item: Item) => void;
 }
 
-const TestCard: FC<TestCardProps> = ({item: {dataItem, latestExecution}, onClick, onAbort}) => {
+const TestCard: FC<TestCardProps> = ({item: {test, latestExecution}, onClick, onAbort}) => {
   const {isClusterAvailable} = useContext(MainContext);
 
   const ref = useRef(null);
   const isInViewport = useInViewport(ref);
 
   const {data: metrics} = useGetTestExecutionMetricsQuery(
-    {id: dataItem.name, last: 7, limit: 13},
+    {id: test.name, last: 7, limit: 13},
     {skip: !isInViewport || !isClusterAvailable, pollingInterval: PollingIntervals.halfMin}
   );
 
   return (
     <EntityGridItemPure
       ref={ref}
-      item={dataItem}
+      item={test}
       latestExecution={latestExecution}
       onClick={onClick}
       onAbort={onAbort}