From bc1f261cf2e2f94d0a6b045dfd9c28a3858421be Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 12 Aug 2024 13:56:07 +0200
Subject: [PATCH] fix: display feature naming patterns in dialog (#7837)

Updates the dialog form template to include a `namingPattern` prop that
can be used to display the naming pattern of whatever the form is used
for.

Also updates the create feature dialog to display the naming pattern in
the current project.

The naming pattern component re-uses the pattern that we have in place
for feature naming patterns, but puts it in an expandable dialog
instead.

Screenies:

Naming pattern closed:

![image](https://github.com/user-attachments/assets/145e4268-1aa0-4c1b-8f08-97857447e2f5)


![image](https://github.com/user-attachments/assets/1613c846-e7d4-41c8-a1c8-a66ab87b6e5f)



Naming pattern open:

![image](https://github.com/user-attachments/assets/1aa37162-500b-4b83-926f-07aa777e8017)
---
 .../DialogFormTemplate.styles.tsx             |  9 +-
 .../DialogFormTemplate/DialogFormTemplate.tsx | 31 +++++--
 .../DialogFormTemplate/NamingPatternInfo.tsx  | 83 +++++++++++++++++++
 .../CreateFeatureDialog.tsx                   |  1 +
 4 files changed, 115 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/component/common/DialogFormTemplate/NamingPatternInfo.tsx

diff --git a/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.styles.tsx b/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.styles.tsx
index 80b052ef6c..241e415517 100644
--- a/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.styles.tsx
+++ b/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.styles.tsx
@@ -33,11 +33,14 @@ export const StyledHeader = styled(Typography)({
     fontWeight: 'lighter',
 });
 
-export const ProjectNameContainer = styled('div')({
+export const NameContainer = styled('div')(({ theme }) => ({
     gridArea: 'project-name',
-});
+    display: 'flex',
+    flexFlow: 'column nowrap',
+    gap: theme.spacing(2),
+}));
 
-export const ProjectDescriptionContainer = styled('div')({
+export const DescriptionContainer = styled('div')({
     gridArea: 'project-description',
 });
 
diff --git a/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.tsx b/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.tsx
index 266612d329..6aec3f5d8d 100644
--- a/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.tsx
+++ b/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.tsx
@@ -2,8 +2,8 @@ import type { FormEventHandler } from 'react';
 import theme from 'themes/theme';
 import {
     ConfigButtons,
-    ProjectDescriptionContainer,
-    ProjectNameContainer,
+    DescriptionContainer,
+    NameContainer,
     StyledForm,
     StyledHeader,
     StyledInput,
@@ -15,6 +15,11 @@ import {
 import { Button } from '@mui/material';
 import { CreateButton } from 'component/common/CreateButton/CreateButton';
 import type { IPermissionButtonProps } from 'component/common/PermissionButton/PermissionButton';
+import type { FeatureNamingType } from 'interfaces/project';
+import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
+import { NamingPatternInfo } from './NamingPatternInfo';
+
+type NamingPattern = FeatureNamingType;
 
 type FormProps = {
     createButtonProps: IPermissionButtonProps;
@@ -30,12 +35,14 @@ type FormProps = {
     setDescription: (newDescription: string) => void;
     setName: (newName: string) => void;
     validateName?: () => void;
+    namingPattern?: NamingPattern;
 };
 
 export const DialogFormTemplate: React.FC<FormProps> = ({
     Limit,
     handleSubmit,
     name,
+    namingPattern,
     setName,
     description,
     setDescription,
@@ -47,15 +54,22 @@ export const DialogFormTemplate: React.FC<FormProps> = ({
     createButtonProps,
     validateName = () => {},
 }) => {
+    const displayNamingPattern = Boolean(namingPattern?.pattern);
+
     return (
         <StyledForm onSubmit={handleSubmit}>
             <TopGrid>
                 <IconWrapper>{Icon}</IconWrapper>
                 <StyledHeader variant='h2'>Create {resource}</StyledHeader>
-                <ProjectNameContainer>
+                <NameContainer>
                     <StyledInput
                         label={`${resource} name`}
                         aria-required
+                        aria-details={
+                            displayNamingPattern
+                                ? 'naming-pattern-info'
+                                : undefined
+                        }
                         value={name}
                         onChange={(e) => setName(e.target.value)}
                         error={Boolean(errors.name)}
@@ -74,8 +88,13 @@ export const DialogFormTemplate: React.FC<FormProps> = ({
                         data-testid='FORM_NAME_INPUT'
                         size='medium'
                     />
-                </ProjectNameContainer>
-                <ProjectDescriptionContainer>
+
+                    <ConditionallyRender
+                        condition={displayNamingPattern}
+                        show={<NamingPatternInfo naming={namingPattern!} />}
+                    />
+                </NameContainer>
+                <DescriptionContainer>
                     <StyledInput
                         size='medium'
                         className='description'
@@ -92,7 +111,7 @@ export const DialogFormTemplate: React.FC<FormProps> = ({
                         }}
                         data-testid='FORM_DESCRIPTION_INPUT'
                     />
-                </ProjectDescriptionContainer>
+                </DescriptionContainer>
             </TopGrid>
 
             <ConfigButtons>{configButtons}</ConfigButtons>
diff --git a/frontend/src/component/common/DialogFormTemplate/NamingPatternInfo.tsx b/frontend/src/component/common/DialogFormTemplate/NamingPatternInfo.tsx
new file mode 100644
index 0000000000..988c8ca22d
--- /dev/null
+++ b/frontend/src/component/common/DialogFormTemplate/NamingPatternInfo.tsx
@@ -0,0 +1,83 @@
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    styled,
+} from '@mui/material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import type { FeatureNamingType } from 'interfaces/project';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+const StyledFlagNamingInfo = styled('article')(({ theme }) => ({
+    fontSize: theme.typography.body2.fontSize,
+    borderRadius: theme.shape.borderRadius,
+    marginInlineStart: theme.spacing(1.5),
+    backgroundColor: `${theme.palette.background.elevation2}`,
+    dl: {
+        display: 'grid',
+        gridTemplateColumns: 'max-content auto',
+        rowGap: theme.spacing(1),
+        columnGap: 0,
+    },
+    dt: {
+        color: theme.palette.text.secondary,
+        '&::after': { content: '":"' },
+    },
+    dd: {
+        marginInlineStart: theme.spacing(2),
+    },
+}));
+
+const StyledAccordion = styled(Accordion)(({ theme }) => ({
+    backgroundColor: 'inherit',
+    boxShadow: 'none',
+    margin: 0,
+}));
+
+type Props = {
+    naming: FeatureNamingType;
+};
+
+export const NamingPatternInfo: React.FC<Props> = ({ naming }) => {
+    const controlId = 'naming-pattern-info-summary';
+    return (
+        <StyledFlagNamingInfo>
+            <StyledAccordion>
+                <AccordionSummary
+                    id={controlId}
+                    aria-controls={controlId}
+                    expandIcon={<ExpandMoreIcon />}
+                >
+                    Name must match:&nbsp;<code>^{naming.pattern}$</code>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <p>The name must match this pattern:</p>
+                    <dl id='naming-pattern-info'>
+                        <dt>Pattern</dt>
+                        <dd>
+                            <code>^{naming.pattern}$</code>
+                        </dd>
+                        <ConditionallyRender
+                            condition={Boolean(naming?.example)}
+                            show={
+                                <>
+                                    <dt>Example</dt>
+                                    <dd>{naming?.example}</dd>
+                                </>
+                            }
+                        />
+                        <ConditionallyRender
+                            condition={Boolean(naming?.description)}
+                            show={
+                                <>
+                                    <dt>Description</dt>
+                                    <dd>{naming?.description}</dd>
+                                </>
+                            }
+                        />
+                    </dl>
+                </AccordionDetails>
+            </StyledAccordion>
+        </StyledFlagNamingInfo>
+    );
+};
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
index a137c49eda..616434619f 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
@@ -227,6 +227,7 @@ const CreateFeatureDialogContent = ({
                         tooltipProps: { title: limitMessage, arrow: true },
                     }}
                     description={description}
+                    namingPattern={projectInfo.featureNaming}
                     errors={errors}
                     handleSubmit={handleSubmit}
                     Icon={<FlagIcon />}