ECOPROJECT-2318: Add link to return to Assisted Migration when credentials were accepted

apps/agent/.env.development

@@ -0,0 +1 @@
+APP_ASSISTED_MIGRATION_URL=http://localhost:3000/migrate/wizard

apps/agent/.env.production

@@ -0,0 +1 @@
+APP_ASSISTED_MIGRATION_URL=http://console.redhat.com/migration-assessment/migrate/wizard

apps/agent/src/login-form/FormStates.ts

@@ -5,4 +5,5 @@ export const enum FormStates {
   CredentialsAccepted = "credentialsAccepted",
   CredentialsRejected = "credentialsRejected",
   InvalidCredentials = "invalidCredentials",
+  GatheringInventory = "gatheringInventory"
 }

apps/agent/src/login-form/LoginForm.tsx

@@ -21,9 +21,12 @@ import {
   Spinner,
   SplitItem,
   Split,
+  Icon,
 } from "@patternfly/react-core";
 import { LoginFormViewModelInterface } from "./hooks/UseViewModel";
 import { FormStates } from "./FormStates";
+import { CheckCircleIcon } from "@patternfly/react-icons";
+import globalSuccessColor100 from "@patternfly/react-tokens/dist/esm/global_success_color_100";
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace LoginForm {
@@ -34,7 +37,7 @@ export namespace LoginForm {
 
 export const LoginForm: React.FC<LoginForm.Props> = (props) => {
   const { vm } = props;
-
+  console.log(vm.formState);
   return (
     <Card
       style={{ width: "36rem" }}
@@ -45,21 +48,32 @@ export const LoginForm: React.FC<LoginForm.Props> = (props) => {
     >
       <CardHeader id="card-header-title">
         <TextContent>
-          <Text component="h2">Migration Planner </Text>
+          <Text component="h2">Migration Discovery VM</Text>
           <Text>
-            The Migration Planner requires access to your VMware environment to
-            execute a comprehensive discovery process that gathers essential
-            data, including network topology, storage configuration, and virtual
-            machine inventory. The process leverages this information to provide
-            tailored recommendations for a seamless workload transition to
-            OpenShift Virtualization.
+            The migration discovery VM requires access to your VMware
+            environment to execute a discovery process that gathers essential
+            data, including network topology, storage configuration, and VM
+            inventory. The process leverages this information to provide
+            recommendations for a seamless migration to OpenShift
+            Virtualization.
           </Text>
         </TextContent>
       </CardHeader>
 
-      <CardBody id="card-body-description">
+      <CardBody
+        id="card-body-description"
+
+      >
         <Form ref={vm.formRef} onSubmit={vm.handleSubmit} id="login-form">
-          <FormGroup label="URL" isRequired fieldId="url-form-control">
+          <FormGroup
+            label="Environment URL"
+            isRequired
+            fieldId="url-form-control"
+            hidden={
+              vm.formState === FormStates.GatheringInventory ||
+              vm.formState === FormStates.CredentialsAccepted
+            }
+          >
             <TextInput
               validated={vm.urlControlStateVariant}
               isDisabled={vm.shouldDisableFormControl}
@@ -86,9 +100,13 @@ export const LoginForm: React.FC<LoginForm.Props> = (props) => {
           </FormGroup>
 
           <FormGroup
-            label="Username"
+            label="WMware Username"
             isRequired
             fieldId="username-form-control"
+            hidden={
+              vm.formState === FormStates.GatheringInventory ||
+              vm.formState === FormStates.CredentialsAccepted
+            }
           >
             <TextInput
               validated={vm.usernameControlStateVariant}
@@ -118,6 +136,10 @@ export const LoginForm: React.FC<LoginForm.Props> = (props) => {
             label="Password"
             isRequired
             fieldId="password-form-control"
+            hidden={
+              vm.formState === FormStates.GatheringInventory ||
+              vm.formState === FormStates.CredentialsAccepted
+            }
           >
             <TextInput
               validated={vm.passwordControlStateVariant}
@@ -142,7 +164,10 @@ export const LoginForm: React.FC<LoginForm.Props> = (props) => {
             )}
           </FormGroup>
 
-          <FormGroup fieldId="checkbox-form-control">
+          <FormGroup fieldId="checkbox-form-control"  hidden={
+          vm.formState === FormStates.GatheringInventory ||
+          vm.formState === FormStates.CredentialsAccepted
+        }>
             <Checkbox
               isDisabled={vm.shouldDisableFormControl}
               id="checkbox-form-control"
@@ -178,17 +203,53 @@ export const LoginForm: React.FC<LoginForm.Props> = (props) => {
         </Form>
       </CardBody>
 
+      <CardBody
+        id="card-body-discovery-status"
+        hidden={
+          vm.formState !== FormStates.GatheringInventory &&
+          vm.formState !== FormStates.CredentialsAccepted
+        }
+      >
+        {vm.formState === FormStates.GatheringInventory && (
+          <Text component="p" style={{ textAlign: "center" }}>
+          <Icon size="xl" >
+            <Spinner />
+          </Icon>
+          <br/>Gathering inventory...
+        </Text>
+
+        )}
+        {vm.formState === FormStates.CredentialsAccepted && (
+          <Text component="p" style={{ textAlign: "center" }}>
+          <Icon size="xl" isInline>
+            <CheckCircleIcon color={globalSuccessColor100.value} />
+          </Icon>
+          <br/>Discovery completed
+        </Text>
+
+        )}
+      </CardBody>
       <CardFooter>
         <Split style={{ alignItems: "flex-end" }}>
           <SplitItem>
+          {vm.formState !== FormStates.CredentialsAccepted && vm.formState !== FormStates.GatheringInventory && (
             <Button
               type="submit"
               variant="primary"
               isDisabled={vm.shouldDisableFormControl}
               form="login-form"
             >
-              Login
-            </Button>
+              Log in
+            </Button>)}
+            {(vm.formState === FormStates.CredentialsAccepted || vm.formState === FormStates.GatheringInventory) && (
+              <Button
+                variant="primary"
+                onClick={vm.handleReturnToAssistedMigration}
+                style={{ marginLeft: "16px" }}
+              >
+                Go back to assessment wizard
+              </Button>
+            )}
           </SplitItem>
           <SplitItem isFilled></SplitItem>
           <SplitItem style={{ paddingRight: "2rem" }}>

apps/agent/src/login-form/hooks/UseViewModel.ts

@@ -33,6 +33,7 @@ export interface LoginFormViewModelInterface {
   alertActionLinkText?: string;
   shouldDisplayAlert: boolean;
   handleSubmit: React.FormEventHandler<HTMLFormElement>;
+  handleReturnToAssistedMigration: () => void;
 }
 
 const _computeFormControlVariant = (
@@ -74,6 +75,8 @@ export const useViewModel = (): LoginFormViewModelInterface => {
         setFormState(FormStates.WaitingForCredentials);
         break;
       case SourceStatus.SourceStatusGatheringInitialInventory:
+        setFormState(FormStates.GatheringInventory);
+        break;
       case SourceStatus.SourceStatusUpToDate:
         setFormState(FormStates.CredentialsAccepted);
         break;
@@ -134,7 +137,7 @@ export const useViewModel = (): LoginFormViewModelInterface => {
           return [
             {
               id: 1,
-              text: "The Migration Planner has connected to your VMware environment",
+              text: "The migration discovery WM is connected to your VMware environment",
             },
           ];
         case FormStates.InvalidCredentials:
@@ -160,6 +163,7 @@ export const useViewModel = (): LoginFormViewModelInterface => {
           FormStates.CheckingStatus,
           FormStates.WaitingForCredentials,
           FormStates.Submitting,
+          FormStates.GatheringInventory
         ].includes(formState),
       [formState]
     ),
@@ -218,5 +222,9 @@ export const useViewModel = (): LoginFormViewModelInterface => {
       },
       [agentApi, navigateTo]
     ),
+    handleReturnToAssistedMigration: useCallback(() => {
+      const assistedMigrationUrl = import.meta.env.ASSISTED_MIGRATION_URL || 'http://localhost:3000/migrate/wizard';
+      window.open(assistedMigrationUrl, '_blank', 'noopener,noreferrer');
+    }, []),
   };
 };