From a595c0fbcc0c9de3f0faf83c9490073d93636fe8 Mon Sep 17 00:00:00 2001 From: andreas-unleash Date: Thu, 14 Dec 2023 11:49:14 +0200 Subject: [PATCH] feat: show failure reason for scheduled requests in timeline (#5639) Adds an icon with a tooltip and changes the dot color to red for scheduled change requests Closes # [1-1768](https://linear.app/unleash/issue/1-1768/add-reason-and-icon-to-timeline) Screenshot 2023-12-14 at 10 20 27 --------- Signed-off-by: andreas-unleash --- .../ChangeRequestOverview.tsx | 1 + .../ChangeRequestTimeline.test.tsx | 12 ++++++ .../ChangeRequestTimeline.tsx | 41 ++++++++++++++++--- .../changeRequest/changeRequest.types.ts | 1 + 4 files changed, 50 insertions(+), 5 deletions(-) diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx index bbeb908730..7b979c2c3d 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx @@ -241,6 +241,7 @@ export const ChangeRequestOverview: FC = () => { diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.test.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.test.tsx index 86625909c5..768833fe3d 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.test.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.test.tsx @@ -113,6 +113,18 @@ test('returns warning for Scheduled stage in Scheduled state', () => { ).toBe('warning'); }); +test('returns error for Scheduled stage in Scheduled state with failure reason', () => { + expect( + determineColor( + 'Scheduled', + irrelevantIndex, + 'Scheduled', + irrelevantIndex, + 'conflicts', + ), + ).toBe('error'); +}); + test('returns success for stages at or before activeIndex', () => { expect(determineColor('In review', 1, 'Draft', 0)).toBe('success'); expect(determineColor('In review', 1, 'In review', 1)).toBe('success'); diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx index 3cd36dffd2..8ea89c5398 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { Box, Paper, styled, Typography } from '@mui/material'; +import { Box, Paper, styled, Tooltip, Typography } from '@mui/material'; import Timeline from '@mui/lab/Timeline'; import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem'; import TimelineSeparator from '@mui/lab/TimelineSeparator'; @@ -8,10 +8,13 @@ import TimelineConnector from '@mui/lab/TimelineConnector'; import TimelineContent from '@mui/lab/TimelineContent'; import { ChangeRequestState } from '../../changeRequest.types'; import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender'; +import { HtmlTooltip } from '../../../common/HtmlTooltip/HtmlTooltip'; +import { Info } from '@mui/icons-material'; interface ISuggestChangeTimelineProps { state: ChangeRequestState; scheduledAt?: string; + failureReason?: string; } const StyledPaper = styled(Paper)(({ theme }) => ({ @@ -24,6 +27,11 @@ const StyledBox = styled(Box)(({ theme }) => ({ marginBottom: `-${theme.spacing(4)}`, })); +const StyledSubtitle = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', +})); + const StyledTimeline = styled(Timeline)(() => ({ [`& .${timelineItemClasses.root}:before`]: { flex: 0, @@ -51,6 +59,7 @@ export const determineColor = ( changeRequestStateIndex: number, displayStage: ChangeRequestState, displayStageIndex: number, + failureReason?: string, ) => { if (changeRequestState === 'Cancelled') return 'grey'; @@ -65,7 +74,11 @@ export const determineColor = ( changeRequestStateIndex !== -1 && changeRequestStateIndex === displayStageIndex ) { - return changeRequestState === 'Scheduled' ? 'warning' : 'success'; + return changeRequestState === 'Scheduled' + ? failureReason + ? 'error' + : 'warning' + : 'success'; } if (changeRequestStateIndex + 1 === displayStageIndex) return 'primary'; @@ -75,6 +88,7 @@ export const determineColor = ( export const ChangeRequestTimeline: FC = ({ state, scheduledAt, + failureReason, }) => { let data; switch (state) { @@ -105,6 +119,7 @@ export const ChangeRequestTimeline: FC = ({ activeIndex, title, index, + failureReason, ); let timelineDotProps = {}; @@ -120,6 +135,7 @@ export const ChangeRequestTimeline: FC = ({ color, title, subtitle, + failureReason, index < data.length - 1, timelineDotProps, ); @@ -134,6 +150,7 @@ const createTimelineItem = ( color: 'primary' | 'success' | 'grey' | 'error' | 'warning', title: string, subtitle: string | undefined, + failureReason: string | undefined, shouldConnectToNextItem: boolean, timelineDotProps: { [key: string]: string | undefined } = {}, ) => ( @@ -148,9 +165,23 @@ const createTimelineItem = ( {`(for ${subtitle})`} + + {`(for ${subtitle})`} + + + + } + /> + } /> diff --git a/frontend/src/component/changeRequest/changeRequest.types.ts b/frontend/src/component/changeRequest/changeRequest.types.ts index 0a077282e8..dc5902ee9f 100644 --- a/frontend/src/component/changeRequest/changeRequest.types.ts +++ b/frontend/src/component/changeRequest/changeRequest.types.ts @@ -24,6 +24,7 @@ export interface IChangeRequest { export interface IChangeRequestSchedule { scheduledAt: string; status: 'pending' | 'failed'; + failureReason?: string; } export interface IChangeRequestEnvironmentConfig {