From 1ffa0b86d960fc92a411911991afea417cdcff4a Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Wed, 6 Sep 2023 12:14:17 +0200
Subject: [PATCH] 1-1307: Show info about flag naming patterns before making
 mistakes (#4616)

This PR adds info about a project's flag naming pattern to the flag
creation form. This way, it's displayed before the user tries to create
a flag, so that they have all the necessary information before making
mistakes.


![image](https://github.com/Unleash/unleash/assets/17786332/7a3fb036-5315-4c2b-934d-004da6b364a3)
---
 .../feature/CreateFeature/CreateFeature.tsx   |  1 +
 .../feature/FeatureForm/FeatureForm.tsx       | 44 +++++++++++++++++++
 .../Project/ProjectForm/ProjectForm.tsx       |  4 +-
 3 files changed, 47 insertions(+), 2 deletions(-)

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}
             >
                 <CreateButton
                     name="feature toggle"
diff --git a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
index 9f1e7d854f..9ecfa36194 100644
--- a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
+++ b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
@@ -21,6 +21,7 @@ import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
 import { useNavigate } from 'react-router-dom';
 import React from 'react';
 import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions';
+import { FeatureNamingType } from 'interfaces/project';
 
 interface IFeatureToggleForm {
     type: string;
@@ -33,6 +34,7 @@ interface IFeatureToggleForm {
     setDescription: React.Dispatch<React.SetStateAction<string>>;
     setProject: React.Dispatch<React.SetStateAction<string>>;
     setImpressionData: React.Dispatch<React.SetStateAction<boolean>>;
+    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<IFeatureToggleForm> = ({
     setDescription,
     setProject,
     validateToggleName,
+    featureNaming,
     setImpressionData,
     impressionData,
     handleSubmit,
@@ -128,16 +136,52 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
         return featureTypes.find(toggle => toggle.id === type)?.description;
     };
 
+    const displayFeatureNamingInfo = Boolean(featureNaming?.pattern);
+
     return (
         <StyledForm onSubmit={handleSubmit}>
             <StyledContainer>
                 <StyledInputDescription>
                     What would you like to call your toggle?
                 </StyledInputDescription>
+                <ConditionallyRender
+                    condition={displayFeatureNamingInfo}
+                    show={
+                        <StyledFlagNamingInfo>
+                            <p>
+                                This project has feature flag naming patterns
+                                enabled.
+                            </p>
+                            <dl id="feature-naming-pattern-info">
+                                <dt>Pattern</dt>
+                                <dd>
+                                    <code>{featureNaming?.pattern}</code>
+                                </dd>
+                                {Boolean(featureNaming?.example) && (
+                                    <>
+                                        <dt>Example</dt>
+                                        <dd>{featureNaming?.example}</dd>
+                                    </>
+                                )}
+                                {Boolean(featureNaming?.description) && (
+                                    <>
+                                        <dt>Description</dt>
+                                        <dd>{featureNaming?.description}</dd>
+                                    </>
+                                )}
+                            </dl>
+                        </StyledFlagNamingInfo>
+                    }
+                />
                 <StyledInput
                     autoFocus
                     disabled={mode === 'Edit'}
                     label="Name"
+                    aria-details={
+                        displayFeatureNamingInfo
+                            ? 'feature-naming-pattern-info'
+                            : undefined
+                    }
                     id="feature-toggle-name"
                     error={Boolean(errors.name)}
                     errorText={errors.name}
diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
index edfa6bb305..db12adf53b 100644
--- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
+++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
@@ -352,7 +352,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
                                     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<IProjectForm> = ({
                                     label={'Naming pattern description'}
                                     name="feature flag naming description"
                                     type={'text'}
-                                    aria-describedBy="pattern-additional-description"
+                                    aria-describedby="pattern-additional-description"
                                     placeholder={`<project>.<featureName>.<ticket>
 
 The flag name should contain the project name, the feature name, and the ticket number, each separated by a dot.`}