diff --git a/frontend/webapp/components/setup/destination/destination.option.menu/destination.option.menu.tsx b/frontend/webapp/components/setup/destination/destination.option.menu/destination.option.menu.tsx index 97e9bae83..a2de24c67 100644 --- a/frontend/webapp/components/setup/destination/destination.option.menu/destination.option.menu.tsx +++ b/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, diff --git a/frontend/webapp/components/setup/destination/tap.list/tap.list.tsx b/frontend/webapp/components/setup/destination/tap.list/tap.list.tsx index 78cdb4328..35c813abe 100644 --- a/frontend/webapp/components/setup/destination/tap.list/tap.list.tsx +++ b/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) => ( onClick(id)} - tapped={tapped} + tapped={tapped || false} icons={icons} title={title} style={tapStyle} diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx index a234f9af5..7971d8dd0 100644 --- a/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx +++ b/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` diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.tsx index 5b7979144..7f36f2877 100644 --- a/frontend/webapp/components/setup/sources/source.card/source.card.tsx +++ b/frontend/webapp/components/setup/sources/source.card/source.card.tsx @@ -30,7 +30,7 @@ export function SourceCard({ item, onClick, focus }: any) { - + diff --git a/frontend/webapp/design.system/link/link.tsx b/frontend/webapp/design.system/link/link.tsx index e87c3011e..95dfa11ad 100644 --- a/frontend/webapp/design.system/link/link.tsx +++ b/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 ( - - {value} - + + {value} + ); } diff --git a/frontend/webapp/design.system/text/text.tsx b/frontend/webapp/design.system/text/text.tsx index 821b417d9..0dfa651e5 100644 --- a/frontend/webapp/design.system/text/text.tsx +++ b/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 (