diff --git a/frontend/src/component/feature/CreateFeature/CreateFeature.tsx b/frontend/src/component/feature/CreateFeature/CreateFeature.tsx index 99ead7164d..431f1aee77 100644 --- a/frontend/src/component/feature/CreateFeature/CreateFeature.tsx +++ b/frontend/src/component/feature/CreateFeature/CreateFeature.tsx @@ -137,6 +137,7 @@ const CreateFeature = () => { handleCancel={handleCancel} mode="Create" clearErrors={clearErrors} + featureNaming={projectInfo.featureNaming} > >; setProject: React.Dispatch>; setImpressionData: React.Dispatch>; + featureNaming?: FeatureNamingType; validateToggleName?: () => void; handleSubmit: (e: any) => void; handleCancel: () => void; @@ -80,6 +82,11 @@ const StyledTypeDescription = styled('p')(({ theme }) => ({ position: 'relative', })); +const StyledFlagNamingInfo = styled('div')(({ theme }) => ({ + fontSize: theme.fontSizes.smallBody, + color: theme.palette.text.secondary, +})); + const StyledButtonContainer = styled('div')({ marginTop: 'auto', display: 'flex', @@ -111,6 +118,7 @@ const FeatureForm: React.FC = ({ setDescription, setProject, validateToggleName, + featureNaming, setImpressionData, impressionData, handleSubmit, @@ -128,16 +136,52 @@ const FeatureForm: React.FC = ({ return featureTypes.find(toggle => toggle.id === type)?.description; }; + const displayFeatureNamingInfo = Boolean(featureNaming?.pattern); + return ( What would you like to call your toggle? + +

+ This project has feature flag naming patterns + enabled. +

+
+
Pattern
+
+ {featureNaming?.pattern} +
+ {Boolean(featureNaming?.example) && ( + <> +
Example
+
{featureNaming?.example}
+ + )} + {Boolean(featureNaming?.description) && ( + <> +
Description
+
{featureNaming?.description}
+ + )} +
+ + } + /> = ({ label={'Naming Example'} name="feature flag naming example" type={'text'} - aria-describedBy="pattern-additional-description" + aria-describedby="pattern-additional-description" value={featureNamingExample || ''} placeholder="dx.feature1.1-135" error={Boolean(errors.namingExample)} @@ -367,7 +367,7 @@ const ProjectForm: React.FC = ({ label={'Naming pattern description'} name="feature flag naming description" type={'text'} - aria-describedBy="pattern-additional-description" + aria-describedby="pattern-additional-description" placeholder={`.. The flag name should contain the project name, the feature name, and the ticket number, each separated by a dot.`}