fix: connection badges and triggers copy buttons display

Author: RonenMars

src/components/molecules/connectionTableStatus.tsx

@@ -9,12 +9,15 @@ import { ConnectionStatusType } from "@type/models";
 export const ConnectionTableStatus = ({ status }: { status: ConnectionStatusType }) => {
 	const { t } = useTranslation("tabs");
 	const connectionTableStatusClass = {
-		[ConnectionStatus.error]: "text-red",
-		[ConnectionStatus.ok]: "text-green-800",
-		[ConnectionStatus.unspecified]: "text-blue-500",
-		[ConnectionStatus.warning]: "text-yellow-500",
+		[ConnectionStatus.error]: "text-red hover:bg-red/10",
+		[ConnectionStatus.ok]: "text-green-800 hover:bg-green-800/10",
+		[ConnectionStatus.unspecified]: "text-blue-500 hover:bg-blue-500/10",
+		[ConnectionStatus.warning]: "text-yellow-500 hover:bg-yellow-500/10",
 	};
-	const baseClass = cn("inline", connectionTableStatusClass[ConnectionStatus[status]]);
+	const baseClass = cn(
+		"flex w-[6.8rem] items-center justify-center rounded-md border border-gray-800 px-2 py-0.5 text-xs text-white",
+		connectionTableStatusClass[ConnectionStatus[status]]
+	);
 	const statusName = t(`connections.table.statuses.${status}`);
 
 	return (

src/components/molecules/copyButton.tsx

@@ -20,9 +20,11 @@ export const CopyButton = forwardRef<
 	{
 		ariaLabel?: string;
 		buttonText?: string;
+		buttonTextClassName?: string;
 		className?: string;
 		dataTestId?: string;
 		iconClassName?: string;
+		id?: string;
 		size?: Extract<SystemSizes, "xs" | "sm" | "md">;
 		successMessage?: string;
 		tabIndex?: number;
@@ -42,6 +44,8 @@ export const CopyButton = forwardRef<
 			text,
 			title,
 			buttonText,
+			buttonTextClassName,
+			id,
 		},
 		ref
 	) => {
@@ -87,11 +91,13 @@ export const CopyButton = forwardRef<
 
 		const ariaLabelText = ariaLabel || t("copyButtonText", { text: ariaLabel }) || "";
 		const titleText = t("copyButtonTextTitle", { text: title }) || ariaLabelText;
+		const buttonTextClass = cn("text-white", buttonTextClassName);
 		return (
 			<Button
 				ariaLabel={ariaLabelText}
 				className={copyButtonStyle}
 				data-testid={dataTestId}
+				id={id}
 				onClick={(event) => {
 					event.stopPropagation();
 					copyTextToClipboard(text);
@@ -103,7 +109,7 @@ export const CopyButton = forwardRef<
 				valueText={text}
 			>
 				<CopyIcon className={copyButtonIconStyle} />
-				{buttonText ? <div className="text-white">{buttonText}</div> : null}
+				{buttonText ? <div className={buttonTextClass}>{buttonText}</div> : null}
 			</Button>
 		);
 	}

src/components/organisms/configuration/connections/connections.tsx

@@ -169,7 +169,8 @@ export const Connections = ({ isLoading }: ConnectionsProps) => {
 	const items: ConnectionItem[] = (connections || []).map((connection) => ({
 		id: connection.connectionId,
 		name: connection.name || connection.integrationId || "",
-		errorMessage: connection.status === "ok" ? undefined : connection.statusInfoMessage,
+		statusInfoMessage: connection.statusInfoMessage,
+		status: connection.status,
 		icon: connection.logo,
 		integration: connection.integrationUniqueName as (typeof Integrations)[keyof typeof Integrations],
 	}));

src/components/organisms/configuration/connectionsSectionList.tsx

@@ -6,7 +6,7 @@ import { ConnectionsSectionListProps } from "@interfaces/components";
 import { cn, generateItemIds } from "@src/utilities";
 
 import { Button, IconSvg } from "@components/atoms";
-import { Accordion, AddButton } from "@components/molecules";
+import { Accordion, AddButton, ConnectionTableStatus } from "@components/molecules";
 import { PopoverContent, PopoverTrigger, PopoverWrapper } from "@components/molecules/popover";
 
 import { ChevronDownIcon, ChevronUpIcon, TrashIcon } from "@assets/image/icons";
@@ -48,8 +48,8 @@ export const ConnectionsSectionList = ({
 				{isLoading ? (
 					<SkeletonLoader />
 				) : items && items.length > 0 ? (
-					items.map(({ id, icon, name, errorMessage, integration }) => {
-						const hasError = !!errorMessage;
+					items.map(({ id, icon, name, statusInfoMessage, status, integration }) => {
+						const shouldShowTooltip = status !== "ok" && statusInfoMessage;
 						const configureButtonClass = cn(
 							"group my-0.5 mr-1 size-5 border-none p-0 hover:bg-transparent"
 						);
@@ -85,38 +85,33 @@ export const ConnectionsSectionList = ({
 									className="ml-2.5 flex w-2/5 text-white sm:w-1/4 xl:w-1/2 2xl:w-[65%]"
 									id={connectionDisplayId}
 								>
-									<ConnectionItemDisplay item={{ id, icon, name, integration }} />
+									<ConnectionItemDisplay item={{ id, icon, name, status, integration }} />
 								</div>
 
 								<div className="flex-1" />
 
-								{hasError ? (
+								{shouldShowTooltip ? (
 									<PopoverWrapper interactionType="hover" placement="top">
 										<PopoverTrigger>
 											<div className="flex w-fit items-center gap-0">
-												<Button
-													ariaLabel={`Fix connection error: ${errorMessage}`}
-													className="w-[6.8rem] justify-center rounded-md border border-gray-800 bg-transparent px-2 py-0.5 text-xs text-error hover:brightness-90"
-													onClick={() => actions.configure.onClick(id)}
-													title={`Fix connection error: ${errorMessage}`}
-												>
-													Init
-												</Button>
+												<ConnectionTableStatus status={status} />
 											</div>
 										</PopoverTrigger>
 										<PopoverContent className="h-6 max-w-md break-all border border-gray-700 bg-gray-900 p-1 text-xs text-white">
-											Initialize connection
+											{statusInfoMessage}
 										</PopoverContent>
 									</PopoverWrapper>
-								) : null}
+								) : (
+									<ConnectionTableStatus status={status} />
+								)}
 								<div className="relative z-10 flex items-center gap-1" id={actionsContainerId}>
 									{actions.showEvents ? (
 										<PopoverWrapper interactionType="hover" placement="top">
 											<PopoverTrigger>
 												<Button
 													ariaLabel={actions.showEvents.ariaLabel}
 													className="group mx-1 size-6 border-none p-1 hover:bg-transparent"
-													disabled={hasError}
+													disabled={status !== "ok"}
 													id={showEventsButtonId}
 													onClick={(e) => {
 														e.stopPropagation();

src/components/organisms/configuration/triggersSectionList.tsx

@@ -25,6 +25,9 @@ export const TriggersSectionList = ({
 	accordionKey,
 	isLoading,
 }: TriggersSectionListProps) => {
+	const copyButtonClassName =
+		"group flex h-6 w-[6.8rem] items-center justify-center rounded-md border border-gray-800 bg-transparent stroke-white px-2 py-0.5 hover:bg-transparent hover:stroke-green-800";
+	const copyButtonTextClassName = "text-xs text-white group-hover:text-green-800";
 	return (
 		<Accordion
 			accordionKey={accordionKey}
@@ -95,22 +98,18 @@ export const TriggersSectionList = ({
 									<PopoverWrapper interactionType="hover" placement="top">
 										<PopoverTrigger>
 											<div className="flex items-center gap-0">
-												<span
-													className="flex h-6 w-[6.8rem] items-center justify-center rounded-md border border-gray-800 bg-transparent px-2 py-0.5 text-xs text-white hover:brightness-90"
-													id={webhookUrlButtonId}
-													title={webhookUrl}
-												>
-													<CopyButton
-														ariaLabel={`Copy ${name} webhook URL`}
-														className="stroke-white hover:bg-transparent hover:stroke-green-800"
-														dataTestId={`copy-${name}-webhook-url`}
-														iconClassName="stroke-[0.5]"
-														size="xs"
-														text={webhookUrl}
-														title={`Copy ${name} webhook URL`}
-													/>
-													URL
-												</span>
+												<CopyButton
+													ariaLabel={`Copy ${name} webhook URL`}
+													buttonText="URL"
+													buttonTextClassName={copyButtonTextClassName}
+													className={copyButtonClassName}
+													dataTestId={`copy-${name}-webhook-url`}
+													iconClassName="stroke-[0.5]"
+													id={webhookUrlButtonId! as string}
+													size="xs"
+													text={webhookUrl}
+													title={`Copy ${name} webhook URL`}
+												/>
 											</div>
 										</PopoverTrigger>
 										<PopoverContent className="max-w-md break-all border border-gray-700 bg-gray-900 p-1 text-xs text-white">

src/interfaces/components/configurationSection.interface.ts

@@ -3,6 +3,7 @@ import React from "react";
 import { FrontendProjectValidationProps } from ".";
 import { Integrations } from "@src/enums/components";
 import { ProjectValidationLevel } from "@src/types";
+import { ConnectionStatusType } from "@src/types/models";
 
 export interface VariableItem {
 	description?: string;
@@ -15,7 +16,8 @@ export interface VariableItem {
 export interface ConnectionItem {
 	id: string;
 	name: string;
-	errorMessage?: string;
+	statusInfoMessage?: string;
+	status: ConnectionStatusType;
 	icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
 	integration: (typeof Integrations)[keyof typeof Integrations];
 }