feat: archive toggles in change request UI (#4563)

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ArchiveFeatureChange.tsx

@@ -0,0 +1,22 @@
+import { FC, ReactNode } from 'react';
+import { Box, styled } from '@mui/material';
+import { ChangeItemWrapper } from './StrategyChange';
+
+const ArchiveBox = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    color: theme.palette.error.main,
+}));
+
+interface IArchiveFeatureChange {
+    actions?: ReactNode;
+}
+
+export const ArchiveFeatureChange: FC<IArchiveFeatureChange> = ({
+    actions,
+}) => (
+    <ChangeItemWrapper>
+        <ArchiveBox>Archiving feature</ArchiveBox>
+        {actions}
+    </ChangeItemWrapper>
+);

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/FeatureChange.tsx

@@ -11,6 +11,7 @@ import { ToggleStatusChange } from './ToggleStatusChange';
 import { StrategyChange } from './StrategyChange';
 import { VariantPatch } from './VariantPatch/VariantPatch';
 import { EnvironmentStrategyExecutionOrder } from './EnvironmentStrategyExecutionOrder/EnvironmentStrategyExecutionOrder';
+import { ArchiveFeatureChange } from './ArchiveFeatureChange';
 
 const StyledSingleChangeBox = styled(Box, {
     shouldForwardProp: (prop: string) => !prop.startsWith('$'),
@@ -90,6 +91,9 @@ export const FeatureChange: FC<{
                         actions={actions}
                     />
                 )}
+                {change.action === 'archiveFeature' && (
+                    <ArchiveFeatureChange actions={actions} />
+                )}
 
                 {change.action === 'addStrategy' ||
                 change.action === 'deleteStrategy' ||

frontend/src/component/changeRequest/changeRequest.types.ts

@@ -78,7 +78,8 @@ type ChangeRequestPayload =
     | ChangeRequestVariantPatch
     | IChangeRequestUpdateSegment
     | IChangeRequestDeleteSegment
-    | SetStrategySortOrderSchema;
+    | SetStrategySortOrderSchema
+    | IChangeRequestArchiveFeature;
 
 export interface IChangeRequestAddStrategy extends IChangeRequestChangeBase {
     action: 'addStrategy';
@@ -105,6 +106,10 @@ export interface IChangeRequestPatchVariant extends IChangeRequestChangeBase {
     payload: ChangeRequestVariantPatch;
 }
 
+export interface IChangeRequestArchiveFeature extends IChangeRequestChangeBase {
+    action: 'archiveFeature';
+}
+
 export interface IChangeRequestReorderStrategy
     extends IChangeRequestChangeBase {
     action: 'reorderStrategy';
@@ -144,7 +149,8 @@ export type IFeatureChange =
     | IChangeRequestUpdateStrategy
     | IChangeRequestEnabled
     | IChangeRequestPatchVariant
-    | IChangeRequestReorderStrategy;
+    | IChangeRequestReorderStrategy
+    | IChangeRequestArchiveFeature;
 
 export type ISegmentChange =
     | IChangeRequestUpdateSegment
@@ -178,4 +184,5 @@ export type ChangeRequestAction =
     | 'patchVariant'
     | 'reorderStrategy'
     | 'updateSegment'
-    | 'deleteSegment';
+    | 'deleteSegment'
+    | 'archiveFeature';

frontend/src/component/common/FeatureArchiveDialog/FeatureArchiveDialog.test.tsx

@@ -0,0 +1,119 @@
+import { vi } from 'vitest';
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
+import { FeatureArchiveDialog } from './FeatureArchiveDialog';
+import { UIProviderContainer } from 'component/providers/UIProvider/UIProviderContainer';
+
+const server = testServerSetup();
+const setupHappyPathForChangeRequest = () => {
+    testServerRoute(
+        server,
+        '/api/admin/projects/projectId/environments/development/change-requests',
+        {},
+        'post'
+    );
+    testServerRoute(
+        server,
+        '/api/admin/projects/projectId/change-requests/config',
+        [
+            {
+                environment: 'development',
+                type: 'development',
+                requiredApprovals: 1,
+                changeRequestEnabled: true,
+            },
+        ]
+    );
+    testServerRoute(server, '/api/admin/ui-config', {
+        versionInfo: {
+            current: { oss: 'version', enterprise: 'version' },
+        },
+    });
+};
+
+test('Add single archive feature change to change request', async () => {
+    const onClose = vi.fn();
+    const onConfirm = vi.fn();
+    setupHappyPathForChangeRequest();
+    render(
+        <UIProviderContainer>
+            <FeatureArchiveDialog
+                featureIds={['featureA']}
+                projectId={'projectId'}
+                isOpen={true}
+                onClose={onClose}
+                onConfirm={onConfirm}
+                featuresWithUsage={[]}
+            />
+        </UIProviderContainer>
+    );
+
+    expect(screen.getByText('Archive feature toggle')).toBeInTheDocument();
+    const button = await screen.findByText('Add change to draft');
+
+    button.click();
+
+    await waitFor(() => {
+        expect(onConfirm).toBeCalledTimes(1);
+    });
+    expect(onClose).toBeCalledTimes(1);
+});
+
+test('Add multiple archive feature changes to change request', async () => {
+    const onClose = vi.fn();
+    const onConfirm = vi.fn();
+    setupHappyPathForChangeRequest();
+    render(
+        <UIProviderContainer>
+            <FeatureArchiveDialog
+                featureIds={['featureA', 'featureB']}
+                projectId={'projectId'}
+                isOpen={true}
+                onClose={onClose}
+                onConfirm={onConfirm}
+                featuresWithUsage={[]}
+            />
+        </UIProviderContainer>
+    );
+
+    await screen.findByText('Archive feature toggles');
+    const button = await screen.findByText('Add to change request');
+
+    button.click();
+
+    await waitFor(() => {
+        expect(onConfirm).toBeCalledTimes(1);
+    });
+    expect(onClose).toBeCalledTimes(1);
+});
+
+test('Skip change request', async () => {
+    const onClose = vi.fn();
+    const onConfirm = vi.fn();
+    setupHappyPathForChangeRequest();
+    render(
+        <UIProviderContainer>
+            <FeatureArchiveDialog
+                featureIds={['featureA', 'featureB']}
+                projectId={'projectId'}
+                isOpen={true}
+                onClose={onClose}
+                onConfirm={onConfirm}
+                featuresWithUsage={[]}
+            />
+        </UIProviderContainer>,
+        { permissions: [{ permission: 'SKIP_CHANGE_REQUEST' }] }
+    );
+
+    await screen.findByText('Archive feature toggles');
+    const button = await screen.findByText('Archive toggles');
+
+    button.click();
+
+    await waitFor(() => {
+        expect(onClose).toBeCalledTimes(1);
+    });
+    expect(onConfirm).toBeCalledTimes(0); // we didn't setup non Change Request flow so failure
+});