feat: implement dropdown for postgres database with sslmode

Author: tiaguinho

ui/src/app/app.constants.ts

@@ -15,7 +15,7 @@ export enum StorageKeys {
 
 export enum SourceDbNames {
   MySQL = 'MySQL',
-  Postgres = 'Postgres',
+  Postgres = 'postgres',
   SQLServer = 'SQL Server',
   Oracle = 'Oracle',
   Cassandra = 'cassandra',

ui/src/app/components/direct-connection/direct-connection.component.html

@@ -62,7 +62,14 @@ <h3 class="primary-header">Connection Detail</h3>
         <mat-label *ngIf="connectForm.value.dbEngine !== 'cassandra'">Database Name</mat-label>
         <input matInput name="dbname" type="text" formControlName="dbName" id="dbname-input" />
       </mat-form-field>
-
+      <mat-form-field class="full-width" appearance="outline" *ngIf="connectForm.value.dbEngine === 'postgres'">
+        <mat-label>SSL Mode</mat-label>
+        <mat-select formControlName="sslMode">
+          <mat-option *ngFor="let mode of sslModeList" [value]="mode.value">
+            {{ mode.displayName }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
       <mat-form-field class="full-width" appearance="outline" *ngIf="connectForm.value.dbEngine === 'cassandra'">
         <mat-label>Datacenter</mat-label>
         <input matInput placeholder="dc" name="dataCenter" type="text" formControlName="dataCenter" id="datacenter-input"/>

ui/src/app/components/direct-connection/direct-connection.component.spec.ts

@@ -92,6 +92,12 @@ describe('DirectConnectionComponent', () => {
     dbname?.setValue('mysql')
     expect(dbname?.invalid).toBeFalsy()
 
+    let sslMode = component.connectForm.get('sslMode')
+    sslMode?.setValue('disable')
+    expect(sslMode?.invalid).toBeTruthy()
+    sslMode?.setValue('enable')
+    expect(sslMode?.invalid).toBeFalsy()
+
     let dialect = component.connectForm.get('dialect')
     dialect?.setValue('')
     expect(dialect?.invalid).toBeTruthy()
@@ -123,6 +129,7 @@ describe('DirectConnectionComponent', () => {
       port: '1433',
       userName: 'sa',
       password: 'password',
+      sslMode: 'disable',
       dbName: 'database',
       dialect: 'postgresql',
     })
@@ -158,6 +165,7 @@ describe('DirectConnectionComponent', () => {
             password: 'pass',
             dbName: 'keyspace1',
             dataCenter: 'dc1',
+            sslMode: 'disable',
             dialect: 'google_standard_sql',
         })
 

ui/src/app/components/direct-connection/direct-connection.component.ts

@@ -25,6 +25,7 @@ export class DirectConnectionComponent implements OnInit {
     port: new FormControl('', [Validators.required, Validators.pattern('^[0-9]+$')]),
     userName: new FormControl('', [Validators.required]),
     password: new FormControl(''),
+    sslMode: new FormControl(''),
     dbName: new FormControl('', [Validators.required]),
     dialect: new FormControl('', [Validators.required]),
     dataCenter: new FormControl(''),
@@ -47,6 +48,10 @@ export class DirectConnectionComponent implements OnInit {
     { value: false, displayName: 'No'},
     { value: true, displayName: 'Yes'},
   ]
+  sslModeList = [
+    { value: 'disable', displayName: 'Disable'},
+    { value: 'require', displayName: 'Require'},
+  ]
 
   dialect: { value: string, displayName: string }[] = []
 
@@ -80,8 +85,18 @@ export class DirectConnectionComponent implements OnInit {
     })
     this.connectForm.get('dbEngine')?.valueChanges.subscribe((dbEngine) => {
       this.updateDialectAndDataCenterOptions(dbEngine || '')
+      this.updateSslModeValue(dbEngine || '')
     })
     this.updateDialectAndDataCenterOptions(this.connectForm.value.dbEngine || '')
+    this.updateSslModeValue(this.connectForm.value.dbEngine || '')
+  }
+
+  updateSslModeValue(dbEngine: string) {
+    if (dbEngine !== SourceDbNames.Postgres) {
+      this.connectForm.get('sslMode')?.setValue('')
+    } else if (!this.connectForm.get('sslMode')?.value) {
+      this.connectForm.get('sslMode')?.setValue('disable')
+    }
   }
 
   updateDialectAndDataCenterOptions(dbEngine: string) {
@@ -100,7 +115,7 @@ export class DirectConnectionComponent implements OnInit {
 
   testConn() {
     this.clickEvent.openDatabaseLoader('test-connection', this.connectForm.value.dbName!)
-    const { dbEngine, isSharded, hostName, port, userName, password, dbName, dialect, dataCenter } = this.connectForm.value
+    const { dbEngine, isSharded, hostName, port, userName, password, sslMode, dbName, dialect, dataCenter } = this.connectForm.value
     localStorage.setItem(PersistedFormValues.DirectConnectForm, JSON.stringify(this.connectForm.value))
     let config: IDbConfig = {
       dbEngine: dbEngine!,
@@ -109,6 +124,7 @@ export class DirectConnectionComponent implements OnInit {
       port: port!,
       userName: userName!,
       password: password!,
+      sslMode: sslMode!,
       dbName: dbName!,
       dataCenter: dataCenter!,
     }
@@ -149,7 +165,7 @@ export class DirectConnectionComponent implements OnInit {
         window.scroll(0, 0);
         this.data.resetStore();
         localStorage.clear();
-        const { dbEngine, isSharded, hostName, port, userName, password, dbName, dialect, dataCenter } = this.connectForm.value;
+        const { dbEngine, isSharded, hostName, port, userName, password, dbName, sslMode, dialect, dataCenter } = this.connectForm.value;
         localStorage.setItem(PersistedFormValues.DirectConnectForm, JSON.stringify(this.connectForm.value));
         let config: IDbConfig = {
           dbEngine: dbEngine!,
@@ -159,6 +175,7 @@ export class DirectConnectionComponent implements OnInit {
           userName: userName!,
           password: password!,
           dbName: dbName!,
+          sslMode: sslMode!,
           dataCenter: dataCenter!,
         };
         this.connectRequest = this.fetch.connectTodb(config, dialect!).subscribe({
@@ -167,7 +184,7 @@ export class DirectConnectionComponent implements OnInit {
             this.data.conv.subscribe((res) => {
               localStorage.setItem(
                 StorageKeys.Config,
-                JSON.stringify({ dbEngine, hostName, port, userName, password, dbName })
+                JSON.stringify({ dbEngine, hostName, port, userName, password, dbName, sslMode })
               );
               localStorage.setItem(StorageKeys.Type, InputType.DirectConnect);
               localStorage.setItem(StorageKeys.SourceDbName, extractSourceDbName(dbEngine!));

ui/src/app/model/db-config.ts

@@ -6,6 +6,7 @@ export default interface IDbConfig {
   userName: string
   password: string
   dbName: string
+  sslMode?: string
   dataCenter?: string
   shardId?: string
 }

ui/src/app/services/fetch/fetch.service.spec.ts

@@ -34,6 +34,7 @@ describe('FetchService', () => {
         port: '9042',
         userName: 'user',
         password: 'password',
+        sslMode: false,
         dbName: 'testdb',
         dataCenter: 'dc1',
       }
@@ -51,6 +52,7 @@ describe('FetchService', () => {
         Database: 'testdb',
         User: 'user',
         Password: 'password',
+        Sslmode: false,
         Dialect: 'google_standard_sql',
         DataCenter: 'dc1',
       })
@@ -67,6 +69,7 @@ describe('FetchService', () => {
         port: '9042',
         userName: 'user',
         password: 'password',
+        sslMode: false,
         dbName: 'testdb',
         dataCenter: 'dc1',
       }
@@ -82,6 +85,7 @@ describe('FetchService', () => {
         Database: 'testdb',
         User: 'user',
         Password: 'password',
+        Sslmode: false,
         DataCenter: 'dc1',
       })
       req.flush({})

ui/src/app/services/fetch/fetch.service.ts

@@ -25,11 +25,11 @@ import ICreateSequence from 'src/app/model/auto-gen'
   providedIn: 'root',
 })
 export class FetchService {
-  private url: string = window.location.origin
+  private url: string = 'http://localhost:8080' // Update with your backend URL
   constructor(private http: HttpClient) {}
 
   connectTodb(payload: IDbConfig, dialect: string) {
-    const { dbEngine, isSharded, hostName, port, dbName, userName, password, dataCenter} = payload
+    const { dbEngine, isSharded, hostName, port, dbName, userName, password, sslMode, dataCenter} = payload
     return this.http.post<HttpResponse<null>>(
       `${this.url}/connect`,
       {
@@ -40,6 +40,7 @@ export class FetchService {
         Database: dbName,
         User: userName,
         Password: password,
+        Sslmode: sslMode,
         Dialect: dialect,
         DataCenter: dataCenter,
       },