Skip to content

Commit

Permalink
Merged in task/frontend-merge (pull request #1)
Browse files Browse the repository at this point in the history 
Port outstanding changes to new repository

* Techdebt: Added nvmrc file - 8.9.1

* SHIBUI-230: Implemented valid-form-icon component

* SHIBUI-230: Added Validation icon to editor view

* SHIBUI-230: Updated locale file with string for validation icon

* Updated Angular and dependencies, resolved related issues to update

* Removed alert if user is on current invalid page

Approved-by: Ryan Mathis <rmathis@unicon.net>
  • Loading branch information
@rmathis
rmathis committed Mar 6, 2018
1 parent 1fb0278 commit 9d8d3b8
Show file tree
Hide file tree
Showing 22 changed files with 4,488 additions and 1,336 deletions.
1 change: 1 addition & 0 deletions ui/.nvmrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
8.9.1
5,448 changes: 4,260 additions & 1,188 deletions ui/package-lock.json
View file

Large diffs are not rendered by default.

40 changes: 20 additions & 20 deletions ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,36 +14,36 @@
},
"private": true,
"dependencies": {
"@angular/animations": "5.0.5",
"@angular/common": "5.0.5",
"@angular/compiler": "5.0.5",
"@angular/core": "5.0.5",
"@angular/forms": "5.0.5",
"@angular/http": "5.0.5",
"@angular/platform-browser": "5.0.5",
"@angular/platform-browser-dynamic": "5.0.5",
"@angular/router": "5.0.5",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.7",
"@ngrx/effects": "^4.0.5",
"@ngrx/router-store": "^4.0.4",
"@ngrx/store": "^4.0.3",
"bootstrap": "4.0.0-beta.2",
"@angular/animations": "5.2.7",
"@angular/common": "5.2.7",
"@angular/compiler": "5.2.7",
"@angular/core": "5.2.7",
"@angular/forms": "5.2.7",
"@angular/http": "5.2.7",
"@angular/platform-browser": "5.2.7",
"@angular/platform-browser-dynamic": "5.2.7",
"@angular/router": "5.2.7",
"@ng-bootstrap/ng-bootstrap": "^1.0.0",
"@ngrx/effects": "^5.1.0",
"@ngrx/router-store": "^5.0.1",
"@ngrx/store": "^5.1.0",
"bootstrap": "4.0.0",
"core-js": "^2.4.1",
"file-saver": "^1.3.3",
"font-awesome": "^4.7.0",
"rxjs": "^5.5.2",
"@reactivex/rxjs": "^5.5.6",
"xml-formatter": "^1.0.1",
"zone.js": "^0.8.14"
"zone.js": "^0.8.20"
},
"devDependencies": {
"@angular/cli": "1.5.0",
"@angular/compiler-cli": "5.0.5",
"@angular/language-service": "5.0.5",
"@angular/cli": "1.6.7",
"@angular/compiler-cli": "5.2.7",
"@angular/language-service": "5.2.7",
"@types/file-saver": "^1.3.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.6.2",
"jasmine-marbles": "^0.1.0",
"jasmine-spec-reporter": "~4.1.0",
Expand Down
6 changes: 6 additions & 0 deletions ui/src/app/edit-provider/component/valid-form-icon.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<ng-container [ngSwitch]="status">
<ng-container *ngSwitchCase="'INVALID'">
<i class="text-danger fa fa-exclamation-triangle" aria-hidden="true"></i>
</ng-container>
<ng-container *ngSwitchDefault></ng-container>
</ng-container>
12 changes: 12 additions & 0 deletions ui/src/app/edit-provider/component/valid-form-icon.component.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { Component, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';

@Component({
selector: 'valid-form-icon',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './valid-form-icon.component.html'
})
export class ValidFormIconComponent {
@Input() status: string;

constructor() {}
}
22 changes: 19 additions & 3 deletions ui/src/app/edit-provider/container/editor.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</div>
<div class="section-body p-4 border border-top-0 border-info">
<div class="row">
<div class="col-6 d-lg-none">
<div class="col-6 d-lg-none order-1">
<div class="dropdown" ngbDropdown #dropdown="ngbDropdown">
<button
class="btn btn-secondary"
Expand All @@ -18,7 +18,9 @@
aria-expanded="false"
ngbDropdownToggle>
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
<span class="d-inline-block mx-2">{{ (currentPage$ | async).label }}</span>
<span class="d-inline-block mx-2">
<i18n-text [key]="(currentPage$ | async).path"></i18n-text>
</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink" ngbDropdownMenu>
<a *ngFor="let route of editor"
Expand All @@ -29,11 +31,15 @@
[attr.aria-label]="route.path"
role="button">
<i18n-text [key]="route.path"></i18n-text>
<valid-form-icon
*ngIf="invalidForms.indexOf(route.path) > -1"
status="INVALID">
</valid-form-icon>
</a>
</div>
</div>
</div>
<div class="col-6 col-lg-12 text-right">
<div class="col-6 col-lg-3 order-2 text-right">
<button class="btn btn-info"
(click)="save()"
[disabled]="wizardIsInvalid$ | async"
Expand All @@ -48,6 +54,12 @@
<ng-container i18n="@@action--cancel">Cancel</ng-container>
</button>
</div>
<div class="col-xs-12 col-lg-9 order-lg-1 order-3">
<div class="alert alert-danger alert-compact mt-3 mt-lg-0" *ngIf="(wizardIsInvalid$ | async) && (otherPageInvalid$ | async)">
<i class="fa fa-exclamation-triangle fa-lg" aria-hidden="true"></i>
<ng-container i18n-text="@@message--editor-invalid">All forms must be valid before changes can be saved!</ng-container>
</div>
</div>
</div>
<hr />
<div class="row">
Expand All @@ -61,6 +73,10 @@
role="button"
[attr.aria-label]="route.path">
<i18n-text [key]="route.path"></i18n-text>
<valid-form-icon
*ngIf="invalidForms.indexOf(route.path) > -1"
status="INVALID">
</valid-form-icon>
</a>
</nav>
</div>
Expand Down
22 changes: 21 additions & 1 deletion ui/src/app/edit-provider/container/editor.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ import { Store } from '@ngrx/store';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap/modal/modal';

import 'rxjs/add/operator/skip';
import 'rxjs/add/operator/withLatestFrom';
import 'rxjs/add/operator/combineLatest';
import 'rxjs/add/operator/distinctUntilChanged';

import { MetadataProvider } from '../../metadata-provider/model/metadata-provider';
import * as fromProviders from '../../metadata-provider/reducer';
Expand Down Expand Up @@ -57,6 +59,9 @@ export class EditorComponent implements OnInit, OnDestroy {
editor$: Observable<any[]>;
editor: EditorFlowDefinition[];
currentPage$: Observable<any>;
invalidForms$: Observable<string[]>;
invalidForms: string[];
otherPageInvalid$: Observable<boolean>;
saving: boolean;

wizardIsValid$: Observable<boolean>;
Expand Down Expand Up @@ -124,8 +129,9 @@ export class EditorComponent implements OnInit, OnDestroy {

this.statusEmitter
.changeEmitted$
.debounceTime(1)
.takeUntil(this.ngUnsubscribe)
.combineLatest(this.currentPage$, (status: string, page: any) => {
.withLatestFrom(this.currentPage$, (status: string, page: any) => {
return { [page.path]: status };
})
.subscribe(status => {
Expand All @@ -136,6 +142,20 @@ export class EditorComponent implements OnInit, OnDestroy {
.takeUntil(this.ngUnsubscribe)
.skipWhile(() => this.saving)
.subscribe(latest => this.latest = latest);

this.invalidForms$ = this.store.select(fromEditor.getInvalidEditorForms);

this.invalidForms$
.distinctUntilChanged()
.takeUntil(this.ngUnsubscribe)
.subscribe(forms => {
this.invalidForms = forms;
});

this.otherPageInvalid$ = this.invalidForms$
.distinctUntilChanged()
.withLatestFrom(this.currentPage$, (invalid, current) => invalid.filter(key => key !== current.path))
.map(otherInvalid => !!otherInvalid.length);
}

ngOnDestroy(): void {
Expand Down
4 changes: 3 additions & 1 deletion ui/src/app/edit-provider/editor.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { CanDeactivateGuard } from '../core/service/can-deactivate.guard';
import { WizardNavComponent } from './component/wizard-nav.component';
import { WizardEffects } from './effect/wizard.effect';
import { EditorEffects } from './effect/editor.effect';
import { ValidFormIconComponent } from './component/valid-form-icon.component';

export const routes: Routes = [
{
Expand Down Expand Up @@ -57,7 +58,8 @@ export const routes: Routes = [
WizardComponent,
UnsavedDialogComponent,
WizardNavComponent,
DraftComponent
DraftComponent,
ValidFormIconComponent
],
entryComponents: [
UnsavedDialogComponent
Expand Down
9 changes: 4 additions & 5 deletions ui/src/app/edit-provider/reducer/editor.reducer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,10 @@ export function reducer(state = initialState, action: editor.Actions | provider.
}

export const isEditorValid = (state: EditorState) =>
!Object
.keys(state.formStatus)
.some(key => {
return state.formStatus[key] === ('INVALID');
});
!Object.keys(state.formStatus).some(key => state.formStatus[key] === ('INVALID'));
export const isEditorSaved = (state: EditorState) => !Object.keys(state.changes).length;
export const getChanges = (state: EditorState) => state.changes;
export const isEditorSaving = (state: EditorState) => state.saving;
export const getFormStatus = (state: EditorState) => state.formStatus;
export const getInvalidForms = (state: EditorState) =>
Object.keys(state.formStatus).filter(key => state.formStatus[key] === 'INVALID');
2 changes: 2 additions & 0 deletions ui/src/app/edit-provider/reducer/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,5 @@ export const getEditorIsValid = createSelector(getEditorState, fromEditor.isEdit
export const getEditorIsSaved = createSelector(getEditorState, fromEditor.isEditorSaved);
export const getEditorChanges = createSelector(getEditorState, fromEditor.getChanges);
export const getEditorIsSaving = createSelector(getEditorState, fromEditor.isEditorSaving);
export const getFormStatus = createSelector(getEditorState, fromEditor.getFormStatus);
export const getInvalidEditorForms = createSelector(getEditorState, fromEditor.getInvalidForms);
9 changes: 4 additions & 5 deletions ui/src/app/metadata-provider/component/forms/advanced-info-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,10 @@
role="textbox"/>
</div>
<div class="form-group">
<label class="custom-control custom-checkbox custom-control-reverse" for="serviceEnabled" aria-label="Enable this service?">
<input class="custom-control-input" type="checkbox" formControlName="serviceEnabled" id="serviceEnabled" name="serviceEnabled" role="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description" i18n="@@label--enable-this-service">Enable this service?</span>
</label>
<div class="custom-control custom-checkbox custom-control-inline custom-control-reverse" for="serviceEnabled">
<input disableValidation="true" class="custom-control-input" type="checkbox" formControlName="serviceEnabled" id="serviceEnabled" name="serviceEnabled" role="checkbox">
<label class="custom-control-label" i18n="@@label--enable-this-service" for="serviceEnabled" aria-label="Enable this service?">Enable this service?</label>
</div>
</div>
<div formGroupName="organization">
<div class="form-group clearfix">
Expand Down
22 changes: 11 additions & 11 deletions ui/src/app/metadata-provider/component/forms/assertion-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
</div>
</div>
<div class="col">
<div class="form-check form-check-inline">
<div class="form-check">
<fieldset aria-label="Mark this assertion consumer service endpoint as the default?">
<label class="d-block">
<ng-container i18n="@@label--mark-as-default">Mark as Default</ng-container>
Expand All @@ -80,17 +80,17 @@
i18n-aria-label="@@tooltip--instruction"
aria-label="Information icon - press spacebar to read additional information for this form field"></i>
</label>
<label class="custom-control custom-checkbox">
<div class="custom-control custom-checkbox">
<input type="checkbox"
class="custom-control-input"
(click)="markAsDefault(endpoint)"
[checked]="endpoint.get('makeDefault').value"
name="defaultEndpoint"
aria-checked="false"
role="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description" i18n="@@label--yes">Yes</span>
</label>
id="markAsDefault"
class="custom-control-input"
(click)="markAsDefault(endpoint)"
[checked]="endpoint.get('makeDefault').value"
name="defaultEndpoint"
aria-checked="false"
role="checkbox">
<label class="custom-control-label" for="markAsDefault" i18n="@@label--yes">Yes</label>
</div>
</fieldset>
</div>
</div>
Expand Down
22 changes: 11 additions & 11 deletions ui/src/app/metadata-provider/component/forms/attribute-release-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,18 @@
<td scope="col">{{ attr.label }}</td>
<td scope="col">
<fieldset>
<label class="custom-control custom-checkbox">
<div class="custom-control custom-checkbox">
<input type="checkbox"
class="custom-control-input"
(change)="onCheck($event, attr.key)"
[checked]="isChecked(attr.key)"
[attr.name]="attr.label"
[attr.aria-label]="attr.label"
role="checkbox"
aria-checked="false" />
<span class="custom-control-indicator"></span>
<span class="custom-control-description"></span>
</label>
class="custom-control-input"
(change)="onCheck($event, attr.key)"
[checked]="isChecked(attr.key)"
id="input-{{ i }}"
[attr.name]="attr.label"
[attr.aria-label]="attr.label"
role="checkbox"
aria-checked="false"/>
<label class="custom-control-label" for="input-{{ i }}"></label>
</div>
</fieldset>
</td>
</tr>
Expand Down
11 changes: 6 additions & 5 deletions ui/src/app/metadata-provider/component/forms/finish-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
<fieldset class="col-xl-6 form-section">
<section class="entity-section">
<div class="form-group">
<label class="custom-control custom-checkbox custom-control-reverse">
<input class="custom-control-input" type="checkbox" formControlName="serviceEnabled" >
<span class="custom-control-indicator"></span>
<span class="custom-control-description" i18n="@@label--enable-this-service-opon-saving">Enable this service upon saving?</span>
</label>
<div class="custom-control custom-checkbox custom-control-inline custom-control-reverse">
<input class="custom-control-input" type="checkbox" id="serviceEnabled" formControlName="serviceEnabled">
<label class="custom-control-label"
i18n="@@label--enable-this-service-opon-saving"
for="serviceEnabled">Enable this service upon saving?</label>
</div>
<ng-template #tooltipEnableThisServiceUponSaving i18n="@@tooltip--enable-this-service-upon-saving">Enable this service upon saving popover</ng-template>
<i class="info-icon fa fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipEnableThisServiceUponSaving"
Expand Down
Loading

0 comments on commit 9d8d3b8

Please sign in to comment.