Web-Discover: Add support for connection testers with per-session MFA enabled

web/packages/teleport/src/Discover/Database/TestConnection/TestConnection.story.tsx

@@ -63,4 +63,6 @@ const props: State = {
     hostname: 'db-hostname',
   },
   dbEngine: DatabaseEngine.MySQL,
+  showMfaDialog: false,
+  cancelMfaDialog: () => null,
 };

web/packages/teleport/src/Discover/Database/TestConnection/TestConnection.tsx

@@ -22,6 +22,7 @@ import Select, { Option } from 'shared/components/Select';
 
 import TextSelectCopy from 'teleport/components/TextSelectCopy';
 import { generateTshLoginCommand } from 'teleport/lib/util';
+import ReAuthenticate from 'teleport/components/ReAuthenticate';
 
 import {
   ActionButtons,
@@ -53,6 +54,8 @@ export function TestConnectionView({
   username,
   clusterId,
   dbEngine,
+  showMfaDialog,
+  cancelMfaDialog,
 }: State) {
   const userOpts = db.users.map(l => ({ value: l, label: l }));
   const nameOpts = db.names.map(l => ({ value: l, label: l }));
@@ -67,8 +70,21 @@ export function TestConnectionView({
     tshDbCmd += ` --db-name=${selectedName.value}`;
   }
 
+  function makeTestConnRequest() {
+    return {
+      name: selectedName?.value,
+      user: selectedUser?.value,
+    };
+  }
+
   return (
     <Box>
+      {showMfaDialog && (
+        <ReAuthenticate
+          onMfaResponse={res => testConnection(makeTestConnRequest(), res)}
+          onClose={cancelMfaDialog}
+        />
+      )}
       <HeaderWithBackBtn onPrev={prevStep}>Test Connection</HeaderWithBackBtn>
       <HeaderSubtitle>
         Optionally verify that you can successfully connect to the Database you
@@ -121,12 +137,7 @@ export function TestConnectionView({
         attempt={attempt}
         diagnosis={diagnosis}
         canTestConnection={canTestConnection}
-        testConnection={() =>
-          testConnection({
-            name: selectedName?.value,
-            user: selectedUser?.value,
-          })
-        }
+        testConnection={() => testConnection(makeTestConnRequest())}
         stepNumber={2}
         stepDescription="Verify that your database is accessible"
       />

web/packages/teleport/src/Discover/Database/TestConnection/useTestConnection.ts

@@ -20,20 +20,27 @@ import { DbMeta } from '../../useDiscover';
 
 import type { AgentStepProps } from '../../types';
 import type { Database } from '../resources';
+import type { MfaAuthnResponse } from 'teleport/services/mfa';
 
 export function useTestConnection(props: AgentStepProps) {
   const { runConnectionDiagnostic, ...connectionDiagnostic } =
-    useConnectionDiagnostic(props);
+    useConnectionDiagnostic();
 
-  function testConnection({ name, user }: { name: string; user: string }) {
-    runConnectionDiagnostic({
-      resourceKind: 'db',
-      resourceName: props.agentMeta.resourceName,
-      dbTester: {
-        name,
-        user,
+  function testConnection(
+    { name, user }: { name: string; user: string },
+    mfaResponse?: MfaAuthnResponse
+  ) {
+    runConnectionDiagnostic(
+      {
+        resourceKind: 'db',
+        resourceName: props.agentMeta.resourceName,
+        dbTester: {
+          name,
+          user,
+        },
       },
-    });
+      mfaResponse
+    );
   }
 
   const { engine } = props.resourceState as Database;

web/packages/teleport/src/Discover/Kubernetes/TestConnection/TestConnection.story.tsx

@@ -98,4 +98,6 @@ const props: State = {
   username: 'teleport-username',
   authType: 'local',
   clusterId: 'some-cluster-id',
+  showMfaDialog: false,
+  cancelMfaDialog: () => null,
 };

web/packages/teleport/src/Discover/Kubernetes/TestConnection/TestConnection.tsx

@@ -25,6 +25,7 @@ import { Option } from 'shared/components/Select';
 
 import TextSelectCopy from 'teleport/components/TextSelectCopy';
 import { generateTshLoginCommand } from 'teleport/lib/util';
+import ReAuthenticate from 'teleport/components/ReAuthenticate';
 
 import {
   ActionButtons,
@@ -36,6 +37,7 @@ import {
 import { useTestConnection, State } from './useTestConnection';
 
 import type { AgentStepProps } from '../../types';
+import type { KubeImpersonation } from 'teleport/services/agents';
 
 export default function Container(props: AgentStepProps) {
   const state = useTestConnection(props);
@@ -54,6 +56,8 @@ export function TestConnection({
   authType,
   username,
   clusterId,
+  showMfaDialog,
+  cancelMfaDialog,
 }: State) {
   const userOpts = kube.users.map(l => ({ value: l, label: l }));
   const groupOpts = kube.groups.map(l => ({ value: l, label: l }));
@@ -72,17 +76,27 @@ export function TestConnection({
       return;
     }
 
-    testConnection({
+    testConnection(makeTestConnRequest());
+  }
+
+  function makeTestConnRequest(): KubeImpersonation {
+    return {
       namespace,
       user: selectedUser?.value,
       groups: selectedGroups?.map(g => g.value),
-    });
+    };
   }
 
   return (
     <Validation>
       {({ validator }) => (
         <Box>
+          {showMfaDialog && (
+            <ReAuthenticate
+              onMfaResponse={res => testConnection(makeTestConnRequest(), res)}
+              onClose={cancelMfaDialog}
+            />
+          )}
           <HeaderWithBackBtn onPrev={prevStep}>
             Test Connection
           </HeaderWithBackBtn>

web/packages/teleport/src/Discover/Kubernetes/TestConnection/useTestConnection.ts

@@ -20,17 +20,24 @@ import { KubeMeta } from '../../useDiscover';
 
 import type { KubeImpersonation } from 'teleport/services/agents';
 import type { AgentStepProps } from '../../types';
+import type { MfaAuthnResponse } from 'teleport/services/mfa';
 
 export function useTestConnection(props: AgentStepProps) {
   const { runConnectionDiagnostic, ...connectionDiagnostic } =
-    useConnectionDiagnostic(props);
+    useConnectionDiagnostic();
 
-  function testConnection(impersonate: KubeImpersonation) {
-    runConnectionDiagnostic({
-      resourceKind: 'kube_cluster',
-      resourceName: props.agentMeta.resourceName,
-      kubeImpersonation: impersonate,
-    });
+  function testConnection(
+    impersonate: KubeImpersonation,
+    mfaResponse?: MfaAuthnResponse
+  ) {
+    runConnectionDiagnostic(
+      {
+        resourceKind: 'kube_cluster',
+        resourceName: props.agentMeta.resourceName,
+        kubeImpersonation: impersonate,
+      },
+      mfaResponse
+    );
   }
 
   return {

web/packages/teleport/src/Discover/Server/TestConnection/TestConnection.story.tsx

@@ -46,4 +46,6 @@ const props: State = {
   username: 'teleport-username',
   authType: 'local',
   clusterId: 'some-cluster-id',
+  showMfaDialog: false,
+  cancelMfaDialog: () => null,
 };

web/packages/teleport/src/Discover/Server/TestConnection/TestConnection.tsx

@@ -19,6 +19,8 @@ import styled from 'styled-components';
 import { ButtonSecondary, Text, Box, LabelInput } from 'design';
 import Select from 'shared/components/Select';
 
+import ReAuthenticate from 'teleport/components/ReAuthenticate';
+
 import {
   HeaderWithBackBtn,
   ActionButtons,
@@ -46,6 +48,8 @@ export function TestConnection({
   nextStep,
   prevStep,
   canTestConnection,
+  showMfaDialog,
+  cancelMfaDialog,
 }: State) {
   const [usernameOpts] = useState(() =>
     logins.map(l => ({ value: l, label: l }))
@@ -56,6 +60,12 @@ export function TestConnection({
 
   return (
     <Box>
+      {showMfaDialog && (
+        <ReAuthenticate
+          onMfaResponse={res => testConnection(selectedOpt.value, res)}
+          onClose={cancelMfaDialog}
+        />
+      )}
       <HeaderWithBackBtn onPrev={prevStep}>Test Connection</HeaderWithBackBtn>
       <HeaderSubtitle>
         Optionally verify that you can successfully connect to the server you

web/packages/teleport/src/Discover/Server/TestConnection/useTestConnection.ts

@@ -21,10 +21,11 @@ import { useConnectionDiagnostic } from 'teleport/Discover/Shared';
 import { NodeMeta } from '../../useDiscover';
 
 import type { AgentStepProps } from '../../types';
+import type { MfaAuthnResponse } from 'teleport/services/mfa';
 
 export function useTestConnection(props: AgentStepProps) {
   const { runConnectionDiagnostic, ...connectionDiagnostic } =
-    useConnectionDiagnostic(props);
+    useConnectionDiagnostic();
 
   function startSshSession(login: string) {
     const meta = props.agentMeta as NodeMeta;
@@ -37,12 +38,15 @@ export function useTestConnection(props: AgentStepProps) {
     openNewTab(url);
   }
 
-  function testConnection(login: string) {
-    runConnectionDiagnostic({
-      resourceKind: 'node',
-      resourceName: props.agentMeta.resourceName,
-      sshPrincipal: login,
-    });
+  function testConnection(login: string, mfaResponse?: MfaAuthnResponse) {
+    runConnectionDiagnostic(
+      {
+        resourceKind: 'node',
+        resourceName: props.agentMeta.resourceName,
+        sshPrincipal: login,
+      },
+      mfaResponse
+    );
   }
 
   return {