fix(webapp): connect session button stays grayed out intermittently (#…

…855)

Issue: DGW-183

webapp/src/client/app/modules/web-client/form/form-components/ssh/ssh-form.component.ts

@@ -6,7 +6,7 @@ import {
   OnDestroy,
   OnInit,
 } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
 
 import { BaseComponent } from '@shared/bases/base.component';
 import { SelectItem } from 'primeng/api';
@@ -71,16 +71,26 @@ export class SshFormComponent
 
   private addControlsToParentForm(inputFormData?: any): void {
     if (this.form) {
-      this.form.addControl(
+      this.clearForm();
+
+      this.formService.addControlToForm(
+        this.form,
         'authMode',
-        new FormControl(
-          inputFormData?.authMode || SshAuthMode.Username_and_Password
-        )
-      );
+        inputFormData,
+        true,
+        false,
+        SshAuthMode.Username_and_Password);
+
       this.subscribeToAuthModeChanges();
     }
   }
 
+  private clearForm(): void {
+    if (this.form.contains('authMode')) {
+      this.form.removeControl('authMode');
+    }
+  }
+
   private initializeFormOptions(): void {
     this.formService
       .getAuthModeOptions('ssh')
@@ -102,20 +112,26 @@ export class SshFormComponent
         startWith(this.form.get('authMode').value as SshAuthMode),
         switchMap((authMode) => this.getFormInputVisibility(authMode))
       )
-      .subscribe(() => {});
+      .subscribe({
+        error: (error) => console.error('Error subscribing to auth mode changes', error)
+      });
   }
 
   private getFormInputVisibility(
     authMode: SshAuthMode
   ): Observable<SshAuthMode> {
     return of(this.formInputVisibility).pipe(
-      tap((visibility) => {
+      tap((visibility: FormInputVisibility) => {
+        const authModeAsNumber: number = +authMode;
+
         visibility.showUsernameInput =
-          authMode === SshAuthMode.Username_and_Password ||
-          authMode === SshAuthMode.Private_Key;
+          authModeAsNumber === SshAuthMode.Username_and_Password ||
+          authModeAsNumber === SshAuthMode.Private_Key;
+
         visibility.showPasswordInput =
-          authMode === SshAuthMode.Username_and_Password;
-        visibility.showPrivateKeyInput = authMode === SshAuthMode.Private_Key;
+          authModeAsNumber === SshAuthMode.Username_and_Password;
+
+        visibility.showPrivateKeyInput = authModeAsNumber === SshAuthMode.Private_Key;
       }),
       map(() => {
         return authMode;

webapp/src/client/app/modules/web-client/form/form-components/vnc/vnc-form.component.ts

@@ -1,12 +1,12 @@
 import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
-import {FormControl, FormGroup} from "@angular/forms";
+import {FormGroup} from "@angular/forms";
 
 import {BaseComponent} from "@shared/bases/base.component";
 import {SelectItem} from "primeng/api";
 import {map, startWith, switchMap, takeUntil, tap} from "rxjs/operators";
 import {WebFormService} from "@shared/services/web-form.service";
 import {Observable, of} from "rxjs";
-import { VncAuthMode as AuthMode } from '@shared/enums/web-client-auth-mode.enum';
+import {VncAuthMode} from '@shared/enums/web-client-auth-mode.enum';
 
 interface FormInputVisibility {
   showUsernameInput?: boolean;
@@ -42,11 +42,26 @@ export class VncFormComponent extends BaseComponent implements  OnInit {
 
   private addControlsToParentForm(inputFormData?: any): void {
     if (this.form) {
-      this.form.addControl('authMode', new FormControl(inputFormData?.authMode || AuthMode.VNC_Password));
+      this.clearForm();
+
+      this.formService.addControlToForm(
+        this.form,
+        'authMode',
+        inputFormData,
+        true,
+        false,
+        VncAuthMode.VNC_Password);
+
       this.subscribeToAuthModeChanges();
     }
   }
 
+  private clearForm(): void {
+    if (this.form.contains('authMode')) {
+      this.form.removeControl('authMode');
+    }
+  }
+
   showUsernameInput(): boolean {
     return this.formInputVisibility.showUsernameInput;
   }
@@ -68,24 +83,21 @@ export class VncFormComponent extends BaseComponent implements  OnInit {
 
   private subscribeToAuthModeChanges(): void {
     this.form.get('authMode').valueChanges.pipe(
-      startWith(this.form.get('authMode').value as AuthMode),
       takeUntil(this.destroyed$),
+      startWith(this.form.get('authMode').value as VncAuthMode),
       switchMap((authMode) => this.getFormInputVisibility(authMode))
-    ).subscribe(() => {
-      this.formService.detectFormChanges(this.cdr);
+    ).subscribe({
+      error: (error) => console.error('Error subscribing to auth mode changes', error)
     });
   }
 
-  private getFormInputVisibility(authMode: AuthMode): Observable<AuthMode> {
+  private getFormInputVisibility(authMode: VncAuthMode): Observable<VncAuthMode> {
     return of(this.formInputVisibility).pipe(
-      tap((visibility) => {
-        if (authMode === 0) {
-          visibility.showUsernameInput = false;
-          visibility.showPasswordInput = false;
-        } else {
-          visibility.showUsernameInput = authMode === AuthMode.Username_and_Password;
-          visibility.showPasswordInput = [AuthMode.VNC_Password, AuthMode.Username_and_Password].includes(authMode);
-        }
+      tap((visibility: FormInputVisibility) => {
+        const authModeAsNumber: number = +authMode;
+
+        visibility.showUsernameInput = authModeAsNumber === VncAuthMode.Username_and_Password
+        visibility.showPasswordInput = [VncAuthMode.VNC_Password, VncAuthMode.Username_and_Password].includes(authModeAsNumber);
       }),
       map(() => {
         return authMode;

webapp/src/client/app/modules/web-client/form/web-client-form.component.ts

@@ -23,7 +23,7 @@ import {WebSessionService} from "@shared/services/web-session.service";
 import {WebFormService} from "@shared/services/web-form.service";
 import {AutoCompleteInput, HostnameObject} from "@shared/interfaces/forms.interfaces";
 import {SelectItemWithTooltip} from "@shared/interfaces/select-item-tooltip.interface";
-import { NetScanService } from '@gateway/shared/services/net-scan.services';
+import {NetScanEntry, NetScanService} from '@gateway/shared/services/net-scan.services';
 
 @Component({
   selector: 'web-client-form',
@@ -322,17 +322,17 @@ export class WebClientFormComponent
     return this.formService.canConnect(this.connectSessionForm);
   }
 
-  subscribeToNetscanFillEvent() {
-    this.netscanService.onServiceSelected().subscribe((entry) => {
-      let protocol = this.connectSessionForm.get('protocol')
-      if (protocol && protocol.value!==entry.protocol) {
-        protocol.setValue(entry.protocol)
-        this.formService.detectFormChanges(this.cdr);
-      }
+  subscribeToNetscanFillEvent(): void {
+    this.netscanService.onServiceSelected().subscribe((entry: NetScanEntry) => {
       this.connectSessionForm.get('hostname')?.setValue(entry.ip)
       this.connectSessionForm.get('autoComplete')?.setValue({
         hostname: entry.ip
       })
-    }); 
+
+      let protocol: AbstractControl<any, any> = this.connectSessionForm.get('protocol')
+      if (protocol && protocol.value!==entry.protocol) {
+        protocol.setValue(entry.protocol)
+      }
+    });
   }
 }

webapp/src/client/app/shared/enums/web-client-auth-mode.enum.ts

@@ -19,9 +19,9 @@ namespace WebClientAuthMode {
 
   export function getSelectVncItems(): SelectItem[] {
     return Object.keys(VncAuthMode)
-      .filter((key) => isNaN(Number(key)) && typeof VncAuthMode[key as any] === 'number')
-      .map((key) => {
-        const label = key.replaceAll('_and_', '_&_').replaceAll('_', ' ');
+      .filter((key: string) => isNaN(Number(key)) && typeof VncAuthMode[key as any] === 'number')
+      .map((key: string): {label:string, value:VncAuthMode} => {
+        const label: string = key.replaceAll('_', ' ').replaceAll('_', ' ');
         const value: VncAuthMode = VncAuthMode[key as keyof typeof VncAuthMode];
 
         return { label, value };
@@ -30,9 +30,9 @@ namespace WebClientAuthMode {
 
   export function getSelectSshItems(): SelectItem[] {
     return Object.keys(SshAuthMode)
-      .filter((key) => isNaN(Number(key)) && typeof SshAuthMode[key as any] === 'number')
-      .map((key) => {
-        const label = key.replaceAll('_', ' ');
+      .filter((key: string) => isNaN(Number(key)) && typeof SshAuthMode[key as any] === 'number')
+      .map((key: string): {label:string, value:SshAuthMode} => {
+        const label: string = key.replaceAll('_', ' ');
         const value: SshAuthMode = SshAuthMode[key as keyof typeof SshAuthMode];
 
         return { label, value };

webapp/src/client/app/shared/services/web-form.service.ts

@@ -46,7 +46,7 @@ export class WebFormService extends BaseComponent {
     inputFormData?: any,
     isRequired: boolean = true,
     isDisabled: boolean = false,
-    defaultValue: string | null = '',
+    defaultValue: string | number | null = '',
     additionalValidator?: ValidatorFn | ValidatorFn[]
   ): void {
     if (!formGroup) return;