From d187b7e9e010755380a93d7ab99ab28743615dec Mon Sep 17 00:00:00 2001
From: pablonyx <pablo@danswer.ai>
Date: Sat, 1 Mar 2025 17:04:43 -0800
Subject: [PATCH] update

---
 .../app/admin/connector/[ccPairId]/page.tsx   | 36 +++++++++++------
 .../status/CCPairIndexingStatusTable.tsx      | 23 +----------
 .../credentials/actions/ModifyCredential.tsx  | 40 +++++--------------
 3 files changed, 37 insertions(+), 62 deletions(-)

diff --git a/web/src/app/admin/connector/[ccPairId]/page.tsx b/web/src/app/admin/connector/[ccPairId]/page.tsx
index 984f9454e..3f26179ce 100644
--- a/web/src/app/admin/connector/[ccPairId]/page.tsx
+++ b/web/src/app/admin/connector/[ccPairId]/page.tsx
@@ -46,6 +46,7 @@ import { IndexAttemptSnapshot } from "@/lib/types";
 import { Spinner } from "@/components/Spinner";
 import { Callout } from "@/components/ui/callout";
 import { FiAlertCircle } from "react-icons/fi";
+import { Card, CardHeader } from "@/components/ui/card";
 
 // synchronize these validations with the SQLAlchemy connector class until we have a
 // centralized schema for both frontend and backend
@@ -385,18 +386,6 @@ function Main({ ccPairId }: { ccPairId: number }) {
           status={ccPair.last_index_attempt_status || "not_started"}
           ccPairStatus={ccPair.status}
         />
-
-        {!ccPair.last_successful_index_time ? (
-          <Badge icon={FiAlertCircle} variant="destructive">
-            No successful index
-          </Badge>
-        ) : ccPair.access_type == "sync" && !ccPair.last_time_perm_sync ? (
-          <Badge icon={FiAlertCircle} variant="destructive">
-            Syncing
-          </Badge>
-        ) : (
-          <></>
-        )}
       </div>
 
       <div className="text-sm mt-1">
@@ -417,6 +406,29 @@ function Main({ ccPairId }: { ccPairId: number }) {
         </div>
       )}
 
+      {(!ccPair.last_successful_index_time ||
+        (ccPair.access_type === "sync" && !ccPair.last_time_perm_sync)) && (
+        <div className="mt-4">
+          <Card className="max-w-2xl w-fit border-blue-500 bg-blue-50 dark:bg-blue-950/30 dark:border-blue-700 p-4">
+            <div className="flex items-start gap-2">
+              <FiAlertCircle className="h-4 w-4 text-blue-600 dark:text-blue-400 mt-1" />
+              <div>
+                <h4 className="font-semibold text-blue-700 dark:text-blue-400">
+                  {!ccPair.last_successful_index_time
+                    ? "No Successful Indexing"
+                    : "Permissions Sync In Progress"}
+                </h4>
+                <p className="text-sm text-blue-600 dark:text-blue-300 mt-1">
+                  {!ccPair.last_successful_index_time
+                    ? "This connector has never been successfully indexed. Documents from this connector will not appear in search results until indexing completes successfully."
+                    : "Permissions synchronization is still in progress for this connector. Some documents may not appear in search results until this process completes."}
+                </p>
+              </div>
+            </div>
+          </Card>
+        </div>
+      )}
+
       {ccPair.deletion_failure_message &&
         ccPair.status === ConnectorCredentialPairStatus.DELETING && (
           <>
diff --git a/web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx b/web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx
index 119c7e367..236e5f78c 100644
--- a/web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx
+++ b/web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx
@@ -80,7 +80,7 @@ function SummaryRow({
 
       <TableCell>
         <div className="text-sm text-neutral-500 dark:text-neutral-300">
-          Complete Connectors
+          Ready Connectors
         </div>
         <div className="text-xl font-semibold">
           {summary.complete}/{summary.count}
@@ -218,25 +218,6 @@ border border-border dark:border-neutral-700
       <TableCell className="">
         <p className="lg:w-[500px] flex gap-x-2 xl:w-[600px] inline-block ellipsis truncate">
           <span>{ccPairsIndexingStatus.name}</span>
-
-          {!ccPairsIndexingStatus.last_success && (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Badge
-                    variant="secondary"
-                    icon={FiAlertCircle}
-                    className="text-xs"
-                  >
-                    Has not been successfully indexed yet
-                  </Badge>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>This connector has not been successfully indexed yet.</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          )}
         </p>
       </TableCell>
       <TableCell>
@@ -256,7 +237,7 @@ border border-border dark:border-neutral-700
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <span className="flex items-center">
+                  <span className="flex gap-x-1 items-center">
                     <FiAlertTriangle className="mr-1 text-yellow-600" />
                   </span>
                 </TooltipTrigger>
diff --git a/web/src/components/credentials/actions/ModifyCredential.tsx b/web/src/components/credentials/actions/ModifyCredential.tsx
index a9ead3f3b..84019dc77 100644
--- a/web/src/components/credentials/actions/ModifyCredential.tsx
+++ b/web/src/components/credentials/actions/ModifyCredential.tsx
@@ -15,6 +15,7 @@ import {
   Credential,
 } from "@/lib/connectors/credentials";
 import { Connector } from "@/lib/connectors/connectors";
+import { ConfirmEntityModal } from "@/components/modals/ConfirmEntityModal";
 
 const CredentialSelectionTable = ({
   credentials,
@@ -188,35 +189,16 @@ export default function ModifyCredential({
   return (
     <>
       {confirmDeletionCredential != null && (
-        <Modal
-          onOutsideClick={() => setConfirmDeletionCredential(null)}
-          className="max-w-sm"
-        >
-          <>
-            <p className="text-lg mb-2">
-              Are you sure you want to delete this credential? You cannot delete
-              credentials that are linked to live connectors.
-            </p>
-            <div className="mt-6 flex justify-between">
-              <button
-                className="rounded py-1.5 px-2 bg-background-800 text-text-200"
-                onClick={async () => {
-                  await onDeleteCredential(confirmDeletionCredential);
-                  setConfirmDeletionCredential(null);
-                }}
-              >
-                Yes
-              </button>
-              <button
-                onClick={() => setConfirmDeletionCredential(null)}
-                className="rounded py-1.5 px-2 bg-background-150 text-text-800"
-              >
-                {" "}
-                No
-              </button>
-            </div>
-          </>
-        </Modal>
+        <ConfirmEntityModal
+          entityType="Credential"
+          entityName={confirmDeletionCredential.name || "Unnamed Credential"}
+          onClose={() => setConfirmDeletionCredential(null)}
+          onSubmit={async () => {
+            await onDeleteCredential(confirmDeletionCredential);
+            setConfirmDeletionCredential(null);
+          }}
+          additionalDetails="You cannot delete credentials that are linked to live connectors."
+        />
       )}
 
       <div className="mb-0">