diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx index 34132340e2..5c4816690e 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx @@ -86,6 +86,8 @@ export const FeatureOverview = () => { onEnvironmentVisibilityChange={ onEnvironmentVisibilityChange } + feature={feature} + onChange={refetchFeature} /> diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.test.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.test.tsx index 3acbd2d4df..c63f4ec4ae 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.test.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.test.tsx @@ -66,14 +66,6 @@ const setupChangeRequestApi = () => { ); }; -const setupFeatureApi = (feature: IFeatureToggle) => { - testServerRoute( - server, - '/api/admin/projects/default/features/feature', - feature, - ); -}; - beforeEach(() => { setupApi(); }); @@ -81,12 +73,16 @@ beforeEach(() => { const route = '/projects/default/features/feature'; test('show dependency dialogue', async () => { - setupFeatureApi(feature); render( } + element={ + {}} + /> + } /> , { @@ -105,18 +101,23 @@ test('show dependency dialogue', async () => { }); test('show dependency dialogue for OSS with dependencies', async () => { - setupOssWithExistingDependencies(); - setupFeatureApi({ + const feature = { name: 'feature', project: 'default', dependencies: [] as Array<{ feature: string }>, children: [] as string[], - } as IFeatureToggle); + } as IFeatureToggle; + setupOssWithExistingDependencies(); render( } + element={ + {}} + /> + } /> , { @@ -135,17 +136,22 @@ test('show dependency dialogue for OSS with dependencies', async () => { }); test('show child', async () => { - setupFeatureApi({ + const feature = { name: 'feature', project: 'default', dependencies: [] as Array<{ feature: string }>, children: ['some_child'], - } as IFeatureToggle); + } as IFeatureToggle; render( } + element={ + {}} + /> + } /> , { route }, @@ -156,17 +162,22 @@ test('show child', async () => { }); test('show children', async () => { - setupFeatureApi({ + const feature = { name: 'feature', project: 'default', dependencies: [] as Array<{ feature: string }>, children: ['some_child', 'some_other_child'], - } as IFeatureToggle); + } as IFeatureToggle; render( } + element={ + {}} + /> + } /> , { route }, @@ -184,17 +195,22 @@ const feature = { } as IFeatureToggle; test('delete dependency', async () => { - setupFeatureApi({ + const featureWithDeps = { ...feature, dependencies: [{ feature: 'some_parent' }], - }); + }; render( <> } + element={ + {}} + /> + } /> , @@ -221,18 +237,23 @@ test('delete dependency', async () => { }); test('delete dependency with change request', async () => { - setupChangeRequestApi(); - setupFeatureApi({ + const featureWithDeps = { ...feature, dependencies: [{ feature: 'some_parent' }], - }); + }; + setupChangeRequestApi(); render( <> } + element={ + {}} + /> + } /> , @@ -259,15 +280,20 @@ test('delete dependency with change request', async () => { }); test('edit dependency', async () => { - setupFeatureApi({ + const featureWithDeps = { ...feature, dependencies: [{ feature: 'some_parent', enabled: false }], - }); + }; render( } + element={ + {}} + /> + } /> , { @@ -295,7 +321,7 @@ test('edit dependency', async () => { }); test('show variant dependencies', async () => { - setupFeatureApi({ + const featureWithDeps = { ...feature, dependencies: [ { @@ -304,12 +330,17 @@ test('show variant dependencies', async () => { variants: ['variantA', 'variantB'], }, ], - }); + }; render( } + element={ + {}} + /> + } /> , { route }, @@ -324,7 +355,7 @@ test('show variant dependencies', async () => { }); test('show variant dependency', async () => { - setupFeatureApi({ + const featureWithDeps = { ...feature, dependencies: [ { @@ -333,12 +364,17 @@ test('show variant dependency', async () => { variants: ['variantA'], }, ], - }); + }; render( } + element={ + {}} + /> + } /> , { route }, @@ -348,7 +384,7 @@ test('show variant dependency', async () => { }); test('show disabled dependency', async () => { - setupFeatureApi({ + const featureWithDeps = { ...feature, dependencies: [ { @@ -356,12 +392,17 @@ test('show disabled dependency', async () => { enabled: false, }, ], - }); + }; render( } + element={ + {}} + /> + } /> , { route }, diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx index f86f08ad33..fcc6a6b7cf 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx @@ -1,8 +1,6 @@ import { type FC, useState } from 'react'; import { styled } from '@mui/material'; import { useNavigate } from 'react-router-dom'; -import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; -import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { FeatureArchiveDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveDialog'; import { FeatureArchiveNotAllowedDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveNotAllowedDialog'; import { formatDateYMD } from 'utils/formatDate'; @@ -17,6 +15,7 @@ import { capitalizeFirst } from 'utils/capitalizeFirst'; import { Collaborators } from './Collaborators'; import { EnvironmentVisibilityMenu } from './EnvironmentVisibilityMenu/EnvironmentVisibilityMenu'; import { Truncator } from 'component/common/Truncator/Truncator'; +import type { IFeatureToggle } from '../../../../../interfaces/featureToggle'; const StyledMetaDataContainer = styled('div')(({ theme }) => ({ padding: theme.spacing(3), @@ -69,16 +68,16 @@ export const StyledMetaDataItemValue = styled('div')(({ theme }) => ({ type FeatureOverviewMetaDataProps = { hiddenEnvironments?: string[]; onEnvironmentVisibilityChange?: (environment: string) => void; + feature: IFeatureToggle; + onChange: () => void; }; const FeatureOverviewMetaData: FC = ({ hiddenEnvironments, onEnvironmentVisibilityChange, + feature, + onChange, }) => { - const projectId = useRequiredPathParam('projectId'); - const featureId = useRequiredPathParam('featureId'); - const { feature, refetchFeature } = useFeature(projectId, featureId); - const { locationSettings } = useLocationSettings(); const navigate = useNavigate(); @@ -125,7 +124,7 @@ const FeatureOverviewMetaData: FC = ({ onComplete={() => setMarkCompletedDialogueOpen(true) } - onUncomplete={refetchFeature} + onUncomplete={onChange} /> ) : null} @@ -181,7 +180,7 @@ const FeatureOverviewMetaData: FC = ({ {feature.children.length > 0 ? ( setArchiveDialogOpen(false)} /> @@ -189,11 +188,11 @@ const FeatureOverviewMetaData: FC = ({ { - navigate(`/projects/${projectId}`); + navigate(`/projects/${feature.project}`); }} onClose={() => setArchiveDialogOpen(false)} - projectId={projectId} - featureIds={[featureId]} + projectId={feature.project} + featureIds={[feature.name]} /> )} {feature.project ? ( @@ -202,7 +201,7 @@ const FeatureOverviewMetaData: FC = ({ setIsOpen={setMarkCompletedDialogueOpen} projectId={feature.project} featureId={feature.name} - onComplete={refetchFeature} + onComplete={onChange} /> ) : null}