fix(orb-ui): Add cancel button to all stepper controls in forms (#846)

* fix(orb-ui): Add cancel button to all stepper controls in forms * Agent Create/Edit * Agent Group/Edit * Agent Policy Create/Edit * Dataset Create/Edit * Sink Create/Edit * fix(orb-ui): fix strings standardization and codestyle
orb-community · Feb 9, 2022 · 3a40fe6 · 3a40fe6
1 parent 765eb22
commit 3a40fe6
Show file tree

Hide file tree

Showing 8 changed files with 285 additions and 174 deletions.
diff --git a/ui/src/app/pages/datasets/add/dataset.add.component.html b/ui/src/app/pages/datasets/add/dataset.add.component.html
@@ -39,22 +39,23 @@ <h4>{{isEdit ? 'Edit Dataset' : 'New Dataset'}}</h4>
             </nb-form-field>
             <hr/>
             <div class="d-flex justify-content-end">
-              <button
-                (click)="goBack()"
-                data-orb-qa-id="cancel"
-                ghost
-                nbButton
-                status="primary"
-                type="button">Cancel
+              <button (click)="goBack()"
+                      data-orb-qa-id="button#cancel"
+                      ghost
+                      nbButton
+                      status="primary"
+                      type="button">
+                {{ strings.stepper.cancel }}
               </button>
               <button [disabled]="!detailsFormGroup?.valid"
                       class="next-button"
-                      data-orb-qa-id="next"
+                      data-orb-qa-id="button#next"
                       nbButton
                       nbStepperNext
                       shape="round"
                       status="primary"
-                      type="submit">Next
+                      type="submit">
+                {{ strings.stepper.next }}
               </button>
             </div>
           </form>
@@ -91,22 +92,31 @@ <h4>{{isEdit ? 'Edit Dataset' : 'New Dataset'}}</h4>
             </nb-form-field>
             <hr/>
             <div class="d-flex justify-content-end">
-              <button
-                data-orb-qa-id="cancel"
-                ghost
-                nbButton
-                nbStepperPrevious
-                status="primary"
-                type="button">Back
+              <button (click)="goBack()"
+                      data-orb-qa-id="button#cancel"
+                      ghost
+                      nbButton
+                      status="primary"
+                      type="button">
+                {{ strings.stepper.cancel }}
+              </button>
+              <button data-orb-qa-id="button#back"
+                      ghost
+                      nbButton
+                      nbStepperPrevious
+                      status="primary"
+                      type="button">
+                {{ strings.stepper.back }}
               </button>
               <button [disabled]="!isEdit && !agentFormGroup?.valid"
                       class="next-button"
-                      data-orb-qa-id="next"
+                      data-orb-qa-id="button#next"
                       nbButton
                       nbStepperNext
                       shape="round"
                       status="primary"
-                      type="submit">Next
+                      type="submit">
+                {{ strings.stepper.next }}
               </button>
             </div>
           </form>
@@ -142,22 +152,30 @@ <h4>{{isEdit ? 'Edit Dataset' : 'New Dataset'}}</h4>
             </nb-form-field>
             <hr/>
             <div *ngIf="policyFormGroup" class="d-flex justify-content-end">
-              <button
-                data-orb-qa-id="cancel"
-                ghost
-                nbButton
-                nbStepperPrevious
-                status="primary"
-              >Back
+              <button (click)="goBack()"
+                      data-orb-qa-id="button#cancel"
+                      ghost
+                      nbButton
+                      status="primary"
+                      type="button">
+                {{ strings.stepper.cancel }}
+              </button>
+              <button data-orb-qa-id="button#back"
+                      ghost
+                      nbButton
+                      nbStepperPrevious
+                      status="primary">
+                {{ strings.stepper.back }}
               </button>
               <button [disabled]="!isEdit && !policyFormGroup?.valid"
                       class="next-button"
-                      data-orb-qa-id="next"
+                      data-orb-qa-id="button#next"
                       nbButton
                       nbStepperNext
                       shape="round"
                       status="primary"
-                      type="submit">Next
+                      type="submit">
+                {{ strings.stepper.next }}
               </button>
             </div>
           </form>
@@ -218,23 +236,30 @@ <h4>{{isEdit ? 'Edit Dataset' : 'New Dataset'}}</h4>
             <hr/>
             <div *ngIf="sinkFormGroup" class="d-flex justify-content-start"
                  style="padding-left: 35%;">
-              <button
-                data-orb-qa-id="back"
-                ghost
-                nbButton
-                nbStepperPrevious
-                status="primary">
-                Back
+              <button (click)="goBack()"
+                      data-orb-qa-id="button#cancel"
+                      ghost
+                      nbButton
+                      status="primary"
+                      type="button">
+                {{ strings.stepper.cancel }}
+              </button>
+              <button data-orb-qa-id="button#back"
+                      ghost
+                      nbButton
+                      nbStepperPrevious
+                      status="primary">
+                {{ strings.stepper.back }}
               </button>
               <button [disabled]="selectedSinks.length === 0"
                       class="next-button"
-                      data-orb-qa-id="next"
+                      data-orb-qa-id="button#next"
                       nbButton
                       nbStepperNext
                       shape="round"
                       status="primary"
                       type="submit">
-                Next
+                {{ strings.stepper.next }}
               </button>
             </div>
           </form>
@@ -285,20 +310,29 @@ <h4>{{isEdit ? 'Edit Dataset' : 'New Dataset'}}</h4>
           </div>
           <hr/>
           <div *ngIf="sinkFormGroup" class="d-flex justify-content-end">
-            <button
-              data-orb-qa-id="previous"
-              ghost
-              nbButton
-              nbStepperPrevious
-              status="primary">Back
+            <button (click)="goBack()"
+                    data-orb-qa-id="button#cancel"
+                    ghost
+                    nbButton
+                    status="primary"
+                    type="button">
+              {{ strings.stepper.cancel }}
+            </button>
+            <button data-orb-qa-id="button#back"
+                    ghost
+                    nbButton
+                    nbStepperPrevious
+                    status="primary">
+              {{ strings.stepper.back }}
             </button>
             <button (click)="onFormSubmit()"
                     class="next-button"
-                    data-orb-qa-id="next"
+                    data-orb-qa-id="button#save"
                     nbButton
                     shape="round"
                     status="primary"
-                    type="submit">Save
+                    type="submit">
+              {{ strings.stepper.save }}
             </button>
           </div>
         </nb-step>

diff --git a/ui/src/app/pages/datasets/add/dataset.add.component.ts b/ui/src/app/pages/datasets/add/dataset.add.component.ts
@@ -12,6 +12,7 @@ import { OrbPagination } from 'app/common/interfaces/orb/pagination.interface';
 import { AgentGroup } from 'app/common/interfaces/orb/agent.group.interface';
 import { AgentPolicy } from 'app/common/interfaces/orb/agent.policy.interface';
 import { Sink } from 'app/common/interfaces/orb/sink.interface';
+import { STRINGS } from '../../../../assets/text/strings';
 
 const CONFIG = {
   SINKS: 'SINKS',
@@ -26,6 +27,9 @@ const CONFIG = {
   styleUrls: ['./dataset.add.component.scss'],
 })
 export class DatasetAddComponent {
+  // page vars
+  strings = {stepper: STRINGS.stepper};
+
   // stepper form groups
   detailsFormGroup: FormGroup;
 

diff --git a/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.html b/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.html
@@ -52,22 +52,23 @@ <h4>{{ isEdit ? 'Edit Agent Policy' : 'Create Agent Policy'}}</h4>
           </form>
           <hr/>
           <div class="d-flex justify-content-end">
-            <button
-              (click)="goBack()"
-              data-orb-qa-id="cancel"
-              ghost
-              nbButton
-              status="primary"
-              type="button">Cancel
+            <button (click)="goBack()"
+                    data-orb-qa-id="button#cancel"
+                    ghost
+                    nbButton
+                    status="primary"
+                    type="button">
+              {{ strings.stepper.cancel }}
             </button>
             <button [disabled]="!detailsFG?.valid"
                     class="next-button"
-                    data-orb-qa-id="next"
+                    data-orb-qa-id="button#next"
                     nbButton
                     nbStepperNext
                     shape="round"
                     status="primary"
-                    type="submit">Next
+                    type="submit">
+              {{ strings.stepper.next }}
             </button>
           </div>
         </nb-step>
@@ -262,22 +263,31 @@ <h4>{{ isEdit ? 'Edit Agent Policy' : 'Create Agent Policy'}}</h4>
             </form>
           </div>
           <div class="d-flex justify-content-end">
-            <button
-              data-orb-qa-id="cancel"
-              ghost
-              nbButton
-              nbStepperPrevious
-              status="primary"
-              type="button">Back
+            <button (click)="goBack()"
+                    data-orb-qa-id="button#cancel"
+                    ghost
+                    nbButton
+                    status="primary"
+                    type="button">
+              {{ strings.stepper.cancel }}
+            </button>
+            <button data-orb-qa-id="button#back"
+                    ghost
+                    nbButton
+                    nbStepperPrevious
+                    status="primary"
+                    type="button">
+              {{ strings.stepper.back }}
             </button>
             <button [disabled]="!tapFG?.valid"
                     class="next-button"
-                    data-orb-qa-id="next"
+                    data-orb-qa-id="button#next"
                     nbButton
                     nbStepperNext
                     shape="round"
                     status="primary"
-                    type="submit">Next
+                    type="submit">
+              {{ strings.stepper.next }}
             </button>
           </div>
         </nb-step>
@@ -325,24 +335,24 @@ <h4>{{ isEdit ? 'Edit Agent Policy' : 'Create Agent Policy'}}</h4>
           <div class="d-flex justify-content-start"
                style="padding-left: 35%;">
             <button
-              data-orb-qa-id="back"
+              data-orb-qa-id="button#back"
               ghost
               nbButton
               nbStepperPrevious
               status="primary">
-              Back
+              {{ strings.stepper.back }}
             </button>
             <button (click)="onFormSubmit()"
                     [disabled]="modules.length === 0"
                     class="next-button"
-                    data-orb-qa-id="next"
+                    data-orb-qa-id="button#save"
                     nbButton
                     nbStepperNext
                     nbTooltip="At least one handler must be configure and added to the policies."
                     shape="round"
                     status="primary"
                     type="submit">
-              Save
+              {{ strings.stepper.save }}
             </button>
           </div>
         </nb-step>

diff --git a/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.ts b/ui/src/app/pages/datasets/policies.agent/add/agent.policy.add.component.ts
@@ -9,6 +9,7 @@ import { AgentPoliciesService } from 'app/common/services/agents/agent.policies.
 import { PolicyTap } from 'app/common/interfaces/orb/policy/policy.tap.interface';
 import { NbDialogService } from '@nebular/theme';
 import { HandlerPolicyAddComponent } from 'app/pages/datasets/policies.agent/add/handler.policy.add.component';
+import { STRINGS } from '../../../../../assets/text/strings';
 
 const CONFIG = {
   TAPS: 'TAPS',
@@ -24,6 +25,9 @@ const CONFIG = {
   styleUrls: ['./agent.policy.add.component.scss'],
 })
 export class AgentPolicyAddComponent {
+  // page vars
+  strings = {stepper: STRINGS.stepper};
+
   // #forms
   // agent policy general information - name, desc, backend
   detailsFG: FormGroup;