fix: Show Alert when change request enabled and copy feature

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

frontend/src/component/feature/CopyFeature/CopyFeature.module.scss

@@ -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;
-}

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();
+})

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