feat: diff between providers actions depending on their secrets (#7669)

ui/components/providers/provider-info.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from "@nextui-org/react";
 import React from "react";
 
 import { ConnectionFalse, ConnectionPending, ConnectionTrue } from "../icons";
@@ -20,21 +21,27 @@ export const ProviderInfo: React.FC<ProviderInfoProps> = ({
     switch (connected) {
       case true:
         return (
-          <div className="flex items-center justify-center rounded-medium border-2 border-system-success bg-system-success-lighter p-1">
-            <ConnectionTrue className="text-system-success" size={24} />
-          </div>
+          <Tooltip content="Provider connected" className="text-xs">
+            <div className="flex items-center justify-center rounded-medium border-2 border-system-success bg-system-success-lighter p-1">
+              <ConnectionTrue className="text-system-success" size={24} />
+            </div>
+          </Tooltip>
         );
       case false:
         return (
-          <div className="flex items-center justify-center rounded-medium border-2 border-danger bg-system-error-lighter p-1">
-            <ConnectionFalse className="text-danger" size={24} />
-          </div>
+          <Tooltip content="Provider connection failed" className="text-xs">
+            <div className="flex items-center justify-center rounded-medium border-2 border-danger bg-system-error-lighter p-1">
+              <ConnectionFalse className="text-danger" size={24} />
+            </div>
+          </Tooltip>
         );
       case null:
         return (
-          <div className="bg-info-lighter border-info-lighter flex items-center justify-center rounded-medium border p-1">
-            <ConnectionPending className="text-info" size={24} />
-          </div>
+          <Tooltip content="Provider not connected" className="text-xs">
+            <div className="bg-info-lighter border-info-lighter flex items-center justify-center rounded-medium border p-1">
+              <ConnectionPending className="text-info" size={24} />
+            </div>
+          </Tooltip>
         );
       default:
         return <ConnectionPending size={24} />;

ui/components/providers/table/data-table-row-actions.tsx

@@ -37,6 +37,7 @@ export function DataTableRowActions<ProviderProps>({
   const router = useRouter();
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
   const providerId = (row.original as { id: string }).id;
   const providerType = (row.original as any).attributes?.provider;
   const providerAlias = (row.original as any).attributes?.alias;
@@ -44,11 +45,15 @@ export function DataTableRowActions<ProviderProps>({
     (row.original as any).relationships?.secret?.data?.id || null;
 
   const handleTestConnection = async () => {
+    setLoading(true);
     const formData = new FormData();
     formData.append("providerId", providerId);
     await checkConnectionProvider(formData);
+    setLoading(false);
   };
 
+  const hasSecret = (row.original as any).relationships?.secret?.data;
+
   return (
     <>
       <CustomAlertModal
@@ -81,34 +86,42 @@ export function DataTableRowActions<ProviderProps>({
               <VerticalDotsIcon className="text-default-400" />
             </Button>
           </DropdownTrigger>
-          <DropdownMenu
-            closeOnSelect
-            aria-label="Actions"
-            color="default"
-            variant="flat"
-          >
+          <DropdownMenu aria-label="Actions" color="default" variant="flat">
             <DropdownSection title="Actions">
               <DropdownItem
-                key="update"
-                description="Update the provider credentials"
-                textValue="Update Credentials"
+                key={hasSecret ? "update" : "add"}
+                description={
+                  hasSecret
+                    ? "Update the provider credentials"
+                    : "Add the provider credentials"
+                }
+                textValue={hasSecret ? "Update Credentials" : "Add Credentials"}
                 startContent={<EditDocumentBulkIcon className={iconClasses} />}
                 onPress={() =>
                   router.push(
-                    `/providers/update-credentials?type=${providerType}&id=${providerId}${providerSecretId ? `&secretId=${providerSecretId}` : ""}`,
+                    `/providers/${hasSecret ? "update" : "add"}-credentials?type=${providerType}&id=${providerId}${providerSecretId ? `&secretId=${providerSecretId}` : ""}`,
                   )
                 }
+                closeOnSelect={true}
               >
-                Update Credentials
+                {hasSecret ? "Update Credentials" : "Add Credentials"}
               </DropdownItem>
               <DropdownItem
                 key="new"
-                description="Check the connection to the provider"
+                description={
+                  hasSecret && !loading
+                    ? "Check the provider connection"
+                    : loading
+                      ? "Checking provider connection"
+                      : "Add credentials to test the connection"
+                }
                 textValue="Check Connection"
                 startContent={<AddNoteBulkIcon className={iconClasses} />}
                 onPress={handleTestConnection}
+                isDisabled={!hasSecret || loading}
+                closeOnSelect={false}
               >
-                Test Connection
+                {loading ? "Testing..." : "Test Connection"}
               </DropdownItem>
               <DropdownItem
                 key="edit"
@@ -116,6 +129,7 @@ export function DataTableRowActions<ProviderProps>({
                 textValue="Edit Provider"
                 startContent={<EditDocumentBulkIcon className={iconClasses} />}
                 onPress={() => setIsEditOpen(true)}
+                closeOnSelect={true}
               >
                 Edit Provider Alias
               </DropdownItem>
@@ -133,6 +147,7 @@ export function DataTableRowActions<ProviderProps>({
                   />
                 }
                 onPress={() => setIsDeleteOpen(true)}
+                closeOnSelect={true}
               >
                 Delete Provider
               </DropdownItem>