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 66c823bd5df2..000000000000
--- 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 000000000000..e6e1efaf53fa
--- /dev/null
+++ b/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(
+
+ }
+ />
+ ,
+ {
+ 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(
+
+ }
+ />
+ ,
+ {
+ 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 5029a7289cd8..4df8cd962369 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 }) => ({
@@ -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 (
-
+
Copy {featureId}
@@ -128,6 +133,16 @@ 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