Allow displaying hardware keys prompts when relogin is in progress

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>
+  );
+};

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');
+});