Merged in feature/SHIBUI-599 (pull request #156)

SHIBUI-599 Implemented saving loader on provider/source Approved-by: Shibui Jenkins <shibui.jenkins@gmail.com> Approved-by: Ryan Mathis <rmathis@unicon.net>
TIER · Aug 14, 2018 · cf7f219 · cf7f219
1 parent b264e32
commit cf7f219
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 8 deletions.
diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.html b/ui/src/app/metadata/provider/container/provider-edit.component.html
@@ -18,10 +18,14 @@
             <div class="col-6 col-lg-3 order-2 text-right">
                 <button class="btn btn-info"
                     (click)="save()"
-                    [disabled]="isInvalid$ | async"
+                    [disabled]="(isInvalid$ | async) || (isSaving$ | async)"
                     aria-label="Save changes to the metadata source. You will return to the dashboard"
                     role="button">
-                    <i class="fa fa-fw fa-save"></i>
+                    <i class="fa fa-fw fa-lg" [ngClass]="{
+                        'fa-save': !(isSaving$ | async),
+                        'fa-spinner': (isSaving$ | async),
+                        'fa-pulse': (isSaving$ | async)
+                    }"></i>
                     <ng-container i18n="@@action--save">Save</ng-container>
                 </button>
                 &nbsp;

diff --git a/ui/src/app/metadata/provider/container/provider-edit.component.ts b/ui/src/app/metadata/provider/container/provider-edit.component.ts
@@ -33,6 +33,7 @@ export class ProviderEditComponent implements OnDestroy, CanComponentDeactivate
     valid$: Observable<boolean>;
     isInvalid$: Observable<boolean>;
     status$: Observable<any>;
+    isSaving$: Observable<boolean>;
 
     latest: MetadataProvider;
     provider: MetadataProvider;
@@ -52,6 +53,7 @@ export class ProviderEditComponent implements OnDestroy, CanComponentDeactivate
         this.valid$ = this.store.select(fromProvider.getEditorIsValid);
         this.isInvalid$ = this.valid$.pipe(map(v => !v));
         this.status$ = this.store.select(fromProvider.getInvalidEditorForms);
+        this.isSaving$ = this.store.select(fromProvider.getEntityIsSaving);
 
         let startIndex$ = this.route.firstChild ?
             this.route.firstChild.params.pipe(map(p => p.form || 'filters')) :

diff --git a/ui/src/app/metadata/provider/container/provider-wizard.component.ts b/ui/src/app/metadata/provider/container/provider-wizard.component.ts
@@ -86,6 +86,7 @@ export class ProviderWizardComponent implements OnDestroy {
     }
 
     save(): void {
+        this.store.dispatch(new SetDisabled(true));
         this.store.dispatch(new AddProviderRequest(this.provider));
     }
 

diff --git a/ui/src/app/metadata/provider/reducer/entity.reducer.spec.ts b/ui/src/app/metadata/provider/reducer/entity.reducer.spec.ts
@@ -1,6 +1,15 @@
 import { reducer, initialState as snapshot, isEntitySaved } from './entity.reducer';
 import { EntityActionTypes, ClearProvider } from '../action/entity.action';
 import { MetadataProvider } from '../../domain/model';
+import {
+    ProviderCollectionActionTypes,
+    UpdateProviderRequest,
+    AddProviderRequest,
+    UpdateProviderSuccess,
+    UpdateProviderFail,
+    AddProviderFail,
+    AddProviderSuccess
+} from '../action/collection.action';
 
 describe('Provider Editor Reducer', () => {
     describe('undefined action', () => {
@@ -17,6 +26,42 @@ describe('Provider Editor Reducer', () => {
         });
     });
 
+    describe(`${ProviderCollectionActionTypes.UPDATE_PROVIDER_REQUEST}`, () => {
+        it('should set to `saving`', () => {
+            expect(reducer(snapshot, new UpdateProviderRequest(<MetadataProvider>{})).saving).toBe(true);
+        });
+    });
+
+    describe(`${ProviderCollectionActionTypes.ADD_PROVIDER_REQUEST}`, () => {
+        it('should set to `saving`', () => {
+            expect(reducer(snapshot, new AddProviderRequest(<MetadataProvider>{})).saving).toBe(true);
+        });
+    });
+
+    describe(`${ProviderCollectionActionTypes.UPDATE_PROVIDER_SUCCESS}`, () => {
+        it('should set to not `saving`', () => {
+            expect(reducer(snapshot, new UpdateProviderSuccess({id: 'foo', changes: <MetadataProvider>{} })).saving).toBe(false);
+        });
+    });
+
+    describe(`${ProviderCollectionActionTypes.ADD_PROVIDER_FAIL}`, () => {
+        it('should set to not `saving`', () => {
+            expect(reducer(snapshot, new AddProviderFail(<MetadataProvider>{})).saving).toBe(false);
+        });
+    });
+
+    describe(`${ProviderCollectionActionTypes.ADD_PROVIDER_SUCCESS}`, () => {
+        it('should set to not `saving`', () => {
+            expect(reducer(snapshot, new AddProviderSuccess(<MetadataProvider>{})).saving).toBe(false);
+        });
+    });
+
+    describe(`${ProviderCollectionActionTypes.UPDATE_PROVIDER_FAIL}`, () => {
+        it('should set to not `saving`', () => {
+            expect(reducer(snapshot, new UpdateProviderFail(<MetadataProvider>{})).saving).toBe(false);
+        });
+    });
+
     describe(`isEntitySaved method`, () => {
         it('should return false if there are changes', () => {
             expect(isEntitySaved({

diff --git a/ui/src/app/metadata/provider/reducer/entity.reducer.ts b/ui/src/app/metadata/provider/reducer/entity.reducer.ts
@@ -1,5 +1,6 @@
 import { MetadataProvider } from '../../domain/model';
 import { EntityActionTypes, EntityActionUnion } from '../action/entity.action';
+import { ProviderCollectionActionsUnion, ProviderCollectionActionTypes } from '../action/collection.action';
 
 export interface EntityState {
     saving: boolean;
@@ -11,8 +12,25 @@ export const initialState: EntityState = {
     changes: null
 };
 
-export function reducer(state = initialState, action: EntityActionUnion): EntityState {
+export function reducer(state = initialState, action: EntityActionUnion | ProviderCollectionActionsUnion): EntityState {
     switch (action.type) {
+        case ProviderCollectionActionTypes.ADD_PROVIDER_REQUEST:
+        case ProviderCollectionActionTypes.UPDATE_PROVIDER_REQUEST: {
+            return {
+                ...state,
+                saving: true
+            };
+        }
+
+        case ProviderCollectionActionTypes.UPDATE_PROVIDER_FAIL:
+        case ProviderCollectionActionTypes.UPDATE_PROVIDER_SUCCESS:
+        case ProviderCollectionActionTypes.ADD_PROVIDER_FAIL:
+        case ProviderCollectionActionTypes.ADD_PROVIDER_SUCCESS: {
+            return {
+                ...state,
+                saving: false
+            };
+        }
         case EntityActionTypes.CLEAR_PROVIDER: {
             return {
                 ...initialState

diff --git a/ui/src/app/metadata/resolver/component/wizard-nav.component.html b/ui/src/app/metadata/resolver/component/wizard-nav.component.html
@@ -35,10 +35,19 @@ <h3 class="tag tag-primary">
             </button>
         </li>
         <li class="nav-item" *ngIf="isLastPage">
-            <button class="nav-link save btn" (click)="onSave.emit()" aria-label="Save" role="button">
+            <button class="nav-link save btn"
+                (click)="onSave.emit()"
+                [disabled]="wizardIsSaving$ | async"
+                aria-label="Save"
+                role="button">
                 <span class="label pull-left" i18n="@@action--save">Save</span>
                 <span class="direction pull-right">
-                    <i class="fa fa-fw fa-save next d-block fa-2x"></i>
+                    <i class="fa fa-fw fa-lg next d-block fa-2x"
+                        [ngClass]="{
+                            'fa-save': !(wizardIsSaving$ | async),
+                            'fa-spinner': (wizardIsSaving$ | async),
+                            'fa-pulse': (wizardIsSaving$ | async)
+                        }"></i>
                     <ng-container i18n="@@action--save">Save</ng-container>
                 </span>
             </button>

diff --git a/ui/src/app/metadata/resolver/component/wizard-nav.component.ts b/ui/src/app/metadata/resolver/component/wizard-nav.component.ts
@@ -22,6 +22,7 @@ export class WizardNavComponent implements OnChanges {
     isFirstPage = false;
     wizardIsValid$: Observable<boolean>;
     wizardIsInvalid$: Observable<boolean>;
+    wizardIsSaving$: Observable<boolean>;
 
     wizard: EditorFlowDefinition[] = WizardDef;
 
@@ -38,6 +39,7 @@ export class WizardNavComponent implements OnChanges {
         this.wizard = WizardDef;
 
         this.wizardIsValid$ = this.store.select(fromEditor.getEditorIsValid);
+        this.wizardIsSaving$ = this.store.select(fromEditor.getEditorIsSaving);
         this.wizardIsInvalid$ = this.wizardIsValid$.pipe(map(valid => !valid));
     }
 } /* istanbul ignore next */
diff --git a/ui/src/app/wizard/component/wizard.component.html b/ui/src/app/wizard/component/wizard.component.html
@@ -42,10 +42,21 @@ <h3 class="tag tag-primary">
             </button>
         </li>
         <li class="nav-item" *ngIf="(last$ | async)">
-            <button class="nav-link save btn" aria-label="Save" role="button" (click)="onSave.emit()">
-                <span class="label pull-left" i18n="@@action--save">Save</span>
+            <button class="nav-link save btn"
+                aria-label="Save"
+                role="button"
+                [disabled]="disabled$ | async"
+                (click)="onSave.emit()">
+                <span class="label pull-left" i18n="@@action--save">
+                    Save
+                </span>
                 <span class="direction pull-right">
-                    <i class="fa fa-fw fa-save next d-block fa-2x"></i>
+                    <i class="fa fa-fw fa-lg next d-block fa-2x"
+                        [ngClass]="{
+                            'fa-save': !(disabled$ | async),
+                            'fa-spinner': (disabled$ | async),
+                            'fa-pulse': (disabled$ | async)
+                        }"></i>
                     <ng-container i18n="@@action--save">Save</ng-container>
                 </span>
             </button>