From a5afe8042b56c7f1240ca63d467ae157983be9b8 Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Fri, 6 Oct 2023 13:58:01 +0300
Subject: [PATCH] fix: Show Alert when change request enabled and copy feature

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../CopyFeature/CopyFeature.module.scss       | 27 -------
 .../feature/CopyFeature/CopyFeature.test.tsx  | 80 +++++++++++++++++++
 .../feature/CopyFeature/CopyFeature.tsx       |  9 ++-
 3 files changed, 87 insertions(+), 29 deletions(-)
 delete mode 100644 frontend/src/component/feature/CopyFeature/CopyFeature.module.scss
 create mode 100644 frontend/src/component/feature/CopyFeature/CopyFeature.test.tsx

diff --git a/frontend/src/component/feature/CopyFeature/CopyFeature.module.scss b/frontend/src/component/feature/CopyFeature/CopyFeature.module.scss
deleted file mode 100644
index 66c823bd5d..0000000000
--- a/frontend/src/component/feature/CopyFeature/CopyFeature.module.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.header {
-    padding: var(--card-header-padding);
-    border: var(--default-border);
-}
-
-.header h1 {
-    font-size: var(--h1-size);
-}
-
-.content {
-    padding: var(--card-padding);
-}
-
-.content form {
-    display: flex;
-    flex-direction: column;
-    max-width: 400px;
-}
-
-.content > *,
-.content form > * {
-    margin: 1rem 0;
-}
-
-.text {
-    max-width: 400px;
-}
diff --git a/frontend/src/component/feature/CopyFeature/CopyFeature.test.tsx b/frontend/src/component/feature/CopyFeature/CopyFeature.test.tsx
new file mode 100644
index 0000000000..8ee03529e8
--- /dev/null
+++ b/frontend/src/component/feature/CopyFeature/CopyFeature.test.tsx
@@ -0,0 +1,80 @@
+import { render } from "utils/testRenderer";
+import { UIProviderContainer } from "component/providers/UIProvider/UIProviderContainer";
+import { CopyFeatureToggle } from "./CopyFeature";
+import { Route, Routes } from "react-router-dom";
+import { screen } from '@testing-library/react';
+import { CREATE_FEATURE } from "component/providers/AccessProvider/permissions";
+import { testServerRoute, testServerSetup } from "utils/testServer";
+
+const server = testServerSetup();
+
+const setupServerRoutes = (changeRequestsEnabled = true) => {
+    testServerRoute(server, 'api/admin/ui-config', {
+        environment: 'Open Source',
+        flags: {
+            changeRequests: true,
+        },
+        versionInfo: {
+            current: { oss: '4.18.0-beta.5', enterprise: '4.17.0-beta.1' },
+        },
+        disablePasswordAuth: false,
+    });
+
+    testServerRoute(
+        server,
+        'api/admin/projects/default/change-requests/config',
+        [
+            {
+                environment: 'development',
+                type: 'development',
+                requiredApprovals: null,
+                changeRequestEnabled: false,
+            },
+            {
+                environment: 'production',
+                type: 'production',
+                requiredApprovals: 1,
+                changeRequestEnabled: changeRequestsEnabled,
+            },
+        ],
+    );
+
+    testServerRoute(server, 'api/admin/projects/default/features/someFeature', { name: 'someFeature'})
+
+}
+test('should render an alert when change request is enabled in any env when copying feature', async () => {
+    setupServerRoutes()
+    render(
+        <UIProviderContainer>
+            <Routes>
+                <Route path={'/projects/:projectId/features/:featureId/strategies/copy'} element={<CopyFeatureToggle />} />
+            </Routes>
+        </UIProviderContainer>,
+        {
+            route: '/projects/default/features/someFeature/strategies/copy',
+            permissions: [{permission: CREATE_FEATURE}]
+        }
+    )
+
+    const alert = screen.queryByText('Copy functionality is disabled for this project because change request is enabled for at least one environment in this project.');
+    expect(alert).toBeInTheDocument();
+
+})
+
+test('should not render an alert when change request is disabled when copying feature', async () => {
+    setupServerRoutes(false)
+    render(
+        <UIProviderContainer>
+            <Routes>
+                <Route path={'projects/:projectId/features/:featureId/strategies/copy'} element={<CopyFeatureToggle />} />
+            </Routes>
+        </UIProviderContainer>,
+        {
+            route: '/projects/default/features/someFeature/strategies/copy',
+            permissions: [{permission: CREATE_FEATURE}]
+        }
+    )
+
+    const alert = screen.queryByText('Copy functionality is disabled for this project because change request is enabled for at least one environment in this project.');
+    expect(alert).not.toBeInTheDocument();
+})
diff --git a/frontend/src/component/feature/CopyFeature/CopyFeature.tsx b/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
index 5029a7289c..008834b613 100644
--- a/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
+++ b/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
@@ -18,13 +18,14 @@ import { getTogglePath } from 'utils/routePathHelpers';
 import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
-import { useChangeRequestsEnabled } from '../../../hooks/useChangeRequestsEnabled';
+import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import useProject from 'hooks/api/getters/useProject/useProject';
 import { FeatureNamingPatternInfo } from '../FeatureNamingPatternInfo/FeatureNamingPatternInfo';
 
 const StyledPage = styled(Paper)(({ theme }) => ({
     overflow: 'visible',
     borderRadius: theme.shape.borderRadiusLarge,
+    width: '100%'
 }));
 
 const StyledHeader = styled('div')(({ theme }) => ({
@@ -120,7 +121,7 @@ export const CopyFeatureToggle = () => {
     const displayFeatureNamingInfo = Boolean(featureNaming?.pattern);
 
     return (
-        <StyledPage className={themeStyles.fullwidth}>
+        <StyledPage>
             <StyledHeader>
                 <StyledTitle>Copy&nbsp;{featureId}</StyledTitle>
             </StyledHeader>
@@ -128,6 +129,10 @@ export const CopyFeatureToggle = () => {
                 condition={Boolean(apiError)}
                 show={<Alert severity='error'>{apiError}</Alert>}
             />
+            <ConditionallyRender
+                condition={Boolean(isChangeRequestConfiguredInAnyEnv)}
+                show={<Alert severity='error'>Copy functionality is disabled for this project because change request is enabled for at least one environment in this project.</Alert>}
+            />
             <StyledSection>
                 <StyledDescription>
                     You are about to create a new feature toggle by cloning the