Update Deploy Business Network (hyperledger-archives#1846)

Update deploy business network to use id card service

contributes to hyperledger/composer#1414

packages/composer-playground-api/routes/npm.js

@@ -158,9 +158,8 @@ module.exports = (app) => {
                     name : metadata.name,
                     description : metadata.description,
                     version : metadata.version,
-                    //TODO update this after release
-                    networkImage : 'https://hyperledger.github.io/composer-sample-networks/packages/' + metadata.name + '/networkimage.svg',
-                    networkImageanimated:  'https://hyperledger.github.io/composer-sample-networks/packages/' + metadata.name + '/networkimageanimated.svg',
+                    networkImage : metadata.networkImage,
+                    networkImageanimated:  metadata.networkImageanimated,
                     tarball : metadata.dist.tarball
                 });
             }

packages/composer-playground-api/test/npm.js

@@ -96,6 +96,8 @@ RegClient.prototype.get = function (url, options, callback) {
                 name : 'bob',
                 description : 'bob package',
                 version : '1.0',
+                networkImage : 'https://hyperledger.github.io/composer-sample-networks/packages/bob/networkimage.svg',
+                networkImageanimated:  'https://hyperledger.github.io/composer-sample-networks/packages/bob/networkimageanimated.svg',
                 dist : {
                     tarball : 'my tar'
                 }
@@ -107,6 +109,8 @@ RegClient.prototype.get = function (url, options, callback) {
                 name : 'bob',
                 description : 'bob package',
                 version : '1.0',
+                networkImage : 'https://hyperledger.github.io/composer-sample-networks/packages/bob/networkimage.svg',
+                networkImageanimated:  'https://hyperledger.github.io/composer-sample-networks/packages/bob/networkimageanimated.svg',
                 dist : {
                     tarball : 'my tar'
                 }
@@ -150,6 +154,8 @@ RegClient.prototype.get = function (url, options, callback) {
                 },
                 name : 'cat',
                 description : 'cat package',
+                networkImage : 'https://hyperledger.github.io/composer-sample-networks/packages/cat/networkimage.svg',
+                networkImageanimated:  'https://hyperledger.github.io/composer-sample-networks/packages/cat/networkimageanimated.svg',
                 version : '1.0',
                 dist : {
                     tarball : 'my tar'
@@ -166,6 +172,8 @@ RegClient.prototype.get = function (url, options, callback) {
                 },
                 name : 'ant',
                 description : 'ant package',
+                networkImage : 'https://hyperledger.github.io/composer-sample-networks/packages/ant/networkimage.svg',
+                networkImageanimated:  'https://hyperledger.github.io/composer-sample-networks/packages/ant/networkimageanimated.svg',
                 version : '1.0',
                 dist : {
                     tarball : 'my tar'
@@ -182,6 +190,8 @@ RegClient.prototype.get = function (url, options, callback) {
                 },
                 name : 'bat',
                 description : 'bat package',
+                networkImage : 'https://hyperledger.github.io/composer-sample-networks/packages/bat/networkimage.svg',
+                networkImageanimated:  'https://hyperledger.github.io/composer-sample-networks/packages/bat/networkimageanimated.svg',
                 version : '1.0',
                 dist : {
                     tarball : 'my tar'

packages/composer-playground/.istanbul.yml

@@ -6,7 +6,7 @@ instrumentation:
         - "docker/*"
 check:
     global:
-        statements: 98
+        statements: 99
         branches: 94
         functions: 96
-        lines: 98
+        lines: 99

packages/composer-playground/src/app/app.component.spec.ts

@@ -507,6 +507,41 @@ describe('AppComponent', () => {
             mockOnTransactionEvent = sinon.stub(component, 'onTransactionEvent');
             errorStatusSpy = sinon.spy(mockAlertService.errorStatus$, 'next');
         }));
+
+        it('should initialise playground and set use locally to true', fakeAsync(() => {
+            mockInitializationService.initialize.returns(Promise.resolve());
+            mockInitializationService.isWebOnly.returns(Promise.resolve(false));
+            activatedRoute.testParams = {};
+
+            updateComponent();
+
+            tick();
+
+            // update now got info back about if local or not
+            updateComponent();
+
+            mockInitializationService.initialize.should.have.been.called;
+
+            component['usingLocally'].should.equal(true);
+        }));
+
+        it('should initialise playground and set use locally to false', fakeAsync(() => {
+            mockInitializationService.initialize.returns(Promise.resolve());
+            mockInitializationService.isWebOnly.returns(Promise.resolve(true));
+
+            activatedRoute.testParams = {};
+
+            updateComponent();
+
+            tick();
+
+            // update now got info back about if local or not
+            updateComponent();
+
+            mockInitializationService.initialize.should.have.been.called;
+
+            component['usingLocally'].should.equal(false);
+        }));
     });
 
     describe('onBusyStatus', () => {

packages/composer-playground/src/app/app.component.ts

@@ -3,7 +3,6 @@ import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
 
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
-import { AdminService } from './services/admin.service';
 import { ClientService } from './services/client.service';
 import { AlertService } from './basic-modals/alert.service';
 import { IdentityService } from './services/identity.service';
@@ -38,25 +37,19 @@ const LZString = require('lz-string');
     templateUrl: './app.component.html'
 })
 export class AppComponent implements OnInit, OnDestroy {
-    private connectionProfiles: any = [];
-    private identities: any = [];
-    private currentIdentity: any = null;
     private subs: any = null;
 
     private usingLocally = false;
     private showHeaderLinks = false;
     private showWelcome = true;
     private dropListActive = false;
 
-    private composerRuntimeVersion = '<none>';
-    private participantFQI = '<none>';
     private composerBanner = ['Hyperledger', 'Composer Playground'];
 
     private busyModalRef = null;
 
     constructor(private route: ActivatedRoute,
                 private router: Router,
-                private adminService: AdminService,
                 private clientService: ClientService,
                 private identityService: IdentityService,
                 private identityCardService: IdentityCardService,
@@ -119,20 +112,20 @@ export class AppComponent implements OnInit, OnDestroy {
         } else {
             this.showHeaderLinks = true;
             this.clientService.ensureConnected()
-            .then(() => {
-                let card: IdCard = this.identityCardService.getCurrentIdentityCard();
-                let connectionProfile = card.getConnectionProfile();
-                let profileName =  'web' === connectionProfile.type ? 'Web' : connectionProfile.name;
-                let busNetName = this.clientService.getBusinessNetworkName();
-                this.composerBanner = [profileName, busNetName];
-            });
+                .then(() => {
+                    let card: IdCard = this.identityCardService.getCurrentIdentityCard();
+                    let connectionProfile = card.getConnectionProfile();
+                    let profileName = 'web' === connectionProfile.type ? 'Web' : connectionProfile.name;
+                    let busNetName = this.clientService.getBusinessNetworkName();
+                    this.composerBanner = [profileName, busNetName];
+                });
         }
 
         return welcomePromise;
     }
 
     queryParamsUpdated(queryParams: Object): Promise<any> {
-        // We load the connection profiles now, so we can immediately populate the menu.
+        // Initialise playground
         return this.initializationService.initialize()
             .then(() => {
                 return this.initializationService.isWebOnly();

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

@@ -65,7 +65,7 @@ app-editor {
       }
 
       .business-network-description .tooltiptext {
-        top : 1.5rem;
+        top : 2.5rem;
       }
 
       .business-network-description:hover .tooltiptext {

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

@@ -5,7 +5,7 @@ <h3 class="title">1. Basic Information</h3>
         <div class="information">
             <div>
                 <label for="import-businessNetworkName">Give your new Business Network a name:</label>
-                <input type="text" id="import-businessNetworkName" [(ngModel)]="networkName"
+                <input type="text" id="import-businessNetworkName" [ngModel]="networkName" (ngModelChange)="setNetworkName($event)" pattern="[a-z0-9-]+"
                        placeholder="eg commodity-trading">
             </div>
             <div>
@@ -22,12 +22,8 @@ <h3 class="title">1. Basic Information</h3>
              [maxFileSize]="maxFileSize" [supportedFileTypes]="supportedFileTypes">
         <h3 class="title" *ngIf="deployNetwork">2. Model Network Starter Template</h3>
         <div>
-            <h3 class="sub-title">Choose a Business Network Definition to {{deployNetwork ? 'start with:' : 'replace
-                your current
-                one:'}}</h3>
-
+            <h3 class="sub-title">Choose a Business Network Definition to {{deployNetwork ? 'start with:' : 'replace your current one:'}}</h3>
             <p>Choose a sample to play with, start a new project, or import your previous work</p>
-
             <div class="github-spinner" *ngIf="npmInProgress">
                 <div class="ibm-spinner-indeterminate medium loop">
                     <div class="loader">
@@ -92,21 +88,19 @@ <h3>Samples on npm</h3>
 </div>
 <div *ngIf="!npmInProgress" class="chosen-network">
     <div *ngIf="!deployNetwork" class="replace-message">
-        The files in the <b>{{clientService.getBusinessNetworkName()}}</b> will be replace with files from:
+        The files in the <b>{{networkName}}</b> will be replaced with files from:
     </div>
     <div class="chosen-network-info">
         <div class="image">
             <img class="animated-image" *ngIf="chosenNetwork && chosenNetwork.networkImageanimated"
-                 src="{{chosenNetwork.networkImageanimated}}">
-            <svg class="animated-image" *ngIf="!chosenNetwork || !chosenNetwork.networkImageanimated">
-                <use xlink:href="#icon-default-network-animated"></use>
-            </svg>
+                 src="{{chosenNetwork.networkImageanimated}}" />
+            <img class="animated-image" *ngIf="!chosenNetwork || !chosenNetwork.networkImageanimated"
+                 src="../../assets/svg/other/default-network-animated.svg" />
         </div>
         <div>
             <section *ngIf="deployNetwork">
                 <h3>{{networkName ? networkName : 'Business Network Name'}}</h3>
-                <p>{{networkDescription ? networkDescription : 'Business network description will be previewed here when
-                    entered in the basic information section.'}}</p>
+                <p>{{networkDescription ? networkDescription : 'Business network description will be previewed here when entered in the basic information section.'}}</p>
             </section>
             <section *ngIf="deployNetwork">
                 <div class="title">
@@ -146,7 +140,7 @@ <h3>{{chosenNetwork.name}}</h3>
 
     <div class="deploy">
         <button *ngIf="!deployNetwork" type="button" class="secondary" (click)="cancel()">Cancel</button>
-        <button [disabled]="deployNetwork && !networkName" type="button" class="primary" (click)="deploy()">{{deployNetwork ? 'Deploy Network' : 'Import'}}
+        <button [disabled]="deployNetwork && (!networkName || !networkNameValid)" type="button" class="primary" (click)="deploy()">{{deployNetwork ? 'Deploy Network' : 'Import'}}
         </button>
     </div>
 </div>

packages/composer-playground/src/app/import/import.component.scss

@@ -32,6 +32,10 @@ import-business-network {
 
                 .information {
                     padding: $space-medium $space-large;
+
+                    input.ng-invalid {
+                        border-bottom: 2px solid $error-colour-1;
+                    }
                 }
             }
 

packages/composer-playground/src/app/import/import.component.spec.ts

@@ -403,13 +403,13 @@ describe('ImportComponent', () => {
             component['networkName'] = 'myName';
             component['networkDescription'] = 'myDescription';
 
-            mockBusinessNetworkService.createNewBusinessDefinition.returns({network : 'myNetwork'});
+            mockBusinessNetworkService.createNewBusinessDefinition.returns({network: 'myNetwork'});
 
             component.deployEmptyNetwork();
 
             tick();
             mockBusinessNetworkService.createNewBusinessDefinition.should.have.been.calledWith('', '', sinon.match.object, sinon.match.string);
-            component['currentBusinessNetwork'].should.deep.equal({network : 'myNetwork'});
+            component['currentBusinessNetwork'].should.deep.equal({network: 'myNetwork'});
         }));
     });
 
@@ -427,7 +427,7 @@ describe('ImportComponent', () => {
         it('should select the empty network', () => {
             let empty = sinon.stub(component, 'deployEmptyNetwork');
 
-            component.selectNetwork({name : 'Empty Business Network'});
+            component.selectNetwork({name: 'Empty Business Network'});
 
             empty.should.have.been.called;
         });
@@ -477,4 +477,34 @@ describe('ImportComponent', () => {
             emitSpy.should.have.been.calledWith({deployed: false});
         });
     });
+
+    describe('setNetworkName', () => {
+        it('should set the network name', () => {
+            component['setNetworkName']('bob');
+
+            component['networkName'].should.equal('bob');
+            component['networkNameValid'].should.equal(true);
+        });
+
+        it('should allow numbers and letters and -', () => {
+            component['setNetworkName']('bob-123');
+
+            component['networkName'].should.equal('bob-123');
+            component['networkNameValid'].should.equal(true);
+        });
+
+        it('show not allow capitals', () => {
+            component['setNetworkName']('BOB-123');
+
+            component['networkName'].should.equal('BOB-123');
+            component['networkNameValid'].should.equal(false);
+        });
+
+        it('should not allow non alphanumeric characters', () => {
+            component['setNetworkName']('bob?');
+
+            component['networkName'].should.equal('bob?');
+            component['networkNameValid'].should.equal(false);
+        });
+    });
 });

packages/composer-playground/src/app/import/import.component.ts

@@ -1,14 +1,12 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
-import { AdminService } from '../services/admin.service';
 import { ClientService } from '../services/client.service';
 import { SampleBusinessNetworkService } from '../services/samplebusinessnetwork.service';
 import { AlertService } from '../basic-modals/alert.service';
 import { ReplaceComponent } from '../basic-modals/replace-confirm';
 
 import { BusinessNetworkDefinition } from 'composer-common';
-import { IdentityCardService } from '../services/identity-card.service';
 
 @Component({
     selector: 'import-business-network',
@@ -24,7 +22,6 @@ export class ImportComponent implements OnInit {
     private deployInProgress: boolean = false;
     private npmInProgress: boolean = true;
     private sampleNetworks = [];
-    private primaryNetworkNames = ['basic-sample-network', 'carauction-network'];
     private chosenNetwork = null;
     private expandInput: boolean = false;
     private sampleDropped: boolean = false;
@@ -33,9 +30,9 @@ export class ImportComponent implements OnInit {
     private supportedFileTypes: string[] = ['.bna'];
 
     private currentBusinessNetwork = null;
-    private currentConnectionProfile: string = null;
     private currentBusinessNetworkPromise: Promise<BusinessNetworkDefinition>;
     private networkName: string;
+    private networkNameValid: boolean = true;
     private networkDescription: string;
 
     private NAME = 'Empty Business Network';
@@ -45,23 +42,19 @@ export class ImportComponent implements OnInit {
     constructor(private clientService: ClientService,
                 public modalService: NgbModal,
                 private sampleBusinessNetworkService: SampleBusinessNetworkService,
-                private alertService: AlertService,
-                private adminService: AdminService,
-                private identityCardService: IdentityCardService) {
+                private alertService: AlertService) {
 
     }
 
     ngOnInit(): Promise<void> {
         this.currentBusinessNetwork = null;
-        this.currentConnectionProfile = this.identityCardService.getCurrentConnectionProfile().name;
-
-        return this.adminService.connectWithoutNetwork(false)
-            .then(() => {
-                this.onShow();
-            });
+        return this.onShow();
     }
 
     onShow(): Promise<void> {
+        if (!this.deployNetwork) {
+            this.networkName = this.clientService.getBusinessNetworkName();
+        }
         this.npmInProgress = true;
         return this.sampleBusinessNetworkService.getSampleList()
             .then((sampleNetworkList) => {
@@ -239,4 +232,10 @@ export class ImportComponent implements OnInit {
         this.alertService.errorStatus$.next(reason);
         this.expandInput = false;
     }
+
+    private setNetworkName(name) {
+        this.networkName = name;
+        let pattern = /^[a-z0-9-]+$/;
+        this.networkNameValid = pattern.test(this.networkName);
+    }
 }