quick nit

web/src/app/admin/connectors/[connector]/pages/gdrive/Credential.tsx

@@ -1,4 +1,3 @@
-import { Button } from "@/components/Button";
 import { PopupSpec } from "@/components/admin/connectors/Popup";
 import React, { useState, useEffect } from "react";
 import { useSWRConfig } from "swr";
@@ -8,10 +7,14 @@ import { adminDeleteCredential } from "@/lib/credential";
 import { setupGoogleDriveOAuth } from "@/lib/googleDrive";
 import { GOOGLE_DRIVE_AUTH_IS_ADMIN_COOKIE_NAME } from "@/lib/constants";
 import Cookies from "js-cookie";
-import { TextFormField } from "@/components/admin/connectors/Field";
+import {
+  TextFormField,
+  SectionHeader,
+  SubLabel,
+} from "@/components/admin/connectors/Field";
 import { Form, Formik } from "formik";
 import { User } from "@/lib/types";
-import { Button as TremorButton } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import {
   Credential,
   GoogleDriveCredentialJson,
@@ -20,6 +23,15 @@ import {
 import { refreshAllGoogleData } from "@/lib/googleConnector";
 import { ValidSources } from "@/lib/types";
 import { buildSimilarCredentialInfoURL } from "@/app/admin/connector/[ccPairId]/lib";
+import {
+  FiFile,
+  FiUpload,
+  FiTrash2,
+  FiCheck,
+  FiLink,
+  FiAlertTriangle,
+} from "react-icons/fi";
+import { cn, truncateString } from "@/lib/utils";
 
 type GoogleDriveCredentialJsonTypes = "authorized_user" | "service_account";
 
@@ -31,126 +43,202 @@ export const DriveJsonUpload = ({
   onSuccess?: () => void;
 }) => {
   const { mutate } = useSWRConfig();
-  const [credentialJsonStr, setCredentialJsonStr] = useState<
-    string | undefined
-  >();
+  const [isUploading, setIsUploading] = useState(false);
+  const [fileName, setFileName] = useState<string | undefined>();
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleFileUpload = async (file: File) => {
+    setIsUploading(true);
+    setFileName(file.name);
+
+    const reader = new FileReader();
+    reader.onload = async (loadEvent) => {
+      if (!loadEvent?.target?.result) {
+        setIsUploading(false);
+        return;
+      }
+
+      const credentialJsonStr = loadEvent.target.result as string;
+
+      // Check credential type
+      let credentialFileType: GoogleDriveCredentialJsonTypes;
+      try {
+        const appCredentialJson = JSON.parse(credentialJsonStr);
+        if (appCredentialJson.web) {
+          credentialFileType = "authorized_user";
+        } else if (appCredentialJson.type === "service_account") {
+          credentialFileType = "service_account";
+        } else {
+          throw new Error(
+            "Unknown credential type, expected one of 'OAuth Web application' or 'Service Account'"
+          );
+        }
+      } catch (e) {
+        setPopup({
+          message: `Invalid file provided - ${e}`,
+          type: "error",
+        });
+        setIsUploading(false);
+        return;
+      }
+
+      if (credentialFileType === "authorized_user") {
+        const response = await fetch(
+          "/api/manage/admin/connector/google-drive/app-credential",
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: credentialJsonStr,
+          }
+        );
+        if (response.ok) {
+          setPopup({
+            message: "Successfully uploaded app credentials",
+            type: "success",
+          });
+          mutate("/api/manage/admin/connector/google-drive/app-credential");
+          if (onSuccess) {
+            onSuccess();
+          }
+        } else {
+          const errorMsg = await response.text();
+          setPopup({
+            message: `Failed to upload app credentials - ${errorMsg}`,
+            type: "error",
+          });
+        }
+      }
+
+      if (credentialFileType === "service_account") {
+        const response = await fetch(
+          "/api/manage/admin/connector/google-drive/service-account-key",
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: credentialJsonStr,
+          }
+        );
+        if (response.ok) {
+          setPopup({
+            message: "Successfully uploaded service account key",
+            type: "success",
+          });
+          mutate(
+            "/api/manage/admin/connector/google-drive/service-account-key"
+          );
+          if (onSuccess) {
+            onSuccess();
+          }
+        } else {
+          const errorMsg = await response.text();
+          setPopup({
+            message: `Failed to upload service account key - ${errorMsg}`,
+            type: "error",
+          });
+        }
+      }
+      setIsUploading(false);
+    };
+
+    reader.readAsText(file);
+  };
+
+  const handleDragEnter = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!isUploading) {
+      setIsDragging(true);
+    }
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    if (isUploading) return;
+
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      const file = files[0];
+      if (file.type === "application/json" || file.name.endsWith(".json")) {
+        handleFileUpload(file);
+      } else {
+        setPopup({
+          message: "Please upload a JSON file",
+          type: "error",
+        });
+      }
+    }
+  };
 
   return (
-    <>
-      <input
-        className={
-          "mr-3 text-sm text-text-900 border border-background-300 " +
-          "cursor-pointer bg-backgrournd dark:text-text-400 focus:outline-none " +
-          "dark:bg-background-700 dark:border-background-600 dark:placeholder-text-400"
-        }
-        type="file"
-        accept=".json"
-        onChange={(event) => {
-          if (!event.target.files) {
-            return;
-          }
-          const file = event.target.files[0];
-          const reader = new FileReader();
-
-          reader.onload = function (loadEvent) {
-            if (!loadEvent?.target?.result) {
-              return;
-            }
-            const fileContents = loadEvent.target.result;
-            setCredentialJsonStr(fileContents as string);
-          };
-
-          reader.readAsText(file);
-        }}
-      />
-
-      <Button
-        disabled={!credentialJsonStr}
-        onClick={async () => {
-          let credentialFileType: GoogleDriveCredentialJsonTypes;
-          try {
-            const appCredentialJson = JSON.parse(credentialJsonStr!);
-            if (appCredentialJson.web) {
-              credentialFileType = "authorized_user";
-            } else if (appCredentialJson.type === "service_account") {
-              credentialFileType = "service_account";
-            } else {
-              throw new Error(
-                "Unknown credential type, expected one of 'OAuth Web application' or 'Service Account'"
-              );
-            }
-          } catch (e) {
-            setPopup({
-              message: `Invalid file provided - ${e}`,
-              type: "error",
-            });
-            return;
-          }
-
-          if (credentialFileType === "authorized_user") {
-            const response = await fetch(
-              "/api/manage/admin/connector/google-drive/app-credential",
-              {
-                method: "PUT",
-                headers: {
-                  "Content-Type": "application/json",
-                },
-                body: credentialJsonStr,
-              }
-            );
-            if (response.ok) {
-              setPopup({
-                message: "Successfully uploaded app credentials",
-                type: "success",
-              });
-              mutate("/api/manage/admin/connector/google-drive/app-credential");
-              if (onSuccess) {
-                onSuccess();
-              }
-            } else {
-              const errorMsg = await response.text();
-              setPopup({
-                message: `Failed to upload app credentials - ${errorMsg}`,
-                type: "error",
-              });
-            }
-          }
-
-          if (credentialFileType === "service_account") {
-            const response = await fetch(
-              "/api/manage/admin/connector/google-drive/service-account-key",
-              {
-                method: "PUT",
-                headers: {
-                  "Content-Type": "application/json",
-                },
-                body: credentialJsonStr,
-              }
-            );
-            if (response.ok) {
-              setPopup({
-                message: "Successfully uploaded service account key",
-                type: "success",
-              });
-              mutate(
-                "/api/manage/admin/connector/google-drive/service-account-key"
-              );
-              if (onSuccess) {
-                onSuccess();
-              }
-            } else {
-              const errorMsg = await response.text();
-              setPopup({
-                message: `Failed to upload service account key - ${errorMsg}`,
-                type: "error",
-              });
-            }
-          }
-        }}
-      >
-        Upload
-      </Button>
-    </>
+    <div className="flex flex-col mt-4">
+      <div className="flex items-center">
+        <div className="relative flex flex-1 items-center">
+          <label
+            className={cn(
+              "flex h-10 items-center justify-center w-full px-4 py-2 border border-dashed rounded-md transition-colors",
+              isUploading
+                ? "opacity-70 cursor-not-allowed border-background-400 bg-background-50/30"
+                : isDragging
+                  ? "bg-background-50/50 border-primary dark:border-primary"
+                  : "cursor-pointer hover:bg-background-50/30 hover:border-primary dark:hover:border-primary border-background-300 dark:border-background-600"
+            )}
+            onDragEnter={handleDragEnter}
+            onDragLeave={handleDragLeave}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop}
+          >
+            <div className="flex items-center space-x-2">
+              {isUploading ? (
+                <div className="h-4 w-4 border-t-2 border-b-2 border-primary rounded-full animate-spin"></div>
+              ) : (
+                <FiFile className="h-4 w-4 text-text-500" />
+              )}
+              <span className="text-sm text-text-500">
+                {isUploading
+                  ? `Uploading ${truncateString(fileName || "file", 50)}...`
+                  : isDragging
+                    ? "Drop JSON file here"
+                    : truncateString(
+                        fileName || "Select or drag JSON credentials file...",
+                        50
+                      )}
+              </span>
+            </div>
+            <input
+              className="sr-only"
+              type="file"
+              accept=".json"
+              disabled={isUploading}
+              onChange={(event) => {
+                if (!event.target.files?.length) {
+                  return;
+                }
+                const file = event.target.files[0];
+                handleFileUpload(file);
+              }}
+            />
+          </label>
+        </div>
+      </div>
+    </div>
   );
 };
 
@@ -160,6 +248,7 @@ interface DriveJsonUploadSectionProps {
   serviceAccountCredentialData?: { service_account_email: string };
   isAdmin: boolean;
   onSuccess?: () => void;
+  existingAuthCredential?: boolean;
 }
 
 export const DriveJsonUploadSection = ({
@@ -168,6 +257,7 @@ export const DriveJsonUploadSection = ({
   serviceAccountCredentialData,
   isAdmin,
   onSuccess,
+  existingAuthCredential,
 }: DriveJsonUploadSectionProps) => {
   const { mutate } = useSWRConfig();
   const router = useRouter();
@@ -177,6 +267,7 @@ export const DriveJsonUploadSection = ({
   const [localAppCredentialData, setLocalAppCredentialData] =
     useState(appCredentialData);
 
+  // Update local state when props change
   useEffect(() => {
     setLocalServiceAccountData(serviceAccountCredentialData);
     setLocalAppCredentialData(appCredentialData);
@@ -190,153 +281,135 @@ export const DriveJsonUploadSection = ({
     }
   };
 
-  if (localServiceAccountData?.service_account_email) {
-    return (
-      <div className="mt-2 text-sm">
-        <div>
-          Found existing service account key with the following <b>Email:</b>
-          <p className="italic mt-1">
-            {localServiceAccountData.service_account_email}
-          </p>
-        </div>
-        {isAdmin ? (
-          <>
-            <div className="mt-4 mb-1">
-              If you want to update these credentials, delete the existing
-              credentials through the button below, and then upload a new
-              credentials JSON.
-            </div>
-            <Button
-              onClick={async () => {
-                const response = await fetch(
-                  "/api/manage/admin/connector/google-drive/service-account-key",
-                  {
-                    method: "DELETE",
-                  }
-                );
-                if (response.ok) {
-                  mutate(
-                    "/api/manage/admin/connector/google-drive/service-account-key"
-                  );
-                  mutate(
-                    buildSimilarCredentialInfoURL(ValidSources.GoogleDrive)
-                  );
-                  setPopup({
-                    message: "Successfully deleted service account key",
-                    type: "success",
-                  });
-                  setLocalServiceAccountData(undefined);
-                  handleSuccess();
-                } else {
-                  const errorMsg = await response.text();
-                  setPopup({
-                    message: `Failed to delete service account key - ${errorMsg}`,
-                    type: "error",
-                  });
-                }
-              }}
-            >
-              Delete
-            </Button>
-          </>
-        ) : (
-          <>
-            <div className="mt-4 mb-1">
-              To change these credentials, please contact an administrator.
-            </div>
-          </>
-        )}
-      </div>
-    );
-  }
-
-  if (localAppCredentialData?.client_id) {
-    return (
-      <div className="mt-2 text-sm">
-        <div>
-          Found existing app credentials with the following <b>Client ID:</b>
-          <p className="italic mt-1">{localAppCredentialData.client_id}</p>
-        </div>
-        {isAdmin ? (
-          <>
-            <div className="mt-4 mb-1">
-              If you want to update these credentials, delete the existing
-              credentials through the button below, and then upload a new
-              credentials JSON.
-            </div>
-            <Button
-              onClick={async () => {
-                const response = await fetch(
-                  "/api/manage/admin/connector/google-drive/app-credential",
-                  {
-                    method: "DELETE",
-                  }
-                );
-                if (response.ok) {
-                  mutate(
-                    "/api/manage/admin/connector/google-drive/app-credential"
-                  );
-                  mutate(
-                    buildSimilarCredentialInfoURL(ValidSources.GoogleDrive)
-                  );
-                  setPopup({
-                    message: "Successfully deleted app credentials",
-                    type: "success",
-                  });
-                  setLocalAppCredentialData(undefined);
-                  handleSuccess();
-                } else {
-                  const errorMsg = await response.text();
-                  setPopup({
-                    message: `Failed to delete app credential - ${errorMsg}`,
-                    type: "error",
-                  });
-                }
-              }}
-            >
-              Delete
-            </Button>
-          </>
-        ) : (
-          <div className="mt-4 mb-1">
-            To change these credentials, please contact an administrator.
-          </div>
-        )}
-      </div>
-    );
-  }
-
   if (!isAdmin) {
     return (
-      <div className="mt-2">
-        <p className="text-sm mb-2">
-          Curators are unable to set up the google drive credentials. To add a
-          Google Drive connector, please contact an administrator.
-        </p>
+      <div>
+        <div className="flex items-start py-3 px-4 bg-yellow-50/30 dark:bg-yellow-900/5 rounded">
+          <FiAlertTriangle className="text-yellow-500 h-5 w-5 mr-2 mt-0.5 flex-shrink-0" />
+          <p className="text-sm">
+            Curators are unable to set up the Google Drive credentials. To add a
+            Google Drive connector, please contact an administrator.
+          </p>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="mt-2">
-      <p className="text-sm mb-2">
-        Follow the guide{" "}
+    <div>
+      <p className="text-sm mb-3">
+        To connect your Google Drive, create credentials (either OAuth App or
+        Service Account), download the JSON file, and upload it below.
+      </p>
+      <div className="mb-4">
         <a
-          className="text-link"
+          className="text-primary hover:text-primary/80 flex items-center gap-1 text-sm"
           target="_blank"
           href="https://docs.onyx.app/connectors/google_drive#authorization"
           rel="noreferrer"
         >
-          here
-        </a>{" "}
-        to either (1) setup a google OAuth App in your company workspace or (2)
-        create a Service Account.
-        <br />
-        <br />
-        Download the credentials JSON if choosing option (1) or the Service
-        Account key JSON if chooosing option (2), and upload it here.
-      </p>
-      <DriveJsonUpload setPopup={setPopup} onSuccess={handleSuccess} />
+          <FiLink className="h-3 w-3" />
+          View detailed setup instructions
+        </a>
+      </div>
+
+      {(localServiceAccountData?.service_account_email ||
+        localAppCredentialData?.client_id) && (
+        <div className="mb-4">
+          <div className="relative flex flex-1 items-center">
+            <label
+              className={cn(
+                "flex h-10 items-center justify-center w-full px-4 py-2 border border-dashed rounded-md transition-colors",
+                false
+                  ? "opacity-70 cursor-not-allowed border-background-400 bg-background-50/30"
+                  : "cursor-pointer hover:bg-background-50/30 hover:border-primary dark:hover:border-primary border-background-300 dark:border-background-600"
+              )}
+            >
+              <div className="flex items-center space-x-2">
+                {false ? (
+                  <div className="h-4 w-4 border-t-2 border-b-2 border-primary rounded-full animate-spin"></div>
+                ) : (
+                  <FiFile className="h-4 w-4 text-text-500" />
+                )}
+                <span className="text-sm text-text-500">
+                  {truncateString(
+                    localServiceAccountData?.service_account_email ||
+                      localAppCredentialData?.client_id ||
+                      "",
+                    50
+                  )}
+                </span>
+              </div>
+            </label>
+          </div>
+          {isAdmin && !existingAuthCredential && (
+            <div className="mt-2">
+              <Button
+                variant="destructive"
+                type="button"
+                onClick={async () => {
+                  const endpoint =
+                    localServiceAccountData?.service_account_email
+                      ? "/api/manage/admin/connector/google-drive/service-account-key"
+                      : "/api/manage/admin/connector/google-drive/app-credential";
+
+                  const response = await fetch(endpoint, {
+                    method: "DELETE",
+                  });
+
+                  if (response.ok) {
+                    mutate(endpoint);
+                    // Also mutate the credential endpoints to ensure Step 2 is reset
+                    mutate(
+                      buildSimilarCredentialInfoURL(ValidSources.GoogleDrive)
+                    );
+
+                    // Add additional mutations to refresh all credential-related endpoints
+                    mutate(
+                      "/api/manage/admin/connector/google-drive/credentials"
+                    );
+                    mutate(
+                      "/api/manage/admin/connector/google-drive/public-credential"
+                    );
+                    mutate(
+                      "/api/manage/admin/connector/google-drive/service-account-credential"
+                    );
+
+                    setPopup({
+                      message: `Successfully deleted ${
+                        localServiceAccountData
+                          ? "service account key"
+                          : "app credentials"
+                      }`,
+                      type: "success",
+                    });
+                    // Immediately update local state
+                    if (localServiceAccountData) {
+                      setLocalServiceAccountData(undefined);
+                    } else {
+                      setLocalAppCredentialData(undefined);
+                    }
+                    handleSuccess();
+                  } else {
+                    const errorMsg = await response.text();
+                    setPopup({
+                      message: `Failed to delete credentials - ${errorMsg}`,
+                      type: "error",
+                    });
+                  }
+                }}
+              >
+                Delete Credentials
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {!(
+        localServiceAccountData?.service_account_email ||
+        localAppCredentialData?.client_id
+      ) && <DriveJsonUpload setPopup={setPopup} onSuccess={handleSuccess} />}
     </div>
   );
 };
@@ -391,6 +464,7 @@ export const DriveAuthSection = ({
   user,
 }: DriveCredentialSectionProps) => {
   const router = useRouter();
+  const [isAuthenticating, setIsAuthenticating] = useState(false);
   const [localServiceAccountData, setLocalServiceAccountData] = useState(
     serviceAccountKeyData
   );
@@ -405,6 +479,7 @@ export const DriveAuthSection = ({
     setLocalGoogleDriveServiceAccountCredential,
   ] = useState(googleDriveServiceAccountCredential);
 
+  // Update local state when props change
   useEffect(() => {
     setLocalServiceAccountData(serviceAccountKeyData);
     setLocalAppCredentialData(appCredentialData);
@@ -424,126 +499,181 @@ export const DriveAuthSection = ({
     localGoogleDriveServiceAccountCredential;
   if (existingCredential) {
     return (
-      <>
-        <p className="mb-2 text-sm">
-          <i>Uploaded and authenticated credential already exists!</i>
-        </p>
-        <Button
-          onClick={async () => {
-            handleRevokeAccess(
-              connectorAssociated,
-              setPopup,
-              existingCredential,
-              refreshCredentials
-            );
-          }}
-        >
-          Revoke Access
-        </Button>
-      </>
+      <div>
+        <div className="mt-4">
+          <div className="py-3 px-4 bg-blue-50/30 dark:bg-blue-900/5 rounded mb-4 flex items-start">
+            <FiCheck className="text-blue-500 h-5 w-5 mr-2 mt-0.5 flex-shrink-0" />
+            <div className="flex-1">
+              <span className="font-medium block">Authentication Complete</span>
+              <p className="text-sm mt-1 text-text-500 dark:text-text-400 break-words">
+                Your Google Drive credentials have been successfully uploaded
+                and authenticated.
+              </p>
+            </div>
+          </div>
+          <Button
+            variant="destructive"
+            type="button"
+            onClick={async () => {
+              handleRevokeAccess(
+                connectorAssociated,
+                setPopup,
+                existingCredential,
+                refreshCredentials
+              );
+            }}
+          >
+            Revoke Access
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // If no credentials are uploaded, show message to complete step 1 first
+  if (
+    !localServiceAccountData?.service_account_email &&
+    !localAppCredentialData?.client_id
+  ) {
+    return (
+      <div>
+        <SectionHeader>Google Drive Authentication</SectionHeader>
+        <div className="mt-4">
+          <div className="flex items-start py-3 px-4 bg-yellow-50/30 dark:bg-yellow-900/5 rounded">
+            <FiAlertTriangle className="text-yellow-500 h-5 w-5 mr-2 mt-0.5 flex-shrink-0" />
+            <p className="text-sm">
+              Please complete Step 1 by uploading either OAuth credentials or a
+              Service Account key before proceeding with authentication.
+            </p>
+          </div>
+        </div>
+      </div>
     );
   }
 
   if (localServiceAccountData?.service_account_email) {
     return (
       <div>
-        <Formik
-          initialValues={{
-            google_primary_admin: user?.email || "",
-          }}
-          validationSchema={Yup.object().shape({
-            google_primary_admin: Yup.string().required(
-              "User email is required"
-            ),
-          })}
-          onSubmit={async (values, formikHelpers) => {
-            formikHelpers.setSubmitting(true);
-            const response = await fetch(
-              "/api/manage/admin/connector/google-drive/service-account-credential",
-              {
-                method: "PUT",
-                headers: {
-                  "Content-Type": "application/json",
-                },
-                body: JSON.stringify({
-                  google_primary_admin: values.google_primary_admin,
-                }),
-              }
-            );
+        <div className="mt-4">
+          <Formik
+            initialValues={{
+              google_primary_admin: user?.email || "",
+            }}
+            validationSchema={Yup.object().shape({
+              google_primary_admin: Yup.string()
+                .email("Must be a valid email")
+                .required("Required"),
+            })}
+            onSubmit={async (values, formikHelpers) => {
+              formikHelpers.setSubmitting(true);
+              try {
+                const response = await fetch(
+                  "/api/manage/admin/connector/google-drive/service-account-credential",
+                  {
+                    method: "PUT",
+                    headers: {
+                      "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                      google_primary_admin: values.google_primary_admin,
+                    }),
+                  }
+                );
 
-            if (response.ok) {
-              setPopup({
-                message: "Successfully created service account credential",
-                type: "success",
-              });
-            } else {
-              const errorMsg = await response.text();
-              setPopup({
-                message: `Failed to create service account credential - ${errorMsg}`,
-                type: "error",
-              });
-            }
-            refreshCredentials();
-          }}
-        >
-          {({ isSubmitting }) => (
-            <Form>
-              <TextFormField
-                name="google_primary_admin"
-                label="Primary Admin Email:"
-                subtext="Enter the email of an admin/owner of the Google Organization that owns the Google Drive(s) you want to index."
-              />
-              <div className="flex">
-                <TremorButton type="submit" disabled={isSubmitting}>
-                  Create Credential
-                </TremorButton>
-              </div>
-            </Form>
-          )}
-        </Formik>
+                if (response.ok) {
+                  setPopup({
+                    message: "Successfully created service account credential",
+                    type: "success",
+                  });
+                  refreshCredentials();
+                } else {
+                  const errorMsg = await response.text();
+                  setPopup({
+                    message: `Failed to create service account credential - ${errorMsg}`,
+                    type: "error",
+                  });
+                }
+              } catch (error) {
+                setPopup({
+                  message: `Failed to create service account credential - ${error}`,
+                  type: "error",
+                });
+              } finally {
+                formikHelpers.setSubmitting(false);
+              }
+            }}
+          >
+            {({ isSubmitting }) => (
+              <Form>
+                <TextFormField
+                  name="google_primary_admin"
+                  label="Primary Admin Email:"
+                  subtext="Enter the email of an admin/owner of the Google Organization that owns the Google Drive(s) you want to index."
+                />
+                <div className="flex">
+                  <Button type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? "Creating..." : "Create Credential"}
+                  </Button>
+                </div>
+              </Form>
+            )}
+          </Formik>
+        </div>
       </div>
     );
   }
 
   if (localAppCredentialData?.client_id) {
     return (
-      <div className="text-sm mb-4">
-        <p className="mb-2">
-          Next, you must provide credentials via OAuth. This gives us read
-          access to the docs you have access to in your google drive account.
-        </p>
+      <div>
+        <div className="bg-background-50/30 dark:bg-background-900/20 rounded mb-4">
+          <p className="text-sm">
+            Next, you need to authenticate with Google Drive via OAuth. This
+            gives us read access to the documents you have access to in your
+            Google Drive account.
+          </p>
+        </div>
         <Button
+          disabled={isAuthenticating}
           onClick={async () => {
-            const [authUrl, errorMsg] = await setupGoogleDriveOAuth({
-              isAdmin: true,
-              name: "OAuth (uploaded)",
-            });
-            if (authUrl) {
+            setIsAuthenticating(true);
+            try {
               // cookie used by callback to determine where to finally redirect to
               Cookies.set(GOOGLE_DRIVE_AUTH_IS_ADMIN_COOKIE_NAME, "true", {
                 path: "/",
               });
-              router.push(authUrl);
-              return;
-            }
 
-            setPopup({
-              message: errorMsg,
-              type: "error",
-            });
+              const [authUrl, errorMsg] = await setupGoogleDriveOAuth({
+                isAdmin: true,
+                name: "OAuth (uploaded)",
+              });
+
+              if (authUrl) {
+                router.push(authUrl);
+              } else {
+                setPopup({
+                  message: errorMsg,
+                  type: "error",
+                });
+                setIsAuthenticating(false);
+              }
+            } catch (error) {
+              setPopup({
+                message: `Failed to authenticate with Google Drive - ${error}`,
+                type: "error",
+              });
+              setIsAuthenticating(false);
+            }
           }}
         >
-          Authenticate with Google Drive
+          {isAuthenticating
+            ? "Authenticating..."
+            : "Authenticate with Google Drive"}
         </Button>
       </div>
     );
   }
 
-  // case where no keys have been uploaded in step 1
-  return (
-    <p className="text-sm">
-      Please upload either a OAuth Client Credential JSON or a Google Drive
-      Service Account Key JSON in Step 1 before moving onto Step 2.
-    </p>
-  );
+  // This code path should not be reached with the new conditions above
+  return null;
 };

web/src/app/admin/connectors/[connector]/pages/gdrive/GoogleDrivePage.tsx

@@ -165,6 +165,10 @@ const GDriveMain = ({
         serviceAccountCredentialData={serviceAccountKeyData}
         isAdmin={isAdmin}
         onSuccess={handleRefresh}
+        existingAuthCredential={Boolean(
+          googleDrivePublicUploadedCredential ||
+            googleDriveServiceAccountCredential
+        )}
       />
 
       {isAdmin &&

web/src/app/admin/connectors/[connector]/pages/gmail/Credential.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/components/Button";
+import { Button } from "@/components/ui/button";
 import { PopupSpec } from "@/components/admin/connectors/Popup";
 import React, { useState, useEffect } from "react";
 import { useSWRConfig } from "swr";
@@ -8,7 +8,11 @@ import { adminDeleteCredential } from "@/lib/credential";
 import { setupGmailOAuth } from "@/lib/gmail";
 import { GMAIL_AUTH_IS_ADMIN_COOKIE_NAME } from "@/lib/constants";
 import Cookies from "js-cookie";
-import { TextFormField } from "@/components/admin/connectors/Field";
+import {
+  TextFormField,
+  SectionHeader,
+  SubLabel,
+} from "@/components/admin/connectors/Field";
 import { Form, Formik } from "formik";
 import { User } from "@/lib/types";
 import CardSection from "@/components/admin/CardSection";
@@ -20,10 +24,19 @@ import {
 import { refreshAllGoogleData } from "@/lib/googleConnector";
 import { ValidSources } from "@/lib/types";
 import { buildSimilarCredentialInfoURL } from "@/app/admin/connector/[ccPairId]/lib";
+import {
+  FiFile,
+  FiUpload,
+  FiTrash2,
+  FiCheck,
+  FiLink,
+  FiAlertTriangle,
+} from "react-icons/fi";
+import { cn, truncateString } from "@/lib/utils";
 
 type GmailCredentialJsonTypes = "authorized_user" | "service_account";
 
-const DriveJsonUpload = ({
+const GmailCredentialUpload = ({
   setPopup,
   onSuccess,
 }: {
@@ -31,134 +44,210 @@ const DriveJsonUpload = ({
   onSuccess?: () => void;
 }) => {
   const { mutate } = useSWRConfig();
-  const [credentialJsonStr, setCredentialJsonStr] = useState<
-    string | undefined
-  >();
+  const [isUploading, setIsUploading] = useState(false);
+  const [fileName, setFileName] = useState<string | undefined>();
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleFileUpload = async (file: File) => {
+    setIsUploading(true);
+    setFileName(file.name);
+
+    const reader = new FileReader();
+    reader.onload = async (loadEvent) => {
+      if (!loadEvent?.target?.result) {
+        setIsUploading(false);
+        return;
+      }
+
+      const credentialJsonStr = loadEvent.target.result as string;
+
+      // Check credential type
+      let credentialFileType: GmailCredentialJsonTypes;
+      try {
+        const appCredentialJson = JSON.parse(credentialJsonStr);
+        if (appCredentialJson.web) {
+          credentialFileType = "authorized_user";
+        } else if (appCredentialJson.type === "service_account") {
+          credentialFileType = "service_account";
+        } else {
+          throw new Error(
+            "Unknown credential type, expected one of 'OAuth Web application' or 'Service Account'"
+          );
+        }
+      } catch (e) {
+        setPopup({
+          message: `Invalid file provided - ${e}`,
+          type: "error",
+        });
+        setIsUploading(false);
+        return;
+      }
+
+      if (credentialFileType === "authorized_user") {
+        const response = await fetch(
+          "/api/manage/admin/connector/gmail/app-credential",
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: credentialJsonStr,
+          }
+        );
+        if (response.ok) {
+          setPopup({
+            message: "Successfully uploaded app credentials",
+            type: "success",
+          });
+          mutate("/api/manage/admin/connector/gmail/app-credential");
+          if (onSuccess) {
+            onSuccess();
+          }
+        } else {
+          const errorMsg = await response.text();
+          setPopup({
+            message: `Failed to upload app credentials - ${errorMsg}`,
+            type: "error",
+          });
+        }
+      }
+
+      if (credentialFileType === "service_account") {
+        const response = await fetch(
+          "/api/manage/admin/connector/gmail/service-account-key",
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: credentialJsonStr,
+          }
+        );
+        if (response.ok) {
+          setPopup({
+            message: "Successfully uploaded service account key",
+            type: "success",
+          });
+          mutate("/api/manage/admin/connector/gmail/service-account-key");
+          if (onSuccess) {
+            onSuccess();
+          }
+        } else {
+          const errorMsg = await response.text();
+          setPopup({
+            message: `Failed to upload service account key - ${errorMsg}`,
+            type: "error",
+          });
+        }
+      }
+      setIsUploading(false);
+    };
+
+    reader.readAsText(file);
+  };
+
+  const handleDragEnter = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!isUploading) {
+      setIsDragging(true);
+    }
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    if (isUploading) return;
+
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      const file = files[0];
+      if (file.type === "application/json" || file.name.endsWith(".json")) {
+        handleFileUpload(file);
+      } else {
+        setPopup({
+          message: "Please upload a JSON file",
+          type: "error",
+        });
+      }
+    }
+  };
 
   return (
-    <>
-      <input
-        className={
-          "mr-3 text-sm text-text-900 border border-background-300 overflow-visible " +
-          "cursor-pointer bg-background dark:text-text-400 focus:outline-none " +
-          "dark:bg-background-700 dark:border-background-600 dark:placeholder-text-400"
-        }
-        type="file"
-        accept=".json"
-        onChange={(event) => {
-          if (!event.target.files) {
-            return;
-          }
-          const file = event.target.files[0];
-          const reader = new FileReader();
-
-          reader.onload = function (loadEvent) {
-            if (!loadEvent?.target?.result) {
-              return;
-            }
-            const fileContents = loadEvent.target.result;
-            setCredentialJsonStr(fileContents as string);
-          };
-
-          reader.readAsText(file);
-        }}
-      />
-
-      <Button
-        disabled={!credentialJsonStr}
-        onClick={async () => {
-          // check if the JSON is a app credential or a service account credential
-          let credentialFileType: GmailCredentialJsonTypes;
-          try {
-            const appCredentialJson = JSON.parse(credentialJsonStr!);
-            if (appCredentialJson.web) {
-              credentialFileType = "authorized_user";
-            } else if (appCredentialJson.type === "service_account") {
-              credentialFileType = "service_account";
-            } else {
-              throw new Error(
-                "Unknown credential type, expected one of 'OAuth Web application' or 'Service Account'"
-              );
-            }
-          } catch (e) {
-            setPopup({
-              message: `Invalid file provided - ${e}`,
-              type: "error",
-            });
-            return;
-          }
-
-          if (credentialFileType === "authorized_user") {
-            const response = await fetch(
-              "/api/manage/admin/connector/gmail/app-credential",
-              {
-                method: "PUT",
-                headers: {
-                  "Content-Type": "application/json",
-                },
-                body: credentialJsonStr,
-              }
-            );
-            if (response.ok) {
-              setPopup({
-                message: "Successfully uploaded app credentials",
-                type: "success",
-              });
-              mutate("/api/manage/admin/connector/gmail/app-credential");
-              if (onSuccess) {
-                onSuccess();
-              }
-            } else {
-              const errorMsg = await response.text();
-              setPopup({
-                message: `Failed to upload app credentials - ${errorMsg}`,
-                type: "error",
-              });
-            }
-          }
-
-          if (credentialFileType === "service_account") {
-            const response = await fetch(
-              "/api/manage/admin/connector/gmail/service-account-key",
-              {
-                method: "PUT",
-                headers: {
-                  "Content-Type": "application/json",
-                },
-                body: credentialJsonStr,
-              }
-            );
-            if (response.ok) {
-              setPopup({
-                message: "Successfully uploaded service account key",
-                type: "success",
-              });
-              mutate("/api/manage/admin/connector/gmail/service-account-key");
-              if (onSuccess) {
-                onSuccess();
-              }
-            } else {
-              const errorMsg = await response.text();
-              setPopup({
-                message: `Failed to upload service account key - ${errorMsg}`,
-                type: "error",
-              });
-            }
-          }
-        }}
-      >
-        Upload
-      </Button>
-    </>
+    <div className="flex flex-col mt-4">
+      <div className="flex items-center">
+        <div className="relative flex flex-1 items-center">
+          <label
+            className={cn(
+              "flex h-10 items-center justify-center w-full px-4 py-2 border border-dashed rounded-md transition-colors",
+              isUploading
+                ? "opacity-70 cursor-not-allowed border-background-400 bg-background-50/30"
+                : isDragging
+                  ? "bg-background-50/50 border-primary dark:border-primary"
+                  : "cursor-pointer hover:bg-background-50/30 hover:border-primary dark:hover:border-primary border-background-300 dark:border-background-600"
+            )}
+            onDragEnter={handleDragEnter}
+            onDragLeave={handleDragLeave}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop}
+          >
+            <div className="flex items-center space-x-2">
+              {isUploading ? (
+                <div className="h-4 w-4 border-t-2 border-b-2 border-primary rounded-full animate-spin"></div>
+              ) : (
+                <FiFile className="h-4 w-4 text-text-500" />
+              )}
+              <span className="text-sm text-text-500">
+                {isUploading
+                  ? `Uploading ${truncateString(fileName || "file", 50)}...`
+                  : isDragging
+                    ? "Drop JSON file here"
+                    : truncateString(
+                        fileName || "Select or drag JSON credentials file...",
+                        50
+                      )}
+              </span>
+            </div>
+            <input
+              className="sr-only"
+              type="file"
+              accept=".json"
+              disabled={isUploading}
+              onChange={(event) => {
+                if (!event.target.files?.length) {
+                  return;
+                }
+                const file = event.target.files[0];
+                handleFileUpload(file);
+              }}
+            />
+          </label>
+        </div>
+      </div>
+    </div>
   );
 };
 
-interface DriveJsonUploadSectionProps {
+interface GmailJsonUploadSectionProps {
   setPopup: (popupSpec: PopupSpec | null) => void;
   appCredentialData?: { client_id: string };
   serviceAccountCredentialData?: { service_account_email: string };
   isAdmin: boolean;
   onSuccess?: () => void;
+  existingAuthCredential?: boolean;
 }
 
 export const GmailJsonUploadSection = ({
@@ -167,7 +256,8 @@ export const GmailJsonUploadSection = ({
   serviceAccountCredentialData,
   isAdmin,
   onSuccess,
-}: DriveJsonUploadSectionProps) => {
+  existingAuthCredential,
+}: GmailJsonUploadSectionProps) => {
   const { mutate } = useSWRConfig();
   const router = useRouter();
   const [localServiceAccountData, setLocalServiceAccountData] = useState(
@@ -190,156 +280,138 @@ export const GmailJsonUploadSection = ({
     }
   };
 
-  if (localServiceAccountData?.service_account_email) {
-    return (
-      <div className="mt-2 text-sm">
-        <div>
-          Found existing service account key with the following <b>Email:</b>
-          <p className="italic mt-1">
-            {localServiceAccountData.service_account_email}
-          </p>
-        </div>
-        {isAdmin ? (
-          <>
-            <div className="mt-4 mb-1">
-              If you want to update these credentials, delete the existing
-              credentials through the button below, and then upload a new
-              credentials JSON.
-            </div>
-            <Button
-              onClick={async () => {
-                const response = await fetch(
-                  "/api/manage/admin/connector/gmail/service-account-key",
-                  {
-                    method: "DELETE",
-                  }
-                );
-                if (response.ok) {
-                  mutate(
-                    "/api/manage/admin/connector/gmail/service-account-key"
-                  );
-                  // Also mutate the credential endpoints to ensure Step 2 is reset
-                  mutate(buildSimilarCredentialInfoURL(ValidSources.Gmail));
-                  setPopup({
-                    message: "Successfully deleted service account key",
-                    type: "success",
-                  });
-                  // Immediately update local state
-                  setLocalServiceAccountData(undefined);
-                  handleSuccess();
-                } else {
-                  const errorMsg = await response.text();
-                  setPopup({
-                    message: `Failed to delete service account key - ${errorMsg}`,
-                    type: "error",
-                  });
-                }
-              }}
-            >
-              Delete
-            </Button>
-          </>
-        ) : (
-          <>
-            <div className="mt-4 mb-1">
-              To change these credentials, please contact an administrator.
-            </div>
-          </>
-        )}
-      </div>
-    );
-  }
-
-  if (localAppCredentialData?.client_id) {
-    return (
-      <div className="mt-2 text-sm">
-        <div>
-          Found existing app credentials with the following <b>Client ID:</b>
-          <p className="italic mt-1">{localAppCredentialData.client_id}</p>
-        </div>
-        {isAdmin ? (
-          <>
-            <div className="mt-4 mb-1">
-              If you want to update these credentials, delete the existing
-              credentials through the button below, and then upload a new
-              credentials JSON.
-            </div>
-            <Button
-              onClick={async () => {
-                const response = await fetch(
-                  "/api/manage/admin/connector/gmail/app-credential",
-                  {
-                    method: "DELETE",
-                  }
-                );
-                if (response.ok) {
-                  mutate("/api/manage/admin/connector/gmail/app-credential");
-                  // Also mutate the credential endpoints to ensure Step 2 is reset
-                  mutate(buildSimilarCredentialInfoURL(ValidSources.Gmail));
-                  setPopup({
-                    message: "Successfully deleted app credentials",
-                    type: "success",
-                  });
-                  // Immediately update local state
-                  setLocalAppCredentialData(undefined);
-                  handleSuccess();
-                } else {
-                  const errorMsg = await response.text();
-                  setPopup({
-                    message: `Failed to delete app credential - ${errorMsg}`,
-                    type: "error",
-                  });
-                }
-              }}
-            >
-              Delete
-            </Button>
-          </>
-        ) : (
-          <div className="mt-4 mb-1">
-            To change these credentials, please contact an administrator.
-          </div>
-        )}
-      </div>
-    );
-  }
-
   if (!isAdmin) {
     return (
-      <div className="mt-2">
-        <p className="text-sm mb-2">
-          Curators are unable to set up the Gmail credentials. To add a Gmail
-          connector, please contact an administrator.
-        </p>
+      <div>
+        <div className="flex items-start py-3 px-4 bg-yellow-50/30 dark:bg-yellow-900/5 rounded">
+          <FiAlertTriangle className="text-yellow-500 h-5 w-5 mr-2 mt-0.5 flex-shrink-0" />
+          <p className="text-sm">
+            Curators are unable to set up the Gmail credentials. To add a Gmail
+            connector, please contact an administrator.
+          </p>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="mt-2">
-      <p className="text-sm mb-2">
-        Follow the guide{" "}
+    <div>
+      <p className="text-sm mb-3">
+        To connect your Gmail, create credentials (either OAuth App or Service
+        Account), download the JSON file, and upload it below.
+      </p>
+      <div className="mb-4">
         <a
-          className="text-link"
+          className="text-primary hover:text-primary/80 flex items-center gap-1 text-sm"
           target="_blank"
           href="https://docs.onyx.app/connectors/gmail#authorization"
           rel="noreferrer"
         >
-          here
-        </a>{" "}
-        to either (1) setup a Google OAuth App in your company workspace or (2)
-        create a Service Account.
-        <br />
-        <br />
-        Download the credentials JSON if choosing option (1) or the Service
-        Account key JSON if choosing option (2), and upload it here.
-      </p>
-      <DriveJsonUpload setPopup={setPopup} onSuccess={handleSuccess} />
+          <FiLink className="h-3 w-3" />
+          View detailed setup instructions
+        </a>
+      </div>
+
+      {(localServiceAccountData?.service_account_email ||
+        localAppCredentialData?.client_id) && (
+        <div className="mb-4">
+          <div className="relative flex flex-1 items-center">
+            <label
+              className={cn(
+                "flex h-10 items-center justify-center w-full px-4 py-2 border border-dashed rounded-md transition-colors",
+                false
+                  ? "opacity-70 cursor-not-allowed border-background-400 bg-background-50/30"
+                  : "cursor-pointer hover:bg-background-50/30 hover:border-primary dark:hover:border-primary border-background-300 dark:border-background-600"
+              )}
+            >
+              <div className="flex items-center space-x-2">
+                {false ? (
+                  <div className="h-4 w-4 border-t-2 border-b-2 border-primary rounded-full animate-spin"></div>
+                ) : (
+                  <FiFile className="h-4 w-4 text-text-500" />
+                )}
+                <span className="text-sm text-text-500">
+                  {truncateString(
+                    localServiceAccountData?.service_account_email ||
+                      localAppCredentialData?.client_id ||
+                      "",
+                    50
+                  )}
+                </span>
+              </div>
+            </label>
+          </div>
+          {isAdmin && !existingAuthCredential && (
+            <div className="mt-2">
+              <Button
+                variant="destructive"
+                type="button"
+                onClick={async () => {
+                  const endpoint =
+                    localServiceAccountData?.service_account_email
+                      ? "/api/manage/admin/connector/gmail/service-account-key"
+                      : "/api/manage/admin/connector/gmail/app-credential";
+
+                  const response = await fetch(endpoint, {
+                    method: "DELETE",
+                  });
+
+                  if (response.ok) {
+                    mutate(endpoint);
+                    // Also mutate the credential endpoints to ensure Step 2 is reset
+                    mutate(buildSimilarCredentialInfoURL(ValidSources.Gmail));
+
+                    // Add additional mutations to refresh all credential-related endpoints
+                    mutate("/api/manage/admin/connector/gmail/credentials");
+                    mutate(
+                      "/api/manage/admin/connector/gmail/public-credential"
+                    );
+                    mutate(
+                      "/api/manage/admin/connector/gmail/service-account-credential"
+                    );
+
+                    setPopup({
+                      message: `Successfully deleted ${
+                        localServiceAccountData
+                          ? "service account key"
+                          : "app credentials"
+                      }`,
+                      type: "success",
+                    });
+                    // Immediately update local state
+                    if (localServiceAccountData) {
+                      setLocalServiceAccountData(undefined);
+                    } else {
+                      setLocalAppCredentialData(undefined);
+                    }
+                    handleSuccess();
+                  } else {
+                    const errorMsg = await response.text();
+                    setPopup({
+                      message: `Failed to delete credentials - ${errorMsg}`,
+                      type: "error",
+                    });
+                  }
+                }}
+              >
+                Delete Credentials
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {!(
+        localServiceAccountData?.service_account_email ||
+        localAppCredentialData?.client_id
+      ) && (
+        <GmailCredentialUpload setPopup={setPopup} onSuccess={handleSuccess} />
+      )}
     </div>
   );
 };
 
-interface DriveCredentialSectionProps {
+interface GmailCredentialSectionProps {
   gmailPublicCredential?: Credential<GmailCredentialJson>;
   gmailServiceAccountCredential?: Credential<GmailServiceAccountCredentialJson>;
   serviceAccountKeyData?: { service_account_email: string };
@@ -387,7 +459,7 @@ export const GmailAuthSection = ({
   refreshCredentials,
   connectorExists,
   user,
-}: DriveCredentialSectionProps) => {
+}: GmailCredentialSectionProps) => {
   const router = useRouter();
   const [isAuthenticating, setIsAuthenticating] = useState(false);
   const [localServiceAccountData, setLocalServiceAccountData] = useState(
@@ -420,104 +492,141 @@ export const GmailAuthSection = ({
     localGmailPublicCredential || localGmailServiceAccountCredential;
   if (existingCredential) {
     return (
-      <>
-        <p className="mb-2 text-sm">
-          <i>Uploaded and authenticated credential already exists!</i>
-        </p>
-        <Button
-          onClick={async () => {
-            handleRevokeAccess(
-              connectorExists,
-              setPopup,
-              existingCredential,
-              refreshCredentials
-            );
-          }}
-        >
-          Revoke Access
-        </Button>
-      </>
+      <div>
+        <div className="mt-4">
+          <div className="py-3 px-4 bg-blue-50/30 dark:bg-blue-900/5 rounded mb-4 flex items-start">
+            <FiCheck className="text-blue-500 h-5 w-5 mr-2 mt-0.5 flex-shrink-0" />
+            <div className="flex-1">
+              <span className="font-medium block">Authentication Complete</span>
+              <p className="text-sm mt-1 text-text-500 dark:text-text-400 break-words">
+                Your Gmail credentials have been successfully uploaded and
+                authenticated.
+              </p>
+            </div>
+          </div>
+          <Button
+            variant="destructive"
+            type="button"
+            onClick={async () => {
+              handleRevokeAccess(
+                connectorExists,
+                setPopup,
+                existingCredential,
+                refreshCredentials
+              );
+            }}
+          >
+            Revoke Access
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // If no credentials are uploaded, show message to complete step 1 first
+  if (
+    !localServiceAccountData?.service_account_email &&
+    !localAppCredentialData?.client_id
+  ) {
+    return (
+      <div>
+        <SectionHeader>Gmail Authentication</SectionHeader>
+        <div className="mt-4">
+          <div className="flex items-start py-3 px-4 bg-yellow-50/30 dark:bg-yellow-900/5 rounded">
+            <FiAlertTriangle className="text-yellow-500 h-5 w-5 mr-2 mt-0.5 flex-shrink-0" />
+            <p className="text-sm">
+              Please complete Step 1 by uploading either OAuth credentials or a
+              Service Account key before proceeding with authentication.
+            </p>
+          </div>
+        </div>
+      </div>
     );
   }
 
   if (localServiceAccountData?.service_account_email) {
     return (
       <div>
-        <Formik
-          initialValues={{
-            google_primary_admin: user?.email || "",
-          }}
-          validationSchema={Yup.object().shape({
-            google_primary_admin: Yup.string()
-              .email("Must be a valid email")
-              .required("Required"),
-          })}
-          onSubmit={async (values, formikHelpers) => {
-            formikHelpers.setSubmitting(true);
-            try {
-              const response = await fetch(
-                "/api/manage/admin/connector/gmail/service-account-credential",
-                {
-                  method: "PUT",
-                  headers: {
-                    "Content-Type": "application/json",
-                  },
-                  body: JSON.stringify({
-                    google_primary_admin: values.google_primary_admin,
-                  }),
-                }
-              );
+        <div className="mt-4">
+          <Formik
+            initialValues={{
+              google_primary_admin: user?.email || "",
+            }}
+            validationSchema={Yup.object().shape({
+              google_primary_admin: Yup.string()
+                .email("Must be a valid email")
+                .required("Required"),
+            })}
+            onSubmit={async (values, formikHelpers) => {
+              formikHelpers.setSubmitting(true);
+              try {
+                const response = await fetch(
+                  "/api/manage/admin/connector/gmail/service-account-credential",
+                  {
+                    method: "PUT",
+                    headers: {
+                      "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                      google_primary_admin: values.google_primary_admin,
+                    }),
+                  }
+                );
 
-              if (response.ok) {
+                if (response.ok) {
+                  setPopup({
+                    message: "Successfully created service account credential",
+                    type: "success",
+                  });
+                  refreshCredentials();
+                } else {
+                  const errorMsg = await response.text();
+                  setPopup({
+                    message: `Failed to create service account credential - ${errorMsg}`,
+                    type: "error",
+                  });
+                }
+              } catch (error) {
                 setPopup({
-                  message: "Successfully created service account credential",
-                  type: "success",
-                });
-                refreshCredentials();
-              } else {
-                const errorMsg = await response.text();
-                setPopup({
-                  message: `Failed to create service account credential - ${errorMsg}`,
+                  message: `Failed to create service account credential - ${error}`,
                   type: "error",
                 });
+              } finally {
+                formikHelpers.setSubmitting(false);
               }
-            } catch (error) {
-              setPopup({
-                message: `Failed to create service account credential - ${error}`,
-                type: "error",
-              });
-            } finally {
-              formikHelpers.setSubmitting(false);
-            }
-          }}
-        >
-          {({ isSubmitting }) => (
-            <Form>
-              <TextFormField
-                name="google_primary_admin"
-                label="Primary Admin Email:"
-                subtext="Enter the email of an admin/owner of the Google Organization that owns the Gmail account(s) you want to index."
-              />
-              <div className="flex">
-                <Button type="submit" disabled={isSubmitting}>
-                  Create Credential
-                </Button>
-              </div>
-            </Form>
-          )}
-        </Formik>
+            }}
+          >
+            {({ isSubmitting }) => (
+              <Form>
+                <TextFormField
+                  name="google_primary_admin"
+                  label="Primary Admin Email:"
+                  subtext="Enter the email of an admin/owner of the Google Organization that owns the Gmail account(s) you want to index."
+                />
+                <div className="flex">
+                  <Button type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? "Creating..." : "Create Credential"}
+                  </Button>
+                </div>
+              </Form>
+            )}
+          </Formik>
+        </div>
       </div>
     );
   }
 
   if (localAppCredentialData?.client_id) {
     return (
-      <div className="text-sm mb-4">
-        <p className="mb-2">
-          Next, you must provide credentials via OAuth. This gives us read
-          access to the emails you have access to in your Gmail account.
-        </p>
+      <div>
+        <div className="bg-background-50/30 dark:bg-background-900/20 rounded mb-4">
+          <p className="text-sm">
+            Next, you need to authenticate with Gmail via OAuth. This gives us
+            read access to the emails you have access to in your Gmail account.
+          </p>
+        </div>
         <Button
+          disabled={isAuthenticating}
           onClick={async () => {
             setIsAuthenticating(true);
             try {
@@ -545,7 +654,6 @@ export const GmailAuthSection = ({
               setIsAuthenticating(false);
             }
           }}
-          disabled={isAuthenticating}
         >
           {isAuthenticating ? "Authenticating..." : "Authenticate with Gmail"}
         </Button>
@@ -553,11 +661,6 @@ export const GmailAuthSection = ({
     );
   }
 
-  // case where no keys have been uploaded in step 1
-  return (
-    <p className="text-sm">
-      Please upload either a OAuth Client Credential JSON or a Gmail Service
-      Account Key JSON in Step 1 before moving onto Step 2.
-    </p>
-  );
+  // This code path should not be reached with the new conditions above
+  return null;
 };

web/src/app/admin/connectors/[connector]/pages/gmail/GmailPage.tsx

@@ -173,6 +173,9 @@ export const GmailMain = () => {
         serviceAccountCredentialData={serviceAccountKeyData}
         isAdmin={isAdmin}
         onSuccess={handleRefresh}
+        existingAuthCredential={Boolean(
+          gmailPublicUploadedCredential || gmailServiceAccountCredential
+        )}
       />
 
       {isAdmin && hasUploadedCredentials && (