Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

add descriptions in form (#4608)

Browse Source 
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)
This commit is contained in:
Thomas Heartman 2023-09-05 11:22:52 +02:00 committed by GitHub
parent 8a8a7b0899
commit d5edcc33e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
View File

@ -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>