Added support for displaying a split tag if you use key_value or key:value format

Author: matt-aitken

apps/webapp/app/components/runs/v3/RunTag.tsx

@@ -1,14 +1,48 @@
+import { useMemo } from "react";
 import tagLeftPath from "./tag-left.svg";
 
-type Tag = string;
+type Tag = string | { key: string; value: string };
 
-export function RunTag({ tag }: { tag: Tag }) {
-  return (
-    <span className="flex h-6 items-stretch">
-      <img src={tagLeftPath} alt="" className="block h-full w-[0.5625rem]" />
-      <span className="flex items-center rounded-r-sm border-y border-r border-charcoal-700 bg-charcoal-800 pr-1.5 text-text-dimmed">
-        {tag}
+export function RunTag({ tag }: { tag: string }) {
+  const tagResult = useMemo(() => splitTag(tag), [tag]);
+
+  if (typeof tagResult === "string") {
+    return (
+      <span className="flex h-6 items-stretch">
+        <img src={tagLeftPath} alt="" className="block h-full w-[0.5625rem]" />
+        <span className="flex items-center rounded-r-sm border-y border-r border-charcoal-700 bg-charcoal-800 pr-1.5 text-text-dimmed">
+          {tag}
+        </span>
+      </span>
+    );
+  } else {
+    return (
+      <span className="flex h-6 items-stretch">
+        <img src={tagLeftPath} alt="" className="block h-full w-[0.5625rem]" />
+        <span className="flex items-center border-y border-r border-charcoal-700 bg-charcoal-800 pr-1.5 text-text-dimmed">
+          {tagResult.key}
+        </span>
+        <span className="flex items-center rounded-r-sm border-y border-r border-charcoal-700 bg-charcoal-750 px-1.5 text-text-dimmed">
+          {tagResult.value}
+        </span>
       </span>
-    </span>
-  );
+    );
+  }
+}
+
+/** Takes a string and turns it into a tag
+ *
+ * If the string has 12 or fewer alpha characters followed by an underscore or colon then we return an object with a key and value
+ * Otherwise we return the original string
+ */
+function splitTag(tag: string): Tag {
+  if (tag.match(/^[a-zA-Z]{1,12}[_:]/)) {
+    const components = tag.split(/[_:]/);
+    if (components.length !== 2) {
+      return tag;
+    }
+    return { key: components[0], value: components[1] };
+  }
+
+  return tag;
 }