feat: adding featureFlag for un-deploy

frontend/app-development/features/appPublish/components/DeploymentEnvironment.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import classes from './DeploymentEnvironment.module.css';
-
 import { DeploymentEnvironmentStatus } from './DeploymentEnvironmentStatus';
 import { Deploy } from './Deploy';
+import { UnDeploy } from './UnDeploy';
 import { DeploymentEnvironmentLogList } from './DeploymentEnvironmentLogList';
 import type { PipelineDeployment } from 'app-shared/types/api/PipelineDeployment';
 import type { KubernetesDeployment } from 'app-shared/types/api/KubernetesDeployment';
 import { BuildResult } from 'app-shared/types/Build';
+import { FeatureFlag, shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils';
 
 export interface DeploymentEnvironmentProps {
   pipelineDeploymentList: PipelineDeployment[];
@@ -51,6 +52,7 @@ export const DeploymentEnvironment = ({
           isProduction={isProduction}
           orgName={orgName}
         />
+        {shouldDisplayFeature(FeatureFlag.Undeploy) && <UnDeploy />}
         <DeploymentEnvironmentLogList
           envName={envName}
           isProduction={isProduction}

frontend/app-development/features/appPublish/components/UnDeploy/UnDeploy.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { UnDeploy } from './UnDeploy';
+import { renderWithProviders } from 'app-development/test/mocks';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+import userEvent from '@testing-library/user-event';
+
+jest.spyOn(console, 'log').mockImplementation(() => {});
+
+describe('UnDeploy', () => {
+  it('should render the undeploy button with the correct text', () => {
+    renderUnDeploy();
+
+    expect(
+      screen.getByRole('button', { name: textMock('app_deployment.undeploy_button') }),
+    ).toBeInTheDocument();
+  });
+
+  it('should call console.log when the button is clicked', async () => {
+    const user = userEvent.setup();
+    renderUnDeploy();
+
+    const button = screen.getByRole('button', {
+      name: textMock('app_deployment.undeploy_button'),
+    });
+    await user.click(button);
+
+    expect(console.log).toHaveBeenCalledWith('Undeploy feature will be implemented soon...');
+  });
+});
+
+const renderUnDeploy = () => {
+  renderWithProviders()(<UnDeploy />);
+};

frontend/app-development/features/appPublish/components/UnDeploy/UnDeploy.tsx

@@ -0,0 +1,19 @@
+import React, { type ReactElement } from 'react';
+import { StudioButton } from '@studio/components';
+import { useTranslation } from 'react-i18next';
+
+export const UnDeploy = (): ReactElement => {
+  const { t } = useTranslation();
+
+  const handleClick = () => {
+    console.log('Undeploy feature will be implemented soon...');
+  };
+
+  return (
+    <div>
+      <StudioButton size='sm' onClick={handleClick}>
+        {t('app_deployment.undeploy_button')}
+      </StudioButton>
+    </div>
+  );
+};

frontend/app-development/features/appPublish/components/UnDeploy/index.ts

@@ -0,0 +1 @@
+export { UnDeploy } from './UnDeploy';

frontend/language/src/nb.json

@@ -102,6 +102,7 @@
   "app_deployment.table.status": "Status",
   "app_deployment.table.version_col": "Versjon",
   "app_deployment.technical_error_1": "Vi har en teknisk feil og får ikke publisert appen din. Publiser på nytt nå, eller prøv igjen senere. Hvis problemet fortsetter, <a>ta kontakt med oss</a>.",
+  "app_deployment.undeploy_button": "Avpubliser nåværende versjon",
   "app_deployment.version_label": "Versjon {{tagName}} ({{createdDateTime}})",
   "app_release.earlier_releases": "Tidligere bygg av appen",
   "app_release.release_build_log": "Bygglogg",

frontend/packages/shared/src/utils/featureToggleUtils.ts

@@ -14,6 +14,7 @@ export enum FeatureFlag {
   ShouldOverrideAppLibCheck = 'shouldOverrideAppLibCheck',
   Subform = 'subform',
   Summary2 = 'summary2',
+  Undeploy = 'undeploy',
 }
 
 /*