From 4b7e90e549d20f91795356b1a34309922ab5ec31 Mon Sep 17 00:00:00 2001
From: Will Harris <39035380+willdch@users.noreply.github.com>
Date: Thu, 28 Sep 2023 18:24:59 -0700
Subject: [PATCH] Order progress report workflow events desc (#1482)

---
 .../StatusHistory/WorkflowEventList.tsx       | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/scenes/ProgressReports/StatusHistory/WorkflowEventList.tsx b/src/scenes/ProgressReports/StatusHistory/WorkflowEventList.tsx
index abe093eae4..bbb15327cb 100644
--- a/src/scenes/ProgressReports/StatusHistory/WorkflowEventList.tsx
+++ b/src/scenes/ProgressReports/StatusHistory/WorkflowEventList.tsx
@@ -1,7 +1,10 @@
 import { ArrowForwardRounded as ArrowRightIcon } from '@mui/icons-material';
 import { Box, Card, Divider, Stack, Typography } from '@mui/material';
 import { Fragment } from 'react';
-import { ProgressReportStatusLabels as StatusLabels } from '~/api/schema/enumLists';
+import {
+  ProgressReportStatusLabels as StatusLabels,
+  ProgressReportStatusList as StatusList,
+} from '~/api/schema/enumLists';
 import { RelativeDateTime } from '~/components/Formatters';
 import { RichTextView } from '~/components/RichText';
 import { WorkflowEventFragment } from '../Detail/WorkflowEvent.graphql';
@@ -19,6 +22,14 @@ export const WorkFlowEventList = ({
     return null;
   }
 
+  const list = events
+    .map((event, i) => ({
+      ...event,
+      prevStatus: StatusLabels[events[i - 1]?.status ?? StatusList[0]!],
+      status: StatusLabels[event.status],
+    }))
+    .reverse();
+
   return (
     <Stack
       component={Card}
@@ -37,10 +48,10 @@ export const WorkFlowEventList = ({
         containerType: 'inline-size',
       }}
     >
-      {events.map((event: WorkflowEventFragment, i: number) => (
+      {list.map((event) => (
         <Fragment key={event.id}>
           <Typography variant="h4" gridColumn="from" whiteSpace="nowrap">
-            {StatusLabels[events[i - 1]?.status ?? 'NotStarted']}
+            {event.prevStatus}
           </Typography>
           <ArrowRightIcon
             fontSize="small"
@@ -48,7 +59,7 @@ export const WorkFlowEventList = ({
             aria-label="transitioned to"
           />
           <Typography variant="h4" gridColumn="to" whiteSpace="nowrap">
-            {StatusLabels[event.status]}
+            {event.status}
           </Typography>
           <Typography
             variant="caption"