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