chore: fix small UI issues in release templates/plans (#9341)

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 = ({
                     </StyledHeaderTitleLabel>
                     <span>{name}</span>
                     <StyledHeaderDescription>
+                        <Truncator lines={2} title={description}>
                             {description}
+                        </Truncator>
                     </StyledHeaderDescription>
                 </StyledHeaderTitleContainer>
                 {!readonly && (

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 {
+import type { IReleasePlanMilestoneStrategy } from 'interfaces/releasePlans';
-    IReleasePlanMilestonePayload,
-    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;
+    milestone: IExtendedMilestonePayload;
-    milestoneChanged: (milestone: IReleasePlanMilestonePayload) => void;
+    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'

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,
                         },
                     ])
                 }

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<React.SetStateAction<string>>;
     description: string;
     setDescription: React.Dispatch<React.SetStateAction<string>>;
-    milestones: IReleasePlanMilestonePayload[];
+    milestones: IExtendedMilestonePayload[];
     setMilestones: React.Dispatch<
-        React.SetStateAction<IReleasePlanMilestonePayload[]>
+        React.SetStateAction<IExtendedMilestonePayload[]>
     >;
     errors: { [key: string]: string };
     clearErrors: () => void;
@@ -91,8 +101,9 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
                     }}
                     size='medium'
                 />
-                <StyledInput
+                <StyledDescriptionInput
                     label='Template description (optional)'
+                    multiline
                     value={description}
                     onChange={(e) => setDescription(e.target.value)}
                     InputProps={{
@@ -107,7 +118,7 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
                             padding: 0,
                         },
                     }}
-                    size='medium'
+                    size='small'
                 />
                 <MilestoneList
                     milestones={milestones}

frontend/src/component/releases/hooks/useTemplateForm.ts

@@ -2,10 +2,15 @@ import type { IReleasePlanMilestonePayload } from 'interfaces/releasePlans';
 import { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
+export interface IExtendedMilestonePayload
+    extends IReleasePlanMilestonePayload {
+    startExpanded?: boolean;
+}
+
 export const useTemplateForm = (
     initialName = '',
     initialDescription = '',
-    initialMilestones: IReleasePlanMilestonePayload[] = [
+    initialMilestones: IExtendedMilestonePayload[] = [
         { id: uuidv4(), name: 'Milestone 1', sortOrder: 0 },
     ],
 ) => {
@@ -93,7 +98,9 @@ export const useTemplateForm = (
         return {
             name,
             description,
-            milestones,
+            milestones: milestones.map(
+                ({ startExpanded, ...milestone }) => milestone,
+            ),
         };
     };