Nitpicks (hyperledger-archives#888)

Fixed JSON display of resources
Changed update button to deploy
When switching identities changes from new identity to add identity
Changed $default to web browser in success message
Fixed cancelling of connection profiles

packages/composer-playground/.istanbul.yml

@@ -7,6 +7,6 @@ instrumentation:
 check:
     global:
         statements: 80
-        branches: 72
+        branches: 73
         functions: 69
         lines: 80

packages/composer-playground/src/app/connection-profile-data/connection-profile-data.component.html

@@ -480,7 +480,7 @@ <h1 *ngIf="connectionProfileData.name === '$default'">Web Browser</h1>
               {{ v1FormErrors.orderers.cert }}
             </div>
             <div *ngIf="v1FormErrors.orderers.hostnameOverride" class="error-message">
-              {{ v1FormErrors.orderers.hostnameOverride }} 
+              {{ v1FormErrors.orderers.hostnameOverride }}
             </div>
           </div>
 
@@ -619,9 +619,5 @@ <h1 *ngIf="connectionProfileData.name === '$default'">Web Browser</h1>
       </footer>
     </form>
   </div>
-
-
-
-
 </div>
 

packages/composer-playground/src/app/connection-profile-data/connection-profile-data.component.spec.ts

@@ -156,6 +156,35 @@ describe('ConnectionProfileDataComponent', () => {
       component['profileUpdated'].emit.should.have.been.calledWith({updated: true});
     }));
 
+    it('should use default profile', fakeAsync(() => {
+      component['connectionProfileData'] = {'name': '$default'};
+
+      component['profileUpdated'].subscribe((data) => {
+        data.should.deep.equal({updated: true});
+      });
+
+      let profileUpdatedSpy = sinon.spy(component['profileUpdated'], 'emit');
+
+      mockAlertService.successStatus$ = {
+        next: sinon.stub()
+      };
+
+      let mockModalRef = {
+        componentInstance: {
+          connectionProfileName: ''
+        },
+        result: Promise.resolve()
+      };
+
+      mockNgbModal.open.returns(mockModalRef);
+      component.useProfile();
+
+      tick();
+
+      mockAlertService.successStatus$.next.should.have.been.calledWith('Successfully connected with profile Web Browser');
+      component['profileUpdated'].emit.should.have.been.calledWith({updated: true});
+    }));
+
     it('should handle error', fakeAsync(() => {
       component['connectionProfileData'] = {'name': 'testprofile'};
 
@@ -639,16 +668,41 @@ describe('ConnectionProfileDataComponent', () => {
   });
 
   describe('stopEditing', () => {
-    it('should emit profileUpdated event', () => {
+    beforeEach(() => {
+      mockConnectionProfileService.deleteProfile.reset();
+    });
+
+    it('should delete new profile if cancelled', fakeAsync(() => {
+      component['connectionProfileData'] = {name: 'New Connection Profile'};
+      mockConnectionProfileService.deleteProfile.returns(Promise.resolve());
+
       component['profileUpdated'].subscribe((data) => {
         data.should.deep.equal({updated: false});
       });
 
       let profileUpdatedSpy = sinon.spy(component['profileUpdated'], 'emit');
       component.stopEditing();
+
+      tick();
       component['editing'].should.equal(false);
       profileUpdatedSpy.should.be.calledWith({updated: false});
-    });
+      mockConnectionProfileService.deleteProfile.should.have.been.calledWith('New Connection Profile');
+    }));
+
+    it('should switch back to display view if cancel editing', fakeAsync(() => {
+      component['connectionProfileData'] = {name: 'bob'};
+      component['profileUpdated'].subscribe((data) => {
+        data.should.deep.equal({updated: true});
+      });
+
+      let profileUpdatedSpy = sinon.spy(component['profileUpdated'], 'emit');
+      component.stopEditing();
+
+      tick();
+      component['editing'].should.equal(false);
+      profileUpdatedSpy.should.be.calledWith({updated: true});
+      mockConnectionProfileService.deleteProfile.should.not.have.been.called;
+    }));
   });
 
   describe('deleteProfile', () => {
@@ -704,7 +758,7 @@ describe('ConnectionProfileDataComponent', () => {
     });
 
     it('should export profile matching name and type', () => {
-      component['connectionProfileData'] = {'name':'v1 Profile','profile':{'type':'hlfv1'}};
+      component['connectionProfileData'] = {'name': 'v1 Profile', 'profile': {'type': 'hlfv1'}};
 
       let mockSave = sinon.stub(fileSaver, 'saveAs');
       let testFile = new File(['test'], 'connection.json', {type: 'application/json'});
@@ -719,7 +773,7 @@ describe('ConnectionProfileDataComponent', () => {
     })
 
     it('should export profile matching content', () => {
-      component['connectionProfileData'] = {'name':'v1 Profile','profile':{'type':'hlfv1'}};
+      component['connectionProfileData'] = {'name': 'v1 Profile', 'profile': {'type': 'hlfv1'}};
 
       let mockFile = sinon.stub(window, 'File');
       mockFile.returns(new File(['test'], 'connection.json', {type: 'application/json'}));

packages/composer-playground/src/app/connection-profile-data/connection-profile-data.component.ts

@@ -103,9 +103,15 @@ export class ConnectionProfileDataComponent {
   useProfile() {
     let modalRef = this.modalService.open(SwitchIdentityComponent);
     modalRef.componentInstance.connectionProfileName = this.connectionProfileData.name;
-    modalRef.result.then((result) => {
-      this.alertService.successStatus$.next('Successfully connected with profile ' + this.connectionProfileData.name);
-      this.profileUpdated.emit({updated : true});
+    modalRef.result.then(() => {
+      let connectionName;
+      if(this.connectionProfileData.name === '$default') {
+        connectionName = 'Web Browser'
+      } else {
+        connectionName = this.connectionProfileData.name;
+      }
+      this.alertService.successStatus$.next('Successfully connected with profile ' + connectionName);
+      this.profileUpdated.emit({updated: true});
 
     }, (reason) => {
       if (reason && reason !== 1) { //someone hasn't pressed escape
@@ -468,7 +474,7 @@ export class ConnectionProfileDataComponent {
           });
         }).then(() => {
           this.connectionProfileData = profileToSet;
-          this.profileUpdated.emit({updated : true,  connectionProfile : this.connectionProfileData});
+          this.profileUpdated.emit({updated: true, connectionProfile: this.connectionProfileData});
         });
 
       });
@@ -478,15 +484,30 @@ export class ConnectionProfileDataComponent {
   stopEditing() {
     this.editing = false;
 
-    // Let parent know to change back to previous connection profile
-    this.profileUpdated.emit({updated : false});
+    let stopEditingPromise;
+    let updated: boolean = false;
+
+    if (this.connectionProfileData.name === 'New Connection Profile') {
+      //we have cancelled when creating a new profile so we need to go back to previosuly selected profile
+      stopEditingPromise = this.connectionProfileService.deleteProfile(this.connectionProfileData.name);
+    } else {
+      //we've cancelled updating a profile but we still want to see this profile
+      updated = true;
+      stopEditingPromise = Promise.resolve();
+    }
+
+    stopEditingPromise.then(() => {
+      this.profileUpdated.emit({updated: updated});
+    });
+
+    return stopEditingPromise;
   }
 
   deleteProfile() {
     let modalRef = this.modalService.open(DeleteConnectionProfileComponent);
     modalRef.componentInstance.profileName = this.connectionProfileData.name;
     modalRef.result.then(() => {
-      this.profileUpdated.emit({updated : false});
+      this.profileUpdated.emit({updated: false});
     }, (reason) => {
       if (reason && reason !== 1) { //not pressed escape
         this.alertService.errorStatus$.next(reason);

packages/composer-playground/src/app/editor-file/editor-file.component.html

@@ -5,7 +5,7 @@
             (ngModelChange)="onCodeChanged()" width="100%" height="100%" ngDefaultControl>
 </codemirror>
 
-<div class="alert-area" role="alert" *ngIf="currentError">
+<div class="alert-area" role="alert" *ngIf="editorType !== 'readme' && currentError">
   <svg class="ibm-icon" aria-hidden="true">
     <use xlink:href="#icon-spell_check_error"></use>
   </svg>
@@ -15,7 +15,7 @@ <h3>Error found!</h3>
   </div>
 </div>
 
-<div class="alert-area" role="alert" *ngIf="!currentError">
+<div class="alert-area" role="alert" *ngIf="editorType !== 'readme' && !currentError">
   <svg class="ibm-icon" aria-hidden="true">
     <use xlink:href="#icon-spell_check"></use>
   </svg>

packages/composer-playground/src/app/editor/editor.component.html

@@ -18,7 +18,7 @@ <h3 *ngIf="file.readme">About</h3>
     </div>
     <div>
       <button type="button" class="primary" (click)="deploy()" [disabled]="!dirty || !noError">
-        Update
+        Deploy
       </button>
     </div>
   </div>

packages/composer-playground/src/app/registry/registry.component.html

@@ -18,9 +18,7 @@ <h1>{{_registry.name}}</h1>
       <div class="id">{{resource.getIdentifier()}}</div>
       <pre checkOverFlow [changed]="resource.getIdentifier()" (hasOverFlow)=hasOverFlow($event)
            [ngClass]="{'gradient' : resource.getIdentifier() !== expandedResource && showExpand, 'tiny-gradient' : resource.getIdentifier() === expandedResource || !showExpand}"
-           class="data">
-    {{serialize(resource)}}
-          </pre>
+           class="data">{{serialize(resource)}}</pre>
       <div *ngIf="!isTransactionRegistry()" class="resource-icon">
         <button type="button" class="icon" (click)="editResource(resource)">
           <svg class="ibm-icon" aria-hidden="true">

packages/composer-playground/src/app/switch-identity/switch-identity.component.html

@@ -10,7 +10,7 @@ <h1>Connect with an Identity</h1>
   <section class="modal-body">
     <div class="views">
       <button role="button" type="button" class="action" (click)="showWallet(true)" [class.active]="showWalletView">Wallet</button>
-      <button role="button" type="button" class="action" (click)="showWallet(false)" [class.active]="!showWalletView">New identity</button>
+      <button role="button" type="button" class="action" (click)="showWallet(false)" [class.active]="!showWalletView">Add identity</button>
     </div>
     <form #switchIdentityForm="ngForm" id="switch-identity-form" (ngSubmit)="switchIdentity()" [ngClass]="{'wallet-view' : showWalletView}">
     <div *ngIf="showWalletView">