remove switcher and make connection string permanently seen, refactoring

Author: lyubov-voloshko

frontend/src/app/components/connect-db/connect-db.component.css

@@ -29,17 +29,13 @@
 	grid-template-columns: subgrid;
 	grid-template-rows: subgrid;
 	grid-column: 1 / span 4;
-	grid-row: 5 / span 4;
+	grid-row: 6 / span 4;
 }
 
-:host ::ng-deep .connectForm__typeSwitch + .credentials-fieldset {
+:host ::ng-deep .connectForm__typeSwitch + ndc-dynamic + .credentials-fieldset {
 	grid-row: 4 / span 4;
 }
 
-:host ::ng-deep .connectForm__warningMessage + .connectForm__credentialsModeSwitch + .credentials-fieldset {
-	grid-row: 6 / span 4;
-}
-
 
 
 @media (width <= 600px) {
@@ -219,6 +215,7 @@
 
 .connectForm__connectionString button {
 	margin-top: 4px;
+	margin-left: -80px;
 }
 
 .agent-token {

frontend/src/app/components/connect-db/connect-db.component.html

@@ -72,18 +72,6 @@ <h1 class="mat-h1 connectForm__fullLine">
         </div>
 
         @if (db.connectionType === 'direct' && !db.id) {
-            <div class="connectForm__fullLine connectForm__toggle connectForm__credentialsModeSwitch">
-                <mat-button-toggle-group name="connectionInputMode"
-                    data-testid="connection-input-mode-toggle"
-                    [disabled]="submitting"
-                    [(ngModel)]="connectionInputMode">
-                    <mat-button-toggle value="manual">Manual</mat-button-toggle>
-                    <mat-button-toggle value="connectionString">Connection string</mat-button-toggle>
-                </mat-button-toggle-group>
-            </div>
-        }
-
-        @if (connectionInputMode === 'connectionString' && db.connectionType === 'direct' && !db.id) {
             <div class="connectForm__fullLine connectForm__connectionString">
                 <mat-form-field appearance="outline" style="width: 100%">
                     <mat-label>Connection string</mat-label>
@@ -105,7 +93,8 @@ <h1 class="mat-h1 connectForm__fullLine">
                         <mat-error>Failed to parse connection string</mat-error>
                     }
                 </mat-form-field>
-                <button type="button" mat-flat-button color="primary"
+                <button type="button" mat-button color="primary"
+                    class="connectForm__connectionStringApplyButton"
                     data-testid="connection-string-apply-button"
                     [disabled]="submitting || !connectionString.trim() || connectionStringInput.invalid"
                     (click)="applyConnectionString()">
@@ -114,12 +103,21 @@ <h1 class="mat-h1 connectForm__fullLine">
             </div>
         }
 
-        <ndc-dynamic
-            [ndcDynamicComponent]="credentialsFormComponent"
-            [ndcDynamicInputs]="credentialsFormInputs"
-            [ndcDynamicOutputs]="credentialsFormOutputs"
-            [ndcDynamicAttributes]="credentialsFormAttributes"
-        ></ndc-dynamic>
+        @if (db.connectionType === 'direct') {
+            <ndc-dynamic
+                [ndcDynamicComponent]="credentialsFormComponent"
+                [ndcDynamicInputs]="{
+                    connection: db,
+                    submitting: submitting,
+                    accessLevel: accessLevel,
+                    masterKey: masterKey,
+                    readonly: !!((accessLevel === 'readonly' || db.isTestConnection) && db.id)
+                }"
+                [ndcDynamicOutputs]="credentialsFormOutputs"
+                [ndcDynamicAttributes]="credentialsFormAttributes"
+            ></ndc-dynamic>
+        }
+        
 
         <div *ngIf="db.connectionType === 'agent'" class="connectForm__fullLine instruction">
 

frontend/src/app/components/connect-db/connect-db.component.ts

@@ -1,6 +1,6 @@
 import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
-import { Component, DoCheck, NgZone, OnInit, Type } from '@angular/core';
+import { Component, NgZone, OnInit, Type } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -75,7 +75,7 @@ import { RedisCredentialsFormComponent } from './db-credentials-forms/redis-cred
 		DynamicAttributesDirective,
 	],
 })
-export class ConnectDBComponent implements OnInit, DoCheck {
+export class ConnectDBComponent implements OnInit {
 	protected posthog = posthog;
 
 	public isSaas = (environment as any).saas;
@@ -90,7 +90,6 @@ export class ConnectDBComponent implements OnInit, DoCheck {
 		message: null,
 	};
 
-	public connectionInputMode: 'manual' | 'connectionString' = 'manual';
 	public connectionString: string = '';
 
 	public credentialsFormMap: Record<string, Type<BaseCredentialsFormComponent>> = {
@@ -132,6 +131,14 @@ export class ConnectDBComponent implements OnInit, DoCheck {
 			"This is a DEMO SESSION! It will disappear after you log out. Don't use databases you're actively using or that contain information you wish to retain.",
 	};
 
+	public credentialsFormComponent: Type<BaseCredentialsFormComponent> | null = null;
+	public credentialsFormInputs: Record<string, any> = {};
+	public credentialsFormOutputs: Record<string, any> = {
+		switchToAgent: () => this.switchToAgent(),
+		masterKeyChange: (key: string) => this.handleMasterKeyChange(key),
+	};
+	public credentialsFormAttributes: Record<string, string> = { class: 'credentials-fieldset' };
+
 	constructor(
 		private _connections: ConnectionsService,
 		private _notifications: NotificationsService,
@@ -158,6 +165,8 @@ export class ConnectDBComponent implements OnInit, DoCheck {
 			this.db.port = this.ports[databaseType];
 		}
 
+		this.credentialsFormComponent = this.credentialsFormMap[this.db.type] || null;
+
 		this._connections
 			.getCurrentConnectionTitle()
 			.pipe(take(1))
@@ -190,6 +199,7 @@ export class ConnectDBComponent implements OnInit, DoCheck {
 
 	dbTypeChange() {
 		this.db.port = this.ports[this.db.type];
+		this.credentialsFormComponent = this.credentialsFormMap[this.db.type] || null;
 	}
 
 	testConnection() {
@@ -458,10 +468,6 @@ export class ConnectDBComponent implements OnInit, DoCheck {
 		this.masterKey = newMasterKey;
 	}
 
-	ngDoCheck() {
-		this._updateCredentialsFormInputs();
-	}
-
 	applyConnectionString() {
 		if (!this.connectionString.trim()) {
 			return;
@@ -487,7 +493,6 @@ export class ConnectDBComponent implements OnInit, DoCheck {
 				this.db.ssl = true;
 			}
 
-			this.connectionInputMode = 'manual';
 			this.connectionString = '';
 			this._notifications.showSuccessSnackbar('Connection string parsed successfully');
 		} catch (_e) {
@@ -514,29 +519,4 @@ export class ConnectDBComponent implements OnInit, DoCheck {
 		}
 		return provider;
 	}
-
-	public credentialsFormComponent: Type<BaseCredentialsFormComponent> | null = null;
-	public credentialsFormInputs: Record<string, any> = {};
-	public credentialsFormOutputs: Record<string, any> = {
-		switchToAgent: () => this.switchToAgent(),
-		masterKeyChange: (key: string) => this.handleMasterKeyChange(key),
-	};
-	public credentialsFormAttributes: Record<string, string> = { class: 'credentials-fieldset' };
-
-	private _updateCredentialsFormInputs() {
-		const isConnectionStringMode = this.connectionInputMode === 'connectionString' && this.db.connectionType === 'direct' && !this.db.id;
-		const targetType = (!isConnectionStringMode && this.db.connectionType === 'direct' && this.credentialsFormMap[this.db.type]) || null;
-
-		this.credentialsFormComponent = targetType;
-
-		if (targetType) {
-			this.credentialsFormInputs = {
-				connection: this.db,
-				submitting: this.submitting,
-				accessLevel: this.accessLevel,
-				masterKey: this.masterKey,
-				readonly: !!((this.accessLevel === 'readonly' || this.db.isTestConnection) && this.db.id),
-			};
-		}
-	}
 }