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