Move delete to the right for consistency + disabled -> paused

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

@@ -23,7 +23,7 @@ export function DeletionButton({ ccPair }: { ccPair: CCPairFullInfo }) {
       tooltip = "Click to delete";
     }
   } else {
-    tooltip = "You must disable the connector before deleting it";
+    tooltip = "You must pause the connector before deleting it";
   }
 
   return (

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

@@ -40,11 +40,11 @@ export function ModifyStatusButtonCluster({
             )
           }
           tooltip={
-            "When disabled, the connectors documents will still" +
+            "When paused, the connectors documents will still" +
             " be visible. However, no new documents will be indexed."
           }
         >
-          Disable
+          Pause
         </Button>
       )}
     </>

web/src/app/admin/personas/PersonaTable.tsx

@@ -1,34 +1,40 @@
 "use client";
 
-import { Divider, Text } from "@tremor/react";
+import { Text } from "@tremor/react";
 import { Persona } from "./interfaces";
-import { EditButton } from "@/components/EditButton";
 import { useRouter } from "next/navigation";
 import { CustomCheckbox } from "@/components/CustomCheckbox";
 import { usePopup } from "@/components/admin/connectors/Popup";
 import { useState } from "react";
 import { UniqueIdentifier } from "@dnd-kit/core";
 import { DraggableTable } from "@/components/table/DraggableTable";
-import { personaComparator } from "./lib";
+import { deletePersona, personaComparator } from "./lib";
+import { FiEdit } from "react-icons/fi";
+import { TrashIcon } from "@/components/icons/icons";
 
 export function PersonasTable({ personas }: { personas: Persona[] }) {
   const router = useRouter();
   const { popup, setPopup } = usePopup();
 
+  const availablePersonaIds = new Set(
+    personas.map((persona) => persona.id.toString())
+  );
   const sortedPersonas = [...personas];
   sortedPersonas.sort(personaComparator);
 
-  const [finalPersonas, setFinalPersonas] = useState<UniqueIdentifier[]>(
+  const [finalPersonas, setFinalPersonas] = useState<string[]>(
     sortedPersonas.map((persona) => persona.id.toString())
   );
-  const finalPersonaValues = finalPersonas.map((id) => {
-    return sortedPersonas.find(
-      (persona) => persona.id.toString() === id
-    ) as Persona;
-  });
+  const finalPersonaValues = finalPersonas
+    .filter((id) => availablePersonaIds.has(id))
+    .map((id) => {
+      return sortedPersonas.find(
+        (persona) => persona.id.toString() === id
+      ) as Persona;
+    });
 
   const updatePersonaOrder = async (orderedPersonaIds: UniqueIdentifier[]) => {
-    setFinalPersonas(orderedPersonaIds);
+    setFinalPersonas(orderedPersonaIds.map((id) => id.toString()));
 
     const displayPriorityMap = new Map<UniqueIdentifier, number>();
     orderedPersonaIds.forEach((personaId, ind) => {
@@ -64,17 +70,20 @@ export function PersonasTable({ personas }: { personas: Persona[] }) {
       </Text>
 
       <DraggableTable
-        headers={["Name", "Description", "Built-In", "Is Visible", ""]}
+        headers={["Name", "Description", "Built-In", "Is Visible", "Delete"]}
         rows={finalPersonaValues.map((persona) => {
           return {
             id: persona.id.toString(),
             cells: [
-              <p
-                key="name"
-                className="text font-medium whitespace-normal break-none"
-              >
-                {persona.name}
-              </p>,
+              <div key="name" className="flex">
+                <FiEdit
+                  className="mr-1 my-auto cursor-pointer"
+                  onClick={() => router.push(`/admin/personas/${persona.id}`)}
+                />
+                <p className="text font-medium whitespace-normal break-none">
+                  {persona.name}
+                </p>
+              </div>,
               <p
                 key="description"
                 className="whitespace-normal break-all max-w-2xl"
@@ -120,13 +129,22 @@ export function PersonasTable({ personas }: { personas: Persona[] }) {
                 </div>
               </div>,
               <div key="edit" className="flex">
-                <div className="mx-auto">
+                <div className="mx-auto my-auto hover:bg-hover rounded p-1 cursor-pointer">
                   {!persona.default_persona ? (
-                    <EditButton
-                      onClick={() =>
-                        router.push(`/admin/personas/${persona.id}`)
-                      }
-                    />
+                    <div
+                      onClick={async () => {
+                        const response = await deletePersona(persona.id);
+                        if (response.ok) {
+                          router.push(`/admin/personas?u=${Date.now()}`);
+                        } else {
+                          alert(
+                            `Failed to delete persona - ${await response.text()}`
+                          );
+                        }
+                      }}
+                    >
+                      <TrashIcon />
+                    </div>
                   ) : (
                     "-"
                   )}

web/src/components/Status.tsx

@@ -86,7 +86,7 @@ export function CCPairStatus({
   } else if (disabled) {
     badge = (
       <Badge size={size} color="yellow" icon={FiPauseCircle}>
-        Disabled
+        Paused
       </Badge>
     );
   } else if (status === "failed") {

web/src/components/admin/connectors/table/ConnectorsTable.tsx

@@ -46,7 +46,7 @@ export function StatusRow<ConnectorConfigType, ConnectorCredentialType>({
   if (connector.disabled) {
     const deletionAttempt = connectorIndexingStatus.deletion_attempt;
     if (!deletionAttempt || deletionAttempt.status === "FAILURE") {
-      statusDisplay = <div className="text-error">Disabled</div>;
+      statusDisplay = <div className="text-error">Paused</div>;
     } else {
       statusDisplay = <div className="text-error">Deleting...</div>;
       shouldDisplayDisabledToggle = false;
@@ -65,7 +65,7 @@ export function StatusRow<ConnectorConfigType, ConnectorCredentialType>({
         >
           {statusHovered && (
             <div className="flex flex-nowrap absolute top-0 left-0 ml-8 bg-background border border-border px-3 py-2 rounded shadow-lg">
-              {connector.disabled ? "Enable!" : "Disable!"}
+              {connector.disabled ? "Enable!" : "Pause!"}
             </div>
           )}
           {connector.disabled ? (

web/src/lib/connector.ts

@@ -47,9 +47,7 @@ export async function disableConnector(
     disabled: !connector.disabled,
   }).then(() => {
     setPopup({
-      message: connector.disabled
-        ? "Enabled connector!"
-        : "Disabled connector!",
+      message: connector.disabled ? "Enabled connector!" : "Paused connector!",
       type: "success",
     });
     setTimeout(() => {