Feature/refresh indicator (#93)

* Renamed refreshing observable, added refreshMessage$ observable, refresh-alert component
* Remove refreshing$ observable, use refreshMessage$ for checks
* Refresh indicator, disable buttons when refreshing
* Fix errorObj grammar
* Fix merge conflicts, moved error service, renamed refresh-alert to alert

src/app/container/container.component.html

@@ -16,21 +16,6 @@
 
 <div class="row" *ngIf="error || refreshing || missingWarning">
   <div class="col-md-12" *ngIf="!isToolPublic">
-    <div class="alert alert-danger alert-dismissable" ng-class="!editMode ? 'push-top' : ''" role="alert" *ngIf="error">
-      <button type="button" class="close" data-dismiss="alert" (click)="closeError()">
-        &times;
-      </button>
-      <p>
-        <span class="glyphicon glyphicon-warning-sign"></span>
-        {{error.message}}
-      </p>
-      <p class="error-output">{{error.errorDetails}}</p>
-    </div>
-    <div class="alert alert-info" role="alert" *ngIf="refreshing">
-      <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate">
-      </span>
-      Please wait, retrieving {{tool?.imgProvider}} tool...
-    </div>
     <div class="alert alert-warning" ng-class="!editMode ? 'push-top' : ''" role="alert" *ngIf="missingWarning">
       <button type="button" class="close" data-dismiss="alert" ng-click="missingWarning = false">
         &times;
@@ -77,7 +62,7 @@ <h3>
 
           <app-deregister-modal *ngIf="tool?.mode === 'MANUAL_IMAGE_PATH'"></app-deregister-modal>
         </div>
-        <button type="button" class="btn btn-primary" (click)="refresh()" [disabled]="refreshing">
+        <button type="button" class="btn btn-primary" (click)="refresh()" [disabled]="refreshMessage !== null">
           Refresh
         </button>
       </div>

src/app/container/container.component.ts

@@ -14,10 +14,10 @@
  *    limitations under the License.
  */
 
+import { ErrorService } from './../shared/error.service';
 import { PublishRequest } from './../shared/swagger/model/publishRequest';
 import { Subscription } from 'rxjs/Subscription';
 import { ContainersService } from './../shared/swagger/api/containers.service';
-import { ErrorService } from './error.service';
 import { StateService } from './../shared/state.service';
 import { RefreshService } from './../shared/refresh.service';
 import { FormsModule } from '@angular/forms';
@@ -171,7 +171,7 @@ export class ContainerComponent extends Entry {
   }
 
   publishDisable() {
-    return this.refreshing || !this.isContainerValid();
+    return this.refreshMessage !== null || !this.isContainerValid();
   }
 
   isContainerValid() {

src/app/container/info-tab/info-tab.service.ts

@@ -46,11 +46,11 @@ export class InfoTabService {
 
     updateAndRefresh(tool: any) {
         this.containersService.updateContainer(this.tool.id, tool).subscribe(response => {
-            this.stateService.setRefreshing(true);
+            this.stateService.setRefreshMessage('Updating tool info...');
             this.containersService.refresh(this.tool.id).subscribe(refreshResponse => {
                 this.containerService.replaceTool(this.tools, refreshResponse);
                 this.containerService.setTool(refreshResponse);
-                this.stateService.setRefreshing(false);
+                this.stateService.setRefreshMessage(null);
             });
         });
     }

src/app/container/refresh-tool-organization/refresh-tool-organization.component.ts

@@ -39,12 +39,12 @@ export class RefreshToolOrganizationComponent extends RefreshOrganizationCompone
   refreshOrganization(): void {
     const splitOrganization: string[] = this.organization.split('/');
     const actualOrganization: string = splitOrganization[1];
-    this.stateService.setRefreshing(true);
+    this.stateService.setRefreshMessage('Refreshing ' + actualOrganization + '...');
     this.usersService.refreshToolsByOrganization(this.userId, actualOrganization).subscribe(
       (success: DockstoreTool[]) => {
         this.containerService.setTools(success);
-        this.stateService.setRefreshing(false);
-      }, error => this.stateService.setRefreshing(false));
+        this.stateService.setRefreshMessage(null);
+      }, error => this.stateService.setRefreshMessage(null));
   }
 
 }

src/app/container/register-tool/register-tool.component.html

@@ -30,7 +30,7 @@ <h4 class="modal-title">Register Tool</h4>
         </p>
         <p class="error-output">{{toolRegisterError.errorDetails}}</p>
       </div>
-      <div class="alert alert-info" role="alert" *ngIf="refreshing">
+      <div class="alert alert-info" role="alert" *ngIf="refreshMessage !== null">
         <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate">
         </span>
         Please wait, retrieving tool...
@@ -171,7 +171,7 @@ <h4 class="modal-title">Register Tool</h4>
           <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="hideModal()">
             Close
           </button>
-          <button id="submitButton" type="submit" class="btn btn-primary" [disabled]="!registerToolForm.form.valid || savingActive || refreshing || isInvalidCustomRegistry() || isInvalidPrivateTool()">
+          <button id="submitButton" type="submit" class="btn btn-primary" [disabled]="!registerToolForm.form.valid || savingActive || refreshMessage !== null || isInvalidCustomRegistry() || isInvalidPrivateTool()">
             Add Tool
           </button>
         </div>

src/app/container/register-tool/register-tool.component.ts

@@ -33,7 +33,7 @@ export class RegisterToolComponent implements OnInit, AfterViewChecked {
   public validationPatterns = validationPatterns;
   public customDockerRegistryPath: string;
   public showCustomDockerRegistryPath: boolean;
-  public refreshing: boolean;
+  public refreshMessage: string;
   public isModalShown: boolean;
 
   registerToolForm: NgForm;
@@ -96,7 +96,7 @@ export class RegisterToolComponent implements OnInit, AfterViewChecked {
     this.registerToolService.customDockerRegistryPath.subscribe(path => this.customDockerRegistryPath = path);
     this.registerToolService.showCustomDockerRegistryPath.subscribe(showPath => this.showCustomDockerRegistryPath = showPath);
     this.registerToolService.toolRegisterError.subscribe(error => this.toolRegisterError = error);
-    this.stateService.refreshing.subscribe(status => this.refreshing = status);
+    this.stateService.refreshMessage$.subscribe(status => this.refreshMessage = status);
     this.registerToolService.isModalShown.subscribe(isModalShown => this.isModalShown = isModalShown);
   }
 

src/app/container/register-tool/register-tool.service.ts

@@ -84,12 +84,12 @@ export class RegisterToolService {
         const normalizedToolObj: DockstoreTool = this.getNormalizedToolObj(newTool, customDockerRegistryPath);
         this.containersService.registerManual(normalizedToolObj).subscribe(response => {
             this.setToolRegisterError(null);
-            this.stateService.setRefreshing(true);
+            this.stateService.setRefreshMessage('Registering new tool...');
             this.containersService.refresh(response.id).subscribe(refreshResponse => {
                 this.setIsModalShown(false);
                 this.containerService.addToTools(this.tools, refreshResponse);
                 this.containerService.setTool(refreshResponse);
-                this.stateService.setRefreshing(false);
+                this.stateService.setRefreshMessage(null);
             });
             // Use types instead
         }, error => this.setToolRegisterError(error)

src/app/mytools/mytools.component.html

@@ -18,12 +18,13 @@
   <img src="../assets/images/dockstore/dockstore-tools-blue.png">
   My Tools
   <div class="pull-right refresh-all-holder">
-    <button type="button" class="refresh-all-button btn btn-primary" (click)="refreshAllTools()">
+    <button type="button" class="refresh-all-button btn btn-primary" (click)="refreshAllTools()" [disabled]="refreshMessage !== null">
       Refresh All Tools
     </button>
   </div>
 </app-header>
 <div class="container padding-top">
+  <app-alert></app-alert>
   <!--Msg/Warning Page, this should be a Component-->
   <div class="row" *ngIf="nsContainers?.length == 0">
     <div class="col-md-12">
@@ -76,7 +77,7 @@
         </accordion-group>
       </accordion>
       <button (click)="showRegisterToolModal()" id="register_tool_button" type="button"
-              class="btn btn-primary btn-sm pull-right">
+              class="btn btn-primary btn-sm pull-right" [disabled]="refreshMessage !== null">
               Add Tool
       </button>
 

src/app/mytools/mytools.component.ts

@@ -14,6 +14,7 @@
  *    limitations under the License.
  */
 
+import { StateService } from './../shared/state.service';
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from 'ng2-ui-auth/commonjs/auth.service';
 
@@ -40,10 +41,11 @@ export class MyToolsComponent implements OnInit {
   tools: any;
   user: any;
   tool: any;
+  public refreshMessage: string;
   private registerTool: Tool;
   constructor(private mytoolsService: MytoolsService, private configuration: Configuration,
     private communicatorService: CommunicatorService, private usersService: UsersService,
-    private userService: UserService, private authService: AuthService,
+    private userService: UserService, private authService: AuthService, private stateService: StateService,
     private containerService: ContainerService,
     private refreshService: RefreshService,
     private registerToolService: RegisterToolService) { }
@@ -80,6 +82,7 @@ export class MyToolsComponent implements OnInit {
         this.selectContainer(null);
       }
     });
+    this.stateService.refreshMessage$.subscribe(refreshMessage => this.refreshMessage = refreshMessage);
     this.registerToolService.tool.subscribe(tool => this.registerTool = tool);
   }
   setIsFirstOpen() {

src/app/mytools/mytools.module.ts

@@ -14,6 +14,7 @@
  *    limitations under the License.
  */
 
+import { RefreshAlertModule } from '../shared/alert/alert.module';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -46,6 +47,7 @@ import { mytoolsRouting } from './mytools.routing';
     mytoolsRouting,
     AccordionModule.forRoot(),
     ModalModule.forRoot(),
+    RefreshAlertModule,
     TabsModule.forRoot(),
     TooltipModule.forRoot()
   ],

src/app/myworkflows/myworkflows.component.html

@@ -17,12 +17,13 @@
 <app-header>
   <img src="../assets/images/dockstore/dockstore-workflows-green.png"> My Workflows
   <div class="pull-right refresh-all-holder">
-    <button type="button" class="refresh-all-button btn btn-primary" (click)="refreshAllWorkflows()">
+    <button type="button" class="refresh-all-button btn btn-primary" (click)="refreshAllWorkflows()" [disabled]="refreshMessage !== null">
       Refresh All Workflows
     </button>
   </div>
 </app-header>
 <div class="container padding-top">
+  <app-alert></app-alert>
   <div class="row" *ngIf="orgWorkflows?.length == 0">
     <div class="col-md-12">
       <div class="alert alert-info" role="alert">
@@ -66,7 +67,7 @@
         </accordion-group>
       </accordion>
       <div>
-        <button type="button" class="btn btn-primary btn-sm pull-right" (click)="showModal()">Register Workflow</button>
+        <button type="button" class="btn btn-primary btn-sm pull-right" (click)="showModal()" [disabled]="refreshMessage !== null">Register Workflow</button>
       </div>
       <app-register-workflow-modal></app-register-workflow-modal>
     </div>

src/app/myworkflows/myworkflows.component.spec.ts

@@ -14,6 +14,7 @@
  *    limitations under the License.
  */
 
+import { StateService } from './../shared/state.service';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { AuthService } from 'ng2-ui-auth';
@@ -31,6 +32,7 @@ import {
     ConfigurationStub,
     RefreshStubService,
     RegisterWorkflowModalStubService,
+    StateStubService,
     UsersStubService,
     UserStubService,
     WorkflowStubService,
@@ -54,7 +56,8 @@ describe('MyWorkflowsComponent', () => {
         { provide: WorkflowService, useClass: WorkflowStubService },
         { provide: RefreshService, useClass: RefreshStubService },
         { provide: RegisterWorkflowModalService, useClass: RegisterWorkflowModalStubService },
-        { provide: UserService, useClass: UserStubService }
+        { provide: UserService, useClass: UserStubService },
+        { provide: StateService, useClass: StateStubService }
       ]
     })
     .compileComponents();

src/app/myworkflows/myworkflows.component.ts

@@ -14,6 +14,7 @@
  *    limitations under the License.
  */
 
+import { StateService } from '../shared/state.service';
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from 'ng2-ui-auth';
 
@@ -40,12 +41,12 @@ export class MyWorkflowsComponent implements OnInit {
   workflow: any;
   user: any;
   workflows: any;
+  public refreshMessage: string;
   constructor(private myworkflowService: MyWorkflowsService, private configuration: Configuration,
     private usersService: UsersService, private userService: UserService,
     private workflowService: WorkflowService, private authService: AuthService,
-    private refreshService: RefreshService,
+    private refreshService: RefreshService, private stateService: StateService,
     private registerWorkflowModalService: RegisterWorkflowModalService) {
-
   }
 
   ngOnInit() {
@@ -81,6 +82,7 @@ export class MyWorkflowsComponent implements OnInit {
         this.selectWorkflow(null);
       }
     });
+    this.stateService.refreshMessage$.subscribe(refreshMessage => this.refreshMessage = refreshMessage);
   }
   setIsFirstOpen() {
     if (this.orgWorkflows && this.workflow) {

src/app/myworkflows/myworkflows.module.ts

@@ -14,6 +14,7 @@
  *    limitations under the License.
  */
 
+import { RefreshAlertModule } from './../shared/alert/alert.module';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -45,6 +46,7 @@ import { myworkflowRouting } from './myworkflows.routing';
     myworkflowRouting,
     ModalModule.forRoot(),
     AccordionModule.forRoot(),
+    RefreshAlertModule,
     TabsModule.forRoot(),
     TooltipModule.forRoot()
   ]

src/app/shared/alert/alert.component.html

@@ -0,0 +1,15 @@
+<div class="alert alert-info" role="alert" *ngIf="refreshMessage">
+    <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate">
+    </span>
+    {{ refreshMessage }}
+</div>
+<div class="alert alert-danger alert-dismissable" ng-class="!editMode ? 'push-top' : ''" role="alert" *ngIf="errorObj">
+  <button type="button" class="close" data-dismiss="alert" ng-click="setError(null)">
+    &times;
+  </button>
+  <p>
+    <span class="glyphicon glyphicon-warning-sign"></span>
+    {{errorObj.message}}
+  </p>
+  <p class="error-output">{{errorObj.errorDetails}}</p>
+</div>

src/app/shared/alert/alert.component.spec.ts

@@ -0,0 +1,34 @@
+import { ErrorStubService } from './../../test/service-stubs';
+import { ErrorService } from './../../shared/error.service';
+import { StateStubService } from '../../test/service-stubs';
+import { StateService } from '../state.service';
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { AlertComponent } from './alert.component';
+
+describe('RefreshAlertComponent', () => {
+  let component: AlertComponent;
+  let fixture: ComponentFixture<AlertComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AlertComponent ],
+      providers: [ {provide: StateService, useClass: StateStubService},
+      { provide: ErrorService, useClass: ErrorStubService}]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/alert/alert.component.ts

@@ -0,0 +1,22 @@
+import { ErrorService } from '../../shared/error.service';
+import { StateService } from '../state.service';
+import { Component, OnInit } from '@angular/core';
+
+// TODO: Rename this component to something like 'alert' since it contains both error and refresh alerts
+
+@Component({
+  selector: 'app-alert',
+  templateUrl: './alert.component.html',
+  styleUrls: ['./alert.component.css']
+})
+export class AlertComponent implements OnInit {
+  public refreshMessage: string;
+  public errorObj: any;
+  constructor(private stateService: StateService, private errorService: ErrorService) { }
+
+  ngOnInit() {
+    this.stateService.refreshMessage$.subscribe(refreshMessage => this.refreshMessage = refreshMessage);
+    this.errorService.errorObj$.subscribe(errorObj => this.errorObj = errorObj);
+  }
+
+}

src/app/shared/alert/alert.module.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { StateService } from '../state.service';
+import { AlertComponent } from './alert.component';
+import { NgModule } from '@angular/core';
+
+@NgModule({
+    declarations: [
+      AlertComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule
+    ],
+    providers: [
+      StateService
+    ],
+    exports: [AlertComponent]
+  })
+  export class RefreshAlertModule {}