diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx index 7ee586562c..c3f0cdf74e 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx @@ -22,6 +22,7 @@ import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequ import { RemoveReleasePlanChangeRequestDialog } from './ChangeRequest/RemoveReleasePlanChangeRequestDialog'; import { StartMilestoneChangeRequestDialog } from './ChangeRequest/StartMilestoneChangeRequestDialog'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; +import { Truncator } from 'component/common/Truncator/Truncator'; const StyledContainer = styled('div', { shouldForwardProp: (prop) => prop !== 'readonly', @@ -58,7 +59,6 @@ const StyledHeaderTitleLabel = styled('span')(({ theme }) => ({ const StyledHeaderDescription = styled('span')(({ theme }) => ({ fontSize: theme.fontSizes.smallBody, - lineHeight: 0.5, color: theme.palette.text.secondary, })); @@ -248,7 +248,9 @@ export const ReleasePlan = ({ {name} - {description} + + {description} + {!readonly && ( diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneCard.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneCard.tsx index 306a8e9ef9..df8667293b 100644 --- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneCard.tsx +++ b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneCard.tsx @@ -12,10 +12,7 @@ import { FormHelperText, } from '@mui/material'; import Delete from '@mui/icons-material/DeleteOutlined'; -import type { - IReleasePlanMilestonePayload, - IReleasePlanMilestoneStrategy, -} from 'interfaces/releasePlans'; +import type { IReleasePlanMilestoneStrategy } from 'interfaces/releasePlans'; import { type DragEventHandler, type RefObject, useRef, useState } from 'react'; import ExpandMore from '@mui/icons-material/ExpandMore'; import { MilestoneCardName } from './MilestoneCardName'; @@ -25,6 +22,7 @@ import { SidebarModal } from 'component/common/SidebarModal/SidebarModal'; import { ReleasePlanTemplateAddStrategyForm } from '../../MilestoneStrategy/ReleasePlanTemplateAddStrategyForm'; import DragIndicator from '@mui/icons-material/DragIndicator'; import { type OnMoveItem, useDragItem } from 'hooks/useDragItem'; +import type { IExtendedMilestonePayload } from 'component/releases/hooks/useTemplateForm'; const StyledMilestoneCard = styled(Card, { shouldForwardProp: (prop) => prop !== 'hasError', @@ -124,8 +122,8 @@ const StyledDragIcon = styled(IconButton)(({ theme }) => ({ })); export interface IMilestoneCardProps { - milestone: IReleasePlanMilestonePayload; - milestoneChanged: (milestone: IReleasePlanMilestonePayload) => void; + milestone: IExtendedMilestonePayload; + milestoneChanged: (milestone: IExtendedMilestonePayload) => void; errors: { [key: string]: string }; clearErrors: () => void; removable: boolean; @@ -152,7 +150,7 @@ export const MilestoneCard = ({ } | null>(null); const [addUpdateStrategyOpen, setAddUpdateStrategyOpen] = useState(false); const [strategyModeEdit, setStrategyModeEdit] = useState(false); - const [expanded, setExpanded] = useState(false); + const [expanded, setExpanded] = useState(Boolean(milestone.startExpanded)); const isPopoverOpen = Boolean(anchor); const popoverId = isPopoverOpen ? 'MilestoneStrategyMenuPopover' diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneList.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneList.tsx index af41e622d8..dd60bdab59 100644 --- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneList.tsx +++ b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneList.tsx @@ -80,6 +80,15 @@ export const MilestoneList = ({ id: uuidv4(), name: `Milestone ${prev.length + 1}`, sortOrder: prev.length, + strategies: prev[prev.length - 1].strategies?.map( + (strat) => { + return { + ...strat, + id: uuidv4(), + }; + }, + ), + startExpanded: true, }, ]) } diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateForm.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateForm.tsx index e2ab3f8a19..b3a1fb3057 100644 --- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateForm.tsx +++ b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/TemplateForm.tsx @@ -4,9 +4,9 @@ import type { IReleasePlanMilestonePayload } from 'interfaces/releasePlans'; import FormTemplate from 'component/common/FormTemplate/FormTemplate'; import { TemplateFormDescription } from './TemplateFormDescription'; import { MilestoneList } from './MilestoneList/MilestoneList'; +import type { IExtendedMilestonePayload } from 'component/releases/hooks/useTemplateForm'; const StyledInput = styled(Input)(({ theme }) => ({ - width: '100%', maxWidth: theme.spacing(50), fieldset: { border: 'none' }, 'label::first-letter': { @@ -16,6 +16,16 @@ const StyledInput = styled(Input)(({ theme }) => ({ padding: theme.spacing(0), })); +const StyledDescriptionInput = styled(Input)(({ theme }) => ({ + width: '100%', + fieldset: { border: 'none' }, + 'label::first-letter': { + textTransform: 'uppercase', + }, + marginBottom: theme.spacing(2), + padding: theme.spacing(2, 5, 1, 1.75), +})); + const StyledForm = styled('form')(({ theme }) => ({ display: 'flex', flexDirection: 'column', @@ -28,9 +38,9 @@ interface ITemplateFormProps { setName: React.Dispatch>; description: string; setDescription: React.Dispatch>; - milestones: IReleasePlanMilestonePayload[]; + milestones: IExtendedMilestonePayload[]; setMilestones: React.Dispatch< - React.SetStateAction + React.SetStateAction >; errors: { [key: string]: string }; clearErrors: () => void; @@ -91,8 +101,9 @@ export const TemplateForm: React.FC = ({ }} size='medium' /> - setDescription(e.target.value)} InputProps={{ @@ -107,7 +118,7 @@ export const TemplateForm: React.FC = ({ padding: 0, }, }} - size='medium' + size='small' /> { @@ -93,7 +98,9 @@ export const useTemplateForm = ( return { name, description, - milestones, + milestones: milestones.map( + ({ startExpanded, ...milestone }) => milestone, + ), }; };