Clean up login modal in Connect after changes to MFA prompts

web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.story.tsx

@@ -16,17 +16,16 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
 import { Box } from 'design';
-import { Attempt, makeErrorAttempt } from 'shared/hooks/useAsync';
+import {
+  Attempt,
+  makeErrorAttempt,
+  makeProcessingAttempt,
+} from 'shared/hooks/useAsync';
 
 import * as types from 'teleterm/ui/services/clusters/types';
-import {
-  appUri,
-  makeDatabaseGateway,
-  makeKubeGateway,
-} from 'teleterm/services/tshd/testHelpers';
 
 import {
   ClusterLoginPresentation,
@@ -67,44 +66,11 @@ function makeProps(): ClusterLoginPresentationProps {
     onLoginWithPasswordless: () => Promise.resolve<[void, Error]>([null, null]),
     onLoginWithSso: () => null,
     clearLoginAttempt: () => null,
-    webauthnLogin: null,
+    passwordlessLoginState: null,
     reason: undefined,
   };
 }
 
-export const Err = () => {
-  const props = makeProps();
-  props.initAttempt = makeErrorAttempt(new Error('some error message'));
-
-  return (
-    <TestContainer>
-      <ClusterLoginPresentation {...props} />
-    </TestContainer>
-  );
-};
-
-export const Processing = () => {
-  const props = makeProps();
-  props.initAttempt.status = 'processing';
-
-  return (
-    <TestContainer>
-      <ClusterLoginPresentation {...props} />
-    </TestContainer>
-  );
-};
-
-export const LocalDisabled = () => {
-  const props = makeProps();
-  props.initAttempt.data.localAuthEnabled = false;
-
-  return (
-    <TestContainer>
-      <ClusterLoginPresentation {...props} />
-    </TestContainer>
-  );
-};
-
 export const LocalOnly = () => {
   const props = makeProps();
   props.initAttempt.data.allowPasswordless = false;
@@ -116,14 +82,9 @@ export const LocalOnly = () => {
   );
 };
 
-export const LocalOnlyWithReasonGatewayCertExpiredWithDbGateway = () => {
+export const InitErr = () => {
   const props = makeProps();
-  props.initAttempt.data.allowPasswordless = false;
-  props.reason = {
-    kind: 'reason.gateway-cert-expired',
-    targetUri: dbGateway.targetUri,
-    gateway: dbGateway,
-  };
+  props.initAttempt = makeErrorAttempt(new Error('some error message'));
 
   return (
     <TestContainer>
@@ -132,14 +93,9 @@ export const LocalOnlyWithReasonGatewayCertExpiredWithDbGateway = () => {
   );
 };
 
-export const LocalOnlyWithReasonGatewayCertExpiredWithKubeGateway = () => {
+export const InitProcessing = () => {
   const props = makeProps();
-  props.initAttempt.data.allowPasswordless = false;
-  props.reason = {
-    kind: 'reason.gateway-cert-expired',
-    targetUri: kubeGateway.targetUri,
-    gateway: kubeGateway,
-  };
+  props.initAttempt.status = 'processing';
 
   return (
     <TestContainer>
@@ -148,14 +104,9 @@ export const LocalOnlyWithReasonGatewayCertExpiredWithKubeGateway = () => {
   );
 };
 
-export const LocalOnlyWithReasonGatewayCertExpiredWithoutGateway = () => {
+export const LocalDisabled = () => {
   const props = makeProps();
-  props.initAttempt.data.allowPasswordless = false;
-  props.reason = {
-    kind: 'reason.gateway-cert-expired',
-    targetUri: dbGateway.targetUri,
-    gateway: undefined,
-  };
+  props.initAttempt.data.localAuthEnabled = false;
 
   return (
     <TestContainer>
@@ -164,14 +115,14 @@ export const LocalOnlyWithReasonGatewayCertExpiredWithoutGateway = () => {
   );
 };
 
-export const LocalOnlyWithReasonVnetCertExpired = () => {
+// The password field is empty in this story as there's no way to change the value of a controlled
+// input without touching the internals of React.
+// https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-change-or-input-event-in-react-js
+export const LocalProcessing = () => {
   const props = makeProps();
   props.initAttempt.data.allowPasswordless = false;
-  props.reason = {
-    kind: 'reason.vnet-cert-expired',
-    targetUri: appUri,
-    publicAddr: 'tcp-app.teleport.example.com',
-  };
+  props.loginAttempt = makeProcessingAttempt();
+  props.loggedInUserName = 'alice';
 
   return (
     <TestContainer>
@@ -277,7 +228,7 @@ export const SsoWithNoProvidersConfigured = () => {
 export const HardwareTapPrompt = () => {
   const props = makeProps();
   props.loginAttempt.status = 'processing';
-  props.webauthnLogin = {
+  props.passwordlessLoginState = {
     prompt: 'tap',
   };
   return (
@@ -290,7 +241,7 @@ export const HardwareTapPrompt = () => {
 export const HardwarePinPrompt = () => {
   const props = makeProps();
   props.loginAttempt.status = 'processing';
-  props.webauthnLogin = {
+  props.passwordlessLoginState = {
     prompt: 'pin',
   };
   return (
@@ -303,7 +254,7 @@ export const HardwarePinPrompt = () => {
 export const HardwareRetapPrompt = () => {
   const props = makeProps();
   props.loginAttempt.status = 'processing';
-  props.webauthnLogin = {
+  props.passwordlessLoginState = {
     prompt: 'retap',
   };
   return (
@@ -316,7 +267,7 @@ export const HardwareRetapPrompt = () => {
 export const HardwareCredentialPrompt = () => {
   const props = makeProps();
   props.loginAttempt.status = 'processing';
-  props.webauthnLogin = {
+  props.passwordlessLoginState = {
     prompt: 'credential',
     loginUsernames: [
       'apple',
@@ -338,7 +289,7 @@ export const HardwareCredentialPrompt = () => {
 export const HardwareCredentialPromptProcessing = () => {
   const props = makeProps();
   props.loginAttempt.status = 'processing';
-  props.webauthnLogin = {
+  props.passwordlessLoginState = {
     prompt: 'credential',
     loginUsernames: [
       'apple',
@@ -350,7 +301,7 @@ export const HardwareCredentialPromptProcessing = () => {
       'strawberry',
     ],
   };
-  props.webauthnLogin.processing = true;
+  props.passwordlessLoginState.processing = true;
   return (
     <TestContainer>
       <ClusterLoginPresentation {...props} />
@@ -368,7 +319,7 @@ export const SsoPrompt = () => {
   );
 };
 
-const TestContainer: React.FC<PropsWithChildren> = ({ children }) => (
+const TestContainer: FC<PropsWithChildren> = ({ children }) => (
   <>
     <span>Bordered box is not part of the component</span>
     <Box
@@ -382,23 +333,3 @@ const TestContainer: React.FC<PropsWithChildren> = ({ children }) => (
     </Box>
   </>
 );
-
-const dbGateway = makeDatabaseGateway({
-  uri: '/gateways/gateway1',
-  targetName: 'postgres',
-  targetUri: '/clusters/teleport-local/dbs/postgres',
-  targetUser: 'alice',
-  targetSubresourceName: '',
-  localAddress: 'localhost',
-  localPort: '59116',
-  protocol: 'postgres',
-});
-
-const kubeGateway = makeKubeGateway({
-  uri: '/gateways/gateway2',
-  targetName: 'minikube',
-  targetUri: '/clusters/teleport-local/kubes/minikube',
-  targetSubresourceName: '',
-  localAddress: 'localhost',
-  localPort: '59117',
-});

web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.tsx

@@ -53,7 +53,7 @@ export function ClusterLoginPresentation({
   onAbort,
   loggedInUserName,
   shouldPromptSsoStatus,
-  webauthnLogin,
+  passwordlessLoginState,
   reason,
 }: ClusterLoginPresentationProps) {
   return (
@@ -94,7 +94,7 @@ export function ClusterLoginPresentation({
             loginAttempt={loginAttempt}
             clearLoginAttempt={clearLoginAttempt}
             shouldPromptSsoStatus={shouldPromptSsoStatus}
-            webauthnLogin={webauthnLogin}
+            passwordlessLoginState={passwordlessLoginState}
           />
         )}
       </DialogContent>