From 9aa3a5a3a383008ec5836db0776295a4642ab543 Mon Sep 17 00:00:00 2001
From: ahmadshaheer <ashaheerki@gmail.com>
Date: Wed, 11 Sep 2024 17:33:42 +0430
Subject: [PATCH] feat: make the label value clickable if it's a link

---
 .../KeyValueLabel/KeyValueLabel.styles.scss    |  7 +++++--
 .../components/KeyValueLabel/KeyValueLabel.tsx | 18 +++++++++++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/src/periscope/components/KeyValueLabel/KeyValueLabel.styles.scss b/frontend/src/periscope/components/KeyValueLabel/KeyValueLabel.styles.scss
index 88ae57f4e8..c2b8e453d4 100644
--- a/frontend/src/periscope/components/KeyValueLabel/KeyValueLabel.styles.scss
+++ b/frontend/src/periscope/components/KeyValueLabel/KeyValueLabel.styles.scss
@@ -12,6 +12,7 @@
 		font-weight: 400;
 		line-height: 18px;
 		letter-spacing: -0.005em;
+		color: var(--text-vanilla-400);
 	}
 	&__key {
 		background: var(--bg-ink-400);
@@ -20,13 +21,15 @@
 	&__value {
 		background: var(--bg-slate-400);
 	}
-	color: var(--text-vanilla-400);
 }
 
 .lightMode {
 	.key-value-label {
 		border-color: var(--bg-vanilla-400);
-		color: var(--text-ink-400);
+		&__key,
+		&__value {
+			color: var(--text-ink-400);
+		}
 		&__key {
 			background: var(--bg-vanilla-300);
 		}
diff --git a/frontend/src/periscope/components/KeyValueLabel/KeyValueLabel.tsx b/frontend/src/periscope/components/KeyValueLabel/KeyValueLabel.tsx
index aa14dd6380..e810b56130 100644
--- a/frontend/src/periscope/components/KeyValueLabel/KeyValueLabel.tsx
+++ b/frontend/src/periscope/components/KeyValueLabel/KeyValueLabel.tsx
@@ -1,18 +1,34 @@
 import './KeyValueLabel.styles.scss';
 
+import { useMemo } from 'react';
+
 type KeyValueLabelProps = { badgeKey: string; badgeValue: string };
 
 export default function KeyValueLabel({
 	badgeKey,
 	badgeValue,
 }: KeyValueLabelProps): JSX.Element | null {
+	const isUrl = useMemo(() => /^https?:\/\//.test(badgeValue), [badgeValue]);
+
 	if (!badgeKey || !badgeValue) {
 		return null;
 	}
+
 	return (
 		<div className="key-value-label">
 			<div className="key-value-label__key">{badgeKey}</div>
-			<div className="key-value-label__value">{badgeValue}</div>
+			{isUrl ? (
+				<a
+					href={badgeValue}
+					target="_blank"
+					rel="noopener noreferrer"
+					className="key-value-label__value"
+				>
+					{badgeValue}
+				</a>
+			) : (
+				<div className="key-value-label__value">{badgeValue}</div>
+			)}
 		</div>
 	);
 }