diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.test.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.test.tsx
index 4205282a15..71f64c1dae 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.test.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.test.tsx
@@ -13,6 +13,7 @@ const server = testServerSetup();
const mockChangeRequest = (
featureName: string,
state: ChangeRequestState,
+ failureReason?: string,
): IChangeRequest => {
const result: IChangeRequest = {
id: 1,
@@ -65,6 +66,10 @@ const mockChangeRequest = (
};
}
+ if (failureReason) {
+ result.schedule!.failureReason = failureReason;
+ }
+
return result;
};
const pendingChangeRequest = (changeRequest: IChangeRequest) =>
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts
index ff08ed468e..98dbc8e139 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts
@@ -1,5 +1,5 @@
import { styled } from '@mui/material';
-import { Cancel, CheckCircle, Schedule, Edit } from '@mui/icons-material';
+import { Cancel, CheckCircle, Schedule, Edit, Info } from '@mui/icons-material';
import { Box, Typography, Divider } from '@mui/material';
const styledComponentPropCheck = () => (prop: string) =>
@@ -42,6 +42,13 @@ export const StyledScheduledIcon = styled(Schedule)(({ theme }) => ({
width: '35px',
marginRight: theme.spacing(1),
}));
+
+export const StyledInfoIcon = styled(Info)(({ theme }) => ({
+ color: theme.palette.error.main,
+ height: '35px',
+ width: '35px',
+ marginRight: theme.spacing(1),
+}));
export const StyledEditIcon = styled(Edit)(({ theme }) => ({
color: theme.palette.text.secondary,
height: '24px',
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx
index e0aa2caa78..0bf7aba5ad 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx
@@ -21,12 +21,15 @@ import {
StyledScheduledIcon,
StyledEditIcon,
StyledScheduledBox,
+ StyledInfoIcon,
} from './ChangeRequestReviewStatus.styles';
import {
ChangeRequestState,
IChangeRequest,
+ IChangeRequestSchedule,
} from 'component/changeRequest/changeRequest.types';
import { getBrowserTimezone } from './utils';
+import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender';
interface ISuggestChangeReviewsStatusProps {
changeRequest: IChangeRequest;
@@ -106,7 +109,7 @@ const ResolveComponent = ({
changeRequest,
onEditClick,
}: IResolveComponentProps) => {
- const { state } = changeRequest;
+ const { state, schedule } = changeRequest;
if (!state) {
return null;
@@ -129,12 +132,7 @@ const ResolveComponent = ({
}
if (state === 'Scheduled') {
- return (
-
- );
+ return ;
}
return ;
@@ -228,18 +226,17 @@ const StyledIconButton = styled(IconButton)({
});
interface IScheduledProps {
- scheduledDate?: string;
+ schedule?: IChangeRequest['schedule'];
onEditClick?: () => any;
}
-const Scheduled = ({ scheduledDate, onEditClick }: IScheduledProps) => {
+const Scheduled = ({ schedule, onEditClick }: IScheduledProps) => {
const theme = useTheme();
+ const timezone = getBrowserTimezone();
- if (!scheduledDate) {
+ if (!schedule?.scheduledAt) {
return null;
}
- const timezone = getBrowserTimezone();
-
return (
<>
@@ -257,16 +254,12 @@ const Scheduled = ({ scheduledDate, onEditClick }: IScheduledProps) => {
-
-
-
-
- Changes are scheduled to be applied on:{' '}
- {new Date(scheduledDate).toLocaleString()}
-
- Your timezone is {timezone}
-
-
+ }
+ elseShow={}
+ />
+
@@ -275,6 +268,48 @@ const Scheduled = ({ scheduledDate, onEditClick }: IScheduledProps) => {
);
};
+const ScheduledFailed = ({
+ schedule,
+}: { schedule: IChangeRequestSchedule }) => {
+ const theme = useTheme();
+ const timezone = getBrowserTimezone();
+
+ if (!schedule?.scheduledAt) {
+ return null;
+ }
+ return (
+
+
+
+
+ Changes failed to be applied on{' '}
+ {new Date(schedule?.scheduledAt).toLocaleString()} because
+ of {schedule?.failureReason}
+
+ Your timezone is {timezone}
+
+
+ );
+};
+
+const ScheduledPending = ({
+ schedule,
+}: { schedule: IChangeRequestSchedule }) => {
+ const theme = useTheme();
+ const timezone = getBrowserTimezone();
+ return (
+
+
+
+
+ Changes are scheduled to be applied on:{' '}
+ {new Date(schedule?.scheduledAt).toLocaleString()}
+
+ Your timezone is {timezone}
+
+
+ );
+};
const Cancelled = () => {
const theme = useTheme();