Fix: copy feature alert when change requests enabled in any env (#4964)

Adds an alert if change requests are enabled in any env and you try to
copy a feature.

Currently the functionality was disabled but with no explanation

Closes #
[SR-79](https://linear.app/unleash/issue/SR-79/when-change-request-is-enable-the-copy-functionality-its-disabled-but)
<img width="1138" alt="Screenshot 2023-10-09 at 12 32 52"
src="https://github.com/Unleash/unleash/assets/104830839/e900e4b8-8d26-46d7-8622-0ad592704d03">

---------

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,88 @@
+import { render } from 'utils/testRenderer';
+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(
+        <Routes>
+            <Route
+                path={
+                    '/projects/:projectId/features/:featureId/strategies/copy'
+                }
+                element={<CopyFeatureToggle />}
+            />
+        </Routes>,
+        {
+            route: '/projects/default/features/someFeature/strategies/copy',
+            permissions: [{ permission: CREATE_FEATURE }],
+        },
+    );
+
+    await screen.findByText(
+        'Copy functionality is disabled for this project because change request is enabled for at least one environment in this project.',
+    );
+});
+
+test('should not render an alert when change request is disabled when copying feature', async () => {
+    setupServerRoutes(false);
+    render(
+        <Routes>
+            <Route
+                path={'projects/:projectId/features/:featureId/strategies/copy'}
+                element={<CopyFeatureToggle />}
+            />
+        </Routes>,
+        {
+            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 }) => ({
@@ -58,6 +59,10 @@ const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
     marginBottom: theme.spacing(4),
 }));
 
+const StyledAlert = styled(Alert)(({ theme }) => ({
+    margin: theme.spacing(4, 4, 0),
+}));
+
 export const CopyFeatureToggle = () => {
     const [replaceGroupId, setReplaceGroupId] = useState(true);
     const [apiError, setApiError] = useState('');
@@ -120,7 +125,7 @@ export const CopyFeatureToggle = () => {
     const displayFeatureNamingInfo = Boolean(featureNaming?.pattern);
 
     return (
-        <StyledPage className={themeStyles.fullwidth}>
+        <StyledPage>
             <StyledHeader>
                 <StyledTitle>Copy&nbsp;{featureId}</StyledTitle>
             </StyledHeader>
@@ -128,6 +133,16 @@ export const CopyFeatureToggle = () => {
                 condition={Boolean(apiError)}
                 show={<Alert severity='error'>{apiError}</Alert>}
             />
+            <ConditionallyRender
+                condition={Boolean(isChangeRequestConfiguredInAnyEnv)}
+                show={
+                    <StyledAlert severity='error'>
+                        Copy functionality is disabled for this project because
+                        change request is enabled for at least one environment
+                        in this project.
+                    </StyledAlert>
+                }
+            />
             <StyledSection>
                 <StyledDescription>
                     You are about to create a new feature toggle by cloning the