From e65291077c8a2edd1b1fde649129e7fdd129a709 Mon Sep 17 00:00:00 2001
From: George MacRorie <me@georgemac.com>
Date: Thu, 21 Nov 2024 14:41:15 +0000
Subject: [PATCH] feat: make label values matching URLs clickable

---
 examples/fakedata/main.go        |  4 ++--
 ui/src/components/label.tsx      | 25 +++++++++++++++++++++++++
 ui/src/components/node-panel.tsx |  8 ++------
 ui/src/components/node.tsx       |  8 ++------
 4 files changed, 31 insertions(+), 14 deletions(-)
 create mode 100644 ui/src/components/label.tsx

diff --git a/examples/fakedata/main.go b/examples/fakedata/main.go
index f5229f2..e3f70fd 100644
--- a/examples/fakedata/main.go
+++ b/examples/fakedata/main.go
@@ -119,7 +119,7 @@ func run(ctx context.Context) error {
 		fdStagingPhase, err := phases.New(
 			glu.Name("staging",
 				glu.Label("environment", "staging"),
-				glu.Label("domain", "stage.billing.mycorp.com"),
+				glu.Label("domain", "http://stage.billing.mycorp.com"),
 			),
 			fdPipeline,
 			fdStagingSource,
@@ -134,7 +134,7 @@ func run(ctx context.Context) error {
 		phases.New(
 			glu.Name("production",
 				glu.Label("environment", "production"),
-				glu.Label("domain", "prod.billing.mycorp.com"),
+				glu.Label("domain", "https://prod.billing.mycorp.com"),
 				glu.Label("ssl", "enabled"),
 			),
 			fdPipeline,
diff --git a/ui/src/components/label.tsx b/ui/src/components/label.tsx
new file mode 100644
index 0000000..3e36cbb
--- /dev/null
+++ b/ui/src/components/label.tsx
@@ -0,0 +1,25 @@
+import { getLabelColor } from '@/lib/utils';
+import { Badge } from './ui/badge';
+
+interface LabelProps {
+  labelKey: string;
+  value: string;
+}
+
+export function Label({ labelKey, value }: LabelProps) {
+  return (
+    <Badge
+      key={`${labelKey}-${value}`}
+      className={`whitespace-nowrap text-xs font-light ${getLabelColor(labelKey, value)}`}
+    >
+      {labelKey}:{' '}
+      {value.match('^https?://.*') ? (
+        <a className="ml-1 hover:underline" href={value} target="_blank">
+          {value}
+        </a>
+      ) : (
+        value
+      )}
+    </Badge>
+  );
+}
diff --git a/ui/src/components/node-panel.tsx b/ui/src/components/node-panel.tsx
index f824de1..c117768 100644
--- a/ui/src/components/node-panel.tsx
+++ b/ui/src/components/node-panel.tsx
@@ -4,6 +4,7 @@ import { Package, GitBranch, ChevronDown, ChevronUp } from 'lucide-react';
 import { getLabelColor } from '@/lib/utils';
 import { Button } from './ui/button';
 import { cn } from '@/lib/utils';
+import { Label } from './label';
 
 interface NodePanelProps {
   node: PhaseNode | null;
@@ -68,12 +69,7 @@ export function NodePanel({ node, isExpanded, onToggle }: NodePanelProps) {
               <div className="mt-2 flex flex-wrap gap-2">
                 {node.data.labels &&
                   Object.entries(node.data.labels).map(([key, value]) => (
-                    <Badge
-                      key={`${key}-${value}`}
-                      className={`whitespace-nowrap text-xs font-light ${getLabelColor(key, value)}`}
-                    >
-                      {key}: {value}
-                    </Badge>
+                    <Label labelKey={key} value={value} />
                   ))}
               </div>
             </div>
diff --git a/ui/src/components/node.tsx b/ui/src/components/node.tsx
index f6cf834..0b7613e 100644
--- a/ui/src/components/node.tsx
+++ b/ui/src/components/node.tsx
@@ -16,6 +16,7 @@ import { Button } from '@/components/ui/button';
 import { useState } from 'react';
 import { ANNOTATION_OCI_IMAGE_URL } from '@/types/metadata';
 import { getLabelColor } from '@/lib/utils';
+import { Label } from './label';
 
 const PhaseNode = ({ data }: NodeProps<PhaseNodeType>) => {
   const getIcon = () => {
@@ -90,12 +91,7 @@ const PhaseNode = ({ data }: NodeProps<PhaseNodeType>) => {
           Object.entries(data.labels).length > 0 &&
           Object.entries(data.labels).map(([key, value]) => (
             <div key={`${key}-${value}`} className="mb-2 flex">
-              <Badge
-                key={`${key}-${value}`}
-                className={`whitespace-nowrap text-xs font-light ${getLabelColor(key, value)}`}
-              >
-                {key}: {value}
-              </Badge>
+              <Label labelKey={key} value={value} />
             </div>
           ))}
       </div>