Merge pull request #3288 from cloudfoundry-incubator/form-autofocus-r…

…eturn

Improve focus & tabbing

src/frontend/app/features/applications/create-application/create-application-step2/create-application-step2.component.scss

@@ -0,0 +1,3 @@
+:host {
+  flex: 1;
+}

src/frontend/app/features/applications/create-application/create-application.component.spec.ts

@@ -10,9 +10,11 @@ import { CoreModule } from '../../../core/core.module';
 import {
   CreateApplicationStep1Component,
 } from '../../../shared/components/create-application/create-application-step1/create-application-step1.component';
+import { FocusDirective } from '../../../shared/components/focus.directive';
 import { PageHeaderModule } from '../../../shared/components/page-header/page-header.module';
 import { StatefulIconComponent } from '../../../shared/components/stateful-icon/stateful-icon.component';
 import { SteppersModule } from '../../../shared/components/stepper/steppers.module';
+import { CloudFoundryService } from '../../../shared/data-services/cloud-foundry.service';
 import { EntityMonitorFactory } from '../../../shared/monitors/entity-monitor.factory.service';
 import { InternalEventMonitorFactory } from '../../../shared/monitors/internal-event-monitor.factory';
 import { PaginationMonitorFactory } from '../../../shared/monitors/pagination-monitor.factory';
@@ -21,7 +23,6 @@ import { AppNameUniqueDirective } from '../app-name-unique.directive/app-name-un
 import { CreateApplicationStep2Component } from './create-application-step2/create-application-step2.component';
 import { CreateApplicationStep3Component } from './create-application-step3/create-application-step3.component';
 import { CreateApplicationComponent } from './create-application.component';
-import { CloudFoundryService } from '../../../shared/data-services/cloud-foundry.service';
 
 describe('CreateApplicationComponent', () => {
   let component: CreateApplicationComponent;
@@ -35,7 +36,8 @@ describe('CreateApplicationComponent', () => {
         CreateApplicationStep2Component,
         CreateApplicationStep3Component,
         AppNameUniqueDirective,
-        StatefulIconComponent
+        StatefulIconComponent,
+        FocusDirective
       ],
       imports: [
         CommonModule,

src/frontend/app/features/applications/deploy-application/deploy-application-options-step/deploy-application-options-step.component.html

@@ -66,4 +66,4 @@
       </mat-form-field>
     </div>
   </div>
-</form>
+</form>

src/frontend/app/features/applications/deploy-application/deploy-application-step2/deploy-application-step2.component.html

@@ -41,8 +41,7 @@
             </div>
           </div>
           <mat-form-field>
-            <mat-select class="reset-margin" placeholder="Branch" [disabled]="isRedeploy || !repository || !sourceSelectionForm.controls.projectName.valid" [(ngModel)]="repositoryBranch" name="repositoryBranch" (selectionChange)="updateBranchName($event.value)"
-              required>
+            <mat-select class="reset-margin" placeholder="Branch" [disabled]="isRedeploy || !repository || !sourceSelectionForm.controls.projectName.valid" [(ngModel)]="repositoryBranch" name="repositoryBranch" (selectionChange)="updateBranchName($event.value)" required>
               <mat-option *ngFor="let branch of repositoryBranches$ | async" [value]="branch">
                 {{ branch.name }}
               </mat-option>

src/frontend/app/features/applications/edit-application/edit-application.component.html

@@ -8,27 +8,25 @@ <h1>Edit Application: {{ (applicationService.application$ | async)?.app.entity.n
 </app-page-header>
 <app-steppers cancel="/applications/{{applicationService.cfGuid}}/{{applicationService.appGuid}}">
   <app-step [title]="'Edit Application'" [valid]="editAppForm.valid && editAppForm.dirty" [onNext]="updateApp">
-    <div>
-      <form class="edit-app" [formGroup]="editAppForm" validate class="stepper-form">
-        <mat-form-field class="mat-form-field__spinner">
-          <input matInput placeholder="Application Name" formControlName="name" autocomplete="off">
-          <mat-error *ngIf="editAppForm.controls.name.errors?.required">Application name is required</mat-error>
-          <mat-error *ngIf="editAppForm.controls.name.errors?.appNameTaken">Application name already taken</mat-error>
-          <div class="inline-icon inline-icon__form">
-            <app-stateful-icon [state]="uniqueNameValidator.appApplicationNameUnique.status"></app-stateful-icon>
-          </div>
-        </mat-form-field>
-        <mat-form-field>
-          <input matInput placeholder="Number of Instances" formControlName="instances" type="number">
-        </mat-form-field>
-        <mat-form-field>
-          <input matInput placeholder="Disk Quota (MB)" formControlName="disk_quota" type="number">
-        </mat-form-field>
-        <mat-form-field>
-          <input matInput placeholder="Memory Quota (MB)" formControlName="memory" type="number">
-        </mat-form-field>
-        <mat-slide-toggle class="edit-app__toggler" formControlName="enable_ssh">Enable SSH to Application Instances</mat-slide-toggle>
-      </form>
-    </div>
+    <form [formGroup]="editAppForm" validate class="stepper-form edit-app">
+      <mat-form-field class="mat-form-field__spinner">
+        <input matInput placeholder="Application Name" formControlName="name" autocomplete="off" [appFocus]="true">
+        <mat-error *ngIf="editAppForm.controls.name.errors?.required">Application name is required</mat-error>
+        <mat-error *ngIf="editAppForm.controls.name.errors?.appNameTaken">Application name already taken</mat-error>
+        <div class="inline-icon inline-icon__form">
+          <app-stateful-icon [state]="uniqueNameValidator.appApplicationNameUnique.status"></app-stateful-icon>
+        </div>
+      </mat-form-field>
+      <mat-form-field>
+        <input matInput placeholder="Number of Instances" formControlName="instances" type="number">
+      </mat-form-field>
+      <mat-form-field>
+        <input matInput placeholder="Disk Quota (MB)" formControlName="disk_quota" type="number">
+      </mat-form-field>
+      <mat-form-field>
+        <input matInput placeholder="Memory Quota (MB)" formControlName="memory" type="number">
+      </mat-form-field>
+      <mat-slide-toggle class="edit-app__toggler" formControlName="enable_ssh">Enable SSH to Application Instances</mat-slide-toggle>
+    </form>
   </app-step>
 </app-steppers>

src/frontend/app/features/applications/edit-application/edit-application.component.scss

@@ -1,19 +1,3 @@
 .edit-app {
-  display: flex;
-  flex-direction: column;
-  max-width: 480px;
-  width: 100%;
-
-  &__buttons {
-    text-align: right;
-  }
-
-  &__toggler {
-    margin: 12px 0;
-  }
-
-  &__error {
-    font-weight: 600;
-    padding: 8px;
-  }
+  flex: 1;
 }

src/frontend/app/features/applications/edit-application/edit-application.component.ts

@@ -1,12 +1,10 @@
-
-import { of as observableOf, Observable, Subscription } from 'rxjs';
-
-import { map, filter, take } from 'rxjs/operators';
-import { Component, OnDestroy, OnInit, Inject } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Http } from '@angular/http';
 import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material';
 import { Store } from '@ngrx/store';
+import { Observable, of as observableOf, Subscription } from 'rxjs';
+import { filter, map, take } from 'rxjs/operators';
 
 import { StepOnNextFunction } from '../../../shared/components/stepper/step/step.component';
 import { AppMetadataTypes } from '../../../store/actions/app-metadata.actions';
@@ -15,6 +13,7 @@ import { AppState } from '../../../store/app-state';
 import { AppNameUniqueChecking, AppNameUniqueDirective } from '../app-name-unique.directive/app-name-unique.directive';
 import { ApplicationService } from '../application.service';
 
+
 @Component({
   selector: 'app-edit-application',
   templateUrl: './edit-application.component.html',

src/frontend/app/features/applications/routes/add-routes/add-routes.component.html

@@ -13,7 +13,7 @@
     </div>
     <form class="stepper-form" [formGroup]="domainFormGroup">
       <mat-form-field>
-        <mat-select formControlName="domain" placeholder="Domain" [(ngModel)]="selectedDomain" required>
+        <mat-select formControlName="domain" placeholder="Domain" [(ngModel)]="selectedDomain" required [appFocus]="domains">
           <mat-option *ngFor="let domain of domains" [value]="domain">{{domain?.entity?.name}}</mat-option>
         </mat-select>
       </mat-form-field>

src/frontend/app/features/cloud-foundry/add-organization/create-organization-step/create-organization-step.component.html

@@ -2,7 +2,7 @@
   <div>Specify the name of the new organization</div>
   <form [formGroup]="addOrg" class="stepper-form">
     <mat-form-field>
-      <input matInput formControlName="orgName" placeholder="Organization Name" required>
+      <input matInput formControlName="orgName" placeholder="Organization Name" required [appFocus]="true">
       <mat-error *ngIf="orgName.hasError('nameTaken')">
         An organization with this name already exists. Please enter a different one.
       </mat-error>

src/frontend/app/features/cloud-foundry/add-organization/create-organization-step/create-organization-step.component.scss

@@ -1 +1,3 @@
-
+:host {
+  flex: 1;
+}

src/frontend/app/features/cloud-foundry/add-space/create-space-step/create-space-step.component.html

@@ -2,7 +2,7 @@
   <div>Specify the name of the new space</div>
   <form [formGroup]="createSpaceForm" class="stepper-form">
     <mat-form-field>
-      <input matInput formControlName="spaceName" placeholder="Space Name" required>
+      <input matInput formControlName="spaceName" placeholder="Space Name" required [appFocus]="true">
       <mat-error *ngIf="spaceName.hasError('spaceNameTaken')">
         A space with this name already exists. Please enter a different one.
       </mat-error>

src/frontend/app/features/cloud-foundry/add-space/create-space-step/create-space-step.component.scss

@@ -1 +1,3 @@
-
+:host {
+  flex: 1;
+}

src/frontend/app/features/cloud-foundry/edit-organization/edit-organization-step/edit-organization-step.component.html

@@ -2,7 +2,7 @@
   <div>Specify the new name for the organization </div>
   <form [formGroup]="editOrgName" class="stepper-form">
     <mat-form-field>
-      <input matInput formControlName="orgName" [(ngModel)]="orgName" placeholder="Organization Name" required>
+      <input matInput formControlName="orgName" [(ngModel)]="orgName" placeholder="Organization Name" required [appFocus]="true">
       <mat-error *ngIf="!validate()">
         An organization with this name already exists. Please enter a different one.
       </mat-error>

src/frontend/app/features/cloud-foundry/edit-organization/edit-organization-step/edit-organization-step.component.scss

@@ -0,0 +1,3 @@
+:host {
+  flex: 1;
+}

src/frontend/app/features/cloud-foundry/edit-space/edit-space-step/edit-space-step.component.html

@@ -1,8 +1,8 @@
 <div class="edit-space">
-  <div>Specify the new name for the space: </div>
+  <div>Specify the new name for the space</div>
   <form [formGroup]="editSpaceForm" class="stepper-form">
     <mat-form-field>
-      <input matInput formControlName="spaceName" [(ngModel)]="spaceName" placeholder="Space Name">
+      <input matInput formControlName="spaceName" [(ngModel)]="spaceName" placeholder="Space Name" [appFocus]="true">
       <mat-error *ngIf="!validate()">
         A space with this name already exists. Please enter a different one.
       </mat-error>

src/frontend/app/features/cloud-foundry/edit-space/edit-space-step/edit-space-step.component.scss

@@ -1,3 +1,7 @@
+:host {
+  flex: 1;
+}
+
 .edit-space {
   &__stepper-form {
     &__ssh {

src/frontend/app/shared/components/add-service-instance/add-service-instance/add-service-instance.component.spec.ts

@@ -18,13 +18,15 @@ import { AppChipsComponent } from '../../chips/chips.component';
 import {
   CreateApplicationStep1Component,
 } from '../../create-application/create-application-step1/create-application-step1.component';
+import { FocusDirective } from '../../focus.directive';
 import { MetaCardComponent } from '../../list/list-cards/meta-card/meta-card-base/meta-card.component';
 import { MetaCardItemComponent } from '../../list/list-cards/meta-card/meta-card-item/meta-card-item.component';
 import { MetaCardKeyComponent } from '../../list/list-cards/meta-card/meta-card-key/meta-card-key.component';
 import { MetaCardTitleComponent } from '../../list/list-cards/meta-card/meta-card-title/meta-card-title.component';
 import { MetaCardValueComponent } from '../../list/list-cards/meta-card/meta-card-value/meta-card-value.component';
 import { CfServiceCardComponent } from '../../list/list-types/cf-services/cf-service-card/cf-service-card.component';
 import { MetadataItemComponent } from '../../metadata-item/metadata-item.component';
+import { MultilineTitleComponent } from '../../multiline-title/multiline-title.component';
 import { PageHeaderModule } from '../../page-header/page-header.module';
 import { ServiceIconComponent } from '../../service-icon/service-icon.component';
 import { SteppersModule } from '../../stepper/steppers.module';
@@ -33,7 +35,6 @@ import { SelectPlanStepComponent } from '../select-plan-step/select-plan-step.co
 import { SelectServiceComponent } from '../select-service/select-service.component';
 import { SpecifyDetailsStepComponent } from '../specify-details-step/specify-details-step.component';
 import { AddServiceInstanceComponent } from './add-service-instance.component';
-import { MultilineTitleComponent } from '../../multiline-title/multiline-title.component';
 
 describe('AddServiceInstanceComponent', () => {
   let component: AddServiceInstanceComponent;
@@ -62,7 +63,8 @@ describe('AddServiceInstanceComponent', () => {
         AppChipsComponent,
         ApplicationStateIconComponent,
         ApplicationStateIconPipe,
-        MultilineTitleComponent
+        MultilineTitleComponent,
+        FocusDirective
       ],
       imports: [
         PageHeaderModule,

src/frontend/app/shared/components/add-service-instance/select-plan-step/select-plan-step.component.html

@@ -2,7 +2,7 @@
   <div #noplans></div>
   <form class="stepper-form" [formGroup]="stepperForm">
     <mat-form-field>
-      <mat-select class="form-control" formControlName="servicePlans">
+      <mat-select class="form-control" formControlName="servicePlans" [appFocus]="servicePlans$ | async">
         <mat-option *ngFor="let servicePlan of servicePlans$ | async" [value]="servicePlan.id">{{ servicePlan.name }}</mat-option>
       </mat-select>
     </mat-form-field>

src/frontend/app/shared/components/add-service-instance/select-plan-step/select-plan-step.component.spec.ts

@@ -1,9 +1,11 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
 import { EntityServiceFactory } from '../../../../core/entity-service-factory.service';
 import { BaseTestModulesNoShared } from '../../../../test-framework/cloud-foundry-endpoint-service.helper';
 import { EntityMonitorFactory } from '../../../monitors/entity-monitor.factory.service';
 import { PaginationMonitorFactory } from '../../../monitors/pagination-monitor.factory';
 import { CardStatusComponent } from '../../cards/card-status/card-status.component';
+import { FocusDirective } from '../../focus.directive';
 import { MetadataItemComponent } from '../../metadata-item/metadata-item.component';
 import { CreateServiceInstanceHelperServiceFactory } from '../create-service-instance-helper-service-factory.service';
 import { CsiGuidsService } from '../csi-guids.service';
@@ -20,7 +22,8 @@ describe('SelectPlanStepComponent', () => {
       declarations: [
         SelectPlanStepComponent,
         CardStatusComponent,
-        MetadataItemComponent
+        MetadataItemComponent,
+        FocusDirective
       ],
       imports: [BaseTestModulesNoShared],
       providers: [

src/frontend/app/shared/components/create-application/create-application-step1/create-application-step1.component.html

@@ -1,15 +1,14 @@
 <b>{{ stepperText }}</b>
 <form #cfForm="ngForm" class="create-app-step-1 stepper-form">
   <mat-form-field *ngIf="!isMarketplaceMode">
-    <mat-select #cfSelect="ngModel" [disabled]="(cfOrgSpaceService.cf.loading$ | async)" [ngModel]="cfOrgSpaceService.cf.select.getValue()" (selectionChange)="cfOrgSpaceService.cf.select.next($event.value)" required name="cf" [disabled]="isRedeploy" placeholder="Cloud Foundry">
+    <mat-select #cfSelect="ngModel" [disabled]="(cfOrgSpaceService.cf.loading$ | async)" [ngModel]="cfOrgSpaceService.cf.select.getValue()" (selectionChange)="cfOrgSpaceService.cf.select.next($event.value)" required name="cf" [disabled]="isRedeploy" placeholder="Cloud Foundry" [appFocus]="!(cfOrgSpaceService.cf.loading$ | async)">
       <mat-option *ngFor="let cf of cfOrgSpaceService.cf.list$ | async" [value]="cf.guid">
         <span>{{ cf.name }}</span>
       </mat-option>
     </mat-select>
   </mat-form-field>
   <mat-form-field>
-    <mat-select #orgSelect="ngModel" [disabled]="!cfOrgSpaceService.cf.select.getValue() || (cfOrgSpaceService.org.loading$ | async) || isRedeploy" [ngModel]="cfOrgSpaceService.org.select.getValue()" (selectionChange)="cfOrgSpaceService.org.select.next($event.value)"
-      required placeholder="Organization" name="org">
+    <mat-select #orgSelect="ngModel" [disabled]="!cfOrgSpaceService.cf.select.getValue() || (cfOrgSpaceService.org.loading$ | async) || isRedeploy" [ngModel]="cfOrgSpaceService.org.select.getValue()" (selectionChange)="cfOrgSpaceService.org.select.next($event.value)" required placeholder="Organization" name="org" [appFocus]="isMarketplaceMode && !(!cfOrgSpaceService.cf.select.getValue() || (cfOrgSpaceService.org.loading$ | async) || isRedeploy)">
       <mat-option *ngFor="let org of cfOrgSpaceService.org.list$ | async" [value]="org.guid">
         <span>{{ org.name }}</span>
       </mat-option>
@@ -19,8 +18,7 @@
     </mat-error>
   </mat-form-field>
   <mat-form-field>
-    <mat-select #spaceSelect="ngModel" [disabled]="!cfOrgSpaceService.org.select.getValue() || (cfOrgSpaceService.space.loading$ | async) || isRedeploy" [ngModel]="cfOrgSpaceService.space.select.getValue()" (selectionChange)="cfOrgSpaceService.space.select.next($event.value)"
-      required placeholder="Space" name="space">
+    <mat-select #spaceSelect="ngModel" [disabled]="!cfOrgSpaceService.org.select.getValue() || (cfOrgSpaceService.space.loading$ | async) || isRedeploy" [ngModel]="cfOrgSpaceService.space.select.getValue()" (selectionChange)="cfOrgSpaceService.space.select.next($event.value)" required placeholder="Space" name="space">
       <mat-option *ngFor="let space of spaces$ | async" [value]="space.guid">
         <span>{{ space.name }}</span>
       </mat-option>

src/frontend/app/shared/components/create-application/create-application-step1/create-application-step1.component.scss

@@ -1 +1,3 @@
-.create-app-step-1 {}
+:host {
+  flex: 1;
+}

src/frontend/app/shared/components/create-application/create-application-step1/create-application-step1.component.spec.ts

@@ -4,12 +4,12 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule } from '@ngrx/store';
 
 import { CoreModule } from '../../../../core/core.module';
-import { SharedModule } from '../../../shared.module';
 import { appReducers } from '../../../../store/reducers.module';
-import { CreateApplicationStep1Component } from './create-application-step1.component';
 import { getInitialTestStoreState } from '../../../../test-framework/store-test-helper';
 import { CfOrgSpaceDataService } from '../../../data-services/cf-org-space-service.service';
 import { PaginationMonitorFactory } from '../../../monitors/pagination-monitor.factory';
+import { FocusDirective } from '../../focus.directive';
+import { CreateApplicationStep1Component } from './create-application-step1.component';
 
 describe('CreateApplicationStep1Component', () => {
   let component: CreateApplicationStep1Component;
@@ -19,7 +19,7 @@ describe('CreateApplicationStep1Component', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [CreateApplicationStep1Component],
+      declarations: [CreateApplicationStep1Component, FocusDirective],
       imports: [
         CommonModule,
         CoreModule,

src/frontend/app/shared/components/create-application/create-application-step1/create-application-step1.component.ts

@@ -1,8 +1,8 @@
 import { AfterContentInit, Component, Input, OnInit, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { Store } from '@ngrx/store';
-import { Observable, of as observableOf, asapScheduler } from 'rxjs';
-import { map, startWith, switchMap, withLatestFrom, observeOn } from 'rxjs/operators';
+import { asapScheduler, Observable, of as observableOf } from 'rxjs';
+import { map, observeOn, startWith, switchMap, withLatestFrom } from 'rxjs/operators';
 
 import { ISpace } from '../../../../core/cf-api.types';
 import { PermissionStrings } from '../../../../core/current-user-permissions.config';

src/frontend/app/shared/components/dialog-confirm/dialog-confirm.component.html

@@ -10,8 +10,7 @@ <h1 class="confirm-dialog__header" mat-dialog-title>
   </mat-form-field>
 </div>
 <div mat-dialog-actions class="confirm-dialog__actions">
-  <button color="primary" mat-button (click)="onNoClick()">Cancel</button>
-  <button *ngIf="data.confirm" [color]="data.critical ? 'warn' : 'primary'" mat-button [mat-dialog-close]="true"
-    cdkFocusInitial [innerHtml]="" [disabled]="textToMatch && textToMatch !== matchValue">{{
+  <button color="primary" mat-button (click)="onNoClick()" cdkFocusInitial>Cancel</button>
+  <button *ngIf="data.confirm" [color]="data.critical ? 'warn' : 'primary'" mat-button [mat-dialog-close]="true" [innerHtml]="" [disabled]="textToMatch && textToMatch !== matchValue">{{
     data.confirm }}</button>
-</div>
+</div>