Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

chore: improve create template fields for name+description (#9075)

Browse Source
This commit is contained in:
David Leek 2025-01-10 14:39:17 +01:00 committed by GitHub
parent fda2252957
commit cc55d8dfa8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateForm.tsx
View File

@ -1,29 +1,32 @@
import Input from 'component/common/Input/Input'; import Input from 'component/common/Input/Input';
import { styled } from '@mui/material'; import { styled, useTheme } from '@mui/material';
import { MilestoneList } from './MilestoneList/MilestoneList';
import type { import type {
IReleasePlanMilestonePayload, IReleasePlanMilestonePayload,
IReleasePlanMilestoneStrategy, IReleasePlanMilestoneStrategy,
} from 'interfaces/releasePlans'; } from 'interfaces/releasePlans';
import FormTemplate from 'component/common/FormTemplate/FormTemplate'; import FormTemplate from 'component/common/FormTemplate/FormTemplate';
import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
import { useState } from 'react'; import { useState } from 'react';
import { ReleasePlanTemplateAddStrategyForm } from './MilestoneStrategy/ReleasePlanTemplateAddStrategyForm';
import { TemplateFormDescription } from './TemplateFormDescription'; import { TemplateFormDescription } from './TemplateFormDescription';
import { MilestoneList } from './MilestoneList/MilestoneList';
const StyledInputDescription = styled('p')(({ theme }) => ({ import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
marginBottom: theme.spacing(1), import { ReleasePlanTemplateAddStrategyForm } from './MilestoneStrategy/ReleasePlanTemplateAddStrategyForm';
}));
const StyledInput = styled(Input)(({ theme }) => ({ const StyledInput = styled(Input)(({ theme }) => ({
width: '100%', width: '100%',
maxWidth: theme.spacing(50),
fieldset: { border: 'none' },
'label::first-letter': {
textTransform: 'uppercase',
},
marginBottom: theme.spacing(2), marginBottom: theme.spacing(2),
padding: theme.spacing(0),
})); }));
const StyledForm = styled('form')(() => ({ const StyledForm = styled('form')(({ theme }) => ({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
height: '100%', height: '100%',
paddingTop: theme.spacing(5),
})); }));
interface ITemplateFormProps { interface ITemplateFormProps {
@ -72,6 +75,8 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
title: '', title: '',
id: 'temp', id: 'temp',
}); });
const theme = useTheme();
const openAddUpdateStrategyForm = ( const openAddUpdateStrategyForm = (
milestoneId: string, milestoneId: string,
strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>, strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
@ -158,28 +163,42 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
formatApiCode={formatApiCode} formatApiCode={formatApiCode}
> >
<StyledForm onSubmit={handleSubmit}> <StyledForm onSubmit={handleSubmit}>
<StyledInputDescription>
What would you like to call your template?
</StyledInputDescription>
<StyledInput <StyledInput
label='Template name' label='Template name'
aria-required
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
error={Boolean(errors.name)} error={Boolean(errors.name)}
errorText={errors.name} errorText={errors.name}
onFocus={() => clearErrors()} onFocus={() => {
delete errors.name;
}}
autoFocus autoFocus
InputProps={{
style: { fontSize: theme.typography.h1.fontSize },
}}
InputLabelProps={{
style: { fontSize: theme.typography.h1.fontSize },
}}
size='medium'
/> />
<StyledInputDescription>
What's the purpose of this template?
</StyledInputDescription>
<StyledInput <StyledInput
label='Template description (optional)' label='Template description (optional)'
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
error={Boolean(errors.description)} InputProps={{
errorText={errors.description} style: {
onFocus={() => clearErrors()} fontSize: theme.typography.h2.fontSize,
padding: 0,
},
}}
InputLabelProps={{
style: {
fontSize: theme.typography.h2.fontSize,
padding: 0,
},
}}
size='medium'
/> />
<MilestoneList <MilestoneList
milestones={milestones} milestones={milestones}