Fix access source creation page

Move hooks before early return to fix rules-of-hooks lint error.
Clear processedConnectorIdRef on mutation error so OAuth callback
can be retried. Replace useMutationWithToasts with explicit error
handling.

Signed-off-by: Aurélien Sibiril <81782+aureliensibiril@users.noreply.github.com>

Author: aureliensibiril

apps/console/src/pages/organizations/access-reviews/CreateAccessSourcePage.tsx

@@ -1,4 +1,4 @@
-import { sprintf } from "@probo/helpers";
+import { formatError, type GraphQLError, sprintf } from "@probo/helpers";
 import { usePageTitle } from "@probo/hooks";
 import { useTranslate } from "@probo/i18n";
 import {
@@ -29,7 +29,6 @@ import type { CreateAccessSourcePageCreateAPIKeyConnectorMutation } from "#/__ge
 import type { CreateAccessSourcePageQuery } from "#/__generated__/core/CreateAccessSourcePageQuery.graphql";
 import type { CreateAccessSourcePageSourcesFragment$key } from "#/__generated__/core/CreateAccessSourcePageSourcesFragment.graphql";
 import type { CreateAccessSourcePageSourcesPaginationQuery } from "#/__generated__/core/CreateAccessSourcePageSourcesPaginationQuery.graphql";
-import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
 import { useOrganizationId } from "#/hooks/useOrganizationId";
 
 import { deleteAccessSourceMutation } from "./_components/AccessSourceRow";
@@ -185,20 +184,12 @@ export default function CreateAccessSourcePage({
   >(createAccessSourcePageSourcesFragment, organization);
 
   const [deleteAccessSource, isDeletingSource]
-    = useMutationWithToasts<AccessSourceRowDeleteMutation>(
+    = useMutation<AccessSourceRowDeleteMutation>(
       deleteAccessSourceMutation,
-      {
-        successMessage: __("Access source disconnected successfully."),
-        errorMessage: __("Failed to disconnect source"),
-      },
     );
   const [createAccessSource, isCreatingSource]
-    = useMutationWithToasts<CreateAccessSourceDialogMutation>(
+    = useMutation<CreateAccessSourceDialogMutation>(
       createAccessSourceMutation,
-      {
-        successMessage: __("Access source created successfully."),
-        errorMessage: __("Failed to create access source"),
-      },
     );
   const [createAPIKeyConnector]
     = useMutation<CreateAccessSourcePageCreateAPIKeyConnectorMutation>(
@@ -240,7 +231,7 @@ export default function CreateAccessSourcePage({
     }
     processedConnectorIdRef.current = callbackConnectorId;
 
-    void createAccessSource({
+    createAccessSource({
       variables: {
         input: {
           organizationId,
@@ -252,12 +243,40 @@ export default function CreateAccessSourcePage({
         },
         connections: accessSources?.__id ? [accessSources.__id] : [],
       },
-      onCompleted: () => {
+      onCompleted(_, errors) {
+        if (errors?.length) {
+          processedConnectorIdRef.current = null;
+          toast({
+            title: __("Error"),
+            description: formatError(
+              __("Failed to create access source"),
+              errors as GraphQLError[],
+            ),
+            variant: "error",
+          });
+          return;
+        }
+        toast({
+          title: __("Success"),
+          description: __("Access source created successfully."),
+          variant: "success",
+        });
         setSearchParams((params) => {
           params.delete("connector_id");
           return params;
         }, { replace: true });
       },
+      onError(error) {
+        processedConnectorIdRef.current = null;
+        toast({
+          title: __("Error"),
+          description: formatError(
+            __("Failed to create access source"),
+            error as GraphQLError,
+          ),
+          variant: "error",
+        });
+      },
     });
   }, [
     __,
@@ -270,8 +289,18 @@ export default function CreateAccessSourcePage({
     isCreatingSource,
     organizationId,
     setSearchParams,
+    toast,
   ]);
 
+  const [apiKeyDialogOpen, setApiKeyDialogOpen] = useState(false);
+
+  useEffect(() => {
+    if (apiKeyDialogOpen) {
+      apiKeyDialogRef.current?.open();
+      setApiKeyDialogOpen(false);
+    }
+  }, [apiKeyDialogOpen, apiKeyDialogRef]);
+
   if (!organization.canCreateSource) {
     return (
       <Card padded>
@@ -299,22 +328,13 @@ export default function CreateAccessSourcePage({
     window.location.assign(url.toString());
   };
 
-  const [apiKeyDialogOpen, setApiKeyDialogOpen] = useState(false);
-
   const openAPIKeyDialog = (provider: APIKeyProvider) => {
     setApiKeyProvider(provider);
     setApiKeyValue("");
     setProviderSettingValue("");
     setApiKeyDialogOpen(true);
   };
 
-  useEffect(() => {
-    if (apiKeyDialogOpen) {
-      apiKeyDialogRef.current?.open();
-      setApiKeyDialogOpen(false);
-    }
-  }, [apiKeyDialogOpen]);
-
   const providerNeedsExtraSetting = (provider: APIKeyProvider | null): boolean => {
     return provider === "TALLY";
   };
@@ -346,7 +366,7 @@ export default function CreateAccessSourcePage({
       onCompleted: (response) => {
         const connectorId = response.createAPIKeyConnector.connector.id;
 
-        void createAccessSource({
+        createAccessSource({
           variables: {
             input: {
               organizationId,
@@ -356,15 +376,39 @@ export default function CreateAccessSourcePage({
             },
             connections: accessSources?.__id ? [accessSources.__id] : [],
           },
-          onCompleted: () => {
+          onCompleted(_, errors) {
             setIsConnectingAPIKey(false);
+            if (errors?.length) {
+              toast({
+                title: __("Error"),
+                description: formatError(
+                  __("Failed to create access source"),
+                  errors as GraphQLError[],
+                ),
+                variant: "error",
+              });
+              return;
+            }
+            toast({
+              title: __("Success"),
+              description: __("Access source created successfully."),
+              variant: "success",
+            });
             setApiKeyValue("");
             setProviderSettingValue("");
             setApiKeyProvider(null);
             apiKeyDialogRef.current?.close();
           },
-          onError: () => {
+          onError(error) {
             setIsConnectingAPIKey(false);
+            toast({
+              title: __("Error"),
+              description: formatError(
+                __("Failed to create access source"),
+                error as GraphQLError,
+              ),
+              variant: "error",
+            });
           },
         });
       },
@@ -379,7 +423,7 @@ export default function CreateAccessSourcePage({
     });
   };
 
-  const disconnectProviderSource = async (sourceIds: string[]) => {
+  const disconnectProviderSource = (sourceIds: string[]) => {
     if (sourceIds.length === 0) {
       toast({
         title: __("Nothing to disconnect"),
@@ -388,18 +432,49 @@ export default function CreateAccessSourcePage({
       return;
     }
 
+    let remaining = sourceIds.length;
     for (const sourceId of sourceIds) {
-      await deleteAccessSource({
+      deleteAccessSource({
         variables: {
           input: {
             accessSourceId: sourceId,
           },
           connections: [accessSources.__id],
         },
+        onCompleted(_, errors) {
+          if (errors?.length) {
+            toast({
+              title: __("Error"),
+              description: formatError(
+                __("Failed to disconnect source"),
+                errors as GraphQLError[],
+              ),
+              variant: "error",
+            });
+            return;
+          }
+          remaining--;
+          if (remaining === 0) {
+            toast({
+              title: __("Success"),
+              description: __("Access source disconnected successfully."),
+              variant: "success",
+            });
+            window.location.assign(`/organizations/${organizationId}/access-reviews/sources/new`);
+          }
+        },
+        onError(error) {
+          toast({
+            title: __("Error"),
+            description: formatError(
+              __("Failed to disconnect source"),
+              error as GraphQLError,
+            ),
+            variant: "error",
+          });
+        },
       });
     }
-
-    window.location.assign(`/organizations/${organizationId}/access-reviews/sources/new`);
   };
 
   const renderProviderCard = (