From f6987909e75cc18996fd52ef788417ce85297f62 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Fri, 7 Mar 2025 11:18:09 +0100 Subject: [PATCH] Chore(1-3449): release plans in strategy env (#9441) Use new design for release plans in flag environments. - Move old ReleasePlanMilestone into Legacy file and update imports - In the new version, use the same strategy list and item as in the general strategy list and milestone template creation (components to be extracted in the future) - Fix an issue with the border being obscured by overflow by hiding overflow ![image](https://github.com/user-attachments/assets/2258263d-aa96-4939-8af1-88236050cbd6) --- .../Changes/Change/ReleasePlanChange.tsx | 2 +- .../StrategyItem/StrategyItem.tsx | 2 +- .../ReleasePlan/LegacyReleasePlan.tsx | 2 +- .../LegacyReleasePlanMilestone.tsx | 130 ++++++++++++++++++ .../ReleasePlanMilestone.tsx | 39 ++++-- .../ReleasePlanMilestoneStrategy.tsx | 1 + .../MilestoneList/MilestoneList.tsx | 16 +++ 7 files changed, 175 insertions(+), 17 deletions(-) create mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/LegacyReleasePlanMilestone.tsx diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx index 7511884a7d..2ef8eda1e2 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx +++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx @@ -12,7 +12,7 @@ import { useReleasePlans } from 'hooks/api/getters/useReleasePlans/useReleasePla import { TooltipLink } from 'component/common/TooltipLink/TooltipLink'; import EventDiff from 'component/events/EventDiff/EventDiff'; import { ReleasePlan } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan'; -import { ReleasePlanMilestone } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone'; +import { ReleasePlanMilestone } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/LegacyReleasePlanMilestone'; import type { IReleasePlan } from 'interfaces/releasePlans'; export const ChangeItemWrapper = styled(Box)({ diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx index 123c984dd8..52ef339af3 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx @@ -6,7 +6,7 @@ import { Box } from '@mui/material'; import { StrategyItemContainer as NewStrategyItemContainer } from 'component/common/StrategyItemContainer/StrategyItemContainer'; type StrategyItemProps = { - headerItemsRight: ReactNode; + headerItemsRight?: ReactNode; strategy: IFeatureStrategy; onDragStart?: DragEventHandler; onDragEnd?: DragEventHandler; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlan.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlan.tsx index c3f0cdf74e..2aef613646 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlan.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlan.tsx @@ -13,7 +13,7 @@ import type { import { useState } from 'react'; import { formatUnknownError } from 'utils/formatUnknownError'; import { ReleasePlanRemoveDialog } from './ReleasePlanRemoveDialog'; -import { ReleasePlanMilestone } from './ReleasePlanMilestone/ReleasePlanMilestone'; +import { ReleasePlanMilestone } from './ReleasePlanMilestone/LegacyReleasePlanMilestone'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; import { useUiFlag } from 'hooks/useUiFlag'; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/LegacyReleasePlanMilestone.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/LegacyReleasePlanMilestone.tsx new file mode 100644 index 0000000000..b286fab7cb --- /dev/null +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/LegacyReleasePlanMilestone.tsx @@ -0,0 +1,130 @@ +// deprecated; remove with `flagOverviewRedesign` flag +import ExpandMore from '@mui/icons-material/ExpandMore'; +import { + Accordion, + AccordionDetails, + AccordionSummary, + styled, +} from '@mui/material'; +import type { IReleasePlanMilestone } from 'interfaces/releasePlans'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { ReleasePlanMilestoneStrategy } from './ReleasePlanMilestoneStrategy'; +import { StrategySeparator } from 'component/common/StrategySeparator/LegacyStrategySeparator'; +import { + ReleasePlanMilestoneStatus, + type MilestoneStatus, +} from './ReleasePlanMilestoneStatus'; +import { useState } from 'react'; + +const StyledAccordion = styled(Accordion, { + shouldForwardProp: (prop) => prop !== 'status', +})<{ status: MilestoneStatus }>(({ theme, status }) => ({ + border: `1px solid ${status === 'active' ? theme.palette.success.border : theme.palette.divider}`, + boxShadow: 'none', + margin: 0, + backgroundColor: theme.palette.background.paper, + '&:before': { + display: 'none', + }, +})); + +const StyledAccordionSummary = styled(AccordionSummary)({ + '& .MuiAccordionSummary-content': { + justifyContent: 'space-between', + alignItems: 'center', + minHeight: '30px', + }, +}); + +const StyledTitleContainer = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'start', + flexDirection: 'column', + gap: theme.spacing(0.5), +})); + +const StyledTitle = styled('span')(({ theme }) => ({ + fontWeight: theme.fontWeight.bold, +})); + +const StyledSecondaryLabel = styled('span')(({ theme }) => ({ + color: theme.palette.text.secondary, + fontSize: theme.fontSizes.smallBody, +})); + +const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({ + borderBottomLeftRadius: theme.shape.borderRadiusLarge, + borderBottomRightRadius: theme.shape.borderRadiusLarge, +})); + +interface IReleasePlanMilestoneProps { + milestone: IReleasePlanMilestone; + status?: MilestoneStatus; + onStartMilestone?: (milestone: IReleasePlanMilestone) => void; + readonly?: boolean; +} + +export const ReleasePlanMilestone = ({ + milestone, + status = 'not-started', + onStartMilestone, + readonly, +}: IReleasePlanMilestoneProps) => { + const [expanded, setExpanded] = useState(false); + + if (!milestone.strategies.length) { + return ( + + + + {milestone.name} + {!readonly && onStartMilestone && ( + + onStartMilestone(milestone) + } + /> + )} + + No strategies + + + ); + } + + return ( + setExpanded(expanded)} + > + }> + + {milestone.name} + {!readonly && onStartMilestone && ( + onStartMilestone(milestone)} + /> + )} + + + {milestone.strategies.length === 1 + ? `${expanded ? 'Hide' : 'View'} strategy` + : `${expanded ? 'Hide' : 'View'} ${milestone.strategies.length} strategies`} + + + + {milestone.strategies.map((strategy, index) => ( +
+ 0} + show={} + /> + +
+ ))} + + + ); +}; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx index 4706bfb903..013fe483fe 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone.tsx @@ -6,19 +6,23 @@ import { styled, } from '@mui/material'; import type { IReleasePlanMilestone } from 'interfaces/releasePlans'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { ReleasePlanMilestoneStrategy } from './ReleasePlanMilestoneStrategy'; -import { StrategySeparator } from 'component/common/StrategySeparator/LegacyStrategySeparator'; import { ReleasePlanMilestoneStatus, type MilestoneStatus, } from './ReleasePlanMilestoneStatus'; import { useState } from 'react'; +import { + StyledContentList, + StyledListItem, +} from '../../FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/EnvironmentAccordionBody'; +import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; +import { StrategyItem } from '../../FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem'; const StyledAccordion = styled(Accordion, { shouldForwardProp: (prop) => prop !== 'status', })<{ status: MilestoneStatus }>(({ theme, status }) => ({ border: `1px solid ${status === 'active' ? theme.palette.success.border : theme.palette.divider}`, + overflow: 'hidden', boxShadow: 'none', margin: 0, backgroundColor: theme.palette.background.paper, @@ -52,8 +56,7 @@ const StyledSecondaryLabel = styled('span')(({ theme }) => ({ })); const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({ - borderBottomLeftRadius: theme.shape.borderRadiusLarge, - borderBottomRightRadius: theme.shape.borderRadiusLarge, + padding: 0, })); interface IReleasePlanMilestoneProps { @@ -114,15 +117,23 @@ export const ReleasePlanMilestone = ({ - {milestone.strategies.map((strategy, index) => ( -
- 0} - show={} - /> - -
- ))} + + {milestone.strategies.map((strategy, index) => ( + + {index > 0 ? : null} + + + + ))} + ); diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStrategy.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStrategy.tsx index 462310dac5..d7168636b1 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStrategy.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStrategy.tsx @@ -1,3 +1,4 @@ +// deprecated; remove with `flagOverviewRedesign` flag import { Box, styled } from '@mui/material'; import { StrategyExecution } from '../../FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution'; import SplitPreviewSlider from 'component/feature/StrategyTypes/SplitPreviewSlider/SplitPreviewSlider'; diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneList.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneList.tsx index 2929c9964c..e3207c4b6b 100644 --- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneList.tsx +++ b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneList.tsx @@ -38,6 +38,22 @@ export const MilestoneList = ({ } if (dragIndex !== dropIndex) { + // todo! See if there's a way to make this snippet to stabilize dragging before removing flag `flagOverviewRedesign` + // We don't have a reference to `ref` or `event` here, but maybe we can make it work? Somehow? + + // const { top, bottom } = ref.current.getBoundingClientRect(); + // const overTargetTop = event.clientY - top < dragItem.height; + // const overTargetBottom = + // bottom - event.clientY < dragItem.height; + // const draggingUp = dragItem.index > targetIndex; + + // // prevent oscillating by only reordering if there is sufficient space + // if ( + // (overTargetTop && draggingUp) || + // (overTargetBottom && !draggingUp) + // ) { + // // reorder here + // } const oldMilestones = milestones || []; const newMilestones = [...oldMilestones]; const movedMilestone = newMilestones.splice(dragIndex, 1)[0];