Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

UI: make project settings / creation form full-width (#4675)

Browse Source 
This PR makes the project settings / creation forms grow to take up the
full available width, so that it is in line with the new designs.
This commit is contained in:
Thomas Heartman 2023-09-13 08:38:18 +02:00 committed by GitHub
parent f49cc8cd33
commit 43878230b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 220 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,16 +44,10 @@ const PROJECT_NAME_INPUT = 'PROJECT_NAME_INPUT';
const PROJECT_DESCRIPTION_INPUT = 'PROJECT_DESCRIPTION_INPUT'; const PROJECT_DESCRIPTION_INPUT = 'PROJECT_DESCRIPTION_INPUT';
const StyledForm = styled('form')(({ theme }) => ({ const StyledForm = styled('form')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
height: '100%', height: '100%',
paddingBottom: theme.spacing(4), paddingBottom: theme.spacing(4),
})); }));
const StyledContainer = styled('div')(() => ({
maxWidth: '400px',
}));
const StyledDescription = styled('p')(({ theme }) => ({ const StyledDescription = styled('p')(({ theme }) => ({
marginBottom: theme.spacing(1), marginBottom: theme.spacing(1),
marginRight: theme.spacing(1), marginRight: theme.spacing(1),
@ -215,7 +209,6 @@ const ProjectForm: React.FC<IProjectForm> = ({
return ( return (
<StyledForm onSubmit={handleSubmit}> <StyledForm onSubmit={handleSubmit}>
<StyledContainer>
<StyledDescription>What is your project Id?</StyledDescription> <StyledDescription>What is your project Id?</StyledDescription>
<StyledInput <StyledInput
label="Project Id" label="Project Id"
@ -231,9 +224,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
required required
/> />
<StyledDescription> <StyledDescription>What is your project name?</StyledDescription>
What is your project name?
</StyledDescription>
<StyledInput <StyledInput
label="Project name" label="Project name"
value={projectName} value={projectName}
@ -331,8 +322,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
/> />
<ConditionallyRender <ConditionallyRender
condition={ condition={
featureCount !== undefined && featureCount !== undefined && Boolean(featureLimit)
Boolean(featureLimit)
} }
show={ show={
<Box> <Box>
@ -368,14 +358,14 @@ const ProjectForm: React.FC<IProjectForm> = ({
> >
JavaScript RegEx JavaScript RegEx
</a>{' '} </a>{' '}
used to enforce feature flag names used to enforce feature flag names within
within this project. The regex will be this project. The regex will be surrounded
surrounded by a leading <code>^</code>{' '} by a leading <code>^</code> and a trailing{' '}
and a trailing <code>$</code>. <code>$</code>.
</p> </p>
<p> <p>
Leave it empty if you don’t want to add Leave it empty if you don’t want to add a
a naming pattern. naming pattern.
</p> </p>
</StyledPatternNamingExplanation> </StyledPatternNamingExplanation>
</StyledSubtitle> </StyledSubtitle>
@ -402,16 +392,14 @@ const ProjectForm: React.FC<IProjectForm> = ({
error={Boolean(errors.featureNamingPattern)} error={Boolean(errors.featureNamingPattern)}
errorText={errors.featureNamingPattern} errorText={errors.featureNamingPattern}
onChange={e => onChange={e =>
onSetFeatureNamingPattern( onSetFeatureNamingPattern(e.target.value)
e.target.value
)
} }
/> />
<StyledSubtitle> <StyledSubtitle>
<p id="pattern-additional-description"> <p id="pattern-additional-description">
The example and description will be The example and description will be shown to
shown to users when they create a new users when they create a new feature flag in
feature flag in this project. this project.
</p> </p>
</StyledSubtitle> </StyledSubtitle>
@ -425,9 +413,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
error={Boolean(errors.namingExample)} error={Boolean(errors.namingExample)}
errorText={errors.namingExample} errorText={errors.namingExample}
onChange={e => onChange={e =>
onSetFeatureNamingExample( onSetFeatureNamingExample(e.target.value)
e.target.value
)
} }
/> />
<StyledTextField <StyledTextField
@ -451,7 +437,6 @@ The flag name should contain the project name, the feature name, and the ticket
</StyledFieldset> </StyledFieldset>
} }
/> />
</StyledContainer>
<StyledButtonContainer>{children}</StyledButtonContainer> <StyledButtonContainer>{children}</StyledButtonContainer>
</StyledForm> </StyledForm>
); );