From dd247855d235987e9251ad71f5e2f12a33357956 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Wed, 27 Nov 2024 17:17:25 +0000
Subject: [PATCH] chore: small misc improvements in release plans

---
 .../ReleasePlan/ReleasePlan.tsx               | 19 ++++++------------
 .../ReleasePlan/ReleasePlanMilestone.tsx      | 20 ++++++++++++++++++-
 .../ReleasePlanTemplateCard.tsx               | 12 ++++++++++-
 .../CreateReleasePlanTemplate.tsx             |  2 +-
 .../EditReleasePlanTemplate.tsx               |  1 +
 5 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx
index 3aa1151a5705..413e2a3f2823 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx
@@ -16,26 +16,20 @@ import { ReleasePlanRemoveDialog } from './ReleasePlanRemoveDialog';
 import { ReleasePlanMilestone } from './ReleasePlanMilestone';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
-const StyledContainer = styled('div', {
-    shouldForwardProp: (prop) => prop !== 'disabled',
-})<{ disabled?: boolean }>(({ theme, disabled }) => ({
+const StyledContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(2),
     borderRadius: theme.shape.borderRadiusMedium,
     border: `1px solid ${theme.palette.divider}`,
     '& + &': {
         marginTop: theme.spacing(2),
     },
-    background: disabled
-        ? theme.palette.envAccordion.disabled
-        : theme.palette.background.paper,
+    background: theme.palette.background.paper,
 }));
 
-const StyledHeader = styled('div', {
-    shouldForwardProp: (prop) => prop !== 'disabled',
-})<{ disabled?: boolean }>(({ theme, disabled }) => ({
+const StyledHeader = styled('div')(({ theme }) => ({
     display: 'flex',
     justifyContent: 'space-between',
-    color: disabled ? theme.palette.text.secondary : theme.palette.text.primary,
+    color: theme.palette.text.primary,
 }));
 
 const StyledHeaderTitleContainer = styled('div')(({ theme }) => ({
@@ -132,14 +126,13 @@ export const ReleasePlan = ({ plan }: IReleasePlanProps) => {
         }
     };
 
-    const disabled = !activeMilestoneId;
     const activeIndex = milestones.findIndex(
         (milestone) => milestone.id === activeMilestoneId,
     );
 
     return (
-        <StyledContainer disabled={disabled}>
-            <StyledHeader disabled={disabled}>
+        <StyledContainer>
+            <StyledHeader>
                 <StyledHeaderTitleContainer>
                     <StyledHeaderTitleLabel>
                         Release plan
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone.tsx
index 3213ce37f922..4c7b02954e3d 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone.tsx
@@ -31,6 +31,7 @@ const StyledAccordionSummary = styled(AccordionSummary)({
     '& .MuiAccordionSummary-content': {
         justifyContent: 'space-between',
         alignItems: 'center',
+        minHeight: '30px',
     },
 });
 
@@ -101,6 +102,19 @@ export const ReleasePlanMilestone = ({
               ? 'Restart'
               : 'Start';
 
+    if (!milestone.strategies.length) {
+        return (
+            <StyledAccordion status={status} sx={{ pointerEvents: 'none' }}>
+                <StyledAccordionSummary>
+                    <StyledTitleContainer>
+                        <StyledTitle>{milestone.name}</StyledTitle>
+                    </StyledTitleContainer>
+                    <StyledSecondaryLabel>No strategies</StyledSecondaryLabel>
+                </StyledAccordionSummary>
+            </StyledAccordion>
+        );
+    }
+
     return (
         <StyledAccordion status={status}>
             <StyledAccordionSummary expandIcon={<ExpandMore />}>
@@ -128,7 +142,11 @@ export const ReleasePlanMilestone = ({
                         />
                     </StyledStatus>
                 </StyledTitleContainer>
-                <StyledSecondaryLabel>View strategies</StyledSecondaryLabel>
+                <StyledSecondaryLabel>
+                    {milestone.strategies.length === 1
+                        ? 'View strategy'
+                        : `View ${milestone.strategies.length} strategies`}
+                </StyledSecondaryLabel>
             </StyledAccordionSummary>
             <StyledAccordionDetails>
                 {milestone.strategies.map((strategy, index) => (
diff --git a/frontend/src/component/releases/ReleaseManagement/ReleasePlanTemplateCard.tsx b/frontend/src/component/releases/ReleaseManagement/ReleasePlanTemplateCard.tsx
index a0ab28934c51..00a658b5a133 100644
--- a/frontend/src/component/releases/ReleaseManagement/ReleasePlanTemplateCard.tsx
+++ b/frontend/src/component/releases/ReleaseManagement/ReleasePlanTemplateCard.tsx
@@ -3,9 +3,12 @@ import { ReactComponent as ReleaseTemplateIcon } from 'assets/img/releaseTemplat
 import { styled, Typography } from '@mui/material';
 import { ReleasePlanTemplateCardMenu } from './ReleasePlanTemplateCardMenu';
 import { useNavigate } from 'react-router-dom';
+import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
+import useUserInfo from 'hooks/api/getters/useUserInfo/useUserInfo';
 
 const StyledTemplateCard = styled('aside')(({ theme }) => ({
     height: '100%',
+    cursor: 'pointer',
     '&:hover': {
         transition: 'background-color 0.2s ease-in-out',
         backgroundColor: theme.palette.neutral.light,
@@ -45,6 +48,12 @@ const StyledCreatedBy = styled(Typography)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     marginRight: 'auto',
+    gap: theme.spacing(1),
+}));
+
+const StyledCreatedByAvatar = styled(UserAvatar)(({ theme }) => ({
+    width: theme.spacing(3),
+    height: theme.spacing(3),
 }));
 
 const StyledMenu = styled('div')(({ theme }) => ({
@@ -63,6 +72,7 @@ export const ReleasePlanTemplateCard = ({
     const onClick = () => {
         navigate(`/release-management/edit/${template.id}`);
     };
+    const { user: createdBy } = useUserInfo(`${template.createdByUserId}`);
 
     return (
         <StyledTemplateCard onClick={onClick}>
@@ -75,7 +85,7 @@ export const ReleasePlanTemplateCard = ({
                 <div>{template.name}</div>
                 <StyledDiv>
                     <StyledCreatedBy>
-                        Created by {template.createdByUserId}
+                        Created by <StyledCreatedByAvatar user={createdBy} />
                     </StyledCreatedBy>
                     <StyledMenu
                         onClick={(e) => {
diff --git a/frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx b/frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx
index 621bc1163017..5b8993380577 100644
--- a/frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx
+++ b/frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx
@@ -61,7 +61,7 @@ export const CreateReleasePlanTemplate = () => {
                     type: 'success',
                     title: 'Release plan template created',
                 });
-                navigate(`/release-management/edit/${template.id}`);
+                navigate('/release-management');
             } catch (error: unknown) {
                 setToastApiError(formatUnknownError(error));
             }
diff --git a/frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx b/frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx
index 87113926d753..622fd7961d93 100644
--- a/frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx
+++ b/frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx
@@ -68,6 +68,7 @@ export const EditReleasePlanTemplate = () => {
                     type: 'success',
                     title: 'Release plan template updated',
                 });
+                navigate('/release-management');
             } catch (error: unknown) {
                 setToastApiError(formatUnknownError(error));
             }