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

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);
  }

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>
  );
 }