Fixes

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

@@ -30,14 +30,9 @@ <h1 class="mat-h1 connectForm__fullLine">
                 [disabled]="submitting"
                 [(ngModel)]="db.type"
                 (ngModelChange)="dbTypeChange()" >
-                <mat-option value="mysql">MySQL</mat-option>
-                <mat-option value="postgres">PostgreSQL</mat-option>
-                <mat-option value="mongodb">MongoDB</mat-option>
-                <mat-option value="dynamodb" *ngIf="db.connectionType === 'direct'">DynamoDB</mat-option>
-                <mat-option value="cassandra">Cassandra</mat-option>
-                <mat-option value="oracledb">Oracle</mat-option>
-                <mat-option value="mssql">MS SQL</mat-option>
-                <mat-option value="ibmdb2">IBM DB2</mat-option>
+                <mat-option *ngFor="let dbType of supportedOrderedDatabases" [value]="dbType">
+                    {{supportedDatabasesTitles[dbType]}}
+                </mat-option>
             </mat-select>
         </mat-form-field>
 

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

@@ -44,6 +44,7 @@ import { UserService } from 'src/app/services/user.service';
 import { environment } from 'src/environments/environment';
 import googlIPsList from 'src/app/consts/google-IP-addresses';
 import isIP from 'validator/lib/isIP';
+import { supportedDatabasesTitles, supportedOrderedDatabases } from 'src/app/consts/databases';
 
 @Component({
   selector: 'app-connect-db',
@@ -90,6 +91,8 @@ export class ConnectDBComponent implements OnInit {
     message: null
   }
 
+  public supportedOrderedDatabases = supportedOrderedDatabases;
+  public supportedDatabasesTitles = supportedDatabasesTitles;
   public ports = {
     [DBtype.MySQL]: '3306',
     [DBtype.Postgres]: '5432',

frontend/src/app/components/connect-db/db-credentials-forms/cassandra-credentials-form/cassandra-credentials-form.component.html

@@ -4,14 +4,14 @@
         data-testid="connection-hostname-input"
         angulartics2On="change"
         angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: hostname is edited"
-        required hostnameValidator="mongodb"
+        required hostnameValidator
         [readonly]="(accessLevel === 'readonly' || connection.isTestConnection) && connection.id"
         [disabled]="submitting"
         [(ngModel)]="connection.host">
     <mat-hint>
         <span>
-            E.g. <strong><code>mongodb+srv://my-test-db.8a8grvb.mongoconnection.net</code></strong>.
-            Connections from internal IPs (e.g. localhost) are not supported.
+            E.g. <strong><code>cassandra.us-west-1.amazonaws.com</code></strong><br>
+            Connections from internal IPs (e.g. localhost) are not supported
         </span>
     </mat-hint>
 

frontend/src/app/components/connections-list/own-connections/own-connections.component.css

@@ -211,6 +211,7 @@
 @media (width <= 600px) {
     .connectionItem {
         flex: initial;
+        max-width: 100%;
     }
 }
 

frontend/src/app/consts/databases.ts

@@ -16,6 +16,6 @@ export const supportedDatabasesTitles = {
     dynamodb: "DynamoDB",
     cassandra: "Cassandra",
     oracledb: "OracleDB",
-    mssql: "MSSQL",
+    mssql: "SQL Server",
     ibmdb2: "IBM DB2"
   }