handle one monitor click

frontend/webapp/components/setup/destination/destination.option.menu/destination.option.menu.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import {
   DropdownWrapper,
   SourcesOptionMenuWrapper,
@@ -34,10 +34,19 @@ export function DestinationOptionMenu({
   }
 
   function handleTapClick(id: any) {
+    const tappedMonitors = monitoringOption.filter(
+      (monitor: any) => monitor.tapped
+    );
+
     const currentMonitorIndex = monitoringOption.findIndex(
       (monitor) => monitor.id === id
     );
 
+    // if only one monitor is tapped and the tapped monitor is clicked, do nothing
+    const isOnlyOneMonitorTapped = tappedMonitors.length === 1;
+    const isTappedMonitor = monitoringOption[currentMonitorIndex].tapped;
+    if (isOnlyOneMonitorTapped && isTappedMonitor) return;
+
     const newMonitor = {
       ...monitoringOption[currentMonitorIndex],
       tapped: !monitoringOption[currentMonitorIndex].tapped,

frontend/webapp/components/setup/destination/tap.list/tap.list.tsx

@@ -6,12 +6,13 @@ const TapListWrapper = styled.div`
   display: flex;
 `;
 
-export function TapList({ list, gap = 8, tapStyle, onClick = null }: any) {
+export function TapList({ list, gap = 8, tapStyle, onClick = () => {} }: any) {
   function renderMonitoringOptions() {
     return list.map(({ icons, title, tapped, id }: any) => (
       <KeyvalTap
+        key={id}
         onClick={() => onClick(id)}
-        tapped={tapped}
+        tapped={tapped || false}
         icons={icons}
         title={title}
         style={tapStyle}

frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx

@@ -4,6 +4,7 @@ export const RadioButtonWrapper = styled.div`
   position: absolute;
   right: 16px;
   top: 16px;
+  z-index: 50;
 `;
 
 export const SourceCardWrapper = styled.div`
@@ -12,6 +13,10 @@ export const SourceCardWrapper = styled.div`
   align-items: center;
   flex-direction: column;
   gap: 14px;
+  cursor: pointer;
+  .p {
+    cursor: pointer !important;
+  }
 `;
 
 export const ApplicationNameWrapper = styled.div`

frontend/webapp/components/setup/sources/source.card/source.card.tsx

@@ -30,7 +30,7 @@ export function SourceCard({ item, onClick, focus }: any) {
       <RadioButtonWrapper>
         <KeyvalRadioButton onChange={onClick} value={focus} />
       </RadioButtonWrapper>
-      <SourceCardWrapper>
+      <SourceCardWrapper onClick={onClick}>
         <Logo />
         <ApplicationNameWrapper>
           <KeyvalText size={20} weight={700} style={TEXT_STYLE}>

frontend/webapp/design.system/link/link.tsx

@@ -1,15 +1,23 @@
 import React from "react";
 import { KeyvalText } from "../text/text";
+import { styled } from "styled-components";
 
 interface KeyvalLinkProps {
   value: string;
   onClick?: () => void;
 }
 
+const LinkContainer = styled.div`
+  cursor: pointer;
+  .p {
+    cursor: pointer !important;
+  }
+`;
+
 export function KeyvalLink({ value, onClick }: KeyvalLinkProps) {
   return (
-    <KeyvalText color="#0EE6F3" onClick={onClick}>
-      {value}
-    </KeyvalText>
+    <LinkContainer onClick={onClick}>
+      <KeyvalText color="#0EE6F3">{value}</KeyvalText>
+    </LinkContainer>
   );
 }

frontend/webapp/design.system/text/text.tsx

@@ -9,7 +9,6 @@ type TextProps = {
   weight?: string | number;
   color?: string;
   size?: number;
-  onClick?: () => void;
 };
 
 export function KeyvalText({
@@ -18,16 +17,13 @@ export function KeyvalText({
   style,
   weight,
   size,
-  onClick,
 }: TextProps) {
   return (
     <TextWrapper
-      onClick={onClick}
       style={{
         fontWeight: weight,
         color,
         fontSize: size,
-        cursor: onClick ? "pointer" : "auto",
         ...style,
       }}
     >