Fix deploy doc links in playground (hyperledger-archives#4109)

Also updates config service to include documentation URL

Closes #4096

Signed-off-by: James Taylor <[email protected]>

packages/composer-playground/src/app/basic-modals/connect-confirm/connect-confirm.component.html

@@ -28,7 +28,7 @@ <h1>Business network {{network}} cannot be updated</h1>
       <p>You can only connect to <b>{{network}}</b> to view and test the deployed business network version.</p>
       <p>
         You must import business network cards with the correct admin rights before you can deploy new versions of a business network.
-        <a href="https://hyperledger.github.io/composer/business-network/bnd-deploy.html" target="_blank">Learn more</a>.
+        <a href="{{ config.docURL }}/business-network/bnd-deploy.html" target="_blank">Learn more</a>.
       </p>
     </section>
   </section>

packages/composer-playground/src/app/basic-modals/connect-confirm/connect-confirm.component.spec.ts

@@ -22,6 +22,8 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import * as sinon from 'sinon';
 import { ConnectConfirmComponent } from './connect-confirm.component';
+import { ConfigService } from '../../services/config.service';
+import { Config } from '../../services/config/configStructure.service';
 
 @Component({
     template: `
@@ -35,13 +37,23 @@ describe('ConnectConfirmComponent', () => {
     let fixture: ComponentFixture<TestHostComponent>;
 
     let mockActiveModal = sinon.createStubInstance(NgbActiveModal);
+    let mockConfigService;
+    let mockConfig;
 
     let connectElement: DebugElement;
 
     beforeEach(() => {
+        mockConfig = sinon.createStubInstance(Config);
+        mockConfigService = sinon.createStubInstance(ConfigService);
+        mockConfigService.getConfig.returns(mockConfig);
+
         TestBed.configureTestingModule({
             declarations: [ConnectConfirmComponent, TestHostComponent],
-            providers: [{provide: NgbActiveModal, useValue: mockActiveModal}]
+            providers: [
+                {provide: NgbActiveModal, useValue: mockActiveModal},
+                {provide: ConfigService, useValue: mockConfigService},
+                {provide: Config, useValue: mockConfig}
+            ]
         });
         fixture = TestBed.createComponent(TestHostComponent);
         component = fixture.componentInstance;
@@ -53,6 +65,15 @@ describe('ConnectConfirmComponent', () => {
         component.should.be.ok;
     });
 
+    it('should load config if required', () => {
+        mockConfigService.getConfig.throws(new Error('error'));
+        mockConfigService.loadConfig.resolves(mockConfig);
+
+        fixture.detectChanges();
+
+        mockConfigService.loadConfig.should.have.been.called;
+    });
+
     it('should set the business network name', () => {
         let networkElement = connectElement.query((By.css('h1')));
 
@@ -83,4 +104,15 @@ describe('ConnectConfirmComponent', () => {
         okButton.triggerEventHandler('click', null);
         mockActiveModal.close.should.have.been.calledWith(true);
     });
+
+    it('should include link to the documentation site in the config', () => {
+        mockConfig.docURL = 'https://doc_url';
+
+        fixture.detectChanges();
+
+        let infoSection: DebugElement = connectElement.query(By.css('.information'));
+        let learnMoreLink: DebugElement = infoSection.query(By.css('a'));
+
+        learnMoreLink.nativeElement.href.should.equal('https://doc_url/business-network/bnd-deploy.html');
+    });
 });

packages/composer-playground/src/app/basic-modals/connect-confirm/connect-confirm.component.ts

@@ -11,19 +11,36 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
+import { ConfigService } from '../../services/config.service';
+import { Config } from '../../services/config/configStructure.service';
+
 @Component({
     selector: 'connect-confirm',
     templateUrl: './connect-confirm.component.html',
     styleUrls: ['./connect-confirm.component.scss'.toString()]
 })
 
-export class ConnectConfirmComponent {
+export class ConnectConfirmComponent implements OnInit {
 
     @Input() network: string = null;
 
-    constructor(public activeModal: NgbActiveModal) {
+    private config = new Config();
+
+    constructor(public activeModal: NgbActiveModal,
+                private configService: ConfigService) {
+    }
+
+    ngOnInit() {
+        try {
+            this.config = this.configService.getConfig();
+        } catch (err) {
+            this.configService.loadConfig()
+            .then((config) => {
+                this.config = config;
+            });
+        }
     }
 }

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

@@ -51,6 +51,7 @@ const mockResponseConfigService = {
     webonly: true,
     title: 'My Title',
     banner: ['My', 'Banner'],
+    docURL: 'https://doc_url',
     links: {
         docs: 'My Docs',
         tutorial: 'My Tutorial',
@@ -98,6 +99,7 @@ describe('FooterComponent', () => {
             myConfig.webonly = true;
             myConfig.title = 'My Title';
             myConfig.banner = ['My', 'Banner'];
+            myConfig.docURL = 'https://doc_url';
             myConfig.links = {
                 docs: 'My Docs',
                 tutorial: 'My Tutorial',
@@ -142,6 +144,7 @@ describe('FooterComponent', () => {
             myConfig.webonly = true;
             myConfig.title = 'My Title';
             myConfig.banner = ['My', 'Banner'];
+            myConfig.docURL = 'https://doc_url';
             myConfig.links = {
                 docs: 'My Docs',
                 tutorial: 'My Tutorial',
@@ -169,6 +172,7 @@ describe('FooterComponent', () => {
             myConfig.webonly = true;
             myConfig.title = 'My Title';
             myConfig.banner = ['My', 'Banner'];
+            myConfig.docURL = 'https://doc_url';
             myConfig.links = {
                 docs: 'My Docs',
                 tutorial: 'My Tutorial',

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

@@ -56,7 +56,7 @@ <h2>Connection: {{connectionProfileRef === 'web-$default' ? 'Web Browser' : this
                     <use xlink:href="#icon-get-information_64"></use>
                 </svg>
                 <p>You must <a href="javascript:void(0);" (click)="importIdentity()">import</a> identity cards with the correct admin rights for deploying new business networks.</p>
-                <p><a href="https://hyperledger.github.io/composer/business-network/bnd-deploy.html" target="_blank">Learn more</a>.</p>
+                <p><a href="{{ config.docURL }}/business-network/bnd-deploy.html" target="_blank">Learn more</a>.</p>
             </div>
         </div>
     </div>

packages/composer-playground/src/app/services/config/configStructure.service.spec.ts

@@ -31,6 +31,7 @@ describe('Config', () => {
               webonly: true,
               title: 'My Title',
               banner: ['My', 'Banner'],
+              docURL: 'https://doc_url',
               links: {
                 docs: 'My Docs',
                 tutorial: 'My Tutorial',
@@ -47,6 +48,7 @@ describe('Config', () => {
           service.webonly.should.deep.equal(true);
           service.title.should.deep.equal('My Title');
           service.banner.should.deep.equal(['My', 'Banner']);
+          service.docURL.should.deep.equal('https://doc_url');
           service.links.should.deep.equal({
                                             docs: 'My Docs',
                                             tutorial: 'My Tutorial',
@@ -102,6 +104,7 @@ describe('Config', () => {
         service.webonly = true;
         service.title = 'My Title';
         service.banner = ['My', 'Banner'];
+        service.docURL = 'https://doc_url';
         service.links = {
           docs: 'My Docs',
           tutorial: 'My Tutorial',
@@ -117,6 +120,7 @@ describe('Config', () => {
         service.webonly.should.deep.equal(false);
         service.title.should.deep.equal('Hyperledger Composer');
         service.banner.should.deep.equal(['Hyperledger', 'Composer Playground']);
+        service.docURL.should.deep.equal('https://hyperledger.github.io/composer/latest');
         service.links.should.deep.equal({
                                             docs: 'https://hyperledger.github.io/composer/latest/introduction/introduction.html',
                                             tutorial: 'https://hyperledger.github.io/composer/latest/tutorials/playground-tutorial.html',

packages/composer-playground/src/app/services/config/configStructure.service.ts

@@ -15,6 +15,7 @@ export class Config {
   public webonly: boolean = false;
   public title: string = '';
   public banner: Array<string> = ['', ''];
+  public docURL: string = '';
   public links: object = {
     docs: <string> '',
     tutorial: <string> '',
@@ -33,6 +34,7 @@ export class Config {
     this.webonly = false;
     this.title = 'Hyperledger Composer';
     this.banner = ['Hyperledger', 'Composer Playground'];
+    this.docURL = 'https://hyperledger.github.io/composer/latest';
     this.links = {
       docs: <string> 'https://hyperledger.github.io/composer/latest/introduction/introduction.html',
       tutorial: <string> 'https://hyperledger.github.io/composer/latest/tutorials/playground-tutorial.html',