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