add descriptions in form (#4608)

This PR adds descriptions of the various feature flag naming input fields in the project settings form. It also wraps the feature naming fields in a fieldset to group them semantically. ![image](https://github.com/Unleash/unleash/assets/17786332/a8d5c2c6-3381-4b76-89a1-18316c2e5193)
Unleash · Sep 5, 2023 · d5edcc3 · d5edcc3
1 parent 8a8a7b0
commit d5edcc3
Showing 1 changed file with 46 additions and 7 deletions.
diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
@@ -75,6 +75,11 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
     marginBottom: theme.spacing(2),
 }));
 
+const StyledFieldset = styled('fieldset')(() => ({
+    padding: 0,
+    border: 'none',
+}));
+
 const StyledSelect = styled(Select)(({ theme }) => ({
     marginBottom: theme.spacing(2),
     minWidth: '200px',
@@ -91,6 +96,14 @@ const StyledInputContainer = styled('div')(() => ({
     alignItems: 'center',
 }));
 
+const StyledFlagNamingContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    mt: theme.spacing(1),
+    '& > *': { width: '100%' },
+}));
+
 const ProjectForm: React.FC<IProjectForm> = ({
     children,
     handleSubmit,
@@ -276,7 +289,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
                         setFeatureNamingExample != null
                     }
                     show={
-                        <>
+                        <StyledFieldset>
                             <Box
                                 sx={{
                                     display: 'flex',
@@ -285,17 +298,33 @@ const ProjectForm: React.FC<IProjectForm> = ({
                                     gap: 1,
                                 }}
                             >
-                                <p>Feature flag naming pattern?</p>
+                                <legend>Feature flag naming pattern?</legend>
                                 <FeatureFlagNamingTooltip />
                             </Box>
                             <StyledSubtitle>
-                                Leave it empty if you don’t want to add a naming
-                                pattern
+                                <p id="pattern-naming-description">
+                                    A feature flag naming pattern is a{' '}
+                                    <a
+                                        href={`https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions`}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        JavaScript RegEx
+                                    </a>{' '}
+                                    used to enforce feature flag names within
+                                    this project.
+                                </p>
+                                <p>
+                                    Leave it empty if you don’t want to add a
+                                    naming pattern.
+                                </p>
                             </StyledSubtitle>
-                            <StyledInputContainer>
+                            <StyledFlagNamingContainer>
                                 <StyledInput
                                     label={'Naming Pattern'}
                                     name="pattern"
+                                    aria-describedby="pattern-naming-description"
+                                    placeholder="^[A-Za-z]+-[A-Za-z0-9]+$"
                                     type={'text'}
                                     value={featureNamingPattern || ''}
                                     error={Boolean(errors.featureNamingPattern)}
@@ -307,11 +336,21 @@ const ProjectForm: React.FC<IProjectForm> = ({
                                         )
                                     }
                                 />
+                                <StyledSubtitle>
+                                    <p id="pattern-example-description">
+                                        The example will be shown to users when
+                                        they create a new feature flag in this
+                                        project.
+                                    </p>
+                                </StyledSubtitle>
+
                                 <StyledInput
                                     label={'Naming Example'}
                                     name="example"
                                     type={'text'}
+                                    aria-describedBy="pattern-example-description"
                                     value={featureNamingExample || ''}
+                                    placeholder="dx-feature1"
                                     error={Boolean(errors.namingExample)}
                                     errorText={errors.namingExample}
                                     onChange={e =>
@@ -320,8 +359,8 @@ const ProjectForm: React.FC<IProjectForm> = ({
                                         )
                                     }
                                 />
-                            </StyledInputContainer>
-                        </>
+                            </StyledFlagNamingContainer>
+                        </StyledFieldset>
                     }
                 />
             </StyledContainer>