Merge pull request #4183 from cloudfoundry/app-deploy-ui-tidy

App Deploy: Tidy up UI

src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.html

@@ -59,6 +59,14 @@
         <app-card-app-uptime></app-card-app-uptime>
       </app-tile>
     </app-tile-group>
+    <app-tile-group *ngIf="appSvc.app.entity.staging_failed_description as errorMsg">
+      <app-tile>
+        <mat-card class="summary__staging-error">
+          <mat-icon class="text-warning">warning</mat-icon>
+          <div>{{ errorMsg }}</div>
+        </mat-card>
+      </app-tile>
+    </app-tile-group>
     <app-tile-group>
       <app-tile>
         <mat-card>

src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.scss

@@ -29,6 +29,14 @@
       justify-content: flex-end;
     }
   }
+  &__staging-error {
+    align-items: center;
+    display: flex;
+
+    mat-icon {
+      margin-right: 8px;
+    }
+  }
 }
 
 .app-metadata {

src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step3/deploy-application-step3.component.html

@@ -1,4 +1,4 @@
-<div class="deploy-app">
+<div class="deploy-app" *ngIf="showOverlay$ | async">
   <div class="deploy-app__title">{{ deployer ? deployer.streamTitle : 'Pending' }}</div>
   <mat-progress-spinner *ngIf="deployer && deployer.deploying" diameter="20" mode="indeterminate">
   </mat-progress-spinner>

src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step3/deploy-application-step3.component.scss

@@ -1,13 +1,17 @@
 :host {
   height: 100%;
+  position: relative;
   width: 100%;
 }
 
 .deploy-app {
   display: flex;
   height: 43px;
+  opacity: .9;
   padding: 12px;
+  position: absolute;
   width: 100%;
+  z-index: 1;
   &__title {
     flex: 1;
     font-weight: 600;
@@ -17,7 +21,7 @@
   }
   &__log {
     display: flex;
-    height: calc(100% - 43px);
+    height: 100%;
   }
 }
 

src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step3/deploy-application-step3.component.ts

@@ -34,6 +34,8 @@ export class DeployApplicationStep3Component implements OnDestroy {
   // Validation observable
   valid$: Observable<boolean>;
 
+  showOverlay$: Observable<boolean>;
+
   error$ = new BehaviorSubject<boolean>(false);
   // Observable for when the deploy modal can be closed
   closeable$: Observable<boolean>;
@@ -43,10 +45,13 @@ export class DeployApplicationStep3Component implements OnDestroy {
   private deploySub: Subscription;
   private errorSub: Subscription;
   private validSub: Subscription;
+  private busySub: Subscription;
 
   private appEnvVarCatalogEntity = entityCatalog.getEntity(CF_ENDPOINT_TYPE, appEnvVarsEntityType);
   private appCatalogEntity = entityCatalog.getEntity(CF_ENDPOINT_TYPE, applicationEntityType);
 
+  public busy = false;
+
   constructor(
     private store: Store<CFAppState>,
     private snackBar: MatSnackBar,
@@ -97,10 +102,18 @@ export class DeployApplicationStep3Component implements OnDestroy {
           return validated || status.error;
         })
       );
+
+    this.busySub = this.deployer.status$.subscribe(status => this.busy = status.deploying);
+
+    this.showOverlay$ = this.deployer.status$.pipe(
+      map(status => {
+        return !status.deploying || status.deploying && !this.deployer.streamTitle;
+      })
+    );
   }
 
   private destroyDeployer() {
-    safeUnsubscribe(this.deploySub, this.errorSub, this.validSub);
+    safeUnsubscribe(this.deploySub, this.errorSub, this.validSub, this.busySub);
   }
 
   ngOnDestroy() {
@@ -145,6 +158,7 @@ export class DeployApplicationStep3Component implements OnDestroy {
       // Ask the existing deployer to continue deploying
       this.deployer.deploy();
     }
+    this.busy = true;
   }
 
   onNext: StepOnNextFunction = () => {

src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application.component.html

@@ -25,7 +25,7 @@ <h1>{{ getTitle() }}</h1>
     <app-deploy-application-options-step #step4></app-deploy-application-options-step>
   </app-step>
   <app-step [title]="deployButtonText" [valid]="step3.valid$ | async" [canClose]="step3.closeable$ | async"
-    disablePrevious=true cancelButtonText="Close" [onEnter]="step3.onEnter" [onNext]="step3.onNext"
+    disablePrevious=true cancelButtonText="Close" [onEnter]="step3.onEnter" [onNext]="step3.onNext" [blocked]="step3.busy"
     finishButtonText="Go to App Summary">
     <app-deploy-application-step3 [appGuid]="appGuid" #step3></app-deploy-application-step3>
   </app-step>

src/frontend/packages/core/sass/mat-desktop.scss

@@ -50,4 +50,18 @@ $desktop-toggle-button-item-height: $desktop-menu-item-height - 2px;
     // need to make font size bigger so that it is scaled back down to reasonable size by the exiting css transform
     font-size: 16px;
   }
+
+  // Drop down options
+  .mat-option {
+    font-size: $desktop-font-size;
+    height: $desktop-menu-item-height;
+    line-height: $desktop-menu-item-height;
+  }
+
+  // Stepper control
+  .steppers__headers {
+    flex: 0 0 56px;
+    font-size: $desktop-font-size;
+    height: 56px;
+  }
 }

src/frontend/packages/core/src/shared/components/list/list-types/github.ghproxy.topmits/github.ghproxy.topmits-list-config-deploy.service.ts

@@ -25,7 +25,7 @@ export class GithubCommitsListConfigServiceDeploy extends GithubCommitsListConfi
       headerCell: () => '',
       cellComponent: TableCellRadioComponent,
       class: 'table-column-select',
-      cellFlex: '1'
+      cellFlex: '0 0 60px'
     });
 
     this.store.select<DeployApplicationSource>(selectApplicationSource).pipe(
@@ -44,6 +44,15 @@ export class GithubCommitsListConfigServiceDeploy extends GithubCommitsListConfi
       this.dataSource = new GithubCommitsDataSource(this.store,
         this, scm, fetchDetails.projectName, fetchDetails.sha, fetchDetails.commitSha);
       this.initialised.next(true);
+
+      // Auto-select first commit - wait for page to load, select first item if present
+      this.dataSource.page$.pipe(
+        first()
+      ).subscribe(rs => {
+        if (rs && rs.length > 0) {
+          this.dataSource.selectedRowToggle(rs[0], false);
+        }
+      });
     });
   }
 }

src/frontend/packages/core/src/shared/components/log-viewer/log-viewer.component.scss

@@ -34,7 +34,7 @@
   border-style: solid;
   border-width: 1px;
   font-family: 'Source Code Pro', monospace;
-  font-size: 11.25pt;
+  font-size: 10pt;
   height: 100%;
   line-height: 20px;
   overflow-x: hidden;

src/test-e2e/application/application-deploy-helper.ts

@@ -182,7 +182,8 @@ export function createApplicationDeployTests(type = CREATE_APP_DEPLOY_TEST_TYPE.
       const commits = deployApp.getCommitList();
       expect(commits.getHeaderText()).toBe('Select a commit');
 
-      expect(deployApp.stepper.canNext()).toBeFalsy();
+      // The first commit should be auto-selected
+      expect(deployApp.stepper.canNext()).toBeTruthy();
 
       commits.getTableData().then(data => {
         expect(data.length).toBeGreaterThan(0);