feat: archive reminder (#9779)

frontend/src/component/feature/FeatureView/CleanupReminder/CleanupReminder.test.tsx

@@ -3,7 +3,10 @@ import { CleanupReminder } from './CleanupReminder';
 import { render } from 'utils/testRenderer';
 import type { IFeatureToggle } from 'interfaces/featureToggle';
 import { screen } from '@testing-library/react';
-import { UPDATE_FEATURE } from '../../../providers/AccessProvider/permissions';
+import {
+    DELETE_FEATURE,
+    UPDATE_FEATURE,
+} from '../../../providers/AccessProvider/permissions';
 
 const currentTime = '2024-04-25T08:05:00.000Z';
 const monthAgo = '2024-03-25T06:05:00.000Z';
@@ -26,7 +29,8 @@ test('render complete feature reminder', async () => {
     await screen.findByText('31 days');
 
     button.click();
-    await screen.findByText('Cancel');
+    const cancel = await screen.findByText('Cancel');
+    cancel.click();
 });
 
 test('render remove flag from code reminder', async () => {
@@ -61,11 +65,17 @@ test('render archive flag reminder', async () => {
         type: 'release',
         lifecycle: { stage: 'completed', enteredStageAt: monthAgo },
         environments: [{ name: 'prod', type: 'production', enabled: true }],
+        children: ['child1'],
     } as IFeatureToggle;
 
     render(<CleanupReminder feature={feature} onChange={() => {}} />, {
-        permissions: [{ permission: UPDATE_FEATURE }],
+        permissions: [{ permission: DELETE_FEATURE }],
     });
 
-    await screen.findByText('Time to clean up technical debt?');
+    const button = await screen.findByText('Archive flag');
+    button.click();
+
+    await screen.findByText('child1');
+    const okButton = await screen.findByText('OK');
+    okButton.click();
 });

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

@@ -5,11 +5,17 @@ import { parseISO } from 'date-fns';
 import differenceInDays from 'date-fns/differenceInDays';
 
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';
-import { UPDATE_FEATURE } from '../../../providers/AccessProvider/permissions';
+import {
+    DELETE_FEATURE,
+    UPDATE_FEATURE,
+} from '../../../providers/AccessProvider/permissions';
 import { MarkCompletedDialogue } from '../FeatureOverview/FeatureLifecycle/MarkCompletedDialogue';
 import { populateCurrentStage } from '../FeatureOverview/FeatureLifecycle/populateCurrentStage';
 import { isSafeToArchive } from '../FeatureOverview/FeatureLifecycle/isSafeToArchive';
 import type { IFeatureToggle } from 'interfaces/featureToggle';
+import { FeatureArchiveNotAllowedDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveNotAllowedDialog';
+import { FeatureArchiveDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveDialog';
+import { useNavigate } from 'react-router-dom';
 
 const StyledBox = styled(Box)(({ theme }) => ({
     marginRight: theme.spacing(2),
@@ -22,8 +28,11 @@ export const CleanupReminder: FC<{
     feature: IFeatureToggle;
     onChange: () => void;
 }> = ({ feature, onChange }) => {
+    const navigate = useNavigate();
+
     const [markCompleteDialogueOpen, setMarkCompleteDialogueOpen] =
         useState(false);
+    const [archiveDialogueOpen, setArchiveDialogueOpen] = useState(false);
 
     const currentStage = populateCurrentStage(feature);
     const isRelevantType =
@@ -94,13 +103,47 @@ export const CleanupReminder: FC<{
             )}
 
             {reminder === 'archive' && (
-                <Alert severity='warning'>
+                <>
+                    <Alert
+                        severity='warning'
+                        action={
+                            <PermissionButton
+                                variant='contained'
+                                permission={DELETE_FEATURE}
+                                size='small'
+                                sx={{ mb: 2 }}
+                                onClick={() => setArchiveDialogueOpen(true)}
+                                projectId={feature.project}
+                            >
+                                Archive flag
+                            </PermissionButton>
+                        }
+                    >
                         <b>Time to clean up technical debt?</b>
                         <p>
-                        We haven't observed any metrics for this flag lately.
-                        Can it be archived?
+                            We haven't observed any metrics for this flag
+                            lately. Can it be archived?
                         </p>
                     </Alert>
+                    {feature.children.length > 0 ? (
+                        <FeatureArchiveNotAllowedDialog
+                            features={feature.children}
+                            project={feature.project}
+                            isOpen={archiveDialogueOpen}
+                            onClose={() => setArchiveDialogueOpen(false)}
+                        />
+                    ) : (
+                        <FeatureArchiveDialog
+                            isOpen={archiveDialogueOpen}
+                            onConfirm={() => {
+                                navigate(`/projects/${feature.project}`);
+                            }}
+                            onClose={() => setArchiveDialogueOpen(false)}
+                            projectId={feature.project}
+                            featureIds={[feature.name]}
+                        />
+                    )}
+                </>
             )}
 
             {reminder === 'removeCode' && (