Fix Connector hover state goes off the page and file connector button issue

update file connector status to paused after succefully indexing

backend/onyx/background/indexing/run_indexing.py

@@ -532,6 +532,31 @@ def _run_indexing(
                 f"elapsed={elapsed_time:.2f}s"
             )
 
+        cc_pair = get_connector_credential_pair_from_id(
+            db_session=db_session_temp,
+            cc_pair_id=ctx.cc_pair_id,
+        )
+
+        if cc_pair:
+            logger.info(
+                f"Checking FILE connector status: source={cc_pair.connector.source}, "
+                f"status={cc_pair.status}, cc_pair_id={ctx.cc_pair_id}"
+            )
+
+            if (
+                cc_pair.connector.source == DocumentSource.FILE
+                and cc_pair.status == ConnectorCredentialPairStatus.ACTIVE
+            ):
+                logger.info(
+                    f"Pausing FILE connector after successful indexing: cc_pair_id={ctx.cc_pair_id}"
+                )
+                update_connector_credential_pair(
+                    db_session=db_session,
+                    connector_id=ctx.connector_id,
+                    credential_id=ctx.credential_id,
+                    status=ConnectorCredentialPairStatus.PAUSED,
+                )
+
         if ctx.is_primary:
             update_connector_credential_pair(
                 db_session=db_session_temp,

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

@@ -8,6 +8,7 @@ import { buildCCPairInfoUrl } from "./lib";
 import { setCCPairStatus } from "@/lib/ccPair";
 import { useState } from "react";
 import { LoadingAnimation } from "@/components/Loading";
+import { ValidSources } from "@/lib/types";
 
 export function ModifyStatusButtonCluster({
   ccPair,
@@ -48,39 +49,45 @@ export function ModifyStatusButtonCluster({
       ? "Click to start indexing again!"
       : "When paused, the connector's documents will still be visible. However, no new documents will be indexed.";
 
+  const isPausedFileConnector =
+    ccPair.connector.source === ValidSources.File &&
+    ccPair.status === ConnectorCredentialPairStatus.PAUSED;
+
   return (
     <>
       {popup}
-      <Button
-        className="flex items-center justify-center w-auto min-w-[100px] px-4 py-2"
-        variant={
-          ccPair.status === ConnectorCredentialPairStatus.PAUSED
-            ? "success-reverse"
-            : "default"
-        }
-        disabled={isUpdating}
-        onClick={() =>
-          handleStatusChange(
+      {!isPausedFileConnector && (
+        <Button
+          className="flex items-center justify-center w-auto min-w-[100px] px-4 py-2"
+          variant={
             ccPair.status === ConnectorCredentialPairStatus.PAUSED
-              ? ConnectorCredentialPairStatus.ACTIVE
-              : ConnectorCredentialPairStatus.PAUSED
-          )
-        }
-        tooltip={tooltip}
-      >
-        {isUpdating ? (
-          <LoadingAnimation
-            text={
+              ? "success-reverse"
+              : "default"
+          }
+          disabled={isUpdating}
+          onClick={() =>
+            handleStatusChange(
               ccPair.status === ConnectorCredentialPairStatus.PAUSED
-                ? "Resuming"
-                : "Pausing"
-            }
-            size="text-md"
-          />
-        ) : (
-          buttonText
-        )}
-      </Button>
+                ? ConnectorCredentialPairStatus.ACTIVE
+                : ConnectorCredentialPairStatus.PAUSED
+            )
+          }
+          tooltip={tooltip}
+        >
+          {isUpdating ? (
+            <LoadingAnimation
+              text={
+                ccPair.status === ConnectorCredentialPairStatus.PAUSED
+                  ? "Resuming"
+                  : "Pausing"
+              }
+              size="text-md"
+            />
+          ) : (
+            buttonText
+          )}
+        </Button>
+      )}
     </>
   );
 }

web/src/components/ui/button.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import React, { useRef, useEffect, useState } from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -91,20 +92,19 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       asChild = false,
       icon: Icon,
       tooltip,
+      reverse,
       ...props
     },
     ref
   ) => {
     const Comp = asChild ? Slot : "button";
-    const button = (
+    const tooltipRef = useRef<HTMLDivElement>(null);
+    const [tooltipOffset, setTooltipOffset] = useState(0);
+
+    // Define the button element first
+    const buttonElement = (
       <Comp
-        className={cn(
-          buttonVariants({
-            variant,
-            size,
-            className,
-          })
-        )}
+        className={cn(buttonVariants({ variant, size, reverse, className }))}
         ref={ref}
         {...props}
       >
@@ -113,18 +113,36 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       </Comp>
     );
 
+    useEffect(() => {
+      if (tooltip && tooltipRef.current) {
+        const handleResize = () => {
+          const rect = tooltipRef.current!.getBoundingClientRect();
+          const overflow = rect.right - window.innerWidth;
+          setTooltipOffset(overflow > 0 ? overflow : 0);
+        };
+
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+      }
+    }, [tooltip]);
+
     if (tooltip) {
       return (
         <div className="relative group">
-          {button}
-          <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-neutral-800 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
+          {buttonElement}
+          <div
+            ref={tooltipRef}
+            className="absolute bottom-full left-1/2 mb-2 px-2 py-1 bg-neutral-800 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap transform"
+            style={{ transform: `translateX(calc(-50% - ${tooltipOffset}px))` }}
+          >
             {tooltip}
           </div>
         </div>
       );
     }
 
-    return button;
+    return buttonElement;
   }
 );
 Button.displayName = "Button";