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,
+ ),
};
};