Merge pull request #148 from iver-wharf/fix-quick-run-dropdown

Fix click on stage specific dropdown run options

CHANGELOG.md

@@ -14,6 +14,9 @@ This project tries to follow [SemVer 2.0.0](https://semver.org/).
 
 ## v1.6.2 (WIP)
 
+- Fixed an issue where input was being ignored on a dropdown for 
+  selecting a specific build stage to run. (#148)
+
 - Fixed log not streaming. (#147)
 
 ## v1.6.1 (2022-05-10)

src/app/projects/actions-modal/actions-modal.component.ts

@@ -122,7 +122,7 @@ export class ActionsModalComponent implements OnInit, OnDestroy {
       });
     }
     // eslint-disable-next-line no-underscore-dangle
-    this.initialFormState.branch = this.editedProjectInstance.branches.find(o => o._default);
+    this.initialFormState.branch = this.editedProjectInstance.branches?.find(o => o._default) ?? '';
     this.initialFormState.environment =
       this.editedProjectInstance.build.environments[1] // 1 to skip the first noEnvironment
       || this.projectUtilsService.noEnvironment;
@@ -131,6 +131,7 @@ export class ActionsModalComponent implements OnInit, OnDestroy {
     inputsGroup.environment = new FormControl('');
     inputsGroup.engine = new FormControl('');
     this.actionsFormGroup = new FormGroup(inputsGroup);
+    this.initialFormState.engine = this.initialFormState.engine ?? '';
     this.actionsFormGroup.setValue(this.initialFormState);
   }
 
@@ -147,7 +148,7 @@ export class ActionsModalComponent implements OnInit, OnDestroy {
   }
 
   private populateFieldsOfEditableProject() {
-    if (this.project.build.inputs) {
+    if (this.project?.build?.inputs) {
       Object.values(this.project.build.inputs).map((input, index) => {
         const inputField: InputField = {
           default: input.default,
@@ -160,7 +161,7 @@ export class ActionsModalComponent implements OnInit, OnDestroy {
         }
       });
     }
-    if (this.project.build.environments) {
+    if (this.project?.build?.environments) {
       this.populateEnvironments();
     }
   }

src/app/projects/project-details/project-details.component.html

@@ -32,7 +32,7 @@ <h4>{{project.name}}</h4>
           <ng-template pTemplate="side-header-override">
             <p-splitButton *ngIf="project.actions" class="button-container"
               label="{{projectUtilsService.runAllActionName}}"
-              [model]="projectUtilsService.getActionsMenuItems(project)"
+              [model]="buildStageMenuItems"
               (onClick)="projectUtilsService.openActions(projectUtilsService.runAllActionName,project)">
             </p-splitButton>
           </ng-template>

src/app/projects/project-details/project-details.component.ts

@@ -9,6 +9,7 @@ import { ActionsModalStore } from '../actions-modal/actions-modal.service';
 import { ProjectService } from 'api-client';
 import { ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
+import { MenuItem } from 'primeng/api/menuitem';
 
 @Component({
   selector: 'wh-project-details',
@@ -23,6 +24,7 @@ export class ProjectDetailsComponent implements OnInit {
   buildsTotalCount = 0;
   rowsCount = 10;
   destroyed$ = new Subject<void>();
+  buildStageMenuItems: MenuItem[];
 
   constructor(
     public projectUtilsService: ProjectUtilsService,
@@ -47,6 +49,7 @@ export class ProjectDetailsComponent implements OnInit {
     const projectId = this.route.snapshot.paramMap.get('projectId');
     this.projectService.getProject(Number(projectId)).subscribe(project => {
       this.project = project;
+      this.buildStageMenuItems = this.projectUtilsService.getActionsMenuItems(this.project);
       // Temporary initialization to render table, after that loadBuildsLazy handles builds fetching
       this.project.buildHistory = [];
       this.updateTitle();

src/app/projects/project-list/project-list-item.component.html

@@ -1,13 +1,15 @@
-<td class="col-name">{{project.name}}</td>
+<td class="col-name url-link"><a [routerLink]="['/project', project.projectId]">{{project.name}}</a></td>
 <td class="col-group">{{project.groupName}}</td>
 <td class="col-provider">{{providerHostname}}</td>
 <td class="col-status"><span class="not-available">N/A</span></td>
 <td class="col-actions">
-  <p-splitButton *ngIf="projectUtilsService.getActionsMenuItems(project).length > 0"
-    label="{{projectUtilsService.runAllActionName}}" [model]="projectUtilsService.getActionsMenuItems(project)"
+  <p-splitButton
+    [disabled]="!menuItems.length"
+    [pTooltip]="noStagesTooltip"
+    label="{{projectUtilsService.runAllActionName}}"
+    [model]="menuItems"
     (onClick)="projectUtilsService.openActions(projectUtilsService.runAllActionName, project)"
-    (click)="$event.stopPropagation()">
-  </p-splitButton>
+  ></p-splitButton>
 </td>
 <td class="col-quickactions">
   <wh-project-refresh-icon (refreshed)="refreshed.emit($event)" [project]="project"></wh-project-refresh-icon>

src/app/projects/project-list/project-list-item.component.ts

@@ -1,29 +1,46 @@
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+} from '@angular/core';
 import { WharfProject } from 'src/app/models/main-project.model';
 import { NgChanges } from 'src/app/shared/util/ngchanges';
 import { LocalStorageProjectsService } from '../local-storage-projects.service';
 import { ProjectFavoriteClickEvent } from '../project-favorite/project-favorite-button.component';
 import { ProjectRefreshedEvent } from '../project-refresh';
 import { ProjectUtilsService } from '../project-utils.service';
+import { MenuItem } from 'primeng/api/menuitem';
 
 @Component({
   selector: 'wh-project-list-item',
   templateUrl: './project-list-item.component.html',
 })
-export class ProjectListItemComponent implements OnChanges {
+export class ProjectListItemComponent implements OnInit, OnChanges {
   @Input() project: WharfProject;
 
   @Output() refreshed = new EventEmitter<ProjectRefreshedEvent>();
   @Output() favoriteClick = new EventEmitter<ProjectFavoriteClickEvent>();
 
   isRefreshAnimationPlaying: boolean;
   providerHostname: string;
+  menuItems: MenuItem[];
+  noStagesTooltip;
 
   constructor(
     public localStorageProjectsService: LocalStorageProjectsService,
     public projectUtilsService: ProjectUtilsService,
   ) { }
 
+  ngOnInit() {
+    this.menuItems = this.projectUtilsService.getActionsMenuItems(this.project);
+    if (!this.menuItems.length) {
+      this.noStagesTooltip = 'There are no stages for this project!';
+    }
+  }
+
   ngOnChanges(changes: NgChanges<ProjectListItemComponent>): void {
     if (changes.project && this.project?.provider?.url) {
       try {

src/app/projects/project-list/project-list.component.html

@@ -42,8 +42,7 @@
           [project]="project"
           (refreshed)="onProjectRefreshed($event)"
           (favoriteClick)="initFavoriteProjects()"
-          role="button"
-          (click)="onProjectRowClicked($event, project)"></wh-project-list-item>
+        ></wh-project-list-item>
       </ng-template>
     </p-table>
   </ng-template>

src/app/projects/project-list/project-list.component.ts

@@ -61,10 +61,6 @@ export class ProjectListComponent implements OnInit {
     });
   }
 
-  onProjectRowClicked(event: MouseEvent, project: WharfProject) {
-    this.router.navigate(['/project', project.projectId]);
-  }
-
   onProjectRefreshed(event: ProjectRefreshedEvent) {
     this.replaceProject(event.projectId);
   }

src/app/projects/project-utils.service.ts

@@ -21,24 +21,10 @@ export class ProjectUtilsService {
 
   getActionsMenuItems(proj: WharfProject): MenuItem[] {
     if (proj.build != null) {
-      proj.actions = [];
-      return Object.keys(proj.build)
+      const actions: MenuItem[] = Object.keys(proj.build)
         .filter(x => !this.actionsExcludedElements.includes(x))
-        .map((x) => {
-          proj.actions.push({ label: x, value: x });
-          return { label: x, command: () => this.openActions(x, proj) };
-        });
-    }
-    return [];
-  }
-
-  getActionsEnvironments(proj: WharfProject): string[] {
-    if (proj.build != null) {
-      const actions = Object.keys(proj.build || {})
-        .filter(x => !this.actionsExcludedElements.includes(x))
-        .map(x => proj.build[x].environments);
-
-      return [...new Set<string>([].concat.apply([], actions))];
+        .map<MenuItem>(x => ({ label: x, value: x, command: () => this.openActions(x, proj) }));
+      return actions;
     }
     return [];
   }
@@ -47,7 +33,7 @@ export class ProjectUtilsService {
     return [...new Set<string>(Object.keys(proj.build.environments || {}))];
   }
 
-  openActions(label, proj) {
+  openActions(label, proj: WharfProject) {
     this.actionsModalStore.openModal(
       {
         project: proj,

src/scss/project-list-item.component.scss

@@ -134,10 +134,6 @@ body .p-datatable .p-datatable-tbody > wh-project-list-item {
 
   &:hover {
     background-color: $wharf_table_row_hover_background_color;
-
-    &[role="button"] {
-      cursor: pointer;
-    }
   }
 
   > td {