Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-23 13:46:45 +02: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), marginBottom: theme.spacing(2),
})); }));
const StyledFieldset = styled('fieldset')(() => ({
padding: 0,
border: 'none',
}));
const StyledSelect = styled(Select)(({ theme }) => ({ const StyledSelect = styled(Select)(({ theme }) => ({
marginBottom: theme.spacing(2), marginBottom: theme.spacing(2),
minWidth: '200px', minWidth: '200px',
@ -91,6 +96,14 @@ const StyledInputContainer = styled('div')(() => ({
alignItems: 'center', 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> = ({ const ProjectForm: React.FC<IProjectForm> = ({
children, children,
handleSubmit, handleSubmit,
@ -276,7 +289,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
setFeatureNamingExample != null setFeatureNamingExample != null
} }
show={ show={
<> <StyledFieldset>
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
@ -285,17 +298,33 @@ const ProjectForm: React.FC<IProjectForm> = ({
gap: 1, gap: 1,
}} }}
> >
<p>Feature flag naming pattern?</p> <legend>Feature flag naming pattern?</legend>
<FeatureFlagNamingTooltip /> <FeatureFlagNamingTooltip />
</Box> </Box>
<StyledSubtitle> <StyledSubtitle>
Leave it empty if you don’t want to add a naming <p id="pattern-naming-description">
pattern 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> </StyledSubtitle>
<StyledInputContainer> <StyledFlagNamingContainer>
<StyledInput <StyledInput
label={'Naming Pattern'} label={'Naming Pattern'}
name="pattern" name="pattern"
aria-describedby="pattern-naming-description"
placeholder="^[A-Za-z]+-[A-Za-z0-9]+$"
type={'text'} type={'text'}
value={featureNamingPattern || ''} value={featureNamingPattern || ''}
error={Boolean(errors.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 <StyledInput
label={'Naming Example'} label={'Naming Example'}
name="example" name="example"
type={'text'} type={'text'}
aria-describedBy="pattern-example-description"
value={featureNamingExample || ''} value={featureNamingExample || ''}
placeholder="dx-feature1"
error={Boolean(errors.namingExample)} error={Boolean(errors.namingExample)}
errorText={errors.namingExample} errorText={errors.namingExample}
onChange={e => onChange={e =>
@ -320,8 +359,8 @@ const ProjectForm: React.FC<IProjectForm> = ({
) )
} }
/> />
</StyledInputContainer> </StyledFlagNamingContainer>
</> </StyledFieldset>
} }
/> />
</StyledContainer> </StyledContainer>