feat: make the label value clickable if it's a link

frontend/src/periscope/components/KeyValueLabel/KeyValueLabel.styles.scss

@@ -12,6 +12,10 @@
 		font-weight: 400;
 		line-height: 18px;
 		letter-spacing: -0.005em;
+		&,
+		&:hover {
+			color: var(--text-vanilla-400);
+		}
 	}
 	&__key {
 		background: var(--bg-ink-400);
@@ -20,13 +24,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);
 		}

frontend/src/periscope/components/KeyValueLabel/KeyValueLabel.tsx

@@ -1,6 +1,7 @@
 import './KeyValueLabel.styles.scss';
 
 import { Tooltip } from 'antd';
+import { useMemo } from 'react';
 
 import TrimmedText from '../TrimmedText/TrimmedText';
 
@@ -15,19 +16,33 @@ export default function KeyValueLabel({
 	badgeValue,
 	maxCharacters = 20,
 }: 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">
 				<TrimmedText text={badgeKey} maxCharacters={maxCharacters} />
 			</div>
-			<Tooltip title={badgeValue}>
-				<div className="key-value-label__value">
+			{isUrl ? (
+				<a
+					href={badgeValue}
+					target="_blank"
+					rel="noopener noreferrer"
+					className="key-value-label__value"
+				>
 					<TrimmedText text={badgeValue} maxCharacters={maxCharacters} />
-				</div>
-			</Tooltip>
+				</a>
+			) : (
+				<Tooltip title={badgeValue}>
+					<div className="key-value-label__value">
+						<TrimmedText text={badgeValue} maxCharacters={maxCharacters} />
+					</div>
+				</Tooltip>
+			)}
 		</div>
 	);
 }