fix: connection badges and triggers copy buttons display (#1430)

## Description

## Linear Ticket

## What type of PR is this? (check all applicable)

- [ ] 💡 (feat) - A new feature (non-breaking change which adds
functionality)
- [ ] 🔄 (refactor) - Code Refactoring - A code change that neither fixes
a bug nor adds a feature
- [ ] 🐞 (fix) - Bug Fix (non-breaking change which fixes an issue)
- [ ] 🏎 (perf) - Optimization
- [ ] 📄 (docs) - Documentation - Documentation only changes
- [ ] 📄 (test) - Tests - Adding missing tests or correcting existing
tests
- [ ] ⚙️ (ci) - Continuous Integrations - Changes to our CI
configuration files and scripts (example scopes: Travis, Circle,
BrowserStack, SauceLabs)
- [ ] ☑️ (chore) - Chores - Other changes that don't modify src or test
files
- [ ] ↩️ (revert) - Reverts - Reverts a previous commit(s).

<!--
     For a timely review/response, please avoid force-pushing additional
     commits if your PR already received reviews or comments.
Before submitting a Pull Request, please ensure you've done the
following:
     - 👷‍♀️ Create small PRs. In most cases this will be possible.
     - ✅ Provide tests for your changes.
     - 📝 Use descriptive commit messages (as described below).
- 📗 Update any related documentation and include any relevant
screenshots.
     Commit Message Structure (all lower-case):
     <type>(optional ticket number): <description>
     [optional body]
-->

Author: RonenMars

package-lock.json

@@ -9,12 +9,16 @@ 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",
+		[ConnectionStatus.init_required]: "text-orange-500 hover:bg-orange-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/autokitteh

@@ -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/molecules/connectionTableStatus.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/molecules/copyButton.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";
@@ -53,8 +53,8 @@ export const ConnectionsSectionList = ({
 				{isLoading ? (
 					<ConfigurationSkeletonLoader />
 				) : 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"
 						);
@@ -90,38 +90,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/connections/connections.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}
@@ -100,22 +103,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/components/organisms/configuration/connectionsSectionList.tsx

@@ -40,6 +40,8 @@ import {
 } from "@assets/image/icons/connections";
 
 export enum ConnectionStatus {
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	init_required = 4,
 	error = 3,
 	ok = 1,
 	unspecified = 0,

src/components/organisms/configuration/triggersSectionList.tsx

@@ -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];
 }

src/enums/components/connection.enum.ts

@@ -54,8 +54,8 @@
 	"noMatchingIntegrationDetailsProjectAndConnection": "No matching integration for the connection found. Connection name: {{connectionName}}, connection ID: {{connectionId}}, project ID: {{projectId}}, integration ID: {{integrationId}}",
 	"lastPrintForSessionLog": "The session has finished with {{sessionState}} state",
 	"intergrationsNotFoundExtendedForConnection": "Intergrations for connection not found, connection ID: {{connectionId}}",
-	"intergrationsNotFoundExtended": "Intergrations for project not found,, project ID: {{projectId}}",
-	"intergrationsNotFoundExtendedError": "Couldn't fetch intergrations, project ID: {{projectId}}, error: {{error}}",
+	"intergrationsNotFoundExtended": "Intergrations for project not found, project ID: {{projectId}}",
+	"intergrationsNotFoundExtendedError": "Couldn't fetch intergrations, error: {{error}}",
 	"multipleEnvironments": "Multiple environments found, please reload the page",
 	"multipleEnvironmentsFoundExtended": "Multiple environments found, project ID: {{projectId}}",
 	"projectNotCreated": "There was an issue creating the project",