diff --git a/frontend/src/component/project/Project/Import/Import.test.tsx b/frontend/src/component/project/Project/Import/Import.test.tsx index 0cf050b77b..b8c34406c1 100644 --- a/frontend/src/component/project/Project/Import/Import.test.tsx +++ b/frontend/src/component/project/Project/Import/Import.test.tsx @@ -42,9 +42,21 @@ test('Import happy path', async () => { const setOpen = (open: boolean) => { closed = !open; }; - render(, { - permissions: [{ permission: CREATE_FEATURE }], - }); + let imported = false; + const onImport = () => { + imported = true; + }; + render( + , + { + permissions: [{ permission: CREATE_FEATURE }], + }, + ); // configure stage screen.getByText('Import options'); @@ -76,6 +88,8 @@ test('Import happy path', async () => { await screen.findByText('Importing...'); await screen.findByText('Import completed'); + expect(imported).toBe(true); + expect(closed).toBe(false); const closeButton = screen.getByText('Close'); closeButton.click(); @@ -85,9 +99,18 @@ test('Import happy path', async () => { test('Block when importing non json content', async () => { setupApi(); const setOpen = () => {}; - render(, { - permissions: [{ permission: CREATE_FEATURE }], - }); + const onImport = () => {}; + render( + , + { + permissions: [{ permission: CREATE_FEATURE }], + }, + ); const codeEditorLabel = screen.getByText('Code editor'); codeEditorLabel.click(); @@ -123,9 +146,18 @@ test('Show validation errors', async () => { 'post', ); const setOpen = () => {}; - render(, { - permissions: [{ permission: CREATE_FEATURE }], - }); + const onImport = () => {}; + render( + , + { + permissions: [{ permission: CREATE_FEATURE }], + }, + ); await importFile('{}'); await waitFor(() => { diff --git a/frontend/src/component/project/Project/Import/ImportModal.tsx b/frontend/src/component/project/Project/Import/ImportModal.tsx index 9147065a72..f254f387b9 100644 --- a/frontend/src/component/project/Project/Import/ImportModal.tsx +++ b/frontend/src/component/project/Project/Import/ImportModal.tsx @@ -47,9 +47,15 @@ interface IImportModalProps { open: boolean; setOpen: (value: boolean) => void; project: string; + onImport: () => void; } -export const ImportModal = ({ open, setOpen, project }: IImportModalProps) => { +export const ImportModal = ({ + open, + setOpen, + project, + onImport, +}: IImportModalProps) => { const [importStage, setImportStage] = useState('configure'); const [environment, setEnvironment] = useState(''); const [importPayload, setImportPayload] = useState(''); @@ -135,6 +141,7 @@ export const ImportModal = ({ open, setOpen, project }: IImportModalProps) => { environment={environment} payload={importPayload} onClose={close} + onImport={onImport} /> } /> diff --git a/frontend/src/component/project/Project/Import/import/ImportStage.tsx b/frontend/src/component/project/Project/Import/import/ImportStage.tsx index 192788edc4..337a6ae0fd 100644 --- a/frontend/src/component/project/Project/Import/import/ImportStage.tsx +++ b/frontend/src/component/project/Project/Import/import/ImportStage.tsx @@ -12,8 +12,6 @@ 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'; export const ImportStatusArea = styled(Box)(({ theme }) => ({ padding: theme.spacing(4, 2, 2, 2), @@ -63,19 +61,16 @@ export const ImportStage: FC<{ project: string; payload: string; onClose: () => void; -}> = ({ environment, project, payload, onClose }) => { + onImport: () => void; +}> = ({ environment, project, payload, onClose, onImport }) => { const { createImport, loading, errors } = useImportApi(); - const { refetch: refreshProject } = useProject(project); - const { refetch: refreshChangeRequests } = - usePendingChangeRequests(project); const { setToastData } = useToast(); const { isChangeRequestConfigured } = useChangeRequestsEnabled(project); useEffect(() => { createImport({ environment, project, data: JSON.parse(payload) }) .then(() => { - refreshProject(); - refreshChangeRequests(); + onImport(); }) .catch((error) => { setToastData({ diff --git a/frontend/src/component/project/Project/Import/useRefreshOnImport.ts b/frontend/src/component/project/Project/Import/useRefreshOnImport.ts new file mode 100644 index 0000000000..a0d9314d21 --- /dev/null +++ b/frontend/src/component/project/Project/Import/useRefreshOnImport.ts @@ -0,0 +1,16 @@ +import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests'; +import { useState } from 'react'; + +export const useRefreshOnImport = (projectId: string) => { + const { refetch: refreshChangeRequests } = + usePendingChangeRequests(projectId); + const [projectKey, setProjectKey] = useState(projectId); + const refreshProjectOverviewKey = () => { + setProjectKey(projectId + Date.now()); + }; + const refreshOnImport = () => { + refreshChangeRequests(); + refreshProjectOverviewKey(); + }; + return { refreshOnImport, projectKey }; +}; diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index 07fbb9c377..b29bdd08ca 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -14,7 +14,7 @@ import { StyledTabContainer, StyledTopRow, } from './Project.styles'; -import { Box, Paper, Tabs, Typography, styled } from '@mui/material'; +import { Box, Paper, styled, Tabs, Typography } from '@mui/material'; import FileUpload from '@mui/icons-material/FileUpload'; import useToast from 'hooks/useToast'; import useQueryParams from 'hooks/useQueryParams'; @@ -43,6 +43,7 @@ import { HiddenProjectIconWithTooltip } from './HiddenProjectIconWithTooltip/Hid import { ChangeRequestPlausibleProvider } from 'component/changeRequest/ChangeRequestContext'; import { ProjectApplications } from '../ProjectApplications/ProjectApplications'; import { ProjectInsights } from './ProjectInsights/ProjectInsights'; +import { useRefreshOnImport } from './Import/useRefreshOnImport'; const StyledBadge = styled(Badge)(({ theme }) => ({ position: 'absolute', @@ -190,6 +191,8 @@ export const Project = () => { ); + const { refreshOnImport, projectKey } = useRefreshOnImport(projectId); + return (
@@ -324,12 +327,16 @@ export const Project = () => { /> } /> } /> - } /> + } + />
); diff --git a/frontend/src/component/project/Project/ProjectOverview.tsx b/frontend/src/component/project/Project/ProjectOverview.tsx index 218c13c864..5ac3a94720 100644 --- a/frontend/src/component/project/Project/ProjectOverview.tsx +++ b/frontend/src/component/project/Project/ProjectOverview.tsx @@ -34,7 +34,8 @@ const StyledContentContainer = styled(Box)(({ theme }) => ({ const ProjectOverview: FC<{ storageKey?: string; -}> = ({ storageKey = 'project-overview-v2' }) => { + key: string; +}> = ({ key, storageKey = 'project-overview-v2' }) => { const projectId = useRequiredPathParam('projectId'); const projectName = useProjectOverviewNameOrId(projectId); @@ -49,7 +50,7 @@ const ProjectOverview: FC<{ }, [projectId, setLastViewed]); return ( - +