github-actions: fix status sorting in runs table

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>

plugins/github-actions/src/components/WorkflowRunStatus/WorkflowRunStatus.tsx

@@ -24,59 +24,74 @@ import {
   StatusError,
 } from '@backstage/core-components';
 
-export const WorkflowRunStatus = ({
+export const WorkflowRunStatus = (props: {
+  status?: string;
+  conclusion?: string;
+}) => {
+  return (
+    <>
+      <WorkflowIcon {...props} />
+      {getStatusDescription(props)}
+    </>
+  );
+};
+
+export function WorkflowIcon({
   status,
   conclusion,
 }: {
   status?: string;
   conclusion?: string;
-}) => {
+}) {
   if (status === undefined) return null;
   switch (status.toLocaleLowerCase('en-US')) {
     case 'queued':
-      return (
-        <>
-          <StatusPending /> Queued
-        </>
-      );
+      return <StatusPending />;
+
     case 'in_progress':
-      return (
-        <>
-          <StatusRunning /> In progress
-        </>
-      );
+      return <StatusRunning />;
     case 'completed':
       switch (conclusion?.toLocaleLowerCase('en-US')) {
         case 'skipped' || 'canceled':
-          return (
-            <>
-              <StatusAborted /> Aborted
-            </>
-          );
+          return <StatusAborted />;
+
         case 'timed_out':
-          return (
-            <>
-              <StatusWarning /> Timed out
-            </>
-          );
+          return <StatusWarning />;
         case 'failure':
-          return (
-            <>
-              <StatusError /> Error
-            </>
-          );
+          return <StatusError />;
         default:
-          return (
-            <>
-              <StatusOK /> Completed
-            </>
-          );
+          return <StatusOK />;
       }
     default:
-      return (
-        <>
-          <StatusPending /> Pending
-        </>
-      );
+      return <StatusPending />;
   }
-};
+}
+
+export function getStatusDescription({
+  status,
+  conclusion,
+}: {
+  status?: string;
+  conclusion?: string;
+}) {
+  if (status === undefined) return '';
+  switch (status.toLocaleLowerCase('en-US')) {
+    case 'queued':
+      return 'Queued';
+    case 'in_progress':
+      return 'In progress';
+    case 'completed':
+      switch (conclusion?.toLocaleLowerCase('en-US')) {
+        case 'skipped' || 'canceled':
+          return 'Aborted';
+        case 'timed_out':
+          return 'Timed out';
+        case 'failure':
+          return 'Error';
+        default:
+          return 'Completed';
+      }
+    default:
+      return 'Pending';
+  }
+}

plugins/github-actions/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx

@@ -39,8 +39,9 @@ import {
 } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { getHostnameFromEntity } from '../getHostnameFromEntity';
+import { getStatusDescription } from '../WorkflowRunStatus/WorkflowRunStatus';
 
-const generatedColumns: TableColumn[] = [
+const generatedColumns: TableColumn<Partial<WorkflowRun>>[] = [
   {
     title: 'ID',
     field: 'id',
@@ -51,7 +52,7 @@ const generatedColumns: TableColumn[] = [
     title: 'Message',
     field: 'message',
     highlight: true,
-    render: (row: Partial<WorkflowRun>) => {
+    render: row => {
       const LinkWrapper = () => {
         const routeLink = useRouteRef(buildRouteRef);
         return (
@@ -66,7 +67,7 @@ const generatedColumns: TableColumn[] = [
   },
   {
     title: 'Source',
-    render: (row: Partial<WorkflowRun>) => (
+    render: row => (
       <Typography variant="body2" noWrap>
         <Typography paragraph variant="body2">
           {row.source?.branchName}
@@ -83,9 +84,10 @@ const generatedColumns: TableColumn[] = [
   },
   {
     title: 'Status',
-    width: '150px',
-
-    render: (row: Partial<WorkflowRun>) => (
+    customSort: (d1, d2) => {
+      return getStatusDescription(d1).localeCompare(getStatusDescription(d2));
+    },
+    render: row => (
       <Box display="flex" alignItems="center">
         <WorkflowRunStatus status={row.status} conclusion={row.conclusion} />
       </Box>