Add connector deletion failure message (#2392)

web/src/app/admin/connector/[ccPairId]/DeletionErrorStatus.tsx

@@ -0,0 +1,25 @@
+import { FiInfo } from "react-icons/fi";
+
+export default function DeletionErrorStatus({
+  deletion_failure_message,
+}: {
+  deletion_failure_message: string;
+}) {
+  return (
+    <div className="mt-2 rounded-md border border-error-300 bg-error-50 p-4 text-error-600 max-w-3xl">
+      <div className="flex items-center">
+        <h3 className="text-base font-medium">Deletion Error</h3>
+        <div className="ml-2 relative group">
+          <FiInfo className="h-4 w-4 text-error-600 cursor-help" />
+          <div className="absolute z-10 w-64 p-2 mt-2 text-sm bg-white rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 border border-gray-200">
+            This error occurred while attempting to delete the connector. You
+            may re-attempt a deletion by clicking the &quot;Delete&quot; button.
+          </div>
+        </div>
+      </div>
+      <div className="mt-2 text-sm">
+        <p>{deletion_failure_message}</p>
+      </div>
+    </div>
+  );
+}

web/src/app/admin/connector/[ccPairId]/page.tsx

@@ -22,6 +22,7 @@ import { useEffect, useRef, useState } from "react";
 import { CheckmarkIcon, EditIcon, XIcon } from "@/components/icons/icons";
 import { usePopup } from "@/components/admin/connectors/Popup";
 import { updateConnectorCredentialPairName } from "@/lib/connector";
+import DeletionErrorStatus from "./DeletionErrorStatus";
 
 // since the uploaded files are cleaned up after some period of time
 // re-indexing will not work for the file connector. Also, it would not
@@ -184,6 +185,17 @@ function Main({ ccPairId }: { ccPairId: number }) {
             : "This connector belongs to groups where you don't have curator permissions, so it's not editable."}
         </div>
       )}
+
+      {ccPair.deletion_failure_message &&
+        ccPair.status === ConnectorCredentialPairStatus.DELETING && (
+          <>
+            <div className="mt-6" />
+            <DeletionErrorStatus
+              deletion_failure_message={ccPair.deletion_failure_message}
+            />
+          </>
+        )}
+
       {credentialTemplates[ccPair.connector.source] &&
         ccPair.is_editable_for_current_user && (
           <>

web/src/app/admin/connector/[ccPairId]/types.ts

@@ -24,6 +24,7 @@ export interface CCPairFullInfo {
   latest_deletion_attempt: DeletionAttemptSnapshot | null;
   is_public: boolean;
   is_editable_for_current_user: boolean;
+  deletion_failure_message: string | null;
 }
 
 export interface PaginatedIndexAttempts {

web/tailwind-themes/tailwind.config.js

@@ -88,6 +88,18 @@ module.exports = {
 
         input: "#ffffff",
 
+        // Error colors
+        "error-50": "#fef2f2",
+        "error-100": "#fee2e2",
+        "error-200": "#fecaca",
+        "error-300": "#fca5a5",
+        "error-400": "#f87171",
+        "error-500": "#ef4444",
+        "error-600": "#dc2626",
+        "error-700": "#b91c1c",
+        "error-800": "#991b1b",
+        "error-900": "#7f1d1d",
+
         background: "#fafafa", // 50
         "background-100": "#f5f5f5", // neutral-100
         "background-125": "#F1F2F4", // gray-125