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 {