From 437271f5b7288cbf562588904679c1495f72feaf Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Mon, 2 Dec 2024 14:47:49 +0200
Subject: [PATCH] [GEN-1845]: add "withLabels" prop to monitor icons component
 (#1899)

This pull request includes changes to the `MonitorsIcons` component and
its usage in the `DataCard` component. The main updates involve adding
labels to monitor icons and adjusting the icon size and spacing.

Changes to `MonitorsIcons` component:

*
[`frontend/webapp/reuseable-components/monitors-icons/index.tsx`](diffhunk://#diff-ae9f732b524d8587d16510849079e64475b475080cdb810b6f38e52108731d81L5-R26):
Added a new `withLabels` prop to optionally display labels next to the
monitor icons and adjusted the gap between icons.

Changes to `DataCard` component:

*
[`frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx`](diffhunk://#diff-ce146776b402d3e7c41f2ebb82b32a2b8636ec73200d70a6f30f0f08dc1da6d0L77-R77):
Updated the `MONITORS` case to use the new `withLabels` prop and changed
the icon size from 14 to 12.
---
 .../data-card/data-card-fields/index.tsx          |  2 +-
 .../reuseable-components/monitors-icons/index.tsx | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx b/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx
index 0aa35fa3e..5b1b0c31a 100644
--- a/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx
+++ b/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx
@@ -74,7 +74,7 @@ const renderValue = (type: DataCardRow['type'], value: DataCardRow['value']) =>
       return <Divider length='100%' margin='0' />;
 
     case DataCardFieldTypes.MONITORS:
-      return <MonitorsIcons monitors={value?.split(', ') || []} withTooltips size={14} />;
+      return <MonitorsIcons monitors={value?.split(', ') || []} withLabels size={12} />;
 
     case DataCardFieldTypes.ACTIVE_STATUS:
       return <Status isActive={value == 'true'} withIcon withBorder withSmaller withSpecialFont />;
diff --git a/frontend/webapp/reuseable-components/monitors-icons/index.tsx b/frontend/webapp/reuseable-components/monitors-icons/index.tsx
index 8e07ece28..9c580d451 100644
--- a/frontend/webapp/reuseable-components/monitors-icons/index.tsx
+++ b/frontend/webapp/reuseable-components/monitors-icons/index.tsx
@@ -2,23 +2,28 @@ import React from 'react';
 import Image from 'next/image';
 import { FlexRow } from '@/styles';
 import { capitalizeFirstLetter } from '@/utils';
-import { Tooltip } from '@/reuseable-components';
+import { Text, Tooltip } from '@/reuseable-components';
 
 interface Props {
   monitors: string[];
   withTooltips?: boolean;
+  withLabels?: boolean;
   size?: number;
 }
 
-export const MonitorsIcons: React.FC<Props> = ({ monitors, withTooltips, size = 12 }) => {
+export const MonitorsIcons: React.FC<Props> = ({ monitors, withTooltips, withLabels, size = 12 }) => {
   return (
-    <FlexRow $gap={size / 3}>
+    <FlexRow $gap={size / 2}>
       {monitors.map((str) => {
         const signal = str.toLocaleLowerCase();
+        const signalDisplayName = capitalizeFirstLetter(signal);
 
         return (
-          <Tooltip key={signal} text={withTooltips ? capitalizeFirstLetter(signal) : ''}>
-            <Image src={`/icons/monitors/${signal}.svg`} alt={signal} width={size} height={size} />
+          <Tooltip key={signal} text={withTooltips ? signalDisplayName : ''}>
+            <FlexRow>
+              <Image src={`/icons/monitors/${signal}.svg`} alt={signal} width={size} height={size} />
+              {withLabels && <Text size={size}>{signalDisplayName}</Text>}
+            </FlexRow>
           </Tooltip>
         );
       })}