refactor: pass feature to feature overview metadata component (#9803)

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx

@@ -86,6 +86,8 @@ export const FeatureOverview = () => {
                         onEnvironmentVisibilityChange={
                             onEnvironmentVisibilityChange
                         }
+                        feature={feature}
+                        onChange={refetchFeature}
                     />
                 </div>
                 <StyledMainContent>

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(
         <Routes>
             <Route
                 path={'/projects/:projectId/features/:featureId'}
-                element={<FeatureOverviewMetaData />}
+                element={
+                    <FeatureOverviewMetaData
+                        feature={feature}
+                        onChange={() => {}}
+                    />
+                }
             />
         </Routes>,
         {
@@ -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(
         <Routes>
             <Route
                 path={'/projects/:projectId/features/:featureId'}
-                element={<FeatureOverviewMetaData />}
+                element={
+                    <FeatureOverviewMetaData
+                        feature={feature}
+                        onChange={() => {}}
+                    />
+                }
             />
         </Routes>,
         {
@@ -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(
         <Routes>
             <Route
                 path={'/projects/:projectId/features/:featureId'}
-                element={<FeatureOverviewMetaData />}
+                element={
+                    <FeatureOverviewMetaData
+                        feature={feature}
+                        onChange={() => {}}
+                    />
+                }
             />
         </Routes>,
         { 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(
         <Routes>
             <Route
                 path={'/projects/:projectId/features/:featureId'}
-                element={<FeatureOverviewMetaData />}
+                element={
+                    <FeatureOverviewMetaData
+                        feature={feature}
+                        onChange={() => {}}
+                    />
+                }
             />
         </Routes>,
         { route },
@@ -184,17 +195,22 @@ const feature = {
 } as IFeatureToggle;
 
 test('delete dependency', async () => {
-    setupFeatureApi({
+    const featureWithDeps = {
         ...feature,
         dependencies: [{ feature: 'some_parent' }],
-    });
+    };
     render(
         <>
             <ToastRenderer />
             <Routes>
                 <Route
                     path={'/projects/:projectId/features/:featureId'}
-                    element={<FeatureOverviewMetaData />}
+                    element={
+                        <FeatureOverviewMetaData
+                            feature={featureWithDeps}
+                            onChange={() => {}}
+                        />
+                    }
                 />
             </Routes>
         </>,
@@ -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(
         <>
             <ToastRenderer />
             <Routes>
                 <Route
                     path={'/projects/:projectId/features/:featureId'}
-                    element={<FeatureOverviewMetaData />}
+                    element={
+                        <FeatureOverviewMetaData
+                            feature={featureWithDeps}
+                            onChange={() => {}}
+                        />
+                    }
                 />
             </Routes>
         </>,
@@ -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(
         <Routes>
             <Route
                 path={'/projects/:projectId/features/:featureId'}
-                element={<FeatureOverviewMetaData />}
+                element={
+                    <FeatureOverviewMetaData
+                        feature={featureWithDeps}
+                        onChange={() => {}}
+                    />
+                }
             />
         </Routes>,
         {
@@ -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(
         <Routes>
             <Route
                 path={'/projects/:projectId/features/:featureId'}
-                element={<FeatureOverviewMetaData />}
+                element={
+                    <FeatureOverviewMetaData
+                        feature={featureWithDeps}
+                        onChange={() => {}}
+                    />
+                }
             />
         </Routes>,
         { 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(
         <Routes>
             <Route
                 path={'/projects/:projectId/features/:featureId'}
-                element={<FeatureOverviewMetaData />}
+                element={
+                    <FeatureOverviewMetaData
+                        feature={featureWithDeps}
+                        onChange={() => {}}
+                    />
+                }
             />
         </Routes>,
         { 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(
         <Routes>
             <Route
                 path={'/projects/:projectId/features/:featureId'}
-                element={<FeatureOverviewMetaData />}
+                element={
+                    <FeatureOverviewMetaData
+                        feature={featureWithDeps}
+                        onChange={() => {}}
+                    />
+                }
             />
         </Routes>,
         { route },

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<FeatureOverviewMetaDataProps> = ({
     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<FeatureOverviewMetaDataProps> = ({
                                 onComplete={() =>
                                     setMarkCompletedDialogueOpen(true)
                                 }
-                                onUncomplete={refetchFeature}
+                                onUncomplete={onChange}
                             />
                         </StyledMetaDataItem>
                     ) : null}
@@ -181,7 +180,7 @@ const FeatureOverviewMetaData: FC<FeatureOverviewMetaDataProps> = ({
             {feature.children.length > 0 ? (
                 <FeatureArchiveNotAllowedDialog
                     features={feature.children}
-                    project={projectId}
+                    project={feature.project}
                     isOpen={archiveDialogOpen}
                     onClose={() => setArchiveDialogOpen(false)}
                 />
@@ -189,11 +188,11 @@ const FeatureOverviewMetaData: FC<FeatureOverviewMetaDataProps> = ({
                 <FeatureArchiveDialog
                     isOpen={archiveDialogOpen}
                     onConfirm={() => {
-                        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<FeatureOverviewMetaDataProps> = ({
                     setIsOpen={setMarkCompletedDialogueOpen}
                     projectId={feature.project}
                     featureId={feature.name}
-                    onComplete={refetchFeature}
+                    onComplete={onChange}
                 />
             ) : null}
         </>