fix: sort promotions with running and pending first

ui/src/features/stage/promotions.test.ts

@@ -0,0 +1,75 @@
+import { Timestamp } from '@bufbuild/protobuf';
+import { expect, test, describe } from 'vitest';
+
+import { ObjectMeta } from '@ui/gen/metav1/types_pb';
+import { Promotion, PromotionStatus } from '@ui/gen/v1alpha1/types_pb';
+
+import { sortPromotions } from './utils/sort';
+
+const newTestPromotion = (phase: string, seconds: number): Promotion => {
+  return {
+    metadata: {
+      creationTimestamp: new Timestamp({
+        seconds: BigInt(seconds)
+      })
+    } as ObjectMeta,
+    status: {
+      phase
+    } as PromotionStatus
+  } as Promotion;
+};
+
+const running1 = newTestPromotion('Running', 1);
+const pending2 = newTestPromotion('Pending', 2);
+const running3 = newTestPromotion('Running', 3);
+const pending4 = newTestPromotion('Pending', 4);
+const succeeded5 = newTestPromotion('Succeeded', 5);
+const failed6 = newTestPromotion('Failed', 6);
+const unknown7 = newTestPromotion('Unknown', 7);
+const running8 = newTestPromotion('Running', 8);
+const pending9 = newTestPromotion('Pending', 9);
+const running10 = newTestPromotion('Running', 10);
+const pending11 = newTestPromotion('Pending', 11);
+const succeeded12 = newTestPromotion('Succeeded', 12);
+const errored13 = newTestPromotion('Errored', 13);
+const unknown14 = newTestPromotion('Unknown', 14);
+
+const testPromotions = [
+  running1,
+  pending2,
+  running3,
+  pending4,
+  succeeded5,
+  failed6,
+  unknown7,
+  running8,
+  pending9,
+  running10,
+  pending11,
+  succeeded12,
+  errored13,
+  unknown14
+];
+
+const orderedPromotions = [
+  running10,
+  running8,
+  running3,
+  running1,
+  pending11,
+  pending9,
+  pending4,
+  pending2,
+  unknown14,
+  errored13,
+  succeeded12,
+  unknown7,
+  failed6,
+  succeeded5
+];
+
+describe('sortPromotions', () => {
+  test('sorts promotions', () => {
+    expect(testPromotions.sort(sortPromotions)).toEqual(orderedPromotions);
+  });
+});

ui/src/features/stage/promotions.tsx

@@ -3,7 +3,6 @@ import {
   faCircleCheck,
   faCircleExclamation,
   faCircleNotch,
-  faCircleQuestion,
   faHourglassStart
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -20,6 +19,8 @@ import { KargoService } from '@ui/gen/service/v1alpha1/service_connect';
 import { ListPromotionsResponse } from '@ui/gen/service/v1alpha1/service_pb';
 import { Promotion } from '@ui/gen/v1alpha1/types_pb';
 
+import { sortPromotions } from './utils/sort';
+
 export const Promotions = () => {
   const client = useQueryClient();
   const { name: projectName, stageName } = useParams();
@@ -76,16 +77,10 @@ export const Promotions = () => {
     return () => cancel.abort();
   }, [isLoading]);
 
-  const promotions = React.useMemo(
-    () =>
-      // Immutable sorting
-      [...(promotionsResponse?.promotions || [])].sort(
-        (a, b) =>
-          Number(b.metadata?.creationTimestamp?.seconds || 0) -
-          Number(a.metadata?.creationTimestamp?.seconds || 0)
-      ),
-    [promotionsResponse]
-  );
+  const promotions = React.useMemo(() => {
+    // Immutable sorting
+    return [...(promotionsResponse?.promotions || [])].sort(sortPromotions);
+  }, [promotionsResponse]);
 
   const columns: ColumnsType<Promotion> = [
     {
@@ -95,7 +90,11 @@ export const Promotions = () => {
         switch (promotion.status?.phase) {
           case 'Succeeded':
             return (
-              <Popover content={promotion.status?.message} title={promotion.status?.phase} placement='right'>
+              <Popover
+                content={promotion.status?.message}
+                title={promotion.status?.phase}
+                placement='right'
+              >
                 <FontAwesomeIcon
                   color={theme.defaultSeed.colorSuccess}
                   icon={faCircleCheck}
@@ -106,7 +105,11 @@ export const Promotions = () => {
           case 'Failed':
           case 'Errored':
             return (
-              <Popover content={promotion.status?.message} title={promotion.status?.phase} placement='right'>
+              <Popover
+                content={promotion.status?.message}
+                title={promotion.status?.phase}
+                placement='right'
+              >
                 <FontAwesomeIcon
                   color={theme.defaultSeed.colorError}
                   icon={faCircleExclamation}

ui/src/features/stage/utils/sort.ts

@@ -0,0 +1,28 @@
+import { Promotion } from '@ui/gen/v1alpha1/types_pb';
+
+export const sortPromotions = (a: Promotion, b: Promotion) => {
+  const timestampDiff =
+    Number(b.metadata?.creationTimestamp?.seconds || 0) -
+    Number(a.metadata?.creationTimestamp?.seconds || 0);
+
+  const aIsRunning = a.status?.phase === 'Running';
+  const bIsRunning = b.status?.phase === 'Running';
+  const aIsPending = a.status?.phase === 'Pending';
+  const bIsPending = b.status?.phase === 'Pending';
+
+  if (aIsRunning || bIsRunning) {
+    if (aIsRunning && bIsRunning) {
+      return timestampDiff;
+    }
+    return aIsRunning ? -1 : 1;
+  }
+
+  if (aIsPending || bIsPending) {
+    if (aIsPending && bIsPending) {
+      return timestampDiff;
+    }
+    return aIsPending ? -1 : 1;
+  }
+
+  return timestampDiff;
+};