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(
+
+
+ } />
+
+ ,
+ {
+ 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(
+
+
+ } />
+
+ ,
+ {
+ 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 (
-
+
Copy {featureId}
@@ -128,6 +129,10 @@ export const CopyFeatureToggle = () => {
condition={Boolean(apiError)}
show={{apiError}}
/>
+ Copy functionality is disabled for this project because change request is enabled for at least one environment in this project.}
+ />
You are about to create a new feature toggle by cloning the