From 43878230b7accbcb7e57b845ae577b03c5a199b6 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 13 Sep 2023 08:38:18 +0200 Subject: [PATCH] UI: make project settings / creation form full-width (#4675) 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. --- .../Project/ProjectForm/ProjectForm.tsx | 455 +++++++++--------- 1 file changed, 220 insertions(+), 235 deletions(-) diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx index e6df250fea..e481572d4c 100644 --- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx +++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx @@ -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,243 +209,234 @@ const ProjectForm: React.FC = ({ return ( - - What is your project Id? - setProjectId(trim(e.target.value))} - error={Boolean(errors.id)} - errorText={errors.id} - onFocus={() => clearErrors()} - onBlur={validateProjectId} - disabled={mode === 'Edit'} - data-testid={PROJECT_ID_INPUT} - autoFocus - required - /> + What is your project Id? + setProjectId(trim(e.target.value))} + error={Boolean(errors.id)} + errorText={errors.id} + onFocus={() => clearErrors()} + onBlur={validateProjectId} + disabled={mode === 'Edit'} + data-testid={PROJECT_ID_INPUT} + autoFocus + required + /> - - What is your project name? - - setProjectName(e.target.value)} - error={Boolean(errors.name)} - errorText={errors.name} - onFocus={() => { - delete errors.name; + What is your project name? + setProjectName(e.target.value)} + error={Boolean(errors.name)} + errorText={errors.name} + onFocus={() => { + delete errors.name; + }} + data-testid={PROJECT_NAME_INPUT} + required + /> + + + What is your project description? + + setProjectDesc(e.target.value)} + data-testid={PROJECT_DESCRIPTION_INPUT} + /> + + + + What is the default stickiness for the project? + + + setProjectStickiness && + setProjectStickiness(e.target.value) + } + editable + /> + + } + /> + <> + - - - What is your project description? - - setProjectDesc(e.target.value)} - data-testid={PROJECT_DESCRIPTION_INPUT} - /> - - - - What is the default stickiness for the project? - - - setProjectStickiness && - setProjectStickiness(e.target.value) - } - editable - /> - - } - /> - <> - -

What is your project collaboration mode?

- - - { - setProjectMode?.(e.target.value as ProjectMode); - }} - options={[ - { key: 'open', label: 'open' }, - { key: 'protected', label: 'protected' }, - ]} - > - - <> - -

Feature flag limit?

- - - - Leave it empty if you don’t want to add a limit - - - setFeatureLimit(e.target.value)} - /> - - ({featureCount} of {featureLimit} used) - - } - /> - - - - - Feature flag naming pattern? - + > +

What is your project collaboration mode?

+ + + { + setProjectMode?.(e.target.value as ProjectMode); + }} + options={[ + { key: 'open', label: 'open' }, + { key: 'protected', label: 'protected' }, + ]} + > + + <> + +

Feature flag limit?

+ + + + Leave it empty if you don’t want to add a limit + + + setFeatureLimit(e.target.value)} + /> + + ({featureCount} of {featureLimit} used) + } + /> + + + + + Feature flag naming pattern? + + + + +

+ Define a{' '} + + JavaScript RegEx + {' '} + used to enforce feature flag names within + this project. The regex will be surrounded + by a leading ^ and a trailing{' '} + $. +

+

+ Leave it empty if you don’t want to add a + naming pattern. +

+ + + + + ^ + + ), + endAdornment: ( + + $ + + ), + }} + type={'text'} + value={featureNamingPattern || ''} + error={Boolean(errors.featureNamingPattern)} + errorText={errors.featureNamingPattern} + onChange={e => + onSetFeatureNamingPattern(e.target.value) + } + /> - -

- Define a{' '} - - JavaScript RegEx - {' '} - used to enforce feature flag names - within this project. The regex will be - surrounded by a leading ^{' '} - and a trailing $. -

-

- Leave it empty if you don’t want to add - a naming pattern. -

- +

+ The example and description will be shown to + users when they create a new feature flag in + this project. +

- - - ^ - - ), - endAdornment: ( - - $ - - ), - }} - type={'text'} - value={featureNamingPattern || ''} - error={Boolean(errors.featureNamingPattern)} - errorText={errors.featureNamingPattern} - onChange={e => - onSetFeatureNamingPattern( - e.target.value - ) - } - /> - -

- The example and description will be - shown to users when they create a new - feature flag in this project. -

- - - onSetFeatureNamingExample( - e.target.value - ) - } - /> - .. + + onSetFeatureNamingExample(e.target.value) + } + /> + .. The flag name should contain the project name, the feature name, and the ticket number, each separated by a dot.`} - multiline - minRows={5} - value={featureNamingDescription || ''} - onChange={e => - onSetFeatureNamingDescription( - e.target.value - ) - } - /> - - - } - /> - + multiline + minRows={5} + value={featureNamingDescription || ''} + onChange={e => + onSetFeatureNamingDescription( + e.target.value + ) + } + /> + + + } + /> {children} );