reusable button component (#785)

liimaorg · Nov 6, 2024 · 8444a81 · 8444a81
1 parent da05aa2
commit 8444a81
Show file tree

Hide file tree

Showing 64 changed files with 346 additions and 243 deletions.
diff --git a/AMW_angular/io/src/app/apps/app-add/app-add.component.html b/AMW_angular/io/src/app/apps/app-add/app-add.component.html
@@ -37,14 +37,8 @@
   </div>
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-light" (click)="cancel()" [attr.data-cy]="'button-cancel'">Cancel</button>
-  <button
-    type="button"
-    class="btn btn-primary"
-    [disabled]="hasInvalidFields()"
-    (click)="save()"
-    [attr.data-cy]="'button-save'"
+  <app-button [variant]="'light'" [dataCy]="'button-cancel'" (click)="cancel()">Cancel</app-button>
+  <app-button [variant]="'primary'" [disabled]="hasInvalidFields()" [dataCy]="'button-save'" (click)="save()"
+    >Save</app-button
   >
-    Save
-  </button>
 </div>
diff --git a/AMW_angular/io/src/app/apps/app-add/app-add.component.ts b/AMW_angular/io/src/app/apps/app-add/app-add.component.ts
@@ -7,11 +7,12 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Resource } from '../../resource/resource';
 import { AppCreate } from '../app-create';
 import { ModalHeaderComponent } from '../../shared/modal-header/modal-header.component';
+import { ButtonComponent } from '../../shared/button/button.component';
 
 @Component({
   selector: 'app-app-add',
   standalone: true,
-  imports: [FormsModule, NgSelectModule, ModalHeaderComponent],
+  imports: [FormsModule, NgSelectModule, ModalHeaderComponent, ButtonComponent],
   templateUrl: './app-add.component.html',
 })
 export class AppAddComponent {

diff --git a/AMW_angular/io/src/app/apps/app-server-add/app-server-add.component.html b/AMW_angular/io/src/app/apps/app-server-add/app-server-add.component.html
@@ -16,6 +16,6 @@
   </div>
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-light" (click)="cancel()">Cancel</button>
-  <button type="button" class="btn btn-primary" [disabled]="hasInvalidFields()" (click)="save()">Save</button>
+  <app-button [variant]="'light'" (click)="cancel()">Cancel</app-button>
+  <app-button [variant]="'primary'" [disabled]="hasInvalidFields()" (click)="save()">Save</app-button>
 </div>
diff --git a/AMW_angular/io/src/app/apps/app-server-add/app-server-add.component.ts b/AMW_angular/io/src/app/apps/app-server-add/app-server-add.component.ts
@@ -5,11 +5,12 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { FormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { ModalHeaderComponent } from '../../shared/modal-header/modal-header.component';
+import { ButtonComponent } from '../../shared/button/button.component';
 
 @Component({
   selector: 'app-server-add',
   standalone: true,
-  imports: [FormsModule, NgSelectModule, ModalHeaderComponent],
+  imports: [FormsModule, NgSelectModule, ModalHeaderComponent, ButtonComponent],
   templateUrl: './app-server-add.component.html',
 })
 export class AppServerAddComponent {

diff --git a/AMW_angular/io/src/app/apps/apps-filter/apps-filter.component.html b/AMW_angular/io/src/app/apps/apps-filter/apps-filter.component.html
@@ -18,7 +18,7 @@
       </ng-select>
     </div>
     <div class="col-sm">
-      <button type="submit" class="btn btn-primary mt-4 float-end" (click)="search()">Search</button>
+      <app-button [variant]="'primary'" [additionalClasses]="'mt-4 float-end'" (click)="search()">Search</app-button>
     </div>
   </div>
 </div>
diff --git a/AMW_angular/io/src/app/apps/apps-filter/apps-filter.component.ts b/AMW_angular/io/src/app/apps/apps-filter/apps-filter.component.ts
@@ -4,11 +4,13 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { Release } from '../../settings/releases/release';
 import { FormsModule } from '@angular/forms';
 import { Output, EventEmitter } from '@angular/core';
+import { ButtonComponent } from '../../shared/button/button.component';
+import { IconComponent } from '../../shared/icon/icon.component';
 
 @Component({
   selector: 'app-apps-filter',
   standalone: true,
-  imports: [FormsModule, NgSelectModule],
+  imports: [FormsModule, NgSelectModule, ButtonComponent, IconComponent],
   templateUrl: './apps-filter.component.html',
 })
 export class AppsFilterComponent {

diff --git a/AMW_angular/io/src/app/apps/apps.component.html b/AMW_angular/io/src/app/apps/apps.component.html
@@ -13,15 +13,18 @@
               </div>
               <div class="col-sm">
                 @if (canCreateApp) {
-                <button type="button" class="btn btn-primary float-end" (click)="addApp()" [attr.data-cy]="'button-add-app'">
-                  <app-icon icon="plus-circle"></app-icon>
-                  Add Application
-                </button>
+                <app-button
+                  [variant]="'primary'"
+                  [additionalClasses]="'float-end'"
+                  [dataCy]="'button-add-app'"
+                  (click)="addApp()"
+                  ><app-icon icon="plus-circle"></app-icon> Add Application</app-button
+                >
                 } @if (canCreateAppServer) {
-                <button type="button" class="btn btn-primary float-end" (click)="addServer()" [attr.data-cy]="'button-add-server'">
+                <app-button [variant]="'primary'" [additionalClasses]="'float-end'" (click)="addServer()">
                   <app-icon icon="plus-circle"></app-icon>
-                  Add Application Server
-                </button>
+                  Add Application Server</app-button
+                >
                 }
               </div>
             </div>

diff --git a/AMW_angular/io/src/app/apps/apps.component.ts b/AMW_angular/io/src/app/apps/apps.component.ts
@@ -21,6 +21,7 @@ import { AppAddComponent } from './app-add/app-add.component';
 import { ResourceService } from '../resource/resource.service';
 import { Resource } from '../resource/resource';
 import { AppCreate } from './app-create';
+import { ButtonComponent } from '../shared/button/button.component';
 
 @Component({
   selector: 'app-apps',
@@ -33,6 +34,7 @@ import { AppCreate } from './app-create';
     LoadingIndicatorComponent,
     PageComponent,
     PaginationComponent,
+    ButtonComponent,
   ],
   templateUrl: './apps.component.html',
 })

diff --git a/AMW_angular/io/src/app/deployment/deployment.component.html b/AMW_angular/io/src/app/deployment/deployment.component.html
@@ -144,9 +144,7 @@ <h5 class="environments-title">
           </div>
           <div class="col-sm-2">
             @if (transDeploymentParameter.key && transDeploymentParameter.value) {
-            <button type="button" class="btn btn-secondary" (click)="onAddParam()">
-              <app-icon icon="plus"></app-icon>
-            </button>
+            <app-button [variant]="'secondary'" (click)="onAddParam()"><app-icon icon="plus"></app-icon></app-button>
             }
           </div>
         </div>
@@ -162,9 +160,9 @@ <h5 class="environments-title">
             <input class="form-control" disabled type="text" value="{{ transDepParam.value }}" />
           </div>
           <div class="col-sm-2">
-            <button type="button" class="btn btn-secondary" (click)="onRemoveParam(transDepParam)">
-              <app-icon icon="trash"></app-icon>
-            </button>
+            <app-button [variant]="'secondary'" (click)="onRemoveParam(transDepParam)"
+              ><app-icon icon="trash"></app-icon
+            ></app-button>
           </div>
         </div>
         } }
@@ -185,24 +183,22 @@ <h5 class="environments-title">
 
         <div class="form-group row" [attr.disabled]="isReadyForDeployment() ? null : ''">
           <div class="offset-2 col">
-            <button
-              type="submit"
-              class="btn btn-secondary btn-main"
-              [attr.data-cy]="'btn-request-deployment'"
-              [attr.disabled]="hasPermissionToRequestDeployment ? null : ''"
+            <app-button
+              [variant]="'secondary'"
+              [additionalClasses]="'mb-2 me-2'"
+              [disabled]="!hasPermissionToRequestDeployment"
               (click)="requestDeployment()"
             >
               Request deployment
-            </button>
-            <button
-              type="submit"
-              class="btn btn-primary btn-main"
-              [attr.data-cy]="'btn-deploy'"
-              [attr.disabled]="hasPermissionToDeploy ? null : ''"
+            </app-button>
+            <app-button
+              [variant]="'primary'"
+              [additionalClasses]="'mb-2 me-2'"
+              [disabled]="!hasPermissionToDeploy"
+              [dataCy]="'btn-deploy'"
               (click)="createDeployment()"
+              >Deploy</app-button
             >
-              Deploy
-            </button>
           </div>
         </div>
       </span>

diff --git a/AMW_angular/io/src/app/deployment/deployment.component.ts b/AMW_angular/io/src/app/deployment/deployment.component.ts
@@ -23,6 +23,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { NotificationComponent } from '../shared/elements/notification/notification.component';
 import { LoadingIndicatorComponent } from '../shared/elements/loading-indicator.component';
 import { PageComponent } from '../layout/page/page.component';
+import { ButtonComponent } from '../shared/button/button.component';
 
 @Component({
   selector: 'app-deployment',
@@ -36,6 +37,7 @@ import { PageComponent } from '../layout/page/page.component';
     DateTimePickerComponent,
     IconComponent,
     PageComponent,
+    ButtonComponent,
   ],
 })
 export class DeploymentComponent implements OnInit, AfterViewInit {

diff --git a/AMW_angular/io/src/app/deployments/deployments-edit-modal.component.html b/AMW_angular/io/src/app/deployments/deployments-edit-modal.component.html
@@ -52,5 +52,5 @@
   </span>
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-primary" (click)="doEdit()">Edit</button>
+  <app-button [variant]="'primary'" (click)="doEdit()">Edit</app-button>
 </div>
diff --git a/AMW_angular/io/src/app/deployments/deployments-edit-modal.component.ts b/AMW_angular/io/src/app/deployments/deployments-edit-modal.component.ts
@@ -5,12 +5,14 @@ import { DateTimeModel } from '../shared/date-time-picker/date-time.model';
 import { DateTimePickerComponent } from '../shared/date-time-picker/date-time-picker.component';
 import { FormsModule } from '@angular/forms';
 import { ModalHeaderComponent } from '../shared/modal-header/modal-header.component';
+import { ButtonComponent } from '../shared/button/button.component';
+import { IconComponent } from '../shared/icon/icon.component';
 
 @Component({
   selector: 'app-deployments-edit-modal',
   templateUrl: './deployments-edit-modal.component.html',
   standalone: true,
-  imports: [FormsModule, DateTimePickerComponent, ModalHeaderComponent],
+  imports: [FormsModule, DateTimePickerComponent, ModalHeaderComponent, ButtonComponent, IconComponent],
 })
 export class DeploymentsEditModalComponent {
   @Input() deployments: Deployment[] = [];

diff --git a/AMW_angular/io/src/app/deployments/deployments-list.component.html b/AMW_angular/io/src/app/deployments/deployments-list.component.html
@@ -250,7 +250,7 @@ <h6>state message</h6>
     </div>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-primary" ngbAutofocus (click)="modal.close('Confirm click')">Save</button>
+    <app-button [variant]="'primary'" (click)="modal.close('Confirm click')" ngbAutofocus>Save</app-button>
   </div>
 </ng-template>
 
@@ -277,7 +277,7 @@ <h6>state message</h6>
     </div>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-primary" ngbAutofocus (click)="modal.close('Confirm click')">Confirm</button>
+    <app-button [variant]="'primary'" (click)="modal.close('Confirm click')" ngbAutofocus>Confirm </app-button>
   </div>
 </ng-template>
 
@@ -290,7 +290,7 @@ <h6>state message</h6>
     <p class="text-warning-2">Are you sure that you want to reject this deployment?</p>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-primary" ngbAutofocus (click)="modal.close('Confirm click')">Confirm</button>
+    <app-button [variant]="'primary'" (click)="modal.close('Confirm click')" ngbAutofocus>Confirm </app-button>
   </div>
 </ng-template>
 
@@ -303,6 +303,6 @@ <h6>state message</h6>
     <p class="text-warning-2">Are you sure that you want to cancel this deployment?</p>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-primary" ngbAutofocus (click)="modal.close('Confirm click')">Confirm</button>
+    <app-button [variant]="'primary'" (click)="modal.close('Confirm click')" ngbAutofocus>Confirm </app-button>
   </div>
 </ng-template>
diff --git a/AMW_angular/io/src/app/deployments/deployments-list.component.ts b/AMW_angular/io/src/app/deployments/deployments-list.component.ts
@@ -13,6 +13,7 @@ import { FormsModule } from '@angular/forms';
 import { SortableIconComponent } from '../shared/sortable-icon/sortable-icon.component';
 import { DatePipe } from '@angular/common';
 import { ModalHeaderComponent } from '../shared/modal-header/modal-header.component';
+import { ButtonComponent } from '../shared/button/button.component';
 
 @Component({
   selector: 'app-deployments-list',
@@ -26,6 +27,7 @@ import { ModalHeaderComponent } from '../shared/modal-header/modal-header.compon
     DateTimePickerComponent,
     DatePipe,
     ModalHeaderComponent,
+    ButtonComponent,
   ],
 })
 export class DeploymentsListComponent {

diff --git a/AMW_angular/io/src/app/deployments/deployments.component.html b/AMW_angular/io/src/app/deployments/deployments.component.html
@@ -82,57 +82,53 @@
           </div>
           } }
           <div class="col-sm-1">
-            <button type="button" class="btn btn-link" (click)="removeFilter(filter)">
-              <app-icon icon="trash"></app-icon>
-            </button>
+            <app-button [variant]="'link'" (click)="removeFilter(filter)"
+              ><app-icon icon="trash"></app-icon
+            ></app-button>
           </div>
         </div>
         } }
 
         <div class="form-group row">
           <div class="col-sm-11 offset-1">
-            <button type="submit" class="btn btn-primary btn-main" (click)="applyFilters()">Apply filter</button>
-            <button
-              type="submit"
-              class="btn btn-danger btn-main"
-              [attr.disabled]="filters.length < 1 ? '' : null"
+            <app-button [variant]="'primary'" [additionalClasses]="'mb-2 me-2'" (click)="applyFilters()"
+              >Apply filter</app-button
+            >
+            <app-button
+              [variant]="'danger'"
+              [additionalClasses]="'mb-2 me-2'"
+              [disabled]="filters.length < 1"
               (click)="clearFilters()"
             >
-              Clear filters
-            </button>
-            <button
-              class="btn btn-secondary btn-main"
-              [attr.disabled]="filters.length < 1 ? '' : null"
+              Clear filters</app-button
+            >
+            <app-button
+              [variant]="'secondary'"
+              [additionalClasses]="'mb-2 me-2'"
+              [disabled]="filters.length < 1"
               (click)="copyURL()"
+              ><app-icon icon="clipboard"></app-icon> Clipboard</app-button
             >
-              <app-icon icon="clipboard"></app-icon>
-              Clipboard
-            </button>
-            <button
-              type="submit"
-              class="btn btn-secondary btn-main"
-              [attr.disabled]="deployments.length < 1 ? '' : null"
+            <app-button
+              [variant]="'secondary'"
+              [additionalClasses]="'mb-2 me-2'"
+              [disabled]="deployments.length < 1"
               (click)="exportCSV()"
+              ><app-icon icon="cloud-arrow-down"></app-icon> Export</app-button
             >
-              <app-icon icon="cloud-arrow-down"></app-icon>
-              Export
-            </button>
-            <button
-              type="submit"
-              class="btn btn-secondary btn-main"
-              [attr.disabled]="editableDeployments() ? null : ''"
+            <app-button
+              [variant]="'secondary'"
+              [additionalClasses]="'mb-2 me-2'"
+              [disabled]="!editableDeployments()"
               (click)="showEdit()"
+              ><app-icon icon="pencil-square"></app-icon> Edit</app-button
             >
-              <app-icon icon="pencil-square"></app-icon>
-              Edit
-            </button>
             @if (hasPermissionToRequestDeployments) {
 
             <a href="#/deployment/">
-              <button type="submit" class="btn btn-secondary btn-main" data-cy="create-button ">
-                <app-icon icon="plus-circle"></app-icon>
-                Create
-              </button>
+              <app-button [variant]="'secondary'" [additionalClasses]="'mb-2 me-2'" [dataCy]="'create-button'"
+                ><app-icon icon="plus-circle"></app-icon> Create</app-button
+              >
             </a>
 
             }

diff --git a/AMW_angular/io/src/app/deployments/deployments.component.ts b/AMW_angular/io/src/app/deployments/deployments.component.ts
@@ -22,6 +22,7 @@ import { NotificationComponent } from '../shared/elements/notification/notificat
 import { LoadingIndicatorComponent } from '../shared/elements/loading-indicator.component';
 import { PageComponent } from '../layout/page/page.component';
 import { ToastService } from '../shared/elements/toast/toast.service';
+import { ButtonComponent } from '../shared/button/button.component';
 
 declare let $: any;
 
@@ -38,6 +39,7 @@ declare let $: any;
     DeploymentsListComponent,
     PaginationComponent,
     PageComponent,
+    ButtonComponent,
   ],
 })
 export class DeploymentsComponent implements OnInit {

diff --git a/AMW_angular/io/src/app/deployments/deployments.scss b/AMW_angular/io/src/app/deployments/deployments.scss
@@ -48,14 +48,6 @@ span.state {
   margin-left: 8px;
 }
 
-/*
- * Nicer alignment of large buttons when they are getting wrapped
- */
-.btn-main {
-  margin-bottom: 0.5rem;
-  margin-right: 0.5rem;
-}
-
 /*
  * Nicer alignment of label after selection
  */