Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add descriptions in form #4608

Merged
merged 5 commits into from
Sep 5, 2023
Merged

add descriptions in form #4608

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
208b016
1-1322: add description for main input + wip stuff
thomasheartman Sep 5, 2023
29396bf
1-1322: add description for example field
thomasheartman Sep 5, 2023
a17ab87
Remove unused import
thomasheartman Sep 5, 2023
f64032a
1-1322: avoid sx, create styled component
thomasheartman Sep 5, 2023
d72c175
1-1322: fix lambda
thomasheartman Sep 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 46 additions & 7 deletions frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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,
Expand Down Expand Up @@ -276,7 +289,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
setFeatureNamingExample != null
}
show={
<>
<StyledFieldset>
<Box
sx={{
display: 'flex',
Expand All @@ -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)}
Expand All @@ -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 =>
Expand All @@ -320,8 +359,8 @@ const ProjectForm: React.FC<IProjectForm> = ({
)
}
/>
</StyledInputContainer>
</>
</StyledFlagNamingContainer>
</StyledFieldset>
}
/>
</StyledContainer>
Expand Down