Fix/modal autofocus close button

src/frontend/src/modals/baseModal/index.tsx

@@ -217,6 +217,7 @@ interface BaseModalProps {
   type?: "modal" | "dialog" | "full-screen";
   onSubmit?: () => void;
   onEscapeKeyDown?: (e: KeyboardEvent) => void;
+  onOpenAutoFocus?: (e: Event) => void;
   closeButtonClassName?: string;
   dialogContentWithouFixed?: boolean;
 }
@@ -230,6 +231,7 @@ function BaseModal({
   type = "dialog",
   onSubmit,
   onEscapeKeyDown,
+  onOpenAutoFocus,
   closeButtonClassName,
   dialogContentWithouFixed = false,
 }: BaseModalProps) {
@@ -290,6 +292,7 @@ function BaseModal({
             <DialogContentWithouFixed
               onClick={(e) => e.stopPropagation()}
               onEscapeKeyDown={onEscapeKeyDown}
+              onOpenAutoFocus={onOpenAutoFocus}
               className={contentClasses}
               closeButtonClassName={closeButtonClassName}
             >
@@ -311,6 +314,7 @@ function BaseModal({
             <DialogContent
               onClick={(e) => e.stopPropagation()}
               onEscapeKeyDown={onEscapeKeyDown}
+              onOpenAutoFocus={onOpenAutoFocus}
               className={contentClasses}
               closeButtonClassName={closeButtonClassName}
             >

src/frontend/src/modals/confirmationModal/index.tsx

@@ -41,6 +41,7 @@ function ConfirmationModal({
   index,
   onConfirm,
   open,
+  onOpenAutoFocus,
   onClose,
   onCancel,
   ...props
@@ -78,7 +79,12 @@ function ConfirmationModal({
   };
 
   return (
-    <BaseModal {...props} open={open} setOpen={setModalOpen}>
+    <BaseModal
+      {...props}
+      open={open}
+      setOpen={setModalOpen}
+      onOpenAutoFocus={onOpenAutoFocus}
+    >
       <BaseModal.Trigger>{triggerChild}</BaseModal.Trigger>
       <BaseModal.Header description={titleHeader ?? null}>
         <span className="pr-2">{title}</span>

src/frontend/src/modals/flowLogsModal/index.tsx

@@ -90,9 +90,19 @@ export default function FlowLogsModal({
     }
   }, []);
 
+  const handleOpenAutoFocus = useCallback((e: Event) => {
+    e.preventDefault();
+    (document.querySelector(".ag-body-viewport") as HTMLElement)?.focus();
+  }, []);
+
   return (
     <>
-      <BaseModal open={open} setOpen={setOpen} size="x-large">
+      <BaseModal
+        open={open}
+        setOpen={setOpen}
+        size="x-large"
+        onOpenAutoFocus={handleOpenAutoFocus}
+      >
         <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
         <BaseModal.Header description="Inspect component executions.">
           <div className="flex w-full justify-between">

src/frontend/src/modals/saveChangesModal/index.tsx

@@ -1,5 +1,5 @@
 import { truncate } from "lodash";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import Loading from "@/components/ui/loading";
 import ConfirmationModal from "../confirmationModal";
@@ -20,6 +20,14 @@ export function SaveChangesModal({
   autoSave: boolean;
 }): JSX.Element {
   const [saving, setSaving] = useState(false);
+
+  const handleOpenAutoFocus = useCallback((e: Event) => {
+    e.preventDefault();
+    (
+      document.querySelector('[data-testid="replace-button"]') as HTMLElement
+    )?.focus();
+  }, []);
+
   return (
     <ConfirmationModal
       open={true}
@@ -42,6 +50,7 @@ export function SaveChangesModal({
       onCancel={onProceed}
       loading={autoSave ? true : saving}
       size="x-small"
+      onOpenAutoFocus={handleOpenAutoFocus}
     >
       <ConfirmationModal.Content>
         {autoSave ? (

src/frontend/src/types/components/index.ts

@@ -405,6 +405,7 @@ export type ConfirmationModalType = {
     | "small-h-full"
     | "medium-h-full";
   onEscapeKeyDown?: (e: KeyboardEvent) => void;
+  onOpenAutoFocus?: (e: Event) => void;
 };
 
 export type UserManagementType = {