From 8e3353aed62e8a0fc9846210222b9b6e3359636f Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Tue, 12 Nov 2024 13:56:38 +0100
Subject: [PATCH 01/14] Convert `DialogConfirmation` to TS

---
 ...story.jsx => DialogConfirmation.story.tsx} |  2 --
 ...n.test.jsx => DialogConfirmation.test.tsx} |  4 +--
 ...onfirmation.jsx => DialogConfirmation.tsx} | 26 ++++++++++++-------
 .../DialogConfirmation/{index.js => index.ts} |  2 +-
 4 files changed, 19 insertions(+), 15 deletions(-)
 rename web/packages/design/src/DialogConfirmation/{DialogConfirmation.story.jsx => DialogConfirmation.story.tsx} (97%)
 rename web/packages/design/src/DialogConfirmation/{DialogConfirmation.test.jsx => DialogConfirmation.test.tsx} (92%)
 rename web/packages/design/src/DialogConfirmation/{DialogConfirmation.jsx => DialogConfirmation.tsx} (60%)
 rename web/packages/design/src/DialogConfirmation/{index.js => index.ts} (94%)

diff --git a/web/packages/design/src/DialogConfirmation/DialogConfirmation.story.jsx b/web/packages/design/src/DialogConfirmation/DialogConfirmation.story.tsx
similarity index 97%
rename from web/packages/design/src/DialogConfirmation/DialogConfirmation.story.jsx
rename to web/packages/design/src/DialogConfirmation/DialogConfirmation.story.tsx
index 5c8ea7fc371df..51e5e25ed7b8a 100644
--- a/web/packages/design/src/DialogConfirmation/DialogConfirmation.story.jsx
+++ b/web/packages/design/src/DialogConfirmation/DialogConfirmation.story.tsx
@@ -16,8 +16,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
-
 import { ButtonPrimary } from '../Button';
 
 import DialogConfirmation, {
diff --git a/web/packages/design/src/DialogConfirmation/DialogConfirmation.test.jsx b/web/packages/design/src/DialogConfirmation/DialogConfirmation.test.tsx
similarity index 92%
rename from web/packages/design/src/DialogConfirmation/DialogConfirmation.test.jsx
rename to web/packages/design/src/DialogConfirmation/DialogConfirmation.test.tsx
index a1974fe1fc247..4887037fd3974 100644
--- a/web/packages/design/src/DialogConfirmation/DialogConfirmation.test.jsx
+++ b/web/packages/design/src/DialogConfirmation/DialogConfirmation.test.tsx
@@ -16,11 +16,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
-
 import { render, fireEvent } from 'design/utils/testing';
 
-import DialogConfirmation from './DialogConfirmation';
+import { DialogConfirmation } from './DialogConfirmation';
 
 test('onClose is respected', () => {
   const onClose = jest.fn();
diff --git a/web/packages/design/src/DialogConfirmation/DialogConfirmation.jsx b/web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx
similarity index 60%
rename from web/packages/design/src/DialogConfirmation/DialogConfirmation.jsx
rename to web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx
index f15f1b5c8604c..11b1758dc480a 100644
--- a/web/packages/design/src/DialogConfirmation/DialogConfirmation.jsx
+++ b/web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx
@@ -16,22 +16,30 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import { ReactNode } from 'react';
+import { StyleFunction } from 'styled-components';
 
 import Dialog from 'design/Dialog';
 
-function DialogConfirmation(props) {
-  const { children, open, onClose, dialogCss } = props;
+export function DialogConfirmation(props: {
+  open: boolean;
+  /** @deprecated This props has no effect, it was never passed down to `Dialog`. */
+  disableEscapeKeyDown?: boolean;
+  children?: ReactNode;
+  onClose?: (
+    event: KeyboardEvent | React.MouseEvent,
+    reason: 'escapeKeyDown' | 'backdropClick'
+  ) => void;
+  dialogCss?: StyleFunction<any>;
+}) {
   return (
     <Dialog
-      dialogCss={dialogCss}
+      dialogCss={props.dialogCss}
       disableEscapeKeyDown={false}
-      onClose={onClose}
-      open={open}
+      onClose={props.onClose}
+      open={props.open}
     >
-      {children}
+      {props.children}
     </Dialog>
   );
 }
-
-export default DialogConfirmation;
diff --git a/web/packages/design/src/DialogConfirmation/index.js b/web/packages/design/src/DialogConfirmation/index.ts
similarity index 94%
rename from web/packages/design/src/DialogConfirmation/index.js
rename to web/packages/design/src/DialogConfirmation/index.ts
index 4a2b0c46d6057..62a4d56409401 100644
--- a/web/packages/design/src/DialogConfirmation/index.js
+++ b/web/packages/design/src/DialogConfirmation/index.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import DialogConfirmation from './DialogConfirmation';
+import { DialogConfirmation } from './DialogConfirmation';
 import {
   DialogTitle,
   DialogContent,

From 198a73d13fd1cdbd92238f7512feae78e086cd66 Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Tue, 12 Nov 2024 13:58:23 +0100
Subject: [PATCH 02/14] Allow `DialogConfirmation` and `Modal` to be hidden
 using CSS while closed

---
 .../DialogConfirmation/DialogConfirmation.tsx |   6 +
 web/packages/design/src/Modal/Modal.test.tsx  | 192 ++++++++++--------
 web/packages/design/src/Modal/Modal.tsx       |  23 ++-
 3 files changed, 129 insertions(+), 92 deletions(-)

diff --git a/web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx b/web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx
index 11b1758dc480a..0bf3e4f046f94 100644
--- a/web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx
+++ b/web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx
@@ -23,6 +23,11 @@ import Dialog from 'design/Dialog';
 
 export function DialogConfirmation(props: {
   open: boolean;
+  /**
+   * Prevent unmounting the component and its children from the DOM when closed.
+   * Instead, hides it with CSS.
+   */
+  keepMounted?: boolean;
   /** @deprecated This props has no effect, it was never passed down to `Dialog`. */
   disableEscapeKeyDown?: boolean;
   children?: ReactNode;
@@ -38,6 +43,7 @@ export function DialogConfirmation(props: {
       disableEscapeKeyDown={false}
       onClose={props.onClose}
       open={props.open}
+      keepMounted={props.keepMounted}
     >
       {props.children}
     </Dialog>
diff --git a/web/packages/design/src/Modal/Modal.test.tsx b/web/packages/design/src/Modal/Modal.test.tsx
index 0c0e33aa965db..9840a0c4099e3 100644
--- a/web/packages/design/src/Modal/Modal.test.tsx
+++ b/web/packages/design/src/Modal/Modal.test.tsx
@@ -36,128 +36,144 @@ const escapeKey = {
   key: 'Escape',
 };
 
-describe('design/Modal', () => {
-  it('respects open prop set to false', () => {
-    render(
-      <Modal open={false}>
-        <div>Hello</div>
-      </Modal>
-    );
+test('respects open prop set to false', () => {
+  render(
+    <Modal open={false}>
+      <div>Hello</div>
+    </Modal>
+  );
 
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+});
+
+test('respects onBackdropClick prop', () => {
+  const mockFn = jest.fn();
+
+  renderModal({
+    onBackdropClick: mockFn,
   });
 
-  it('respects onBackdropClick prop', () => {
-    const mockFn = jest.fn();
+  // handlebackdropClick
+  fireEvent.click(screen.getByTestId('backdrop'));
+  expect(mockFn).toHaveBeenCalled();
+});
 
-    renderModal({
-      onBackdropClick: mockFn,
-    });
+test('respects onEscapeKeyDown props', () => {
+  const mockFn = jest.fn();
 
-    // handlebackdropClick
-    fireEvent.click(screen.getByTestId('backdrop'));
-    expect(mockFn).toHaveBeenCalled();
+  const { container } = renderModal({
+    onEscapeKeyDown: mockFn,
   });
 
-  it('respects onEscapeKeyDown props', () => {
-    const mockFn = jest.fn();
+  // handleDocumentKeyDown
+  fireEvent.keyDown(container, escapeKey);
+  expect(mockFn).toHaveBeenCalled();
+});
 
-    const { container } = renderModal({
-      onEscapeKeyDown: mockFn,
-    });
+test('respects onClose prop', () => {
+  const mockFn = jest.fn();
 
-    // handleDocumentKeyDown
-    fireEvent.keyDown(container, escapeKey);
-    expect(mockFn).toHaveBeenCalled();
+  const { container } = renderModal({
+    onClose: mockFn,
   });
 
-  it('respects onClose prop', () => {
-    const mockFn = jest.fn();
-
-    const { container } = renderModal({
-      onClose: mockFn,
-    });
+  // handlebackdropClick
+  fireEvent.click(screen.getByTestId('backdrop'));
+  expect(mockFn).toHaveBeenCalled();
 
-    // handlebackdropClick
-    fireEvent.click(screen.getByTestId('backdrop'));
-    expect(mockFn).toHaveBeenCalled();
+  // handleDocumentKeyDown
+  fireEvent.keyDown(container, escapeKey);
+  expect(mockFn).toHaveBeenCalled();
+});
 
-    // handleDocumentKeyDown
-    fireEvent.keyDown(container, escapeKey);
-    expect(mockFn).toHaveBeenCalled();
+test('respects hideBackDrop prop', () => {
+  renderModal({
+    hideBackdrop: true,
   });
 
-  it('respects hideBackDrop prop', () => {
-    renderModal({
-      hideBackdrop: true,
-    });
+  expect(screen.queryByTestId('backdrop')).not.toBeInTheDocument();
+});
 
-    expect(screen.queryByTestId('backdrop')).not.toBeInTheDocument();
+test('respects disableBackdropClick prop', () => {
+  const mockFn = jest.fn();
+  renderModal({
+    disableBackdropClick: true,
+    onClose: mockFn,
   });
 
-  it('respects disableBackdropClick prop', () => {
-    const mockFn = jest.fn();
-    renderModal({
-      disableBackdropClick: true,
-      onClose: mockFn,
-    });
+  // handleBackdropClick
+  fireEvent.click(screen.getByTestId('backdrop'));
+  expect(mockFn).not.toHaveBeenCalled();
+});
 
-    // handleBackdropClick
-    fireEvent.click(screen.getByTestId('backdrop'));
-    expect(mockFn).not.toHaveBeenCalled();
+test('respects disableEscapeKeyDown prop', () => {
+  const mockFn = jest.fn();
+  const { container } = renderModal({
+    disableEscapeKeyDown: true,
+    onClose: mockFn,
   });
 
-  it('respects disableEscapeKeyDown prop', () => {
-    const mockFn = jest.fn();
-    const { container } = renderModal({
-      disableEscapeKeyDown: true,
-      onClose: mockFn,
-    });
+  // handleDocumentKeyDown
+  fireEvent.keyDown(container, escapeKey);
+  expect(mockFn).not.toHaveBeenCalled();
+});
 
-    // handleDocumentKeyDown
-    fireEvent.keyDown(container, escapeKey);
-    expect(mockFn).not.toHaveBeenCalled();
+test('unmount cleans up event listeners and closes modal', () => {
+  const mockFn = jest.fn();
+  const { container, unmount } = renderModal({
+    onEscapeKeyDown: mockFn,
   });
 
-  test('unmount cleans up event listeners and closes modal', () => {
-    const mockFn = jest.fn();
-    const { container, unmount } = renderModal({
-      onEscapeKeyDown: mockFn,
-    });
+  unmount();
 
-    unmount();
+  expect(screen.queryByTestId('Modal')).not.toBeInTheDocument();
 
-    expect(screen.queryByTestId('Modal')).not.toBeInTheDocument();
+  fireEvent.keyDown(container, escapeKey);
+  expect(mockFn).not.toHaveBeenCalled();
+});
 
-    fireEvent.keyDown(container, escapeKey);
-    expect(mockFn).not.toHaveBeenCalled();
+test('respects backdropProps prop invisible', () => {
+  renderModal({
+    BackdropProps: { invisible: true },
   });
 
-  test('respects backdropProps prop invisible', () => {
-    renderModal({
-      BackdropProps: { invisible: true },
-    });
-
-    expect(screen.getByTestId('backdrop')).toHaveStyle({
-      'background-color': 'transparent',
-    });
+  expect(screen.getByTestId('backdrop')).toHaveStyle({
+    'background-color': 'transparent',
   });
+});
 
-  it('restores focus on close', async () => {
-    const user = userEvent.setup();
-    render(<ToggleableModal />);
-    const toggleModalButton = screen.getByRole('button', { name: 'Toggle' });
+test('restores focus on close', async () => {
+  const user = userEvent.setup();
+  render(<ToggleableModal />);
+  const toggleModalButton = screen.getByRole('button', { name: 'Toggle' });
 
-    await user.click(toggleModalButton);
-    // Type in the input inside the modal to shift focus into another element.
-    const input = screen.getByLabelText('Input in modal');
-    await user.type(input, 'a');
+  await user.click(toggleModalButton);
+  // Type in the input inside the modal to shift focus into another element.
+  const input = screen.getByLabelText('Input in modal');
+  await user.type(input, 'a');
 
-    const closeModal = screen.getByRole('button', { name: 'Close modal' });
-    await user.click(closeModal);
+  const closeModal = screen.getByRole('button', { name: 'Close modal' });
+  await user.click(closeModal);
 
-    expect(toggleModalButton).toHaveFocus();
-  });
+  expect(toggleModalButton).toHaveFocus();
+});
+
+test('closing dialog when keepMounted is set only hides it with DOM', async () => {
+  const { rerender } = render(
+    <Modal open={true} keepMounted={true}>
+      <div>Hello</div>
+    </Modal>
+  );
+
+  expect(screen.getByText('Hello')).toBeVisible();
+
+  rerender(
+    <Modal open={false} keepMounted={true}>
+      <div>Hello</div>
+    </Modal>
+  );
+
+  expect(screen.getByText('Hello')).not.toBeVisible();
 });
 
 const ToggleableModal = () => {
diff --git a/web/packages/design/src/Modal/Modal.tsx b/web/packages/design/src/Modal/Modal.tsx
index e93085d426e7f..cd40d15021781 100644
--- a/web/packages/design/src/Modal/Modal.tsx
+++ b/web/packages/design/src/Modal/Modal.tsx
@@ -25,6 +25,11 @@ export type ModalProps = {
    * If `true`, the modal is open.
    */
   open: boolean;
+  /**
+   * Prevent unmounting the component and its children from the DOM when closed.
+   * Instead, hides it with CSS.
+   */
+  keepMounted?: boolean;
 
   className?: string;
 
@@ -200,15 +205,23 @@ export default class Modal extends React.Component<ModalProps> {
   }
 
   render() {
-    const { BackdropProps, children, modalCss, hideBackdrop, open, className } =
-      this.props;
-
-    if (!open) {
+    const {
+      BackdropProps,
+      children,
+      modalCss,
+      hideBackdrop,
+      open,
+      className,
+      keepMounted,
+    } = this.props;
+
+    if (!open && !keepMounted) {
       return null;
     }
 
     return createPortal(
       <StyledModal
+        hiddenInDom={!open}
         modalCss={modalCss}
         data-testid="Modal"
         ref={this.modalRef}
@@ -261,6 +274,7 @@ const StyledBackdrop = styled.div<BackdropProps>`
 const StyledModal = styled.div<{
   modalCss?: StyleFunction<any>;
   ref: React.RefObject<HTMLElement>;
+  hiddenInDom?: boolean;
 }>`
   position: fixed;
   z-index: 1200;
@@ -268,5 +282,6 @@ const StyledModal = styled.div<{
   bottom: 0;
   top: 0;
   left: 0;
+  ${props => props.hiddenInDom && `display: none;`};
   ${props => props.modalCss?.(props)}
 `;

From 804716bc19185396db31829be1733387178c258e Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Tue, 12 Nov 2024 14:02:05 +0100
Subject: [PATCH 03/14] Allow hiding all dialogs that are displayed as
 important

---
 .../teleterm/src/ui/ClusterConnect/ClusterConnect.tsx     | 8 ++++++--
 .../src/ui/HeadlessAuthn/HeadlessAuthentication.tsx       | 2 ++
 .../ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx    | 6 ++++--
 .../src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx      | 4 +++-
 .../src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx   | 4 +++-
 .../ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx   | 4 +++-
 .../src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx       | 4 +++-
 .../ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx   | 4 +++-
 8 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx
index 5a88fd2f71a2c..95fe60a76f2be 100644
--- a/web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx
+++ b/web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx
@@ -28,7 +28,10 @@ import { ClusterAdd } from './ClusterAdd';
 import { ClusterLogin } from './ClusterLogin';
 import { dialogCss } from './spacing';
 
-export function ClusterConnect(props: { dialog: DialogClusterConnect }) {
+export function ClusterConnect(props: {
+  dialog: DialogClusterConnect;
+  hidden?: boolean;
+}) {
   const [createdClusterUri, setCreatedClusterUri] = useState<
     RootClusterUri | undefined
   >();
@@ -49,7 +52,8 @@ export function ClusterConnect(props: { dialog: DialogClusterConnect }) {
       dialogCss={dialogCss}
       disableEscapeKeyDown={false}
       onClose={props.dialog.onCancel}
-      open={true}
+      open={!props.hidden}
+      keepMounted={true}
     >
       {!clusterUri ? (
         <ClusterAdd
diff --git a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessAuthentication.tsx b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessAuthentication.tsx
index d395dd8f9f03d..1cb1a0e5e20c4 100644
--- a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessAuthentication.tsx
+++ b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessAuthentication.tsx
@@ -36,6 +36,7 @@ interface HeadlessAuthenticationProps {
   skipConfirm: boolean;
   onCancel(): void;
   onSuccess(): void;
+  hidden?: boolean;
 }
 
 export function HeadlessAuthentication(props: HeadlessAuthenticationProps) {
@@ -81,6 +82,7 @@ export function HeadlessAuthentication(props: HeadlessAuthenticationProps) {
 
   return (
     <HeadlessPrompt
+      hidden={props.hidden}
       cluster={cluster}
       clientIp={props.clientIp}
       skipConfirm={props.skipConfirm}
diff --git a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
index 6e7b0fbeb74e7..132a6ff10bc4c 100644
--- a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
+++ b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
@@ -59,6 +59,7 @@ export type HeadlessPromptProps = {
    * reject the request from the Web UI.
    */
   onCancel(): void;
+  hidden?: boolean;
 };
 
 export function HeadlessPrompt({
@@ -71,6 +72,7 @@ export function HeadlessPrompt({
   headlessAuthenticationId,
   updateHeadlessStateAttempt,
   onCancel,
+  hidden,
 }: HeadlessPromptProps) {
   // skipConfirm automatically attempts to approve a headless auth attempt,
   // so let's show waitForMfa from the very beginning in that case.
@@ -78,12 +80,12 @@ export function HeadlessPrompt({
 
   return (
     <DialogConfirmation
+      open={!hidden}
+      keepMounted={true}
       dialogCss={() => ({
         maxWidth: '480px',
         width: '100%',
       })}
-      disableEscapeKeyDown={false}
-      open={true}
     >
       <DialogHeader justifyContent="space-between" mb={0} alignItems="baseline">
         <H2 mb={4}>
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx
index 2dbf6da7e1472..d778aa64a990a 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx
@@ -35,12 +35,14 @@ export function AskPin(props: {
   req: PromptHardwareKeyPINRequest;
   onCancel(): void;
   onSuccess(pin: string): void;
+  hidden?: boolean;
 }) {
   const [pin, setPin] = useState('');
 
   return (
     <DialogConfirmation
-      open={true}
+      open={!props.hidden}
+      keepMounted={true}
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '450px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx
index 64fb239cc6f6e..8e52e9c207e2b 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx
@@ -45,6 +45,7 @@ export function ChangePin(props: {
   req: PromptHardwareKeyPINChangeRequest;
   onCancel(): void;
   onSuccess(response: PromptHardwareKeyPINChangeResponse): void;
+  hidden?: boolean;
 }) {
   const [pin, setPin] = useState('');
   const [confirmPin, setConfirmPin] = useState('');
@@ -55,7 +56,8 @@ export function ChangePin(props: {
 
   return (
     <DialogConfirmation
-      open={true}
+      open={!props.hidden}
+      keepMounted={true}
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '450px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx
index 1a67d691c9747..29594ce5f17ab 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx
@@ -29,10 +29,12 @@ export function OverwriteSlot(props: {
   req: ConfirmHardwareKeySlotOverwriteRequest;
   onCancel(): void;
   onConfirm(): void;
+  hidden?: boolean;
 }) {
   return (
     <DialogConfirmation
-      open={true}
+      open={!props.hidden}
+      keepMounted={true}
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '450px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx
index f3a2646402784..f579386953ccc 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx
@@ -29,10 +29,12 @@ import { CommonHeader } from './CommonHeader';
 export function Touch(props: {
   req: PromptHardwareKeyTouchRequest;
   onCancel(): void;
+  hidden?: boolean;
 }) {
   return (
     <DialogConfirmation
-      open={true}
+      open={!props.hidden}
+      keepMounted={true}
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '450px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx
index ef8b902496dbb..228982e3e8ba8 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx
@@ -54,6 +54,7 @@ export const ReAuthenticate: FC<{
   onCancel: () => void;
   onOtpSubmit: (otp: string) => void;
   onSsoContinue: (redirectUrl: string) => void;
+  hidden?: boolean;
 }> = props => {
   const { promptMfaRequest: req, onSsoContinue } = props;
 
@@ -89,7 +90,8 @@ export const ReAuthenticate: FC<{
 
   return (
     <DialogConfirmation
-      open={true}
+      open={!props.hidden}
+      keepMounted={true}
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '400px',

From f2f6164656d02ec6e6c64c578314b71a3a142910 Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Tue, 12 Nov 2024 14:07:23 +0100
Subject: [PATCH 04/14] Allow displaying multiple important dialogs, separate
 regular and important dialogs and get rid of `DialogNone`

---
 .../showStartupModalsAndNotifications.test.ts |  4 +-
 .../src/ui/services/modals/modalsService.ts   | 72 +++++++++----------
 2 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/web/packages/teleterm/src/ui/AppInitializer/showStartupModalsAndNotifications.test.ts b/web/packages/teleterm/src/ui/AppInitializer/showStartupModalsAndNotifications.test.ts
index 2a49db9f6fa4e..142a1bdd3591d 100644
--- a/web/packages/teleterm/src/ui/AppInitializer/showStartupModalsAndNotifications.test.ts
+++ b/web/packages/teleterm/src/ui/AppInitializer/showStartupModalsAndNotifications.test.ts
@@ -19,7 +19,7 @@
 import { MockAppContext } from 'teleterm/ui/fixtures/mocks';
 import Logger, { NullService } from 'teleterm/logger';
 import AppContext from 'teleterm/ui/appContext';
-import { Dialog } from 'teleterm/ui/services/modals';
+import { RegularDialog } from 'teleterm/ui/services/modals';
 
 import { showStartupModalsAndNotifications } from './showStartupModalsAndNotifications';
 
@@ -144,7 +144,7 @@ function mockUsageReportingEnabled(
 
 function mockOpenRegularDialog(
   mockedAppContext: AppContext,
-  implementation?: (dialog: Dialog) => void
+  implementation?: (dialog: RegularDialog) => void
 ) {
   jest
     .spyOn(mockedAppContext.modalsService, 'openRegularDialog')
diff --git a/web/packages/teleterm/src/ui/services/modals/modalsService.ts b/web/packages/teleterm/src/ui/services/modals/modalsService.ts
index 65365868e2c32..dbe464492f5a7 100644
--- a/web/packages/teleterm/src/ui/services/modals/modalsService.ts
+++ b/web/packages/teleterm/src/ui/services/modals/modalsService.ts
@@ -28,22 +28,25 @@ import { ImmutableStore } from '../immutableStore';
 import type * as uri from 'teleterm/ui/uri';
 
 type State = {
-  // At most two modals can be displayed at the same time.
-  // The important dialog is displayed above the regular one. This is to avoid losing the state of
+  // One regular dialog and multiple important dialogs can be rendered at the same time.
+  // The rule is that the regular dialogs are opened from user actions in the Electron app, while
+  // the important ones are reserved for tshd events.
+  // We allow multiple important dialogs because sometimes completing an action requires
+  // opening another important dialog.
+  // As of now, this happens when the user needs to unlock a hardware key during a relogin process
+  // (initiated from tshd).
+  //
+  // The important dialogs are displayed above the regular one. This is to avoid losing the state of
   // the regular modal if we happen to need to interrupt whatever the user is doing and display an
   // important modal.
-  important: Dialog;
-  regular: Dialog;
+  important: ImportantDialog[];
+  regular: RegularDialog | undefined;
 };
 
 export class ModalsService extends ImmutableStore<State> {
   state: State = {
-    important: {
-      kind: 'none',
-    },
-    regular: {
-      kind: 'none',
-    },
+    important: [],
+    regular: undefined,
   };
 
   /**
@@ -58,8 +61,8 @@ export class ModalsService extends ImmutableStore<State> {
    * The returned closeDialog function can be used to close the dialog and automatically call the
    * dialog's onCancel callback (if present).
    */
-  openRegularDialog(dialog: Dialog): { closeDialog: () => void } {
-    this.state.regular['onCancel']?.();
+  openRegularDialog(dialog: RegularDialog): { closeDialog: () => void } {
+    this.state.regular?.['onCancel']?.();
     this.setState(draftState => {
       draftState.regular = dialog;
     });
@@ -81,22 +84,22 @@ export class ModalsService extends ImmutableStore<State> {
    * One example of such scenario is showing the modal to relogin after the user attempts to make a
    * database connection through a gateway with expired user and db certs.
    *
-   * Calling openImportantDialog while another important dialog is displayed will simply overwrite
-   * the old dialog with the new one.
-   * The old dialog is canceled, if possible.
+   * Calling openImportantDialog while another important dialog is displayed will open it
+   * on top of that dialog.
+   * Dialogs are displayed in the order they arrive, with the most recent one on top.
+   * This allows actions that need further steps to be completed.
    *
    * The returned closeDialog function can be used to close the dialog and automatically call the
    * dialog's onCancel callback (if present).
    */
-  openImportantDialog(dialog: Dialog): { closeDialog: () => void } {
-    this.state.important['onCancel']?.();
+  openImportantDialog(dialog: ImportantDialog): { closeDialog: () => void } {
     this.setState(draftState => {
-      draftState.important = dialog;
+      draftState.important.push(dialog);
     });
 
     return {
       closeDialog: () => {
-        this.closeImportantDialog();
+        this.closeImportantDialog(dialog);
         dialog['onCancel']?.();
       },
     };
@@ -104,18 +107,17 @@ export class ModalsService extends ImmutableStore<State> {
 
   closeRegularDialog() {
     this.setState(draftState => {
-      draftState.regular = {
-        kind: 'none',
-      };
+      draftState.regular = undefined;
     });
   }
 
-  closeImportantDialog() {
-    this.setState(draftState => {
-      draftState.important = {
-        kind: 'none',
-      };
-    });
+  closeImportantDialog(dialog: ImportantDialog) {
+    const index = this.state.important.indexOf(dialog);
+    if (index >= 0) {
+      this.setState(draftState => {
+        draftState.important.splice(index, 1);
+      });
+    }
   }
 
   useState() {
@@ -123,10 +125,6 @@ export class ModalsService extends ImmutableStore<State> {
   }
 }
 
-export interface DialogNone {
-  kind: 'none';
-}
-
 export interface DialogClusterConnect {
   kind: 'cluster-connect';
   /**
@@ -248,7 +246,7 @@ export interface DialogHardwareKeySlotOverwrite {
   onCancel(): void;
 }
 
-export type Dialog =
+export type RegularDialog =
   | DialogClusterConnect
   | DialogClusterLogout
   | DialogDocumentsReopen
@@ -256,11 +254,13 @@ export type Dialog =
   | DialogUsageData
   | DialogUserJobRole
   | DialogResourceSearchErrors
+  | DialogChangeAccessRequestKind;
+
+export type ImportantDialog =
+  | DialogClusterConnect
   | DialogHeadlessAuthentication
   | DialogReAuthenticate
-  | DialogChangeAccessRequestKind
   | DialogHardwareKeyPin
   | DialogHardwareKeyTouch
   | DialogHardwareKeyPinChange
-  | DialogHardwareKeySlotOverwrite
-  | DialogNone;
+  | DialogHardwareKeySlotOverwrite;

From 3d50c448f5e43ec68a0d6b302b61131b116af70e Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Tue, 12 Nov 2024 14:09:38 +0100
Subject: [PATCH 05/14] Pass `hidden` prop to important dialogs

---
 .../src/ui/ModalsHost/ModalsHost.story.tsx    |  40 ++++-
 .../src/ui/ModalsHost/ModalsHost.test.tsx     |  89 +++++++++--
 .../teleterm/src/ui/ModalsHost/ModalsHost.tsx | 145 +++++++++++++-----
 3 files changed, 213 insertions(+), 61 deletions(-)

diff --git a/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.story.tsx b/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.story.tsx
index 5997e8ae85f89..b09eeff930c91 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.story.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.story.tsx
@@ -21,9 +21,10 @@ import React from 'react';
 import { MockAppContextProvider } from 'teleterm/ui/fixtures/MockAppContextProvider';
 import { MockAppContext } from 'teleterm/ui/fixtures/mocks';
 import {
-  DialogClusterLogout,
   DialogDocumentsReopen,
   ModalsService,
+  DialogHardwareKeyTouch,
+  DialogHardwareKeyPin,
 } from 'teleterm/ui/services/modals';
 
 import ModalsHost from './ModalsHost';
@@ -32,10 +33,22 @@ export default {
   title: 'Teleterm/ModalsHost',
 };
 
-const clusterLogoutDialog: DialogClusterLogout = {
-  kind: 'cluster-logout',
-  clusterUri: '/clusters/foo',
-  clusterTitle: 'Foo',
+const hardwareKeyTouchDialog: DialogHardwareKeyTouch = {
+  kind: 'hardware-key-touch',
+  req: {
+    rootClusterUri: '/clusters/foo',
+  },
+  onCancel: () => {},
+};
+
+const hardwareKeyPinDialog: DialogHardwareKeyPin = {
+  kind: 'hardware-key-pin',
+  req: {
+    rootClusterUri: '/clusters/foo',
+    pinOptional: false,
+  },
+  onSuccess: () => {},
+  onCancel: () => {},
 };
 
 const documentsReopenDialog: DialogDocumentsReopen = {
@@ -46,7 +59,7 @@ const documentsReopenDialog: DialogDocumentsReopen = {
   onCancel: () => {},
 };
 
-const importantDialog = clusterLogoutDialog;
+const importantDialog = hardwareKeyTouchDialog;
 const regularDialog = documentsReopenDialog;
 
 export const RegularModal = () => {
@@ -91,3 +104,18 @@ export const ImportantAndRegularModal = () => {
     </MockAppContextProvider>
   );
 };
+
+export const TwoImportantModals = () => {
+  const modalsService = new ModalsService();
+  modalsService.openImportantDialog(importantDialog);
+  modalsService.openImportantDialog(hardwareKeyPinDialog);
+
+  const appContext = new MockAppContext();
+  appContext.modalsService = modalsService;
+
+  return (
+    <MockAppContextProvider appContext={appContext}>
+      <ModalsHost />
+    </MockAppContextProvider>
+  );
+};
diff --git a/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.test.tsx b/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.test.tsx
index 7e93fa8fc88e8..2f97b49c0f282 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.test.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.test.tsx
@@ -18,21 +18,34 @@
 
 import React from 'react';
 import { render, screen } from 'design/utils/testing';
+import { act } from '@testing-library/react';
 
 import { MockAppContextProvider } from 'teleterm/ui/fixtures/MockAppContextProvider';
 import { MockAppContext } from 'teleterm/ui/fixtures/mocks';
 import {
-  DialogClusterLogout,
-  DialogDocumentsReopen,
   ModalsService,
+  DialogDocumentsReopen,
+  DialogClusterConnect,
+  DialogHardwareKeyTouch,
 } from 'teleterm/ui/services/modals';
 
 import ModalsHost from './ModalsHost';
 
-const clusterLogoutDialog: DialogClusterLogout = {
-  kind: 'cluster-logout',
+const clusterConnectDialog: DialogClusterConnect = {
+  kind: 'cluster-connect',
   clusterUri: '/clusters/foo',
-  clusterTitle: 'Foo',
+  reason: undefined,
+  onCancel: () => {},
+  onSuccess: () => {},
+  prefill: undefined,
+};
+
+const hardwareKeyTouchDialog: DialogHardwareKeyTouch = {
+  kind: 'hardware-key-touch',
+  req: {
+    rootClusterUri: '/clusters/foo',
+  },
+  onCancel: () => {},
 };
 
 const documentsReopenDialog: DialogDocumentsReopen = {
@@ -43,26 +56,34 @@ const documentsReopenDialog: DialogDocumentsReopen = {
   onCancel: () => {},
 };
 
-jest.mock('teleterm/ui/ClusterLogout', () => ({
-  ClusterLogout: () => (
+jest.mock('teleterm/ui/ClusterConnect', () => ({
+  ClusterConnect: props => (
     <div
       data-testid="mocked-dialog"
-      data-dialog-kind={clusterLogoutDialog.kind}
-    ></div>
+      data-dialog-kind="cluster-connect"
+      data-dialog-is-hidden={props.hidden}
+    />
   ),
 }));
 
-jest.mock('teleterm/ui/DocumentsReopen', () => ({
-  DocumentsReopen: () => (
+jest.mock('teleterm/ui/ModalsHost/modals/HardwareKeys/Touch', () => ({
+  Touch: props => (
     <div
       data-testid="mocked-dialog"
-      data-dialog-kind={documentsReopenDialog.kind}
-    ></div>
+      data-dialog-kind="hardware-key-touch"
+      data-dialog-is-hidden={props.hidden}
+    />
+  ),
+}));
+
+jest.mock('teleterm/ui/DocumentsReopen', () => ({
+  DocumentsReopen: () => (
+    <div data-testid="mocked-dialog" data-dialog-kind="documents-reopen" />
   ),
 }));
 
 test('the important dialog is rendered above the regular dialog', () => {
-  const importantDialog = clusterLogoutDialog;
+  const importantDialog = clusterConnectDialog;
   const regularDialog = documentsReopenDialog;
 
   const modalsService = new ModalsService();
@@ -88,3 +109,43 @@ test('the important dialog is rendered above the regular dialog', () => {
   expect(dialogs[0]).toHaveAttribute('data-dialog-kind', regularDialog.kind);
   expect(dialogs[1]).toHaveAttribute('data-dialog-kind', importantDialog.kind);
 });
+
+test('the second important dialog is rendered above the first important dialog', () => {
+  const importantDialog1 = clusterConnectDialog;
+  const importantDialog2 = hardwareKeyTouchDialog;
+
+  const modalsService = new ModalsService();
+  modalsService.openImportantDialog(importantDialog1);
+  modalsService.openImportantDialog(importantDialog2);
+
+  const appContext = new MockAppContext();
+  appContext.modalsService = modalsService;
+
+  render(
+    <MockAppContextProvider appContext={appContext}>
+      <ModalsHost />
+    </MockAppContextProvider>
+  );
+
+  // The DOM testing library doesn't really allow us to test actual visibility in terms of the order
+  // of rendering, so we have to fall back to manually checking items in the array.
+  // https://github.com/testing-library/react-testing-library/issues/313
+  let dialogs = screen.queryAllByTestId('mocked-dialog');
+
+  // The second important dialog should be after the regular dialog in the DOM so that it's shown over the
+  // first important dialog.
+  // On top of that, only the important dialog on the top should be visible.
+  expect(dialogs[0]).toHaveAttribute('data-dialog-kind', importantDialog1.kind);
+  expect(dialogs[0]).toHaveAttribute('data-dialog-is-hidden', 'true');
+  expect(dialogs[1]).toHaveAttribute('data-dialog-kind', importantDialog2.kind);
+  expect(dialogs[1]).toHaveAttribute('data-dialog-is-hidden', 'false');
+
+  act(() => modalsService.closeImportantDialog(importantDialog2));
+
+  dialogs = screen.queryAllByTestId('mocked-dialog');
+
+  // The dialog previously on top was closed.
+  // Now the first dialog is visible.
+  expect(dialogs[0]).toHaveAttribute('data-dialog-kind', importantDialog1.kind);
+  expect(dialogs[0]).toHaveAttribute('data-dialog-is-hidden', 'false');
+});
diff --git a/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx b/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx
index c43bd061baba8..78b609c30871c 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx
@@ -16,13 +16,13 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { useAppContext } from 'teleterm/ui/appContextProvider';
 
 import { ClusterConnect } from 'teleterm/ui/ClusterConnect';
 import { DocumentsReopen } from 'teleterm/ui/DocumentsReopen';
-import { Dialog } from 'teleterm/ui/services/modals';
+import { RegularDialog, ImportantDialog } from 'teleterm/ui/services/modals';
 import { HeadlessAuthentication } from 'teleterm/ui/HeadlessAuthn';
 
 import { ClusterLogout } from '../ClusterLogout';
@@ -38,35 +38,45 @@ import { AskPin, ChangePin, OverwriteSlot, Touch } from './modals/HardwareKeys';
 
 export default function ModalsHost() {
   const { modalsService } = useAppContext();
-  const { regular: regularDialog, important: importantDialog } =
+  const { regular: regularDialog, important: importantDialogs } =
     modalsService.useState();
 
   const closeRegularDialog = () => modalsService.closeRegularDialog();
-  const closeImportantDialog = () => modalsService.closeImportantDialog();
 
   return (
     <>
-      {renderDialog(regularDialog, closeRegularDialog)}
-      {renderDialog(importantDialog, closeImportantDialog)}
+      {renderRegularDialog({
+        dialog: regularDialog,
+        handleClose: closeRegularDialog,
+      })}
+      {importantDialogs.map((dialog, index) => {
+        const isLast = index === importantDialogs.length - 1;
+        return (
+          <Fragment key={dialog.kind}>
+            {renderImportantDialog({
+              dialog: dialog,
+              handleClose: () => modalsService.closeImportantDialog(dialog),
+              hidden: !isLast,
+            })}
+          </Fragment>
+        );
+      })}
     </>
   );
 }
 
-function renderDialog(dialog: Dialog, handleClose: () => void) {
+function renderRegularDialog({
+  dialog,
+  handleClose,
+}: {
+  dialog: RegularDialog;
+  handleClose: () => void;
+}) {
+  if (!dialog) {
+    return null;
+  }
+
   switch (dialog.kind) {
-    case 'device-trust-authorize': {
-      return (
-        <AuthenticateWebDevice
-          rootClusterUri={dialog.rootClusterUri}
-          onAuthorize={dialog.onAuthorize}
-          onCancel={() => {
-            handleClose();
-            dialog.onCancel();
-          }}
-          onClose={handleClose}
-        />
-      );
-    }
     case 'cluster-connect': {
       return (
         <ClusterConnect
@@ -84,6 +94,19 @@ function renderDialog(dialog: Dialog, handleClose: () => void) {
         />
       );
     }
+    case 'device-trust-authorize': {
+      return (
+        <AuthenticateWebDevice
+          rootClusterUri={dialog.rootClusterUri}
+          onAuthorize={dialog.onAuthorize}
+          onCancel={() => {
+            handleClose();
+            dialog.onCancel();
+          }}
+          onClose={handleClose}
+        />
+      );
+    }
     case 'cluster-logout': {
       return (
         <ClusterLogout
@@ -141,7 +164,6 @@ function renderDialog(dialog: Dialog, handleClose: () => void) {
         />
       );
     }
-
     case 'resource-search-errors': {
       return (
         <ResourceSearchErrors
@@ -154,10 +176,66 @@ function renderDialog(dialog: Dialog, handleClose: () => void) {
         />
       );
     }
+    case 'change-access-request-kind': {
+      return (
+        <ChangeAccessRequestKind
+          onConfirm={() => {
+            handleClose();
+            dialog.onConfirm();
+          }}
+          onCancel={() => {
+            handleClose();
+            dialog.onCancel();
+          }}
+        />
+      );
+    }
 
+    default: {
+      return assertUnreachable(dialog);
+    }
+  }
+}
+
+/**
+ * Renders an important dialog.
+ * Each dialog must implement a `hidden` prop which visually hides the dialog
+ * without unmounting it.
+ * This is needed because tshd can send more than one event,
+ * and we need to queue dialogs on the Electron side.
+ */
+function renderImportantDialog({
+  dialog,
+  handleClose,
+  hidden,
+}: {
+  dialog: ImportantDialog;
+  handleClose: () => void;
+  hidden: boolean;
+}) {
+  switch (dialog.kind) {
+    case 'cluster-connect': {
+      return (
+        <ClusterConnect
+          hidden={hidden}
+          dialog={{
+            ...dialog,
+            onCancel: () => {
+              handleClose();
+              dialog.onCancel?.();
+            },
+            onSuccess: clusterUri => {
+              handleClose();
+              dialog.onSuccess(clusterUri);
+            },
+          }}
+        />
+      );
+    }
     case 'headless-authn': {
       return (
         <HeadlessAuthentication
+          hidden={hidden}
           rootClusterUri={dialog.rootClusterUri}
           headlessAuthenticationId={dialog.headlessAuthenticationId}
           clientIp={dialog.headlessAuthenticationClientIp}
@@ -173,10 +251,10 @@ function renderDialog(dialog: Dialog, handleClose: () => void) {
         />
       );
     }
-
     case 'reauthenticate': {
       return (
         <ReAuthenticate
+          hidden={hidden}
           promptMfaRequest={dialog.promptMfaRequest}
           onOtpSubmit={totpCode => {
             handleClose();
@@ -191,23 +269,10 @@ function renderDialog(dialog: Dialog, handleClose: () => void) {
         />
       );
     }
-    case 'change-access-request-kind': {
-      return (
-        <ChangeAccessRequestKind
-          onConfirm={() => {
-            handleClose();
-            dialog.onConfirm();
-          }}
-          onCancel={() => {
-            handleClose();
-            dialog.onCancel();
-          }}
-        />
-      );
-    }
     case 'hardware-key-pin': {
       return (
         <AskPin
+          hidden={hidden}
           req={dialog.req}
           onSuccess={res => {
             handleClose();
@@ -223,6 +288,7 @@ function renderDialog(dialog: Dialog, handleClose: () => void) {
     case 'hardware-key-touch': {
       return (
         <Touch
+          hidden={hidden}
           req={dialog.req}
           onCancel={() => {
             handleClose();
@@ -234,6 +300,7 @@ function renderDialog(dialog: Dialog, handleClose: () => void) {
     case 'hardware-key-pin-change': {
       return (
         <ChangePin
+          hidden={hidden}
           req={dialog.req}
           onSuccess={dialog.onSuccess}
           onCancel={() => {
@@ -246,6 +313,7 @@ function renderDialog(dialog: Dialog, handleClose: () => void) {
     case 'hardware-key-slot-overwrite': {
       return (
         <OverwriteSlot
+          hidden={hidden}
           req={dialog.req}
           onConfirm={dialog.onConfirm}
           onCancel={() => {
@@ -255,11 +323,6 @@ function renderDialog(dialog: Dialog, handleClose: () => void) {
         />
       );
     }
-
-    case 'none': {
-      return null;
-    }
-
     default: {
       return assertUnreachable(dialog);
     }

From 5506b808ffdb52adca14c56a6a0579613898bbc2 Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Tue, 12 Nov 2024 14:17:11 +0100
Subject: [PATCH 06/14] Rename `importantModalSemaphore` to
 `singleImportantModalSemaphore`

---
 lib/teleterm/daemon/daemon.go            | 14 +++++++-------
 lib/teleterm/daemon/daemon_headless.go   |  4 ++--
 lib/teleterm/daemon/daemon_test.go       |  6 +++---
 lib/teleterm/daemon/hardwarekeyprompt.go | 16 ++++++++--------
 lib/teleterm/daemon/mfaprompt.go         |  4 ++--
 5 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/lib/teleterm/daemon/daemon.go b/lib/teleterm/daemon/daemon.go
index c826468ca22da..0107df5a56771 100644
--- a/lib/teleterm/daemon/daemon.go
+++ b/lib/teleterm/daemon/daemon.go
@@ -114,10 +114,10 @@ func (s *Service) relogin(ctx context.Context, req *api.ReloginRequest) error {
 	}
 	defer s.reloginMu.Unlock()
 
-	if err := s.importantModalSemaphore.Acquire(ctx); err != nil {
+	if err := s.singleImportantModalSemaphore.Acquire(ctx); err != nil {
 		return trace.Wrap(err)
 	}
-	defer s.importantModalSemaphore.Release()
+	defer s.singleImportantModalSemaphore.Release()
 
 	const reloginUserTimeout = time.Minute
 	timeoutCtx, cancelTshdEventsCtx := context.WithTimeout(ctx, reloginUserTimeout)
@@ -892,7 +892,7 @@ func (s *Service) UpdateAndDialTshdEventsServerAddress(serverAddress string) err
 	client := api.NewTshdEventsServiceClient(conn)
 
 	s.tshdEventsClient = client
-	s.importantModalSemaphore = newWaitSemaphore(maxConcurrentImportantModals, imporantModalWaitDuraiton)
+	s.singleImportantModalSemaphore = newWaitSemaphore(maxConcurrentImportantModals, imporantModalWaitDuraiton)
 
 	return nil
 }
@@ -1191,15 +1191,15 @@ type Service struct {
 	gateways map[string]gateway.Gateway
 	// tshdEventsClient is a client to send events to the Electron App.
 	tshdEventsClient api.TshdEventsServiceClient
-	// The Electron App can only display one important Modal at a time. tshd events
-	// that trigger an important modal (relogin, headless login) should use this
-	// lock to ensure it doesn't overwrite existing tshd-initiated important modals.
+	// The Electron App can display multiple important modals by showing the latest one and hiding the others.
+	// However, we should use this feature only when necessary (for example, for hardware key prompts
+	// while relogin is in progress). In any other case, we should open one modal at a time.
 	//
 	// We use a semaphore instead of a mutex in order to cancel important modals that
 	// are no longer relevant before acquisition.
 	//
 	// We use a waitSemaphore in order to make sure there is a clear transition between modals.
-	importantModalSemaphore *waitSemaphore
+	singleImportantModalSemaphore *waitSemaphore
 	// usageReporter batches the events and sends them to prehog
 	usageReporter *usagereporter.UsageReporter
 	// reloginMu is used when a goroutine needs to request a relogin from the Electron app. Since the
diff --git a/lib/teleterm/daemon/daemon_headless.go b/lib/teleterm/daemon/daemon_headless.go
index 3ea8b5755d678..d8ecd44c45b6c 100644
--- a/lib/teleterm/daemon/daemon_headless.go
+++ b/lib/teleterm/daemon/daemon_headless.go
@@ -272,10 +272,10 @@ func (s *Service) sendPendingHeadlessAuthentication(ctx context.Context, ha *typ
 		HeadlessAuthenticationClientIp: ha.ClientIpAddress,
 	}
 
-	if err := s.importantModalSemaphore.Acquire(ctx); err != nil {
+	if err := s.singleImportantModalSemaphore.Acquire(ctx); err != nil {
 		return trace.Wrap(err)
 	}
-	defer s.importantModalSemaphore.Release()
+	defer s.singleImportantModalSemaphore.Release()
 
 	_, err := s.tshdEventsClient.SendPendingHeadlessAuthentication(ctx, req)
 	return trace.Wrap(err)
diff --git a/lib/teleterm/daemon/daemon_test.go b/lib/teleterm/daemon/daemon_test.go
index 00bf1176ce03f..a5722ae3051d9 100644
--- a/lib/teleterm/daemon/daemon_test.go
+++ b/lib/teleterm/daemon/daemon_test.go
@@ -522,8 +522,8 @@ func TestImportantModalSemaphore(t *testing.T) {
 	// Claim the important modal semaphore.
 
 	customWaitDuration := 10 * time.Millisecond
-	daemon.importantModalSemaphore.waitDuration = customWaitDuration
-	err = daemon.importantModalSemaphore.Acquire(ctx)
+	daemon.singleImportantModalSemaphore.waitDuration = customWaitDuration
+	err = daemon.singleImportantModalSemaphore.Acquire(ctx)
 	require.NoError(t, err)
 
 	// relogin and sending pending headless authentications should be blocked.
@@ -560,7 +560,7 @@ func TestImportantModalSemaphore(t *testing.T) {
 	// complete successfully after a short delay between each semaphore release.
 
 	releaseTime := time.Now()
-	daemon.importantModalSemaphore.Release()
+	daemon.singleImportantModalSemaphore.Release()
 
 	var otherC chan error
 	select {
diff --git a/lib/teleterm/daemon/hardwarekeyprompt.go b/lib/teleterm/daemon/hardwarekeyprompt.go
index 4c8b5838a3b01..81ba4cf7202c9 100644
--- a/lib/teleterm/daemon/hardwarekeyprompt.go
+++ b/lib/teleterm/daemon/hardwarekeyprompt.go
@@ -41,10 +41,10 @@ type hardwareKeyPrompter struct {
 
 // Touch prompts the user to touch the hardware key.
 func (h *hardwareKeyPrompter) Touch(ctx context.Context) error {
-	if err := h.s.importantModalSemaphore.Acquire(ctx); err != nil {
+	if err := h.s.singleImportantModalSemaphore.Acquire(ctx); err != nil {
 		return trace.Wrap(err)
 	}
-	defer h.s.importantModalSemaphore.Release()
+	defer h.s.singleImportantModalSemaphore.Release()
 	_, err := h.s.tshdEventsClient.PromptHardwareKeyTouch(ctx, &api.PromptHardwareKeyTouchRequest{
 		RootClusterUri: h.rootClusterURI.String(),
 	})
@@ -56,10 +56,10 @@ func (h *hardwareKeyPrompter) Touch(ctx context.Context) error {
 
 // AskPIN prompts the user for a PIN.
 func (h *hardwareKeyPrompter) AskPIN(ctx context.Context, requirement keys.PINPromptRequirement) (string, error) {
-	if err := h.s.importantModalSemaphore.Acquire(ctx); err != nil {
+	if err := h.s.singleImportantModalSemaphore.Acquire(ctx); err != nil {
 		return "", trace.Wrap(err)
 	}
-	defer h.s.importantModalSemaphore.Release()
+	defer h.s.singleImportantModalSemaphore.Release()
 	res, err := h.s.tshdEventsClient.PromptHardwareKeyPIN(ctx, &api.PromptHardwareKeyPINRequest{
 		RootClusterUri: h.rootClusterURI.String(),
 		PinOptional:    requirement == keys.PINOptional,
@@ -74,10 +74,10 @@ func (h *hardwareKeyPrompter) AskPIN(ctx context.Context, requirement keys.PINPr
 // The Electron app prompt must handle default values for PIN and PUK,
 // preventing the user from submitting empty/default values.
 func (h *hardwareKeyPrompter) ChangePIN(ctx context.Context) (*keys.PINAndPUK, error) {
-	if err := h.s.importantModalSemaphore.Acquire(ctx); err != nil {
+	if err := h.s.singleImportantModalSemaphore.Acquire(ctx); err != nil {
 		return nil, trace.Wrap(err)
 	}
-	defer h.s.importantModalSemaphore.Release()
+	defer h.s.singleImportantModalSemaphore.Release()
 	res, err := h.s.tshdEventsClient.PromptHardwareKeyPINChange(ctx, &api.PromptHardwareKeyPINChangeRequest{
 		RootClusterUri: h.rootClusterURI.String(),
 	})
@@ -93,10 +93,10 @@ func (h *hardwareKeyPrompter) ChangePIN(ctx context.Context) (*keys.PINAndPUK, e
 
 // ConfirmSlotOverwrite asks the user if the slot's private key and certificate can be overridden.
 func (h *hardwareKeyPrompter) ConfirmSlotOverwrite(ctx context.Context, message string) (bool, error) {
-	if err := h.s.importantModalSemaphore.Acquire(ctx); err != nil {
+	if err := h.s.singleImportantModalSemaphore.Acquire(ctx); err != nil {
 		return false, trace.Wrap(err)
 	}
-	defer h.s.importantModalSemaphore.Release()
+	defer h.s.singleImportantModalSemaphore.Release()
 	res, err := h.s.tshdEventsClient.ConfirmHardwareKeySlotOverwrite(ctx, &api.ConfirmHardwareKeySlotOverwriteRequest{
 		RootClusterUri: h.rootClusterURI.String(),
 		Message:        message,
diff --git a/lib/teleterm/daemon/mfaprompt.go b/lib/teleterm/daemon/mfaprompt.go
index abdcd3dc2089c..3b6b01f18f8e8 100644
--- a/lib/teleterm/daemon/mfaprompt.go
+++ b/lib/teleterm/daemon/mfaprompt.go
@@ -63,10 +63,10 @@ func (s *Service) NewMFAPrompt(resourceURI uri.ResourceURI, cfg *libmfa.PromptCo
 }
 
 func (s *Service) promptAppMFA(ctx context.Context, in *api.PromptMFARequest) (*api.PromptMFAResponse, error) {
-	if err := s.importantModalSemaphore.Acquire(ctx); err != nil {
+	if err := s.singleImportantModalSemaphore.Acquire(ctx); err != nil {
 		return nil, trace.Wrap(err)
 	}
-	defer s.importantModalSemaphore.Release()
+	defer s.singleImportantModalSemaphore.Release()
 
 	return s.tshdEventsClient.PromptMFA(ctx, in)
 }

From c40578e0a4eca2d15121087a111d7cfbe205b227 Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Tue, 12 Nov 2024 15:22:21 +0100
Subject: [PATCH 07/14] Remove semaphores from hardware key prompts

---
 lib/teleterm/daemon/hardwarekeyprompt.go | 30 +++++++++++-------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/lib/teleterm/daemon/hardwarekeyprompt.go b/lib/teleterm/daemon/hardwarekeyprompt.go
index 81ba4cf7202c9..2d9b26388e330 100644
--- a/lib/teleterm/daemon/hardwarekeyprompt.go
+++ b/lib/teleterm/daemon/hardwarekeyprompt.go
@@ -30,6 +30,20 @@ import (
 
 // NewHardwareKeyPromptConstructor returns a new hardware key prompt constructor
 // for this service and the given root cluster URI.
+// TODO(gzdunek): Improve multi-cluster and multi-hardware keys support.
+// The code in yubikey.go doesn't really support using multiple hardware keys (like one per cluster):
+// 1. We don't offer a choice which key should be used on the initial login.
+// 2. Keys are cached per slot, not per physical key - it's not possible to use different keys with the same slot.
+//
+// Additionally, using the same hardware key for two clusters is not ideal too.
+// Since we cache the keys per slot, if two clusters specify the same one,
+// the user will always see the prompt for the same cluster URI. For example, if you are logged into both
+// cluster-a and cluster-b, the prompt will always say "Unlock hardware key to access cluster-b."
+// It seems that the better option would be to have a prompt per physical key, not per cluster.
+// But I will leave that for the future, it's hard to say how common these scenarios will be in Connect.
+//
+// Because of the above, we don't have any mutex here. I don't expect receiving prompts
+// from different hardware keys at the same time.
 func (s *Service) NewHardwareKeyPromptConstructor(rootClusterURI uri.ResourceURI) keys.HardwareKeyPrompt {
 	return &hardwareKeyPrompter{s: s, rootClusterURI: rootClusterURI}
 }
@@ -41,10 +55,6 @@ type hardwareKeyPrompter struct {
 
 // Touch prompts the user to touch the hardware key.
 func (h *hardwareKeyPrompter) Touch(ctx context.Context) error {
-	if err := h.s.singleImportantModalSemaphore.Acquire(ctx); err != nil {
-		return trace.Wrap(err)
-	}
-	defer h.s.singleImportantModalSemaphore.Release()
 	_, err := h.s.tshdEventsClient.PromptHardwareKeyTouch(ctx, &api.PromptHardwareKeyTouchRequest{
 		RootClusterUri: h.rootClusterURI.String(),
 	})
@@ -56,10 +66,6 @@ func (h *hardwareKeyPrompter) Touch(ctx context.Context) error {
 
 // AskPIN prompts the user for a PIN.
 func (h *hardwareKeyPrompter) AskPIN(ctx context.Context, requirement keys.PINPromptRequirement) (string, error) {
-	if err := h.s.singleImportantModalSemaphore.Acquire(ctx); err != nil {
-		return "", trace.Wrap(err)
-	}
-	defer h.s.singleImportantModalSemaphore.Release()
 	res, err := h.s.tshdEventsClient.PromptHardwareKeyPIN(ctx, &api.PromptHardwareKeyPINRequest{
 		RootClusterUri: h.rootClusterURI.String(),
 		PinOptional:    requirement == keys.PINOptional,
@@ -74,10 +80,6 @@ func (h *hardwareKeyPrompter) AskPIN(ctx context.Context, requirement keys.PINPr
 // The Electron app prompt must handle default values for PIN and PUK,
 // preventing the user from submitting empty/default values.
 func (h *hardwareKeyPrompter) ChangePIN(ctx context.Context) (*keys.PINAndPUK, error) {
-	if err := h.s.singleImportantModalSemaphore.Acquire(ctx); err != nil {
-		return nil, trace.Wrap(err)
-	}
-	defer h.s.singleImportantModalSemaphore.Release()
 	res, err := h.s.tshdEventsClient.PromptHardwareKeyPINChange(ctx, &api.PromptHardwareKeyPINChangeRequest{
 		RootClusterUri: h.rootClusterURI.String(),
 	})
@@ -93,10 +95,6 @@ func (h *hardwareKeyPrompter) ChangePIN(ctx context.Context) (*keys.PINAndPUK, e
 
 // ConfirmSlotOverwrite asks the user if the slot's private key and certificate can be overridden.
 func (h *hardwareKeyPrompter) ConfirmSlotOverwrite(ctx context.Context, message string) (bool, error) {
-	if err := h.s.singleImportantModalSemaphore.Acquire(ctx); err != nil {
-		return false, trace.Wrap(err)
-	}
-	defer h.s.singleImportantModalSemaphore.Release()
 	res, err := h.s.tshdEventsClient.ConfirmHardwareKeySlotOverwrite(ctx, &api.ConfirmHardwareKeySlotOverwriteRequest{
 		RootClusterUri: h.rootClusterURI.String(),
 		Message:        message,

From a0eb965f8276ddc7f679963d00c6b9f4f1aff210 Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Wed, 13 Nov 2024 17:23:16 +0100
Subject: [PATCH 08/14] `keepMounted` -> `keepInDOMAfterClose`

---
 .../design/src/DialogConfirmation/DialogConfirmation.tsx    | 4 ++--
 web/packages/design/src/Modal/Modal.test.tsx                | 6 +++---
 web/packages/design/src/Modal/Modal.tsx                     | 6 +++---
 .../teleterm/src/ui/ClusterConnect/ClusterConnect.tsx       | 2 +-
 .../src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx  | 2 +-
 .../src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx        | 2 +-
 .../src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx     | 2 +-
 .../src/ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx | 2 +-
 .../src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx         | 2 +-
 .../ui/ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx  | 2 +-
 10 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx b/web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx
index 0bf3e4f046f94..80b0c33ead6d7 100644
--- a/web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx
+++ b/web/packages/design/src/DialogConfirmation/DialogConfirmation.tsx
@@ -27,7 +27,7 @@ export function DialogConfirmation(props: {
    * Prevent unmounting the component and its children from the DOM when closed.
    * Instead, hides it with CSS.
    */
-  keepMounted?: boolean;
+  keepInDOMAfterClose?: boolean;
   /** @deprecated This props has no effect, it was never passed down to `Dialog`. */
   disableEscapeKeyDown?: boolean;
   children?: ReactNode;
@@ -43,7 +43,7 @@ export function DialogConfirmation(props: {
       disableEscapeKeyDown={false}
       onClose={props.onClose}
       open={props.open}
-      keepMounted={props.keepMounted}
+      keepInDOMAfterClose={props.keepInDOMAfterClose}
     >
       {props.children}
     </Dialog>
diff --git a/web/packages/design/src/Modal/Modal.test.tsx b/web/packages/design/src/Modal/Modal.test.tsx
index 9840a0c4099e3..4b69a7e1dc7f3 100644
--- a/web/packages/design/src/Modal/Modal.test.tsx
+++ b/web/packages/design/src/Modal/Modal.test.tsx
@@ -158,9 +158,9 @@ test('restores focus on close', async () => {
   expect(toggleModalButton).toHaveFocus();
 });
 
-test('closing dialog when keepMounted is set only hides it with DOM', async () => {
+test('closing dialog when attachCustomKeyEventHandler is set only hides it with DOM', async () => {
   const { rerender } = render(
-    <Modal open={true} keepMounted={true}>
+    <Modal open={true} keepInDOMAfterClose={true}>
       <div>Hello</div>
     </Modal>
   );
@@ -168,7 +168,7 @@ test('closing dialog when keepMounted is set only hides it with DOM', async () =
   expect(screen.getByText('Hello')).toBeVisible();
 
   rerender(
-    <Modal open={false} keepMounted={true}>
+    <Modal open={false} keepInDOMAfterClose={true}>
       <div>Hello</div>
     </Modal>
   );
diff --git a/web/packages/design/src/Modal/Modal.tsx b/web/packages/design/src/Modal/Modal.tsx
index cd40d15021781..99eaf6f2b286d 100644
--- a/web/packages/design/src/Modal/Modal.tsx
+++ b/web/packages/design/src/Modal/Modal.tsx
@@ -29,7 +29,7 @@ export type ModalProps = {
    * Prevent unmounting the component and its children from the DOM when closed.
    * Instead, hides it with CSS.
    */
-  keepMounted?: boolean;
+  keepInDOMAfterClose?: boolean;
 
   className?: string;
 
@@ -212,10 +212,10 @@ export default class Modal extends React.Component<ModalProps> {
       hideBackdrop,
       open,
       className,
-      keepMounted,
+      keepInDOMAfterClose,
     } = this.props;
 
-    if (!open && !keepMounted) {
+    if (!open && !keepInDOMAfterClose) {
       return null;
     }
 
diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx
index 95fe60a76f2be..43cd2cb3ee4d3 100644
--- a/web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx
+++ b/web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx
@@ -53,7 +53,7 @@ export function ClusterConnect(props: {
       disableEscapeKeyDown={false}
       onClose={props.dialog.onCancel}
       open={!props.hidden}
-      keepMounted={true}
+      keepInDOMAfterClose={true}
     >
       {!clusterUri ? (
         <ClusterAdd
diff --git a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
index 132a6ff10bc4c..5e3cb778afd16 100644
--- a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
+++ b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
@@ -81,7 +81,7 @@ export function HeadlessPrompt({
   return (
     <DialogConfirmation
       open={!hidden}
-      keepMounted={true}
+      keepInDOMAfterClose={true}
       dialogCss={() => ({
         maxWidth: '480px',
         width: '100%',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx
index d778aa64a990a..e1dbd222e88ec 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx
@@ -42,7 +42,7 @@ export function AskPin(props: {
   return (
     <DialogConfirmation
       open={!props.hidden}
-      keepMounted={true}
+      keepInDOMAfterClose={true}
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '450px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx
index 8e52e9c207e2b..b4c865dc02d94 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx
@@ -57,7 +57,7 @@ export function ChangePin(props: {
   return (
     <DialogConfirmation
       open={!props.hidden}
-      keepMounted={true}
+      keepInDOMAfterClose={true}
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '450px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx
index 29594ce5f17ab..4e05cb6064698 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx
@@ -34,7 +34,7 @@ export function OverwriteSlot(props: {
   return (
     <DialogConfirmation
       open={!props.hidden}
-      keepMounted={true}
+      keepInDOMAfterClose={true}
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '450px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx
index f579386953ccc..eb4bf5215275b 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx
@@ -34,7 +34,7 @@ export function Touch(props: {
   return (
     <DialogConfirmation
       open={!props.hidden}
-      keepMounted={true}
+      keepInDOMAfterClose={true}
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '450px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx
index 228982e3e8ba8..f9a3dc870447e 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx
@@ -91,7 +91,7 @@ export const ReAuthenticate: FC<{
   return (
     <DialogConfirmation
       open={!props.hidden}
-      keepMounted={true}
+      keepInDOMAfterClose={true}
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '400px',

From e8bf38e29297d4ce9404386b08b7de114bb452dc Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Wed, 13 Nov 2024 19:59:03 +0100
Subject: [PATCH 09/14] Remove the explicit value from `keepInDOMAfterClose`

---
 web/packages/design/src/Modal/Modal.test.tsx                  | 4 ++--
 .../teleterm/src/ui/ClusterConnect/ClusterConnect.tsx         | 2 +-
 .../src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx    | 2 +-
 .../teleterm/src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx | 2 +-
 .../src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx       | 2 +-
 .../src/ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx   | 2 +-
 .../teleterm/src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx  | 2 +-
 .../ui/ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx    | 2 +-
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/packages/design/src/Modal/Modal.test.tsx b/web/packages/design/src/Modal/Modal.test.tsx
index 4b69a7e1dc7f3..09a63cdfc9df3 100644
--- a/web/packages/design/src/Modal/Modal.test.tsx
+++ b/web/packages/design/src/Modal/Modal.test.tsx
@@ -160,7 +160,7 @@ test('restores focus on close', async () => {
 
 test('closing dialog when attachCustomKeyEventHandler is set only hides it with DOM', async () => {
   const { rerender } = render(
-    <Modal open={true} keepInDOMAfterClose={true}>
+    <Modal open={true} keepInDOMAfterClose>
       <div>Hello</div>
     </Modal>
   );
@@ -168,7 +168,7 @@ test('closing dialog when attachCustomKeyEventHandler is set only hides it with
   expect(screen.getByText('Hello')).toBeVisible();
 
   rerender(
-    <Modal open={false} keepInDOMAfterClose={true}>
+    <Modal open={false} keepInDOMAfterClose>
       <div>Hello</div>
     </Modal>
   );
diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx
index 43cd2cb3ee4d3..9a3f5cac5c54b 100644
--- a/web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx
+++ b/web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx
@@ -53,7 +53,7 @@ export function ClusterConnect(props: {
       disableEscapeKeyDown={false}
       onClose={props.dialog.onCancel}
       open={!props.hidden}
-      keepInDOMAfterClose={true}
+      keepInDOMAfterClose
     >
       {!clusterUri ? (
         <ClusterAdd
diff --git a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
index 5e3cb778afd16..6c2c1ae7ffffb 100644
--- a/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
+++ b/web/packages/teleterm/src/ui/HeadlessAuthn/HeadlessPrompt/HeadlessPrompt.tsx
@@ -81,7 +81,7 @@ export function HeadlessPrompt({
   return (
     <DialogConfirmation
       open={!hidden}
-      keepInDOMAfterClose={true}
+      keepInDOMAfterClose
       dialogCss={() => ({
         maxWidth: '480px',
         width: '100%',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx
index e1dbd222e88ec..964ec26cd54cf 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/AskPin.tsx
@@ -42,7 +42,7 @@ export function AskPin(props: {
   return (
     <DialogConfirmation
       open={!props.hidden}
-      keepInDOMAfterClose={true}
+      keepInDOMAfterClose
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '450px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx
index b4c865dc02d94..29b19e5e08eac 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/ChangePin.tsx
@@ -57,7 +57,7 @@ export function ChangePin(props: {
   return (
     <DialogConfirmation
       open={!props.hidden}
-      keepInDOMAfterClose={true}
+      keepInDOMAfterClose
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '450px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx
index 4e05cb6064698..7a7aa9ab5bedc 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/OverwriteSlot.tsx
@@ -34,7 +34,7 @@ export function OverwriteSlot(props: {
   return (
     <DialogConfirmation
       open={!props.hidden}
-      keepInDOMAfterClose={true}
+      keepInDOMAfterClose
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '450px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx
index eb4bf5215275b..60f1ac9123339 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/Touch.tsx
@@ -34,7 +34,7 @@ export function Touch(props: {
   return (
     <DialogConfirmation
       open={!props.hidden}
-      keepInDOMAfterClose={true}
+      keepInDOMAfterClose
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '450px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx
index f9a3dc870447e..8d6a11053bde6 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/ReAuthenticate/ReAuthenticate.tsx
@@ -91,7 +91,7 @@ export const ReAuthenticate: FC<{
   return (
     <DialogConfirmation
       open={!props.hidden}
-      keepInDOMAfterClose={true}
+      keepInDOMAfterClose
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '400px',

From 3652931896eca7a6449b5105ef1a6b3130647451 Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Wed, 13 Nov 2024 20:18:37 +0100
Subject: [PATCH 10/14] Revert splitting dialogs into regular and important
 ones, pass `hidden` to all of them, hide regular modal when important one is
 visible

---
 .../showStartupModalsAndNotifications.test.ts |   4 +-
 .../src/ui/ClusterLogout/ClusterLogout.tsx    |  17 +--
 .../ui/DocumentsReopen/DocumentsReopen.tsx    |  10 +-
 .../src/ui/ModalsHost/ModalsHost.test.tsx     |  10 +-
 .../teleterm/src/ui/ModalsHost/ModalsHost.tsx | 125 +++++++-----------
 .../AuthenticateWebDevice.tsx                 |  18 +--
 .../ChangeAccessRequestKind.tsx               |   5 +-
 .../ModalsHost/modals/UsageData/UsageData.tsx |  12 +-
 .../modals/UserJobRole/UserJobRole.tsx        |  15 +--
 .../src/ui/Search/ResourceSearchErrors.tsx    |   4 +-
 .../src/ui/services/modals/modalsService.ts   |  17 +--
 11 files changed, 110 insertions(+), 127 deletions(-)

diff --git a/web/packages/teleterm/src/ui/AppInitializer/showStartupModalsAndNotifications.test.ts b/web/packages/teleterm/src/ui/AppInitializer/showStartupModalsAndNotifications.test.ts
index 142a1bdd3591d..2a49db9f6fa4e 100644
--- a/web/packages/teleterm/src/ui/AppInitializer/showStartupModalsAndNotifications.test.ts
+++ b/web/packages/teleterm/src/ui/AppInitializer/showStartupModalsAndNotifications.test.ts
@@ -19,7 +19,7 @@
 import { MockAppContext } from 'teleterm/ui/fixtures/mocks';
 import Logger, { NullService } from 'teleterm/logger';
 import AppContext from 'teleterm/ui/appContext';
-import { RegularDialog } from 'teleterm/ui/services/modals';
+import { Dialog } from 'teleterm/ui/services/modals';
 
 import { showStartupModalsAndNotifications } from './showStartupModalsAndNotifications';
 
@@ -144,7 +144,7 @@ function mockUsageReportingEnabled(
 
 function mockOpenRegularDialog(
   mockedAppContext: AppContext,
-  implementation?: (dialog: RegularDialog) => void
+  implementation?: (dialog: Dialog) => void
 ) {
   jest
     .spyOn(mockedAppContext.modalsService, 'openRegularDialog')
diff --git a/web/packages/teleterm/src/ui/ClusterLogout/ClusterLogout.tsx b/web/packages/teleterm/src/ui/ClusterLogout/ClusterLogout.tsx
index 9110a37d02dc9..877b9bd9a6d7a 100644
--- a/web/packages/teleterm/src/ui/ClusterLogout/ClusterLogout.tsx
+++ b/web/packages/teleterm/src/ui/ClusterLogout/ClusterLogout.tsx
@@ -33,17 +33,17 @@ import { RootClusterUri } from 'teleterm/ui/uri';
 
 import { useClusterLogout } from './useClusterLogout';
 
-interface ClusterLogoutProps {
-  clusterTitle: string;
-  clusterUri: RootClusterUri;
-  onClose(): void;
-}
-
 export function ClusterLogout({
   clusterUri,
   onClose,
   clusterTitle,
-}: ClusterLogoutProps) {
+  hidden,
+}: {
+  clusterTitle: string;
+  clusterUri: RootClusterUri;
+  hidden?: boolean;
+  onClose(): void;
+}) {
   const { removeCluster, status, statusText } = useClusterLogout({
     clusterUri,
   });
@@ -57,7 +57,8 @@ export function ClusterLogout({
 
   return (
     <DialogConfirmation
-      open={true}
+      open={!hidden}
+      keepInDOMAfterClose
       onClose={onClose}
       dialogCss={() => ({
         maxWidth: '400px',
diff --git a/web/packages/teleterm/src/ui/DocumentsReopen/DocumentsReopen.tsx b/web/packages/teleterm/src/ui/DocumentsReopen/DocumentsReopen.tsx
index 7e9e5d3603a57..33d17aeb959a3 100644
--- a/web/packages/teleterm/src/ui/DocumentsReopen/DocumentsReopen.tsx
+++ b/web/packages/teleterm/src/ui/DocumentsReopen/DocumentsReopen.tsx
@@ -31,14 +31,13 @@ import { P } from 'design/Text/Text';
 import { RootClusterUri, routing } from 'teleterm/ui/uri';
 import { useAppContext } from 'teleterm/ui/appContextProvider';
 
-interface DocumentsReopenProps {
+export function DocumentsReopen(props: {
   rootClusterUri: RootClusterUri;
   numberOfDocuments: number;
   onCancel(): void;
   onConfirm(): void;
-}
-
-export function DocumentsReopen(props: DocumentsReopenProps) {
+  hidden?: boolean;
+}) {
   const { rootClusterUri } = props;
   const { clustersService } = useAppContext();
   // TODO(ravicious): Use a profile name here from the URI and remove the dependency on
@@ -49,7 +48,8 @@ export function DocumentsReopen(props: DocumentsReopenProps) {
 
   return (
     <DialogConfirmation
-      open={true}
+      open={!history}
+      keepInDOMAfterClose
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '400px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.test.tsx b/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.test.tsx
index 2f97b49c0f282..c75b73a6097f5 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.test.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.test.tsx
@@ -77,8 +77,12 @@ jest.mock('teleterm/ui/ModalsHost/modals/HardwareKeys/Touch', () => ({
 }));
 
 jest.mock('teleterm/ui/DocumentsReopen', () => ({
-  DocumentsReopen: () => (
-    <div data-testid="mocked-dialog" data-dialog-kind="documents-reopen" />
+  DocumentsReopen: props => (
+    <div
+      data-testid="mocked-dialog"
+      data-dialog-kind="documents-reopen"
+      data-dialog-is-hidden={props.hidden}
+    />
   ),
 }));
 
@@ -107,7 +111,9 @@ test('the important dialog is rendered above the regular dialog', () => {
   // The important dialog should be after the regular dialog in the DOM so that it's shown over the
   // regular dialog.
   expect(dialogs[0]).toHaveAttribute('data-dialog-kind', regularDialog.kind);
+  expect(dialogs[0]).toHaveAttribute('data-dialog-is-hidden', 'true');
   expect(dialogs[1]).toHaveAttribute('data-dialog-kind', importantDialog.kind);
+  expect(dialogs[1]).toHaveAttribute('data-dialog-is-hidden', 'false');
 });
 
 test('the second important dialog is rendered above the first important dialog', () => {
diff --git a/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx b/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx
index 78b609c30871c..264c4228db463 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx
@@ -22,7 +22,7 @@ import { useAppContext } from 'teleterm/ui/appContextProvider';
 
 import { ClusterConnect } from 'teleterm/ui/ClusterConnect';
 import { DocumentsReopen } from 'teleterm/ui/DocumentsReopen';
-import { RegularDialog, ImportantDialog } from 'teleterm/ui/services/modals';
+import { Dialog } from 'teleterm/ui/services/modals';
 import { HeadlessAuthentication } from 'teleterm/ui/HeadlessAuthn';
 
 import { ClusterLogout } from '../ClusterLogout';
@@ -45,15 +45,16 @@ export default function ModalsHost() {
 
   return (
     <>
-      {renderRegularDialog({
+      {renderDialog({
         dialog: regularDialog,
         handleClose: closeRegularDialog,
+        hidden: !!importantDialogs.length,
       })}
       {importantDialogs.map((dialog, index) => {
         const isLast = index === importantDialogs.length - 1;
         return (
           <Fragment key={dialog.kind}>
-            {renderImportantDialog({
+            {renderDialog({
               dialog: dialog,
               handleClose: () => modalsService.closeImportantDialog(dialog),
               hidden: !isLast,
@@ -65,21 +66,45 @@ export default function ModalsHost() {
   );
 }
 
-function renderRegularDialog({
+/**
+ * Renders a dialog.
+ * Each dialog must implement a `hidden` prop which visually hides the dialog
+ * without unmounting it.
+ * This is needed because tshd may want to display more than one dialog.
+ * Also, we hide a regular dialog, when an important one is visible.
+ */
+function renderDialog({
   dialog,
   handleClose,
+  hidden,
 }: {
-  dialog: RegularDialog;
+  dialog: Dialog;
   handleClose: () => void;
+  hidden: boolean;
 }) {
   if (!dialog) {
     return null;
   }
 
   switch (dialog.kind) {
+    case 'device-trust-authorize': {
+      return (
+        <AuthenticateWebDevice
+          hidden={hidden}
+          rootClusterUri={dialog.rootClusterUri}
+          onAuthorize={dialog.onAuthorize}
+          onCancel={() => {
+            handleClose();
+            dialog.onCancel();
+          }}
+          onClose={handleClose}
+        />
+      );
+    }
     case 'cluster-connect': {
       return (
         <ClusterConnect
+          hidden={hidden}
           dialog={{
             ...dialog,
             onCancel: () => {
@@ -94,22 +119,10 @@ function renderRegularDialog({
         />
       );
     }
-    case 'device-trust-authorize': {
-      return (
-        <AuthenticateWebDevice
-          rootClusterUri={dialog.rootClusterUri}
-          onAuthorize={dialog.onAuthorize}
-          onCancel={() => {
-            handleClose();
-            dialog.onCancel();
-          }}
-          onClose={handleClose}
-        />
-      );
-    }
     case 'cluster-logout': {
       return (
         <ClusterLogout
+          hidden={hidden}
           clusterUri={dialog.clusterUri}
           clusterTitle={dialog.clusterTitle}
           onClose={handleClose}
@@ -119,6 +132,7 @@ function renderRegularDialog({
     case 'documents-reopen': {
       return (
         <DocumentsReopen
+          hidden={hidden}
           rootClusterUri={dialog.rootClusterUri}
           numberOfDocuments={dialog.numberOfDocuments}
           onCancel={() => {
@@ -135,6 +149,7 @@ function renderRegularDialog({
     case 'usage-data': {
       return (
         <UsageData
+          hidden={hidden}
           onCancel={() => {
             handleClose();
             dialog.onCancel();
@@ -153,6 +168,7 @@ function renderRegularDialog({
     case 'user-job-role': {
       return (
         <UserJobRole
+          hidden={hidden}
           onCancel={() => {
             handleClose();
             dialog.onCancel();
@@ -167,6 +183,7 @@ function renderRegularDialog({
     case 'resource-search-errors': {
       return (
         <ResourceSearchErrors
+          hidden={hidden}
           errors={dialog.errors}
           getClusterName={dialog.getClusterName}
           onCancel={() => {
@@ -176,62 +193,6 @@ function renderRegularDialog({
         />
       );
     }
-    case 'change-access-request-kind': {
-      return (
-        <ChangeAccessRequestKind
-          onConfirm={() => {
-            handleClose();
-            dialog.onConfirm();
-          }}
-          onCancel={() => {
-            handleClose();
-            dialog.onCancel();
-          }}
-        />
-      );
-    }
-
-    default: {
-      return assertUnreachable(dialog);
-    }
-  }
-}
-
-/**
- * Renders an important dialog.
- * Each dialog must implement a `hidden` prop which visually hides the dialog
- * without unmounting it.
- * This is needed because tshd can send more than one event,
- * and we need to queue dialogs on the Electron side.
- */
-function renderImportantDialog({
-  dialog,
-  handleClose,
-  hidden,
-}: {
-  dialog: ImportantDialog;
-  handleClose: () => void;
-  hidden: boolean;
-}) {
-  switch (dialog.kind) {
-    case 'cluster-connect': {
-      return (
-        <ClusterConnect
-          hidden={hidden}
-          dialog={{
-            ...dialog,
-            onCancel: () => {
-              handleClose();
-              dialog.onCancel?.();
-            },
-            onSuccess: clusterUri => {
-              handleClose();
-              dialog.onSuccess(clusterUri);
-            },
-          }}
-        />
-      );
-    }
     case 'headless-authn': {
       return (
         <HeadlessAuthentication
@@ -269,6 +230,21 @@ function renderImportantDialog({
         />
       );
     }
+    case 'change-access-request-kind': {
+      return (
+        <ChangeAccessRequestKind
+          hidden={hidden}
+          onConfirm={() => {
+            handleClose();
+            dialog.onConfirm();
+          }}
+          onCancel={() => {
+            handleClose();
+            dialog.onCancel();
+          }}
+        />
+      );
+    }
     case 'hardware-key-pin': {
       return (
         <AskPin
@@ -323,6 +299,7 @@ function renderImportantDialog({
         />
       );
     }
+
     default: {
       return assertUnreachable(dialog);
     }
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/AuthenticateWebDevice/AuthenticateWebDevice.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/AuthenticateWebDevice/AuthenticateWebDevice.tsx
index 376c8ef7803b7..5c97b8d3ddad5 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/AuthenticateWebDevice/AuthenticateWebDevice.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/AuthenticateWebDevice/AuthenticateWebDevice.tsx
@@ -25,19 +25,19 @@ import { useAsync } from 'shared/hooks/useAsync';
 import { useAppContext } from 'teleterm/ui/appContextProvider';
 import { RootClusterUri, routing } from 'teleterm/ui/uri';
 
-type Props = {
-  rootClusterUri: RootClusterUri;
-  onCancel(): void;
-  onClose(): void;
-  onAuthorize(): Promise<void>;
-};
-
 export const AuthenticateWebDevice = ({
+  hidden,
   onAuthorize,
   onClose,
   onCancel,
   rootClusterUri,
-}: Props) => {
+}: {
+  rootClusterUri: RootClusterUri;
+  onCancel(): void;
+  onClose(): void;
+  onAuthorize(): Promise<void>;
+  hidden?: boolean;
+}) => {
   const [attempt, run] = useAsync(async () => {
     await onAuthorize();
     onClose();
@@ -48,7 +48,7 @@ export const AuthenticateWebDevice = ({
     routing.parseClusterName(rootClusterUri);
 
   return (
-    <Dialog open={true}>
+    <Dialog open={!hidden} keepInDOMAfterClose>
       {/* 400px was used as a way to do our best to get clusterName as the first item on the second line */}
       <DialogContent maxWidth="400px">
         <Text>
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/ChangeAccessRequestKind/ChangeAccessRequestKind.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/ChangeAccessRequestKind/ChangeAccessRequestKind.tsx
index 620e9b5a473c0..d899c1030a843 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/ChangeAccessRequestKind/ChangeAccessRequestKind.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/ChangeAccessRequestKind/ChangeAccessRequestKind.tsx
@@ -28,13 +28,16 @@ import { P } from 'design/Text/Text';
 export function ChangeAccessRequestKind({
   onCancel,
   onConfirm,
+  hidden,
 }: {
   onCancel(): void;
   onConfirm(): void;
+  hidden?: boolean;
 }) {
   return (
     <DialogConfirmation
-      open={true}
+      open={!hidden}
+      keepInDOMAfterClose
       onClose={onCancel}
       dialogCss={() => ({
         maxWidth: '400px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/UsageData/UsageData.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/UsageData/UsageData.tsx
index 901dd39188fc7..ce5cbaa07d0e2 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/UsageData/UsageData.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/UsageData/UsageData.tsx
@@ -26,18 +26,16 @@ import { ButtonIcon, ButtonPrimary, ButtonSecondary, H2, Link } from 'design';
 import { Cross } from 'design/Icon';
 import { P } from 'design/Text/Text';
 
-interface UsageDataProps {
+export function UsageData(props: {
   onCancel(): void;
-
   onAllow(): void;
-
   onDecline(): void;
-}
-
-export function UsageData(props: UsageDataProps) {
+  hidden?: boolean;
+}) {
   return (
     <DialogConfirmation
-      open={true}
+      open={!props.hidden}
+      keepInDOMAfterClose
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '400px',
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/UserJobRole/UserJobRole.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/UserJobRole/UserJobRole.tsx
index c82e143a4aad4..7cab9bcb87608 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/UserJobRole/UserJobRole.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/UserJobRole/UserJobRole.tsx
@@ -27,12 +27,6 @@ import DialogConfirmation, {
 import { Cross } from 'design/Icon';
 import { RadioGroup } from 'design/RadioGroup';
 
-interface UserJobRoleProps {
-  onCancel(): void;
-
-  onSend(jobRole: string): void;
-}
-
 const JOB_OPTIONS = [
   'Software Engineer',
   'Support Engineer',
@@ -43,7 +37,11 @@ const JOB_OPTIONS = [
 
 const OTHER_JOB_ROLE = 'Other';
 
-export function UserJobRole(props: UserJobRoleProps) {
+export function UserJobRole(props: {
+  onCancel(): void;
+  onSend(jobRole: string): void;
+  hidden?: boolean;
+}) {
   const inputRef = useRef<HTMLInputElement>();
   const [jobRole, setJobRole] = useState<string | null>(null);
   const [otherJobRole, setOtherJobRole] = useState('');
@@ -67,7 +65,8 @@ export function UserJobRole(props: UserJobRoleProps) {
 
   return (
     <DialogConfirmation
-      open={true}
+      open={!props.hidden}
+      keepInDOMAfterClose
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '400px',
diff --git a/web/packages/teleterm/src/ui/Search/ResourceSearchErrors.tsx b/web/packages/teleterm/src/ui/Search/ResourceSearchErrors.tsx
index 66513230acb15..e4790782e40f6 100644
--- a/web/packages/teleterm/src/ui/Search/ResourceSearchErrors.tsx
+++ b/web/packages/teleterm/src/ui/Search/ResourceSearchErrors.tsx
@@ -33,6 +33,7 @@ export function ResourceSearchErrors(props: {
   errors: ResourceSearchError[];
   getClusterName: (resourceUri: uri.ClusterOrResourceUri) => string;
   onCancel: () => void;
+  hidden?: boolean;
 }) {
   const formattedErrorText = props.errors
     .map(error => error.messageAndCauseWithClusterName(props.getClusterName))
@@ -40,7 +41,8 @@ export function ResourceSearchErrors(props: {
 
   return (
     <DialogConfirmation
-      open={true}
+      open={!props.hidden}
+      keepInDOMAfterClose
       onClose={props.onCancel}
       dialogCss={() => ({
         maxWidth: '800px',
diff --git a/web/packages/teleterm/src/ui/services/modals/modalsService.ts b/web/packages/teleterm/src/ui/services/modals/modalsService.ts
index dbe464492f5a7..e3991e3cd7a16 100644
--- a/web/packages/teleterm/src/ui/services/modals/modalsService.ts
+++ b/web/packages/teleterm/src/ui/services/modals/modalsService.ts
@@ -39,8 +39,8 @@ type State = {
   // The important dialogs are displayed above the regular one. This is to avoid losing the state of
   // the regular modal if we happen to need to interrupt whatever the user is doing and display an
   // important modal.
-  important: ImportantDialog[];
-  regular: RegularDialog | undefined;
+  important: Dialog[];
+  regular: Dialog | undefined;
 };
 
 export class ModalsService extends ImmutableStore<State> {
@@ -61,7 +61,7 @@ export class ModalsService extends ImmutableStore<State> {
    * The returned closeDialog function can be used to close the dialog and automatically call the
    * dialog's onCancel callback (if present).
    */
-  openRegularDialog(dialog: RegularDialog): { closeDialog: () => void } {
+  openRegularDialog(dialog: Dialog): { closeDialog: () => void } {
     this.state.regular?.['onCancel']?.();
     this.setState(draftState => {
       draftState.regular = dialog;
@@ -92,7 +92,7 @@ export class ModalsService extends ImmutableStore<State> {
    * The returned closeDialog function can be used to close the dialog and automatically call the
    * dialog's onCancel callback (if present).
    */
-  openImportantDialog(dialog: ImportantDialog): { closeDialog: () => void } {
+  openImportantDialog(dialog: Dialog): { closeDialog: () => void } {
     this.setState(draftState => {
       draftState.important.push(dialog);
     });
@@ -111,7 +111,7 @@ export class ModalsService extends ImmutableStore<State> {
     });
   }
 
-  closeImportantDialog(dialog: ImportantDialog) {
+  closeImportantDialog(dialog: Dialog) {
     const index = this.state.important.indexOf(dialog);
     if (index >= 0) {
       this.setState(draftState => {
@@ -246,7 +246,7 @@ export interface DialogHardwareKeySlotOverwrite {
   onCancel(): void;
 }
 
-export type RegularDialog =
+export type Dialog =
   | DialogClusterConnect
   | DialogClusterLogout
   | DialogDocumentsReopen
@@ -254,12 +254,9 @@ export type RegularDialog =
   | DialogUsageData
   | DialogUserJobRole
   | DialogResourceSearchErrors
-  | DialogChangeAccessRequestKind;
-
-export type ImportantDialog =
-  | DialogClusterConnect
   | DialogHeadlessAuthentication
   | DialogReAuthenticate
+  | DialogChangeAccessRequestKind
   | DialogHardwareKeyPin
   | DialogHardwareKeyTouch
   | DialogHardwareKeyPinChange

From 8c99075a8f002d290c28146adb416b2525bd3772 Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Wed, 13 Nov 2024 20:29:43 +0100
Subject: [PATCH 11/14] Use random id as a modal key

---
 .../src/ui/ModalsHost/ModalsHost.test.tsx     |  5 +++--
 .../teleterm/src/ui/ModalsHost/ModalsHost.tsx |  6 ++---
 .../src/ui/services/modals/modalsService.ts   | 22 ++++++++++---------
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.test.tsx b/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.test.tsx
index c75b73a6097f5..de5743e01dac0 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.test.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.test.tsx
@@ -122,7 +122,8 @@ test('the second important dialog is rendered above the first important dialog',
 
   const modalsService = new ModalsService();
   modalsService.openImportantDialog(importantDialog1);
-  modalsService.openImportantDialog(importantDialog2);
+  const { closeDialog: closeImportantDialog2 } =
+    modalsService.openImportantDialog(importantDialog2);
 
   const appContext = new MockAppContext();
   appContext.modalsService = modalsService;
@@ -146,7 +147,7 @@ test('the second important dialog is rendered above the first important dialog',
   expect(dialogs[1]).toHaveAttribute('data-dialog-kind', importantDialog2.kind);
   expect(dialogs[1]).toHaveAttribute('data-dialog-is-hidden', 'false');
 
-  act(() => modalsService.closeImportantDialog(importantDialog2));
+  act(() => closeImportantDialog2());
 
   dialogs = screen.queryAllByTestId('mocked-dialog');
 
diff --git a/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx b/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx
index 264c4228db463..3ccb6f6c164ad 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/ModalsHost.tsx
@@ -50,13 +50,13 @@ export default function ModalsHost() {
         handleClose: closeRegularDialog,
         hidden: !!importantDialogs.length,
       })}
-      {importantDialogs.map((dialog, index) => {
+      {importantDialogs.map(({ dialog, id }, index) => {
         const isLast = index === importantDialogs.length - 1;
         return (
-          <Fragment key={dialog.kind}>
+          <Fragment key={id}>
             {renderDialog({
               dialog: dialog,
-              handleClose: () => modalsService.closeImportantDialog(dialog),
+              handleClose: () => modalsService.closeImportantDialog(id),
               hidden: !isLast,
             })}
           </Fragment>
diff --git a/web/packages/teleterm/src/ui/services/modals/modalsService.ts b/web/packages/teleterm/src/ui/services/modals/modalsService.ts
index e3991e3cd7a16..e02035a7426ec 100644
--- a/web/packages/teleterm/src/ui/services/modals/modalsService.ts
+++ b/web/packages/teleterm/src/ui/services/modals/modalsService.ts
@@ -39,7 +39,7 @@ type State = {
   // The important dialogs are displayed above the regular one. This is to avoid losing the state of
   // the regular modal if we happen to need to interrupt whatever the user is doing and display an
   // important modal.
-  important: Dialog[];
+  important: { dialog: Dialog; id: string }[];
   regular: Dialog | undefined;
 };
 
@@ -92,14 +92,16 @@ export class ModalsService extends ImmutableStore<State> {
    * The returned closeDialog function can be used to close the dialog and automatically call the
    * dialog's onCancel callback (if present).
    */
-  openImportantDialog(dialog: Dialog): { closeDialog: () => void } {
+  openImportantDialog(dialog: Dialog): { closeDialog: () => void; id: string } {
+    const id = crypto.randomUUID();
     this.setState(draftState => {
-      draftState.important.push(dialog);
+      draftState.important.push({ dialog, id });
     });
 
     return {
+      id,
       closeDialog: () => {
-        this.closeImportantDialog(dialog);
+        this.closeImportantDialog(id);
         dialog['onCancel']?.();
       },
     };
@@ -111,13 +113,13 @@ export class ModalsService extends ImmutableStore<State> {
     });
   }
 
-  closeImportantDialog(dialog: Dialog) {
-    const index = this.state.important.indexOf(dialog);
-    if (index >= 0) {
-      this.setState(draftState => {
+  closeImportantDialog(id: string) {
+    this.setState(draftState => {
+      const index = draftState.important.findIndex(d => d.id === id);
+      if (index >= 0) {
         draftState.important.splice(index, 1);
-      });
-    }
+      }
+    });
   }
 
   useState() {

From f25141bf422c642d78e98b168e96d0fb932c9259 Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Wed, 13 Nov 2024 20:39:04 +0100
Subject: [PATCH 12/14] Improve `singleImportantModalSemaphore` comment

---
 lib/teleterm/daemon/daemon.go | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/lib/teleterm/daemon/daemon.go b/lib/teleterm/daemon/daemon.go
index 0107df5a56771..d78a8b17afa59 100644
--- a/lib/teleterm/daemon/daemon.go
+++ b/lib/teleterm/daemon/daemon.go
@@ -1192,8 +1192,14 @@ type Service struct {
 	// tshdEventsClient is a client to send events to the Electron App.
 	tshdEventsClient api.TshdEventsServiceClient
 	// The Electron App can display multiple important modals by showing the latest one and hiding the others.
-	// However, we should use this feature only when necessary (for example, for hardware key prompts
-	// while relogin is in progress). In any other case, we should open one modal at a time.
+	// However, we should use this feature only when necessary (as of now, we use it to show hardware key prompts
+	// when relogin is in progress). In any other case, we should open one modal at a time.
+	// The special thing about hardware key prompts is that it's the only case where we need to complete
+	// an action started in one modal in another modal.
+	//
+	// This semaphore also prevents concurrent MFA prompts when using VNet with per-session MFA.
+	// Issuing an MFA prompt starts the Webauthn goroutine which prompts for key touch on hardware level.
+	// Webauthn does not support concurrent prompts, so without this semaphore, one of the prompts would fail immediately.
 	//
 	// We use a semaphore instead of a mutex in order to cancel important modals that
 	// are no longer relevant before acquisition.

From d4ec48a0e89acec7ca14cdf1c798a85a7cee47fc Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Wed, 13 Nov 2024 20:46:59 +0100
Subject: [PATCH 13/14] Improve `NewHardwareKeyPromptConstructor` comment

---
 lib/teleterm/daemon/hardwarekeyprompt.go | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/lib/teleterm/daemon/hardwarekeyprompt.go b/lib/teleterm/daemon/hardwarekeyprompt.go
index 2d9b26388e330..ad7d787356f54 100644
--- a/lib/teleterm/daemon/hardwarekeyprompt.go
+++ b/lib/teleterm/daemon/hardwarekeyprompt.go
@@ -30,6 +30,9 @@ import (
 
 // NewHardwareKeyPromptConstructor returns a new hardware key prompt constructor
 // for this service and the given root cluster URI.
+// Unlike other modals triggered by tshd events, we do not acquire the singleImportantModalSemaphore here.
+// This allows these prompts to show up while a relogin modal is still opened.
+//
 // TODO(gzdunek): Improve multi-cluster and multi-hardware keys support.
 // The code in yubikey.go doesn't really support using multiple hardware keys (like one per cluster):
 // 1. We don't offer a choice which key should be used on the initial login.
@@ -42,8 +45,8 @@ import (
 // It seems that the better option would be to have a prompt per physical key, not per cluster.
 // But I will leave that for the future, it's hard to say how common these scenarios will be in Connect.
 //
-// Because of the above, we don't have any mutex here. I don't expect receiving prompts
-// from different hardware keys at the same time.
+// Because the code in yubikey.go assumes you use a single key, we don't have any mutex here.
+// We don't expect receiving prompts from different hardware keys.
 func (s *Service) NewHardwareKeyPromptConstructor(rootClusterURI uri.ResourceURI) keys.HardwareKeyPrompt {
 	return &hardwareKeyPrompter{s: s, rootClusterURI: rootClusterURI}
 }

From 379f5b3d5441245faa2ddd82ba9bc571d175e2b1 Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Thu, 14 Nov 2024 17:27:00 +0100
Subject: [PATCH 14/14] Do not acquire important modal semaphore in MFA prompt
 and relogin, give each prompt its own mutex/semaphore

---
 lib/teleterm/daemon/daemon.go            | 41 +++++++++++-----------
 lib/teleterm/daemon/daemon_headless.go   |  4 +--
 lib/teleterm/daemon/daemon_test.go       | 43 ++++++++++++------------
 lib/teleterm/daemon/hardwarekeyprompt.go |  3 +-
 lib/teleterm/daemon/mfaprompt.go         |  6 ++--
 5 files changed, 47 insertions(+), 50 deletions(-)

diff --git a/lib/teleterm/daemon/daemon.go b/lib/teleterm/daemon/daemon.go
index d78a8b17afa59..f0b44f7bcb14c 100644
--- a/lib/teleterm/daemon/daemon.go
+++ b/lib/teleterm/daemon/daemon.go
@@ -114,11 +114,6 @@ func (s *Service) relogin(ctx context.Context, req *api.ReloginRequest) error {
 	}
 	defer s.reloginMu.Unlock()
 
-	if err := s.singleImportantModalSemaphore.Acquire(ctx); err != nil {
-		return trace.Wrap(err)
-	}
-	defer s.singleImportantModalSemaphore.Release()
-
 	const reloginUserTimeout = time.Minute
 	timeoutCtx, cancelTshdEventsCtx := context.WithTimeout(ctx, reloginUserTimeout)
 	defer cancelTshdEventsCtx()
@@ -892,7 +887,7 @@ func (s *Service) UpdateAndDialTshdEventsServerAddress(serverAddress string) err
 	client := api.NewTshdEventsServiceClient(conn)
 
 	s.tshdEventsClient = client
-	s.singleImportantModalSemaphore = newWaitSemaphore(maxConcurrentImportantModals, imporantModalWaitDuraiton)
+	s.headlessAuthSemaphore = newWaitSemaphore(maxConcurrentImportantModals, imporantModalWaitDuraiton)
 
 	return nil
 }
@@ -1191,26 +1186,32 @@ type Service struct {
 	gateways map[string]gateway.Gateway
 	// tshdEventsClient is a client to send events to the Electron App.
 	tshdEventsClient api.TshdEventsServiceClient
+
 	// The Electron App can display multiple important modals by showing the latest one and hiding the others.
-	// However, we should use this feature only when necessary (as of now, we use it to show hardware key prompts
-	// when relogin is in progress). In any other case, we should open one modal at a time.
-	// The special thing about hardware key prompts is that it's the only case where we need to complete
-	// an action started in one modal in another modal.
+	// However, we should be careful with it, and generally try to limit the number of prompts on the tshd side,
+	// to avoid flooding the app.
+	// Multiple prompts of the same type may also conflict with each other. This is currently possible with
+	// MFA prompts (see the mfaMu comment for details).
+	// Generally, only one prompt of each type (e.g., re-login, MFA) should be allowed at the same time.
 	//
-	// This semaphore also prevents concurrent MFA prompts when using VNet with per-session MFA.
+	// But why do we allow multiple important modals at all? It is necessary in specific scenarios where one
+	// modal action requires completing in another. Currently, there are two cases:
+	// 1. A hardware key prompt may appear during a re-login process.
+	// 2. An MFA prompt may appear during a re-login process.
+
+	// We use a waitSemaphore to make sure there is a clear transition between modals.
+	// We allow a single headless auth prompt at a time.
+	headlessAuthSemaphore *waitSemaphore
+	// mfaMu prevents concurrent MFA prompts. These can happen when using VNet with per-session MFA.
 	// Issuing an MFA prompt starts the Webauthn goroutine which prompts for key touch on hardware level.
 	// Webauthn does not support concurrent prompts, so without this semaphore, one of the prompts would fail immediately.
-	//
-	// We use a semaphore instead of a mutex in order to cancel important modals that
-	// are no longer relevant before acquisition.
-	//
-	// We use a waitSemaphore in order to make sure there is a clear transition between modals.
-	singleImportantModalSemaphore *waitSemaphore
+	mfaMu sync.Mutex
+	// reloginMu is used when a goroutine needs to request a relogin from the Electron app.
+	// We allow a single relogin prompt at a time.
+	reloginMu sync.Mutex
+
 	// usageReporter batches the events and sends them to prehog
 	usageReporter *usagereporter.UsageReporter
-	// reloginMu is used when a goroutine needs to request a relogin from the Electron app. Since the
-	// app can show only one login modal at a time, we need to submit only one request at a time.
-	reloginMu sync.Mutex
 	// headlessWatcherClosers holds a map of root cluster URIs to headless watchers.
 	headlessWatcherClosers   map[string]context.CancelFunc
 	headlessWatcherClosersMu sync.Mutex
diff --git a/lib/teleterm/daemon/daemon_headless.go b/lib/teleterm/daemon/daemon_headless.go
index d8ecd44c45b6c..2662791ca17bb 100644
--- a/lib/teleterm/daemon/daemon_headless.go
+++ b/lib/teleterm/daemon/daemon_headless.go
@@ -272,10 +272,10 @@ func (s *Service) sendPendingHeadlessAuthentication(ctx context.Context, ha *typ
 		HeadlessAuthenticationClientIp: ha.ClientIpAddress,
 	}
 
-	if err := s.singleImportantModalSemaphore.Acquire(ctx); err != nil {
+	if err := s.headlessAuthSemaphore.Acquire(ctx); err != nil {
 		return trace.Wrap(err)
 	}
-	defer s.singleImportantModalSemaphore.Release()
+	defer s.headlessAuthSemaphore.Release()
 
 	_, err := s.tshdEventsClient.SendPendingHeadlessAuthentication(ctx, req)
 	return trace.Wrap(err)
diff --git a/lib/teleterm/daemon/daemon_test.go b/lib/teleterm/daemon/daemon_test.go
index a5722ae3051d9..9c46057f7ac30 100644
--- a/lib/teleterm/daemon/daemon_test.go
+++ b/lib/teleterm/daemon/daemon_test.go
@@ -489,7 +489,7 @@ func TestRetryWithRelogin(t *testing.T) {
 	}
 }
 
-func TestImportantModalSemaphore(t *testing.T) {
+func TestConcurrentHeadlessAuthPrompts(t *testing.T) {
 	t.Parallel()
 	ctx := context.Background()
 
@@ -522,54 +522,54 @@ func TestImportantModalSemaphore(t *testing.T) {
 	// Claim the important modal semaphore.
 
 	customWaitDuration := 10 * time.Millisecond
-	daemon.singleImportantModalSemaphore.waitDuration = customWaitDuration
-	err = daemon.singleImportantModalSemaphore.Acquire(ctx)
+	daemon.headlessAuthSemaphore.waitDuration = customWaitDuration
+	err = daemon.headlessAuthSemaphore.Acquire(ctx)
 	require.NoError(t, err)
 
-	// relogin and sending pending headless authentications should be blocked.
+	// Pending headless authentications should be blocked.
 
-	reloginErrC := make(chan error)
+	headlessPromptErr1 := make(chan error)
 	go func() {
-		reloginErrC <- daemon.relogin(ctx, &api.ReloginRequest{})
+		headlessPromptErr1 <- daemon.sendPendingHeadlessAuthentication(ctx, &types.HeadlessAuthentication{}, "")
 	}()
 
-	sphaErrC := make(chan error)
+	headlessPromptErr2 := make(chan error)
 	go func() {
-		sphaErrC <- daemon.sendPendingHeadlessAuthentication(ctx, &types.HeadlessAuthentication{}, "")
+		headlessPromptErr2 <- daemon.sendPendingHeadlessAuthentication(ctx, &types.HeadlessAuthentication{}, "")
 	}()
 
 	select {
-	case <-reloginErrC:
-		t.Error("relogin completed successfully without acquiring the important modal semaphore")
-	case <-sphaErrC:
-		t.Error("sendPendingHeadlessAuthentication completed successfully without acquiring the important modal semaphore")
+	case <-headlessPromptErr1:
+		t.Error("sendPendingHeadlessAuthentication for the first prompt completed successfully without acquiring the semaphore")
+	case <-headlessPromptErr2:
+		t.Error("sendPendingHeadlessAuthentication for the second prompt completed successfully without acquiring the semaphore")
 	case <-time.After(100 * time.Millisecond):
 	}
 
-	// if the request's ctx is canceled, they will unblock and return an error instead.
+	// If the request's ctx is canceled, they will unblock and return an error instead.
 
 	cancelCtx, cancel := context.WithCancel(ctx)
 	cancel()
 
-	err = daemon.relogin(cancelCtx, &api.ReloginRequest{})
+	err = daemon.sendPendingHeadlessAuthentication(cancelCtx, &types.HeadlessAuthentication{}, "")
 	require.Error(t, err)
 	err = daemon.sendPendingHeadlessAuthentication(cancelCtx, &types.HeadlessAuthentication{}, "")
 	require.Error(t, err)
 
-	// Release the semaphore. relogin and sending pending headless authentication should
+	// Release the semaphore. Pending headless authentication should
 	// complete successfully after a short delay between each semaphore release.
 
 	releaseTime := time.Now()
-	daemon.singleImportantModalSemaphore.Release()
+	daemon.headlessAuthSemaphore.Release()
 
 	var otherC chan error
 	select {
-	case err := <-reloginErrC:
+	case err := <-headlessPromptErr1:
 		require.NoError(t, err)
-		otherC = sphaErrC
-	case err := <-sphaErrC:
+		otherC = headlessPromptErr2
+	case err := <-headlessPromptErr2:
 		require.NoError(t, err)
-		otherC = reloginErrC
+		otherC = headlessPromptErr1
 	case <-time.After(time.Second):
 		t.Error("important modal operations failed to acquire unclaimed semaphore")
 	}
@@ -589,8 +589,7 @@ func TestImportantModalSemaphore(t *testing.T) {
 		t.Error("important modal semaphore should not be acquired before waiting the specified duration")
 	}
 
-	require.EqualValues(t, 1, service.reloginCount.Load(), "Unexpected number of calls to service.Relogin")
-	require.EqualValues(t, 1, service.sendPendingHeadlessAuthenticationCount.Load(), "Unexpected number of calls to service.SendPendingHeadlessAuthentication")
+	require.EqualValues(t, 2, service.sendPendingHeadlessAuthenticationCount.Load(), "Unexpected number of calls to service.SendPendingHeadlessAuthentication")
 }
 
 type mockTSHDEventsService struct {
diff --git a/lib/teleterm/daemon/hardwarekeyprompt.go b/lib/teleterm/daemon/hardwarekeyprompt.go
index ad7d787356f54..ad75ccf6f699b 100644
--- a/lib/teleterm/daemon/hardwarekeyprompt.go
+++ b/lib/teleterm/daemon/hardwarekeyprompt.go
@@ -30,8 +30,6 @@ import (
 
 // NewHardwareKeyPromptConstructor returns a new hardware key prompt constructor
 // for this service and the given root cluster URI.
-// Unlike other modals triggered by tshd events, we do not acquire the singleImportantModalSemaphore here.
-// This allows these prompts to show up while a relogin modal is still opened.
 //
 // TODO(gzdunek): Improve multi-cluster and multi-hardware keys support.
 // The code in yubikey.go doesn't really support using multiple hardware keys (like one per cluster):
@@ -46,6 +44,7 @@ import (
 // But I will leave that for the future, it's hard to say how common these scenarios will be in Connect.
 //
 // Because the code in yubikey.go assumes you use a single key, we don't have any mutex here.
+// (unlike other modals triggered by tshd).
 // We don't expect receiving prompts from different hardware keys.
 func (s *Service) NewHardwareKeyPromptConstructor(rootClusterURI uri.ResourceURI) keys.HardwareKeyPrompt {
 	return &hardwareKeyPrompter{s: s, rootClusterURI: rootClusterURI}
diff --git a/lib/teleterm/daemon/mfaprompt.go b/lib/teleterm/daemon/mfaprompt.go
index 3b6b01f18f8e8..adeda73e1518b 100644
--- a/lib/teleterm/daemon/mfaprompt.go
+++ b/lib/teleterm/daemon/mfaprompt.go
@@ -63,10 +63,8 @@ func (s *Service) NewMFAPrompt(resourceURI uri.ResourceURI, cfg *libmfa.PromptCo
 }
 
 func (s *Service) promptAppMFA(ctx context.Context, in *api.PromptMFARequest) (*api.PromptMFAResponse, error) {
-	if err := s.singleImportantModalSemaphore.Acquire(ctx); err != nil {
-		return nil, trace.Wrap(err)
-	}
-	defer s.singleImportantModalSemaphore.Release()
+	s.mfaMu.Lock()
+	defer s.mfaMu.Unlock()
 
 	return s.tshdEventsClient.PromptMFA(ctx, in)
 }