From 208b0164e8dad9485d9a4b3a3c923d73c63888bd Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 5 Sep 2023 09:00:16 +0200
Subject: [PATCH 1/5] 1-1322: add description for main input + wip stuff

---
 .../Project/ProjectForm/ProjectForm.tsx       | 49 ++++++++++++++++---
 1 file changed, 43 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
index 77f83897b91b..08db7537d0c2 100644
--- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
+++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
@@ -4,7 +4,7 @@ import { StickinessSelect } from 'component/feature/StrategyTypes/FlexibleStrate
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import Select from 'component/common/select';
 import { ProjectMode } from '../hooks/useProjectForm';
-import { Box, styled, TextField } from '@mui/material';
+import { Box, Link, styled, TextField } from '@mui/material';
 import { CollaborationModeTooltip } from './CollaborationModeTooltip';
 import Input from 'component/common/Input/Input';
 import { FeatureTogglesLimitTooltip } from './FeatureTogglesLimitTooltip';
@@ -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',
@@ -276,7 +281,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
                         setFeatureNamingExample != null
                     }
                     show={
-                        <>
+                        <StyledFieldset>
                             <Box
                                 sx={{
                                     display: 'flex',
@@ -285,17 +290,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>
                                 <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)}
@@ -312,6 +333,22 @@ const ProjectForm: React.FC<IProjectForm> = ({
                                     name="example"
                                     type={'text'}
                                     value={featureNamingExample || ''}
+                                    placeholder="dx-feature1"
+                                    error={Boolean(errors.namingExample)}
+                                    errorText={errors.namingExample}
+                                    onChange={e =>
+                                        onSetFeatureNamingExample(
+                                            e.target.value
+                                        )
+                                    }
+                                />
+
+                                <StyledInput
+                                    label={'Naming Example'}
+                                    name="example"
+                                    type={'text'}
+                                    value={featureNamingExample || ''}
+                                    placeholder="dx-feature1"
                                     error={Boolean(errors.namingExample)}
                                     errorText={errors.namingExample}
                                     onChange={e =>
@@ -321,7 +358,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
                                     }
                                 />
                             </StyledInputContainer>
-                        </>
+                        </StyledFieldset>
                     }
                 />
             </StyledContainer>

From 29396bfa9a7805322fd6a8bf19950a43c3342918 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 5 Sep 2023 09:43:00 +0200
Subject: [PATCH 2/5] 1-1322: add description for example field

---
 .../Project/ProjectForm/ProjectForm.tsx       | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
index 08db7537d0c2..802bf13e7dbb 100644
--- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
+++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
@@ -311,7 +311,14 @@ const ProjectForm: React.FC<IProjectForm> = ({
                                     naming pattern.
                                 </p>
                             </StyledSubtitle>
-                            <StyledInputContainer>
+                            <StyledInputContainer
+                                sx={{
+                                    flexDirection: 'column',
+                                    alignItems: 'flex-start',
+                                    mt: theme => theme.spacing(1),
+                                    '& > *': { width: '100%' },
+                                }}
+                            >
                                 <StyledInput
                                     label={'Naming Pattern'}
                                     name="pattern"
@@ -328,25 +335,19 @@ const ProjectForm: React.FC<IProjectForm> = ({
                                         )
                                     }
                                 />
-                                <StyledInput
-                                    label={'Naming Example'}
-                                    name="example"
-                                    type={'text'}
-                                    value={featureNamingExample || ''}
-                                    placeholder="dx-feature1"
-                                    error={Boolean(errors.namingExample)}
-                                    errorText={errors.namingExample}
-                                    onChange={e =>
-                                        onSetFeatureNamingExample(
-                                            e.target.value
-                                        )
-                                    }
-                                />
+                                <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)}

From a17ab87673faece62665c0427d128dffae1e635b Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 5 Sep 2023 09:44:15 +0200
Subject: [PATCH 3/5] Remove unused import

---
 .../src/component/project/Project/ProjectForm/ProjectForm.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
index 802bf13e7dbb..65712a845ebb 100644
--- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
+++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
@@ -4,7 +4,7 @@ import { StickinessSelect } from 'component/feature/StrategyTypes/FlexibleStrate
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import Select from 'component/common/select';
 import { ProjectMode } from '../hooks/useProjectForm';
-import { Box, Link, styled, TextField } from '@mui/material';
+import { Box, styled, TextField } from '@mui/material';
 import { CollaborationModeTooltip } from './CollaborationModeTooltip';
 import Input from 'component/common/Input/Input';
 import { FeatureTogglesLimitTooltip } from './FeatureTogglesLimitTooltip';

From f64032a7749b1a380b612ab753d79a8039ad17eb Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 5 Sep 2023 09:54:39 +0200
Subject: [PATCH 4/5] 1-1322: avoid sx, create styled component

---
 .../Project/ProjectForm/ProjectForm.tsx       | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
index 65712a845ebb..ab298458c795 100644
--- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
+++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
@@ -96,6 +96,14 @@ const StyledInputContainer = styled('div')(() => ({
     alignItems: 'center',
 }));
 
+const StyledFlagNamingContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    mt: theme => theme.spacing(1),
+    '& > *': { width: '100%' },
+}));
+
 const ProjectForm: React.FC<IProjectForm> = ({
     children,
     handleSubmit,
@@ -311,14 +319,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
                                     naming pattern.
                                 </p>
                             </StyledSubtitle>
-                            <StyledInputContainer
-                                sx={{
-                                    flexDirection: 'column',
-                                    alignItems: 'flex-start',
-                                    mt: theme => theme.spacing(1),
-                                    '& > *': { width: '100%' },
-                                }}
-                            >
+                            <StyledFlagNamingContainer>
                                 <StyledInput
                                     label={'Naming Pattern'}
                                     name="pattern"
@@ -358,7 +359,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
                                         )
                                     }
                                 />
-                            </StyledInputContainer>
+                            </StyledFlagNamingContainer>
                         </StyledFieldset>
                     }
                 />

From d72c1753824eaed59514fec789f023be7effe6d9 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 5 Sep 2023 11:13:16 +0200
Subject: [PATCH 5/5] 1-1322: fix lambda

---
 .../src/component/project/Project/ProjectForm/ProjectForm.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
index ab298458c795..15ce22ed4d6a 100644
--- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
+++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
@@ -100,7 +100,7 @@ const StyledFlagNamingContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'flex-start',
-    mt: theme => theme.spacing(1),
+    mt: theme.spacing(1),
     '& > *': { width: '100%' },
 }));