fix: refresh project after import (#7082)

frontend/src/component/project/Project/Import/import/ImportStage.tsx

@@ -12,8 +12,8 @@ import { PulsingAvatar } from '../PulsingAvatar';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Box } from '@mui/system';
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
-import useProject from 'hooks/api/getters/useProject/useProject';
 import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
+import { useProjectFeatureSearch } from '../../PaginatedProjectFeatureToggles/useProjectFeatureSearch';
 
 export const ImportStatusArea = styled(Box)(({ theme }) => ({
     padding: theme.spacing(4, 2, 2, 2),
@@ -65,7 +65,7 @@ export const ImportStage: FC<{
     onClose: () => void;
 }> = ({ environment, project, payload, onClose }) => {
     const { createImport, loading, errors } = useImportApi();
-    const { refetch: refreshProject } = useProject(project);
+    const { refetch: refreshProject } = useProjectFeatureSearch(project);
     const { refetch: refreshChangeRequests } =
         usePendingChangeRequests(project);
     const { setToastData } = useToast();

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -20,23 +20,6 @@ import {
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { useFeatureToggleSwitch } from '../ProjectFeatureToggles/FeatureToggleSwitch/useFeatureToggleSwitch';
 import useLoading from 'hooks/useLoading';
-import {
-    DEFAULT_PAGE_LIMIT,
-    useFeatureSearch,
-} from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
-import mapValues from 'lodash.mapvalues';
-import { usePersistentTableState } from 'hooks/usePersistentTableState';
-import {
-    BooleansStringParam,
-    FilterItemParam,
-} from 'utils/serializeQueryParams';
-import {
-    ArrayParam,
-    encodeQueryParams,
-    NumberParam,
-    StringParam,
-    withDefault,
-} from 'use-query-params';
 import { ProjectFeatureTogglesHeader } from './ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader';
 import { createColumnHelper, useReactTable } from '@tanstack/react-table';
 import { withTableState } from 'utils/withTableState';
@@ -52,11 +35,10 @@ import { useRowActions } from './hooks/useRowActions';
 import { useSelectedData } from './hooks/useSelectedData';
 import { FeatureOverviewCell } from '../../../common/Table/cells/FeatureOverviewCell/FeatureOverviewCell';
 import { useUiFlag } from 'hooks/useUiFlag';
+import { useProjectFeatureSearch } from './useProjectFeatureSearch';
 
 interface IPaginatedProjectFeatureTogglesProps {
     environments: string[];
-    refreshInterval?: number;
-    storageKey?: string;
 }
 
 const formatEnvironmentColumnId = (environment: string) =>
@@ -67,46 +49,24 @@ const getRowId = (row: { name: string }) => row.name;
 
 export const ProjectFeatureToggles = ({
     environments,
-    refreshInterval = 15 * 1000,
-    storageKey = 'project-feature-toggles-v2',
 }: IPaginatedProjectFeatureTogglesProps) => {
     const projectId = useRequiredPathParam('projectId');
 
-    const stateConfig = {
+    const {
-        offset: withDefault(NumberParam, 0),
+        features,
-        limit: withDefault(NumberParam, DEFAULT_PAGE_LIMIT),
+        total,
-        query: StringParam,
+        refetch,
-        favoritesFirst: withDefault(BooleansStringParam, true),
+        loading,
-        sortBy: withDefault(StringParam, 'createdAt'),
+        initialLoad,
-        sortOrder: withDefault(StringParam, 'desc'),
+        tableState,
-        columns: ArrayParam,
+        setTableState,
-        tag: FilterItemParam,
+    } = useProjectFeatureSearch(projectId);
-        createdAt: FilterItemParam,
-    };
-    const [tableState, setTableState] = usePersistentTableState(
-        `${storageKey}-${projectId}`,
-        stateConfig,
-    );
 
     const filterState = {
         tag: tableState.tag,
         createdAt: tableState.createdAt,
     };
 
-    const { columns: _, ...apiTableState } = tableState;
-    const { features, total, refetch, loading, initialLoad } = useFeatureSearch(
-        mapValues(
-            {
-                ...encodeQueryParams(stateConfig, apiTableState),
-                project: `IS:${projectId}`,
-            },
-            (value) => (value ? `${value}` : undefined),
-        ),
-        {
-            refreshInterval,
-        },
-    );
-
     const { favorite, unfavorite } = useFavoriteFeaturesApi();
     const onFavorite = useCallback(
         async (feature: FeatureSearchResponseSchema) => {

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/useProjectFeatureSearch.ts

@@ -0,0 +1,63 @@
+import {
+    ArrayParam,
+    encodeQueryParams,
+    NumberParam,
+    StringParam,
+    withDefault,
+} from 'use-query-params';
+import {
+    DEFAULT_PAGE_LIMIT,
+    useFeatureSearch,
+} from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
+import {
+    BooleansStringParam,
+    FilterItemParam,
+} from 'utils/serializeQueryParams';
+import { usePersistentTableState } from 'hooks/usePersistentTableState';
+import mapValues from 'lodash.mapvalues';
+
+export const useProjectFeatureSearch = (
+    projectId: string,
+    storageKey = 'project-overview-v2',
+    refreshInterval = 15 * 1000,
+) => {
+    const stateConfig = {
+        offset: withDefault(NumberParam, 0),
+        limit: withDefault(NumberParam, DEFAULT_PAGE_LIMIT),
+        query: StringParam,
+        favoritesFirst: withDefault(BooleansStringParam, true),
+        sortBy: withDefault(StringParam, 'createdAt'),
+        sortOrder: withDefault(StringParam, 'desc'),
+        columns: ArrayParam,
+        tag: FilterItemParam,
+        createdAt: FilterItemParam,
+    };
+    const [tableState, setTableState] = usePersistentTableState(
+        `${storageKey}-${projectId}`,
+        stateConfig,
+    );
+
+    const { columns: _, ...apiTableState } = tableState;
+    const { features, total, refetch, loading, initialLoad } = useFeatureSearch(
+        mapValues(
+            {
+                ...encodeQueryParams(stateConfig, apiTableState),
+                project: `IS:${projectId}`,
+            },
+            (value) => (value ? `${value}` : undefined),
+        ),
+        {
+            refreshInterval,
+        },
+    );
+
+    return {
+        features,
+        total,
+        refetch,
+        loading,
+        initialLoad,
+        tableState,
+        setTableState,
+    };
+};

frontend/src/component/project/Project/ProjectOverview.tsx

@@ -32,9 +32,7 @@ const StyledContentContainer = styled(Box)(({ theme }) => ({
     minWidth: 0,
 }));
 
-const ProjectOverview: FC<{
+const ProjectOverview: FC = () => {
-    storageKey?: string;
-}> = ({ storageKey = 'project-overview-v2' }) => {
     const projectId = useRequiredPathParam('projectId');
     const projectName = useProjectOverviewNameOrId(projectId);
 
@@ -58,8 +56,6 @@ const ProjectOverview: FC<{
                         environments={project.environments.map(
                             (environment) => environment.environment,
                         )}
-                        refreshInterval={refreshInterval}
-                        storageKey={storageKey}
                     />
                 </StyledProjectToggles>
             </StyledContentContainer>