Add prompts to direct new users to the playground tutorial (hyperledg…

…er-archives#2039) from the playground splash, wallet and deploy new network screens Also fixes wording of splash screen now that there is no default network deployed Contributes to #2009 Signed-off-by: James Taylor <[email protected]>
qqdao · Aug 30, 2017 · 18878e7 · 18878e7
1 parent 9173d5a
commit 18878e7
Show file tree

Hide file tree

Showing 16 changed files with 162 additions and 24 deletions.
diff --git a/packages/composer-playground/src/app/app.module.ts b/packages/composer-playground/src/app/app.module.ts
@@ -24,6 +24,7 @@ import { NoContentComponent } from './no-content';
 import { VersionCheckComponent } from './version-check';
 import { ServicesModule } from './services/services.module';
 import { DrawerModule } from './common/drawer';
+import { TutorialLinkModule } from './common/tutorial-link';
 import { ImportModule } from './import/import.module';
 
 let actionBasedIcons = require.context('../assets/svg/action-based', false, /.*\.svg$/);
@@ -76,7 +77,8 @@ type StoreType = {
             storageType: 'localStorage'
         }),
         NgbModule.forRoot(),
-        DrawerModule.forRoot()
+        DrawerModule.forRoot(),
+        TutorialLinkModule
     ],
     providers: [ // expose our Services and Providers into Angular's dependency injection
         ENV_PROVIDERS,

diff --git a/packages/composer-playground/src/app/common/tutorial-link/index.ts b/packages/composer-playground/src/app/common/tutorial-link/index.ts
@@ -0,0 +1,2 @@
+export * from './tutorial-link.component';
+export * from './tutorial-link.module';
diff --git a/packages/composer-playground/src/app/common/tutorial-link/tutorial-link.component.html b/packages/composer-playground/src/app/common/tutorial-link/tutorial-link.component.html
@@ -0,0 +1,7 @@
+<p class="secondary">
+    <svg class="large-icon" aria-hidden="true">
+        <use xlink:href="#icon-question"></use>
+    </svg>
+    Not sure where to start?
+    <a href="https://hyperledger.github.io/composer/tutorials/playground-guide.html" target="_blank">View our Playground tutorial</a>.
+</p>
diff --git a/packages/composer-playground/src/app/common/tutorial-link/tutorial-link.component.scss b/packages/composer-playground/src/app/common/tutorial-link/tutorial-link.component.scss
@@ -0,0 +1,24 @@
+@import '../../../assets/styles/base/_colors.scss';
+@import '../../../assets/styles/base/_variables.scss';
+
+tutorial-link {
+    p.secondary {
+        color: $secondary-text;
+        margin: 0;
+
+        a {
+            text-decoration: none;
+            color: $secondary-text;
+
+            &:hover, &:focus {
+                text-decoration: underline;
+                outline: none;
+            }
+        }
+
+        svg.large-icon {
+            margin-right: 0.25rem;
+            vertical-align: middle;
+        }
+    }
+}
diff --git a/packages/composer-playground/src/app/common/tutorial-link/tutorial-link.component.spec.ts b/packages/composer-playground/src/app/common/tutorial-link/tutorial-link.component.spec.ts
@@ -0,0 +1,35 @@
+/* tslint:disable:no-unused-variable */
+/* tslint:disable:no-unused-expression */
+/* tslint:disable:no-var-requires */
+/* tslint:disable:max-classes-per-file */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TutorialLinkComponent } from './tutorial-link.component';
+import * as sinon from 'sinon';
+
+describe('TutorialLinkComponent', () => {
+    let component: TutorialLinkComponent;
+    let fixture: ComponentFixture<TutorialLinkComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [TutorialLinkComponent]
+        })
+        .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TutorialLinkComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create component', () => {
+        component.should.be.ok;
+    });
+
+});
diff --git a/packages/composer-playground/src/app/common/tutorial-link/tutorial-link.component.ts b/packages/composer-playground/src/app/common/tutorial-link/tutorial-link.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'tutorial-link',
+    templateUrl: './tutorial-link.component.html',
+    styleUrls: ['./tutorial-link.component.scss'.toString()]
+})
+
+export class TutorialLinkComponent {
+}
diff --git a/packages/composer-playground/src/app/common/tutorial-link/tutorial-link.module.ts b/packages/composer-playground/src/app/common/tutorial-link/tutorial-link.module.ts
@@ -0,0 +1,14 @@
+import { NgModule }           from '@angular/core';
+
+import { TutorialLinkComponent } from './tutorial-link.component';
+
+@NgModule({
+    imports: [],
+    entryComponents: [],
+    declarations: [TutorialLinkComponent],
+    providers: [],
+    exports: [TutorialLinkComponent]
+})
+
+export class TutorialLinkModule {
+}
diff --git a/packages/composer-playground/src/app/login/login.component.html b/packages/composer-playground/src/app/login/login.component.html
@@ -1,6 +1,6 @@
 <section *ngIf="!showSubScreen" class="header">
-    <h1 class="left-align">My Wallet</h1>
-    <div class="right-align" *ngIf="!showSubScreen">
+    <h1>My Wallet</h1>
+    <div *ngIf="!showSubScreen">
         <button *ngIf="usingLocally" type="button" class="secondary" (click)="importIdentity()">
             <span>Import ID Card</span>
         </button>
@@ -11,8 +11,10 @@ <h1 class="left-align">My Wallet</h1>
 </section>
 <section *ngIf="!showSubScreen" class="main-view">
     <div class="connection-profile" *ngFor="let connectionProfileRef of connectionProfileRefs;">
-        <h2>Identities for {{this.connectionProfileNames.get(connectionProfileRef) === '$default' ? 'Web Browser' :
-            this.connectionProfileNames.get(connectionProfileRef) }}</h2>
+        <span class="connection-profile-title">
+            <h2>Identities for {{this.connectionProfileNames.get(connectionProfileRef) === '$default' ? 'Web Browser' : this.connectionProfileNames.get(connectionProfileRef) }}</h2>
+            <tutorial-link *ngIf="idCards.size == 1"></tutorial-link>
+        </span>
         <div class="identities">
             <identity-card *ngFor="let cardRef of idCardRefs.get(connectionProfileRef)"
                            [identity]="idCards.get(cardRef)"
@@ -28,7 +30,7 @@ <h2>Identities for {{this.connectionProfileNames.get(connectionProfileRef) === '
                     <svg class="ibm-icon" aria-hidden="true">
                         <use xlink:href="#icon-Network_Create"></use>
                     </svg>
-                    <p>Deploy new business network</p>
+                    <p>Deploy a new business network</p>
                 </span>
             </button>
             <div class="connection-profile-card card-content" *ngIf="!canDeploy(connectionProfileRef)">
@@ -49,6 +51,7 @@ <h2>Identities for {{this.connectionProfileNames.get(connectionProfileRef) === '
             </svg>
             <span>My Wallet</span>
         </button>
+        <tutorial-link *ngIf="showDeployNetwork"></tutorial-link>
     </div>
     <div *ngIf="showDeployNetwork">
         <deploy-business-network (finishedSampleImport)="finishedDeploying()"></deploy-business-network>

diff --git a/packages/composer-playground/src/app/login/login.component.scss b/packages/composer-playground/src/app/login/login.component.scss
@@ -9,14 +9,7 @@ app-login {
         display: flex;
         padding: $space-large $space-large $space-medium $space-large;
         align-items: center;
-
-        h1.left-align {
-            flex: 1;
-        }
-
-        div.right-align {
-            margin-right: $space-medium;
-        }
+        justify-content: space-between;
     }
 
     section.main-view {
@@ -32,6 +25,13 @@ app-login {
             margin-top: $space-large;
             padding-left: $space-large;
 
+            .connection-profile-title {
+                display: flex;
+                margin-right: $space-large;
+                align-items: baseline;
+                justify-content: space-between;
+            }
+
             .identities {
                 display: flex;
                 flex-wrap: wrap;
@@ -94,6 +94,10 @@ app-login {
         overflow-y: auto;
 
         .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
             button {
                 .rotate {
                     transform: rotate(-180deg);

diff --git a/packages/composer-playground/src/app/login/login.component.spec.ts b/packages/composer-playground/src/app/login/login.component.spec.ts
@@ -122,6 +122,13 @@ class MockCreateIdentityCardComponent {
     public finishedCardCreation: EventEmitter<any> = new EventEmitter<any>();
 }
 
+@Component({
+    selector: 'tutorial-link',
+    template: ''
+})
+class MockTutorialLinkComponent {
+}
+
 describe(`LoginComponent`, () => {
 
     let component: LoginComponent;
@@ -166,6 +173,7 @@ describe(`LoginComponent`, () => {
                 MockIdentityCardComponent,
                 MockFooterComponent,
                 MockDeployComponent,
+                MockTutorialLinkComponent
             ],
             providers: [
                 {provide: IdentityService, useValue: mockIdentityService},

diff --git a/packages/composer-playground/src/app/login/login.module.ts b/packages/composer-playground/src/app/login/login.module.ts
@@ -11,14 +11,15 @@ import { ImportIdentityComponent } from './import-identity/import-identity.compo
 import { CreateIdentityCardComponent } from './create-identity-card';
 import { EditCardCredentialsComponent } from './edit-card-credentials';
 import { DrawerModule } from '../common/drawer';
+import { TutorialLinkModule } from '../common/tutorial-link';
 import { FileImporterModule } from '../common/file-importer/file-importer.module';
 import { ConnectionProfileModule } from '../connection-profile/connection-profile.module';
 import { ImportModule } from '../import/import.module';
 import { FooterModule } from '../footer/footer.module';
 import { IdentityModule } from '../identity/identity.module';
 
 @NgModule({
-    imports: [CommonModule, FormsModule, NgbModule, LoginRoutingModule, ConnectionProfileModule, FooterModule, FileImporterModule, DrawerModule, ImportModule, IdentityModule],
+    imports: [CommonModule, FormsModule, NgbModule, LoginRoutingModule, ConnectionProfileModule, FooterModule, FileImporterModule, DrawerModule, ImportModule, IdentityModule, TutorialLinkModule],
     entryComponents: [IdentityCardComponent, ImportIdentityComponent, CreateIdentityCardComponent, EditCardCredentialsComponent],
     declarations: [LoginComponent, IdentityCardComponent, ImportIdentityComponent, CreateIdentityCardComponent, EditCardCredentialsComponent]
 })

diff --git a/packages/composer-playground/src/app/welcome/welcome.component.html b/packages/composer-playground/src/app/welcome/welcome.component.html
@@ -8,15 +8,16 @@
   </div>
   <section class="modal-body">
     <h1>Welcome to Hyperledger Composer Playground!</h1>
-    <svg class="ibm-icon" aria-hidden="true">
+    <svg class="splash-icon" aria-hidden="true">
       <use xlink:href="#icon-WelcomeToPlayground"></use>
     </svg>
-    <p>In this web sandbox, you can import, edit and test business network definitions. The Basic Sample Network is imported by default, have a play and learn what Hyperledger Composer is all about.
+    <p>In this web sandbox, you can deploy, edit and test business network definitions. Have a play and learn what Hyperledger Composer is all about.
     </p>
   </section>
   <footer>
     <button id="welcome_start" type="button" class="primary centre" (click)="activeModal.close();">
       <span>Let's Blockchain!</span>
     </button>
+    <tutorial-link></tutorial-link>
   </footer>
 </div>
diff --git a/packages/composer-playground/src/app/welcome/welcome.component.scss b/packages/composer-playground/src/app/welcome/welcome.component.scss
@@ -11,11 +11,6 @@ welcome-modal {
       align-items: center;
       text-align: center;
 
-      svg {
-        width: 200px;
-        height: 200px;
-      }
-
       p {
         padding: 0 $space-xlarge;
       }
@@ -24,7 +19,12 @@ welcome-modal {
     footer {
       background-color: $white;
       justify-content: center;
+      flex-direction: column;
       padding-bottom: $space-large;
+
+      tutorial-link {
+        margin-top: $space-large;
+      }
     }
   }
 }

diff --git a/packages/composer-playground/src/app/welcome/welcome.component.spec.ts b/packages/composer-playground/src/app/welcome/welcome.component.spec.ts
@@ -4,12 +4,19 @@
 /* tslint:disable:max-classes-per-file */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
+import { Component, DebugElement } from '@angular/core';
 
 import { WelcomeComponent } from './welcome.component';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import * as sinon from 'sinon';
 
+@Component({
+    selector: 'tutorial-link',
+    template: ''
+})
+class MockTutorialLinkComponent {
+}
+
 describe('WelcomeComponent', () => {
     let component: WelcomeComponent;
     let fixture: ComponentFixture<WelcomeComponent>;
@@ -23,7 +30,7 @@ describe('WelcomeComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [WelcomeComponent],
+            declarations: [WelcomeComponent, MockTutorialLinkComponent],
             providers: [{provide: NgbActiveModal, useValue: ngbActiveModalMock}]
         })
         .compileComponents();

diff --git a/packages/composer-playground/src/assets/styles/base/_icons.scss b/packages/composer-playground/src/assets/styles/base/_icons.scss
@@ -26,6 +26,12 @@ svg.large-icon {
   fill: $primary-text;
 }
 
+svg.splash-icon {
+  display: inline-block;
+  width: 200px;
+  height: 200px;
+  fill: $primary-text;
+}
 
 svg.blue-icon{
   fill: $second-highlight;

diff --git a/packages/composer-playground/src/assets/svg/other/question.svg b/packages/composer-playground/src/assets/svg/other/question.svg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './tutorial-link.component';
		export * from './tutorial-link.module';