add/edit connection: fix ux copy

backend/src/exceptions/text/messages.ts

@@ -1,5 +1,3 @@
-import { ConnectionTypesEnum } from '@rocketadmin/shared-code/dist/src/data-access-layer/shared/enums/connection-types-enum.js';
-import { UserRoleEnum } from '../../entities/user/enums/user-role.enum.js';
 import {
   EncryptionAlgorithmEnum,
   LogOperationTypeEnum,
@@ -8,8 +6,11 @@ import {
   UserActionEnum,
   WidgetTypeEnum,
 } from '../../enums/index.js';
+
+import { ConnectionTypesEnum } from '@rocketadmin/shared-code/dist/src/data-access-layer/shared/enums/connection-types-enum.js';
 import { TableActionEventEnum } from '../../enums/table-action-event-enum.js';
 import { TableActionMethodEnum } from '../../enums/table-action-method-enum.js';
+import { UserRoleEnum } from '../../entities/user/enums/user-role.enum.js';
 import { enumToString } from '../../helpers/enum-to-string.js';
 import { toPrettyErrorsMsg } from '../../helpers/index.js';
 export const Messages = {
@@ -161,7 +162,7 @@ export const Messages = {
   GOOGLE_LOGIN_FAILED: 'Google account login failed. If the problem persists, please contact our support team.',
   GITHUB_AUTHENTICATION_FAILED: `GitHub authentication failed. If the problem persists, please contact our support team`,
   GITHUB_REGISTRATION_FAILED: `GitHub registration failed. If the problem persists, please contact our support team`,
-  HOST_MISSING: 'Host is missing',
+  HOST_MISSING: 'Hostname is missing',
   HOST_NAME_INVALID: 'Hostname is invalid',
   ID_MISSING: 'Id is missing',
   INCORRECT_DATE_FORMAT: `Date format is incorrect.`,

backend/src/exceptions/utils/processing-messages-replace.ts

@@ -1,6 +1,6 @@
 export const PROCESSING_MESSAGES_REPLACE = {
   getaddrinfo_ENOTFOUND:
-    'Client was not able to connect to given address. Please check the hostname and port, ' +
+    'Client was not able to connect to this address. Please check the hostname and port, ' +
     'and make sure our servers are able to access your database. We use IP address 18.221.81.73 for all outbound requests.',
   ORA_02292: 'You tried to change a record in a table that is referenced by a record in a child table ',
   ALLOW_CONNECTIONS:

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

@@ -5,11 +5,11 @@
     <form action="" #connectForm="ngForm" class="form"
         (ngSubmit)="handleCredentialsSubmitting(connectForm)">
         <h1 class="mat-h1 connectForm__fullLine">
-            {{ connectionID ? 'Edit credentials' : 'Connect a database' }}
+            {{ connectionID ? 'Edit credentials' : 'Connect database' }}
         </h1>
 
         <mat-form-field appearance="outline" class="connectForm__title">
-            <mat-label>Connection title</mat-label>
+            <mat-label>Connection name</mat-label>
             <input matInput name="title" #title="ngModel"
                 data-testid="connection-title-input"
                 angulartics2On="change"
@@ -44,7 +44,7 @@ <h1 class="mat-h1 connectForm__fullLine">
             <mat-button-toggle-group name="connectionType"
                 data-testid="connection-type-toggle"
                 class="connectForm__typeSwitch"
-                [disabled]="submitting || db.isTestConnection"
+                [disabled]="submitting || db.isTestConnection || db.type === 'dynamodb'"
                 [(ngModel)]="db.connectionType">
                 <mat-button-toggle value="direct">Direct connection</mat-button-toggle>
                 <mat-button-toggle value="agent">Agent connection</mat-button-toggle>
@@ -57,18 +57,18 @@ <h1 class="mat-h1 connectForm__fullLine">
             <div *ngIf="connectionID; else warningAlert" class="warningMessage">
                 <mat-icon class="warningMessage__icon">warning_amber</mat-icon>
                 <div class="mat-body-1">
-                    Please make sure our servers are able to access your database. <br/> Rocketadmin uses
+                    Please make sure our servers are able to access your database. <br/> Rocketadmin uses the IP address
                     <app-ip-address-button ip="18.221.81.73"></app-ip-address-button>
-                    IP address for all outbound requests.
+                    for all outbound requests.
                 </div>
             </div>
 
             <ng-template #warningAlert>
                 <app-alert [alert]="warning">
                     <div class="mat-body-1" style="margin-bottom: 0">
-                        Please make sure our servers are able to access your database. <br/> Rocketadmin uses
+                        Please make sure our servers are able to access your database. <br/> Rocketadmin uses the IP address
                         <app-ip-address-button ip="18.221.81.73"></app-ip-address-button>
-                        IP address for all outbound requests.
+                        for all outbound requests.
                     </div>
                 </app-alert>
             </ng-template>
@@ -173,7 +173,7 @@ <h1 class="mat-h1 connectForm__fullLine">
 
             <div class="instruction__docker">
                 <p class="mat-body-1">
-                    Visit our DockerHub page to install the Rocketadmin agent via Docker.
+                    Visit our DockerHub page to install the Rocketadmin agent.
                 </p>
 
                 <a mat-flat-button color="accent" class="github-button"

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

@@ -108,7 +108,7 @@ describe('ConnectDBComponent', () => {
     }));
 
     component.testConnection();
-    expect(fakeNotifications.showSuccessSnackbar).toHaveBeenCalledOnceWith('Connection exists. Your credentials are correct.')
+    expect(fakeNotifications.showSuccessSnackbar).toHaveBeenCalledOnceWith('Connection is live')
 
     fakeNotifications.showSuccessSnackbar.calls.reset();
   });

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

@@ -169,7 +169,7 @@ export class ConnectDBComponent implements OnInit {
           });
           if (credsCorrect.result) {
             this._notifications.dismissAlert();
-            this._notifications.showSuccessSnackbar('Connection exists. Your credentials are correct.')
+            this._notifications.showSuccessSnackbar('Connection is live')
           } else {
             this._notifications.showAlert(AlertType.Error, credsCorrect.message, [
               {

frontend/src/app/components/connect-db/db-connection-ip-access-dialog/db-connection-ip-access-dialog.component.html

@@ -1,11 +1,11 @@
 <h1 mat-dialog-title>Give access to our IP address</h1>
 <mat-dialog-content>
     <p class="mat-body">
-        Please make sure our servers are able to access your database. Rocketadmin uses <app-ip-address-button ip="18.221.81.73"></app-ip-address-button> IP address for all outbound requests.
+        Please make sure our servers are able to access your database. Rocketadmin uses the IP address <app-ip-address-button ip="18.221.81.73"></app-ip-address-button> for all outbound requests.
     </p>
     <br>
     <div *ngIf="data.provider === 'amazon'" class="mat-body">
-        <strong>Setup VPC security groups.</strong>
+        <strong>Set up AWS's VPC security groups</strong>
         <ol class="rules">
             <li>Open the Amazon RDS <strong>console</strong>.</li>
             <li>
@@ -23,7 +23,7 @@ <h1 mat-dialog-title>Give access to our IP address</h1>
         </ol>
     </div>
     <div *ngIf="data.provider === 'azure'" class="mat-body">
-        <strong>Setup firewall rules.</strong>
+        <strong>Set up Azure's firewall rules</strong>
         <ol class="rules">
             <li>Open your database overview and select <strong>Networking</strong> from the navigation pane.</li>
             <li>In the <strong>Connectivity method</strong> you have to have <strong>Public access (allowed IP addresses)</strong>.</li>
@@ -36,7 +36,7 @@ <h1 mat-dialog-title>Give access to our IP address</h1>
         </ol>
     </div>
     <div *ngIf="data.provider === 'google'" class="mat-body">
-        <strong>Setup authorized networks</strong>
+        <strong>Set up Google Cloud's authorized networks</strong>
         <ol class="rules">
             <li>Open your instance overview and select <strong>Connections</strong> from the navigation pane.</li>
             <li>
@@ -136,27 +136,27 @@ <h1 mat-dialog-title>Give access to our IP address</h1>
     <button *ngIf="data.provider === null" mat-button mat-dialog-close mat-dialog-close>Cancel</button>
     <a *ngIf="data.provider === 'amazon'" mat-button target="_blank"
         href="https://docs.rocketadmin.com/Create%20connections/Direct%20connection/create_aws_mysql">
-        Learn more for AWS
+        Setup guide
     </a>
     <a *ngIf="data.provider === 'azure'" mat-button target="_blank"
         href="https://learn.microsoft.com/en-us/azure/mysql/flexible-server/how-to-manage-firewall-portal">
-        Learn more for Azure
+        Setup guide
     </a>
     <a *ngIf="data.provider === 'google'" mat-button target="_blank"
         href="https://docs.rocketadmin.com/Create%20connections/Direct%20connection/create_google_cloud">
-        Learn more for Google Cloud
+        Setup guide
     </a>
     <a *ngIf="data.provider === 'mongoatlas'" mat-button target="_blank"
         href="https://docs.rocketadmin.com/Create%20connections/Direct%20connection/create_mongo_atlas">
-        Learn more for MongoDB Atlas
+        Setup guide
     </a>
     <a *ngIf="data.provider === 'digitalocean'" mat-button target="_blank"
         href="https://docs.rocketadmin.com/Create%20connections/Direct%20connection/create_digitalocean_postgresql">
-        Learn more for DigitalOcean
+        Setup guide
     </a>
     <button mat-flat-button color="primary"
         mat-dialog-close="confirmed">
-        I gave access
+        I've given access
     </button>
 </mat-dialog-actions>
 

frontend/src/app/components/connect-db/db-credentials-forms/base-credentials-form/base-credentials-form.component.css

@@ -22,6 +22,7 @@
     color: inherit;
     background: transparent;
     border: none;
+    font-size: inherit;
     text-decoration: underline;
     cursor: pointer;
 }

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

@@ -9,16 +9,16 @@
         [disabled]="submitting"
         [(ngModel)]="connection.host">
     <mat-hint>
-        E.g. <strong><code>my-test-connection.cvfuxe8nltiq.us-east-2.rds.amazonaws.com</code></strong>.
-        Connections from internal IPs (e.g. localhost) are not supported.
+        E.g. <strong><code>my-test-connection.cvfuxe8nltiq.us-east-2.rds.amazonaws.com</code></strong> <br/>
+        Connections from internal IPs (e.g. localhost) are not supported
     </mat-hint>
 
     <mat-error *ngIf="hostname.errors?.isLocalhost && hostname.invalid">
-        To connect a database on internal IP use <strong>Pinggy</strong>
-        (<a [href]="tunnelingServiceLink" target="_blank" class="credentials-fieldset__hint-link">how-to</a>)
-        or <button type="button" (click)="switchToAgent.emit()" class="credentials-fieldset__hint-button">click here</button> for agent connection.
+        To connect a database to an internal IP, use something like <strong>Pinggy</strong>
+        (<a [href]="tunnelingServiceLink" target="_blank" class="credentials-fieldset__hint-link">here's a guide</a>),
+        or <button type="button" (click)="switchToAgent.emit()" class="credentials-fieldset__hint-button">click here</button> to connect through an agent
     </mat-error>
-    <mat-error *ngIf="hostname.errors?.isInvalidHostname && hostname.invalid">Hostname is invalid.</mat-error>
+    <mat-error *ngIf="hostname.errors?.isInvalidHostname && hostname.invalid">Hostname is invalid</mat-error>
 </mat-form-field>
 
 <mat-form-field appearance="outline" class="connectForm__port">
@@ -31,7 +31,7 @@
         [readonly]="(accessLevel === 'readonly' || connection.isTestConnection) && connection.id"
         [disabled]="submitting"
         [(ngModel)]="connection.port">
-    <mat-error *ngIf="port.errors?.required && (port.invalid && port.touched)">Port should not be empty.</mat-error>
+    <mat-error *ngIf="port.errors?.required && (port.invalid && port.touched)">Port should not be empty</mat-error>
 </mat-form-field>
 
 <mat-form-field appearance="outline" class="credentials-fieldset__1-2-columns">
@@ -44,7 +44,7 @@
         [readonly]="(accessLevel === 'readonly' || connection.isTestConnection) && connection.id"
         [disabled]="submitting"
         [(ngModel)]="connection.username">
-    <mat-error *ngIf="username.errors?.required && (username.invalid && username.touched)">Username should not be empty.</mat-error>
+    <mat-error *ngIf="username.errors?.required && (username.invalid && username.touched)">Username should not be empty</mat-error>
 </mat-form-field>
 
 <mat-form-field appearance="outline" class="credentials-fieldset__3-4-columns">
@@ -57,9 +57,9 @@
         [readonly]="(accessLevel === 'readonly' || connection.isTestConnection) && connection.id"
         [disabled]="submitting"
         [(ngModel)]="connection.password">
-    <mat-hint *ngIf="connection.id && (hostname.pristine && port.pristine)">To keep password the same keep this field blank.</mat-hint>
-    <mat-hint *ngIf="connection.id && (hostname.dirty || port.dirty)">Password needed due to hostname/port change.</mat-hint>
-    <!-- <mat-error *ngIf="email.errors.required && (email.invalid && email.touched)">Email should not be empty.</mat-error> -->
+    <mat-hint *ngIf="connection.id && (hostname.pristine && port.pristine)">To keep password the same keep this field blank</mat-hint>
+    <mat-hint *ngIf="connection.id && (hostname.dirty || port.dirty)">Password needed due to hostname/port change</mat-hint>
+    <!-- <mat-error *ngIf="email.errors.required && (email.invalid && email.touched)">Email should not be empty</mat-error> -->
 </mat-form-field>
 
 <mat-form-field appearance="outline" class="credentials-fieldset__1-2-columns">
@@ -72,7 +72,7 @@
         [readonly]="(accessLevel === 'readonly' || connection.isTestConnection) && connection.id"
         [disabled]="submitting"
         [(ngModel)]="connection.database">
-    <mat-error *ngIf="database.errors?.required && (database.invalid && database.touched)">Name should not be empty.</mat-error>
+    <mat-error *ngIf="database.errors?.required && (database.invalid && database.touched)">Name should not be empty</mat-error>
 </mat-form-field>
 
 <mat-form-field appearance="outline" class="credentials-fieldset__3-4-columns">
@@ -85,7 +85,7 @@
         [readonly]="(accessLevel === 'readonly' || connection.isTestConnection) && connection.id"
         [disabled]="submitting"
         [(ngModel)]="connection.schema">
-    <mat-error *ngIf="schema.errors?.required && (schema.invalid && schema.touched)">Name should not be empty.</mat-error>
+    <mat-error *ngIf="schema.errors?.required && (schema.invalid && schema.touched)">Name should not be empty</mat-error>
 </mat-form-field>
 
 <mat-expansion-panel class="credentials-fieldset__1-4-columns">
@@ -116,15 +116,15 @@
         <mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always" class="advanced-settings__fullLine">
             <mat-label>Private SSH key</mat-label>
             <textarea matInput resizeToFitContent rows="8" name="privateSSHKey" #privateSSHKey="ngModel"
-                placeholder="Sensitive — write only field"
+                placeholder="Sensitive — write-only field"
                 data-testid="connection-ssh-key-textarea"
                 angulartics2On="change"
                 angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH key is edited"
                 [required]="connection.ssh && !connection.id" [readonly]="accessLevel === 'readonly' && connection.id"
                 [disabled]="submitting"
                 [(ngModel)]="connection.privateSSHKey"
             ></textarea>
-            <mat-error *ngIf="privateSSHKey.errors?.required && (privateSSHKey.invalid && privateSSHKey.touched)">Private SSH key should not be empty.</mat-error>
+            <mat-error *ngIf="privateSSHKey.errors?.required && (privateSSHKey.invalid && privateSSHKey.touched)">Private SSH key should not be empty</mat-error>
         </mat-form-field>
 
         <mat-form-field *ngIf="connection.ssh" appearance="outline">
@@ -136,7 +136,7 @@
                 [required]="connection.ssh" [readonly]="accessLevel === 'readonly' && connection.id"
                 [disabled]="submitting"
                 [(ngModel)]="connection.sshHost">
-            <mat-error *ngIf="sshHost.errors?.required && (sshHost.invalid && sshHost.touched)">SSH host should not be empty.</mat-error>
+            <mat-error *ngIf="sshHost.errors?.required && (sshHost.invalid && sshHost.touched)">SSH host should not be empty</mat-error>
         </mat-form-field>
 
         <mat-form-field *ngIf="connection.ssh" appearance="outline">
@@ -148,20 +148,20 @@
                 [required]="connection.ssh" [readonly]="accessLevel === 'readonly' && connection.id"
                 [disabled]="submitting"
                 [(ngModel)]="connection.sshPort">
-            <mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty.</mat-error>
+            <mat-error *ngIf="sshPort.errors?.required && (sshPort.invalid && sshPort.touched)">SSH port should not be empty</mat-error>
         </mat-form-field>
 
         <mat-form-field *ngIf="connection.ssh" appearance="outline" floatLabel="always">
             <mat-label>SSH username</mat-label>
             <input matInput name="sshUsername" #sshUsername="ngModel"
-                placeholder="Sensitive — write only field"
+                placeholder="Sensitive — write-only field"
                 data-testid="connection-ssh-username-input"
                 angulartics2On="change"
                 angularticsAction="Connection creds {{ connection.id ? 'edit' : 'add' }}: SSH username is edited"
                 [required]="connection.ssh" [readonly]="accessLevel === 'readonly' && connection.id"
                 [disabled]="submitting"
                 [(ngModel)]="connection.sshUsername">
-            <mat-error *ngIf="sshUsername.errors?.required && (sshUsername.invalid && sshUsername.touched)">SSH username should not be empty.</mat-error>
+            <mat-error *ngIf="sshUsername.errors?.required && (sshUsername.invalid && sshUsername.touched)">SSH username should not be empty</mat-error>
         </mat-form-field>
 
         <mat-checkbox class="checkbox-line advanced-settings__fullLine" name="ssl" #ssh="ngModel"
@@ -185,7 +185,7 @@
                 [disabled]="submitting"
                 [(ngModel)]="connection.cert"
             ></textarea>
-            <mat-error *ngIf="sslCert.errors?.required && (sslCert.invalid && sslCert.touched)">SSL certificate should not be empty.</mat-error>
+            <mat-error *ngIf="sslCert.errors?.required && (sslCert.invalid && sslCert.touched)">SSL certificate should not be empty</mat-error>
         </mat-form-field>
     </div>
 </mat-expansion-panel>