Use Tailwind layers, rename workflow status classes

package.json

@@ -80,6 +80,7 @@
     "@lezer/highlight": "^1.1.3",
     "@sveltejs/package": "^2.0.2",
     "@sveltejs/svelte-virtual-list": "^3.0.1",
+    "class-variance-authority": "^0.7.0",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^1.3.7",
     "esm-env": "^1.0.0",
@@ -89,6 +90,7 @@
     "json-bigint": "^1.0.0",
     "just-debounce": "^1.1.0",
     "sanitize-html": "^2.8.1",
+    "tailwind-merge": "^1.14.0",
     "url-pattern": "^1.0.3",
     "uuid": "^9.0.0",
     "vis-timeline": "^7.7.2",

src/app.css

@@ -81,40 +81,42 @@
       url('/src/lib/vendor/css/fonts/NotoSansMono/NotoSansMono-VariableFont_wdth\,wght.ttf');
     font-display: swap;
   }
-}
 
-*,
-html,
-body {
-  box-sizing: border-box;
-}
+  *,
+  html,
+  body {
+    box-sizing: border-box;
+  }
 
-body {
-  font-family: Inter, sans-serif;
-  position: relative;
-  overscroll-behavior: none;
-}
+  body {
+    font-family: Inter, sans-serif;
+    position: relative;
+    overscroll-behavior: none;
+  }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-titles,
-labels {
-  font-family: Poppins, sans-serif;
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  titles,
+  labels {
+    font-family: Poppins, sans-serif;
+  }
 
-.hljs {
-  max-height: 25em;
-  overflow-y: scroll;
+  input[type='search']::-webkit-search-cancel-button {
+    display: none;
+  }
 }
 
-.noto {
-  font-family: 'Noto Sans Mono', monospace;
-}
+@layer components {
+  .hljs {
+    max-height: 25em;
+    overflow-y: scroll;
+  }
 
-input[type='search']::-webkit-search-cancel-button {
-  display: none;
+  .noto {
+    font-family: 'Noto Sans Mono', monospace;
+  }
 }

src/lib/components/workflow-status.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
+  import { cva } from 'class-variance-authority';
+
+  import Badge from '$lib/holocene/badge.svelte';
   import { translate } from '$lib/i18n/translate';
-  import type { EventClassification } from '$lib/types/events';
   import type { WorkflowStatus } from '$lib/types/workflows';
-
+  import type { ScheduleStatus } from '$lib/types/schedule';
+
   import HeartBeat from './heart-beat-indicator.svelte';
 
-  type Status = WorkflowStatus | EventClassification | 'Paused';
+  type Status = WorkflowStatus | ScheduleStatus;
 
-  export let status: Status = 'Running';
   export let delay = 0;
+  export let status: Status = 'Running';
 
-  const humanFriendlyNames: Partial<Record<Status, string>> = {
+  const label: Record<Status, string> = {
     Running: translate('workflows', 'running'),
     TimedOut: translate('workflows', 'timed-out'),
     Completed: translate('workflows', 'completed'),
@@ -21,57 +24,32 @@
     Paused: translate('workflows', 'paused'),
   };
 
-  const colors = {
-    Running: 'blue',
-    TimedOut: 'orange',
-    Completed: 'green',
-    Failed: 'red',
-    ContinuedAsNew: 'purple',
-    Canceled: 'yellow',
-    Terminated: 'gray',
-    Paused: 'yellow',
-  };
-
-  $: color = colors[status];
-  $: label = humanFriendlyNames[status];
-  $: isRunning = label === humanFriendlyNames.Running;
+  const workflowStatus = cva(
+    [
+      'flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap',
+    ],
+    {
+      variants: {
+        status: {
+          Running: 'bg-blue-100 text-blue-700',
+          TimedOut: 'bg-orange-100 text-orange-700',
+          Completed: 'bg-green-100 text-green-700',
+          Failed: 'bg-red-100 text-red-700',
+          ContinuedAsNew: 'bg-gray-200 text-gray-900',
+          Canceled: 'bg-yellow-100 text-yellow-900',
+          Terminated: 'bg-red-100 text-red-700',
+          Paused: 'bg-yellow-100 text-yellow-700',
+        },
+      },
+    },
+  );
 </script>
 
-<span class="flex text-center text-sm font-medium leading-4">
-  <span class="{color} flex items-center rounded-sm px-1 py-0.5 font-secondary">
-    <span class="whitespace-nowrap">{label}</span>
-    {#if isRunning}
+<div class="flex text-center text-sm font-medium leading-4">
+  <span class={workflowStatus({ status })}>
+    {label[status]}
+    {#if status === 'Running'}
       <HeartBeat {delay} />
     {/if}
   </span>
-</span>
-
-<style lang="postcss">
-  .green {
-    @apply bg-green-100 text-green-700;
-  }
-
-  .yellow {
-    @apply bg-yellow-100 text-yellow-900;
-  }
-
-  .blue {
-    @apply bg-blue-100 text-blue-700;
-  }
-
-  .red {
-    @apply bg-red-100 text-red-700;
-  }
-
-  .purple {
-    @apply bg-purple-100 text-purple-900;
-  }
-
-  .gray {
-    @apply bg-gray-200 text-gray-900;
-  }
-
-  .orange {
-    @apply bg-orange-100 text-orange-900;
-  }
-</style>
+</div>

src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-body-cell.test.ts.snap

@@ -20,7 +20,7 @@ exports[`Table_body_cell$ > Start renders 1`] = `"<td class=\\"workflows-summary
 
 exports[`Table_body_cell$ > State Transitions renders 1`] = `"<td class=\\"workflows-summary-table-body-cell svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\">12</td>"`;
 
-exports[`Table_body_cell$ > Status renders 1`] = `"<td class=\\"workflows-summary-table-body-cell svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><span class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"blue flex items-center rounded-sm px-1 py-0.5 font-secondary svelte-b7co3f\\"><span class=\\"whitespace-nowrap\\">Running</span> <div class=\\"heart-beat svelte-8dynez\\" style=\\"--animation-delay:0ms;\\"><div class=\\"heart-rate svelte-8dynez\\"><svg version=\\"1.0\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" x=\\"0px\\" y=\\"0px\\" width=\\"30px\\" height=\\"18px\\" viewBox=\\"0 0 150 73\\" enable-background=\\"new 0 0 150 73\\" xml:space=\\"preserve\\" aria-hidden=\\"true\\" focusable=\\"false\\"><polyline fill=\\"none\\" stroke=\\"#1D4ED8\\" stroke-width=\\"3\\" stroke-miterlimit=\\"10\\" points=\\"0,45.486 18.514,45.486 24.595,33.324 32.676,45.486 37.771,45.486 42.838,55.622 51.959,18 56.067,45 60.067,60.729 63.122,45.486 77.297,45.486 83.379,41.419 90.473,45.486 100,45.486\\"></polyline></svg> <div class=\\"fade-in svelte-8dynez\\"></div> <div class=\\"fade-out svelte-8dynez\\"></div></div> </div></span></span></td>"`;
+exports[`Table_body_cell$ > Status renders 1`] = `"<td class=\\"workflows-summary-table-body-cell svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><span class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary status-running\\"><span class=\\"whitespace-nowrap\\">Running</span> <div class=\\"heart-beat svelte-8dynez\\" style=\\"--animation-delay:0ms;\\"><div class=\\"heart-rate svelte-8dynez\\"><svg version=\\"1.0\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" x=\\"0px\\" y=\\"0px\\" width=\\"30px\\" height=\\"18px\\" viewBox=\\"0 0 150 73\\" enable-background=\\"new 0 0 150 73\\" xml:space=\\"preserve\\" aria-hidden=\\"true\\" focusable=\\"false\\"><polyline fill=\\"none\\" stroke=\\"#1D4ED8\\" stroke-width=\\"3\\" stroke-miterlimit=\\"10\\" points=\\"0,45.486 18.514,45.486 24.595,33.324 32.676,45.486 37.771,45.486 42.838,55.622 51.959,18 56.067,45 60.067,60.729 63.122,45.486 77.297,45.486 83.379,41.419 90.473,45.486 100,45.486\\"></polyline></svg> <div class=\\"fade-in svelte-8dynez\\"></div> <div class=\\"fade-out svelte-8dynez\\"></div></div> </div></span></span></td>"`;
 
 exports[`Table_body_cell$ > Task Queue renders 1`] = `"<td class=\\"workflows-summary-table-body-cell svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\">task-queue</td>"`;
 

src/lib/models/workflow-status.ts

@@ -1,9 +1,8 @@
 import type { WorkflowStatus } from '$lib/types/workflows';
 
-export type WorkflowStatuses = readonly WorkflowStatus[];
 export type WorkflowFilters = readonly (WorkflowStatus | 'All')[];
 
-export const workflowStatuses: WorkflowStatuses = [
+export const workflowStatuses: WorkflowStatus[] = [
   'Running',
   'TimedOut',
   'Completed',

src/lib/types/schedule.ts

@@ -61,3 +61,5 @@ export type SchedulePresetsParameters = {
 export type ScheduleParameters = ScheduleActionParameters &
   ScheduleSpecParameters &
   SchedulePresetsParameters;
+
+export type ScheduleStatus = 'Paused' | 'Running';