diff --git a/frontend/src/component/feature/CopyFeature/CopyFeature.tsx b/frontend/src/component/feature/CopyFeature/CopyFeature.tsx index 7749bb71c7..6ba6a27340 100644 --- a/frontend/src/component/feature/CopyFeature/CopyFeature.tsx +++ b/frontend/src/component/feature/CopyFeature/CopyFeature.tsx @@ -19,6 +19,7 @@ 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 useProject from 'hooks/api/getters/useProject/useProject'; const StyledPage = styled(Paper)(({ theme }) => ({ overflow: 'visible', @@ -69,6 +70,10 @@ export const CopyFeatureToggle = () => { const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(projectId); + const { + project: { featureNaming }, + } = useProject(projectId); + const setValue: ChangeEventHandler = event => { const value = trim(event.target.value); setNewToggleName(value); @@ -111,6 +116,8 @@ export const CopyFeatureToggle = () => { if (!feature || !feature.name) return Toggle not found; + const displayFeatureNamingInfo = Boolean(featureNaming?.pattern); + return ( @@ -130,6 +137,47 @@ export const CopyFeatureToggle = () => { . You must give the new feature toggle a unique name before you can proceed. + + +

+ This project has feature flag naming patterns + enabled, so the name must also match the + configured pattern. +

+
+
Pattern
+
+ {featureNaming?.pattern} +
+ +
Example
+
{featureNaming?.example}
+ + } + /> + +
Description
+
+ {featureNaming?.description} +
+ + } + /> +
+ + } + /> { variant="outlined" size="small" aria-required + aria-details={ + displayFeatureNamingInfo + ? 'feature-naming-pattern-info' + : undefined + } autoFocus />