Designer > Breadcrumb

1. Change Package name to current package name
2. Make package name link open to package view

Issue-ID: CCSDK-2247
Change-Id: Ica060beff9a0785d80c69cf971623dd45ebe75fe
Signed-off-by: Rupinder <rupinsi1@in.ibm.com>

6 files changed, 78 insertions, 11 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
index 6e072b18d..3e3528c00 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -10,7 +10,7 @@
                     </li>
                     <i class="fa fa-angle-right ml-2 mr-2"></i>
                     <li class="breadcrumb-item">
-                        <a href="#">Package Name</a>
+                        <a href="/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
                         <button type="button" class="btn package-info-btn" data-toggle="modal"
                             data-target="#exampleModalLong">
                             <i class="icon-info" aria-hidden="true"></i>
@@ -102,7 +102,7 @@
 <div class="source-button editBar">
     <div class="btn-group viewBtns" role="group">
         <button type="button" class="btn btn-secondary topologySource active">Designer</button>
-        <button [routerLink]="['/designer/source']" type="button"
+        <button [routerLink]="['/designer/source', viewedPackage.id]" type="button"
             class="btn btn-secondary topologyView">Scripting</button>
     </div>
 </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
index 5adce7ea0..fa3a99b49 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -3,6 +3,8 @@
 ===================================================================
 Copyright (C) 2019 Orange. All rights reserved.
 ===================================================================
+Modification Copyright (c) 2020 IBM
+===================================================================
 
 Unless otherwise specified, all software contained herein is licensed
 under the Apache License, Version 2.0 (the License);
@@ -34,6 +36,9 @@ import { FunctionsStore } from './functions.store';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { distinctUntilChanged } from 'rxjs/operators';
+import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
+import { ActivatedRoute } from '@angular/router';
+import { DesignerService } from './designer.service';
 
 
 @Component({
@@ -46,6 +51,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
 
   private controllerSideBar: boolean;
   private attributesSideBar: boolean;
+  viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
 
   boardGraph: joint.dia.Graph;
   boardPaper: joint.dia.Paper;
@@ -58,7 +64,9 @@ export class DesignerComponent implements OnInit, OnDestroy {
   constructor(private designerStore: DesignerStore,
               private functionStore: FunctionsStore,
               private graphUtil: GraphUtil,
-              private graphGenerator: GraphGenerator) {
+              private graphGenerator: GraphGenerator,
+              private route: ActivatedRoute,
+              private designerService: DesignerService) {
     this.controllerSideBar = true;
     this.attributesSideBar = false;
 
@@ -88,6 +96,14 @@ export class DesignerComponent implements OnInit, OnDestroy {
     this.initializePalette();
     this.stencilPaperEventListeners();
 
+    const id = this.route.snapshot.paramMap.get('id');
+    this.designerService.getPagedPackages(id).subscribe(
+      (bluePrintDetailModels) => {
+        if (bluePrintDetailModels) {
+          this.viewedPackage = bluePrintDetailModels[0];
+        }
+      });
+
     /**
      * the code to retrieve from server is commented
      */
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts
index aa3a6a668..771c44ba8 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts
@@ -3,6 +3,8 @@
 ===================================================================
 Copyright (C) 2019 Orange. All rights reserved.
 ===================================================================
+Modification Copyright (c) 2020 IBM
+===================================================================
 
 Unless otherwise specified, all software contained herein is licensed
 under the Apache License, Version 2.0 (the License);
@@ -22,8 +24,9 @@ limitations under the License.
 import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
 import {ApiService} from '../../../../common/core/services/api.typed.service';
-import {ResourceDictionaryURLs} from '../../../../common/constants/app-constants';
+import {ResourceDictionaryURLs, BlueprintURLs} from '../../../../common/constants/app-constants';
 import {ModelType} from './model/ModelType.model';
+import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
 
 
 @Injectable({
@@ -31,11 +34,20 @@ import {ModelType} from './model/ModelType.model';
 })
 export class DesignerService {
 
-    constructor(private api: ApiService<ModelType>) {
+    constructor(private api: ApiService<ModelType>,
+                private api2: ApiService<BluePrintDetailModel>) {
     }
 
     getFunctions(modelDefinitionType: string): Observable<ModelType[]> {
         return this.api.get(ResourceDictionaryURLs.getResourceDictionary + '/' + modelDefinitionType);
     }
 
+    private getBluePrintModel(id: string): Observable<BluePrintDetailModel> {
+        return this.api2.getOne(BlueprintURLs.getOneBlueprint + '/' + id);
+    }
+
+    getPagedPackages(id: string) {
+        return this.getBluePrintModel(id);
+    }
+
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html
index 2a558517c..05f6eeb5a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html
@@ -8,7 +8,7 @@
                         <a href="#">CBA Packages</a>
                     </li>
                     <li class="breadcrumb-item">
-                        <a href="#">Package Name</a>
+                        <a href="/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
                     </li>
                     <li class="breadcrumb-item active" aria-current="page">
                         <p class="mb-0">Topology View</p>
@@ -56,7 +56,7 @@
 </header>
 <div class="source-button editBar">
     <div class="btn-group viewBtns" role="group">
-        <button (click)="convertAndOpenInDesingerView()" type="button" class="btn btn-secondary topologySource">Designer</button>
+        <button (click)="convertAndOpenInDesingerView(viewedPackage.id)" type="button" class="btn btn-secondary topologySource">Designer</button>
         <button type="button"
             class="btn btn-secondary topologyView active">Scripting</button>
     </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts
index 34194e42f..e70d98d04 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.ts
@@ -1,8 +1,11 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { DesignerStore } from '../designer.store';
 import { PackageCreationUtils } from '../../package-creation/package-creation.utils';
-import { RouterLink, Router } from '@angular/router';
+import { RouterLink, Router, ActivatedRoute } from '@angular/router';
 import { Subject } from 'rxjs';
+import { BluePrintDetailModel } from '../../model/BluePrint.detail.model';
+import { viewClassName } from '@angular/compiler';
+import { SourceViewService } from './source-view.service';
 
 @Component({
     selector: 'app-designer-source-view',
@@ -15,10 +18,13 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy {
     lang = 'json';
     private controllerSideBar: boolean;
     private ngUnsubscribe = new Subject();
+    viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
 
     constructor(private store: DesignerStore,
                 private packageCreationUtils: PackageCreationUtils,
-                private router: Router) {
+                private router: Router,
+                private route: ActivatedRoute,
+                private sourceViewService: SourceViewService) {
         this.controllerSideBar = true;
     }
 
@@ -29,13 +35,20 @@ export class DesignerSourceViewComponent implements OnInit, OnDestroy {
                 this.content = this.packageCreationUtils.transformToJson(state.template);
             });
 
+        const id = this.route.snapshot.paramMap.get('id');
+        this.sourceViewService.getPagedPackages(id).subscribe(
+            (bluePrintDetailModels) => {
+                if (bluePrintDetailModels) {
+                    this.viewedPackage = bluePrintDetailModels[0];
+                }
+            });
     }
 
-    convertAndOpenInDesingerView() {
+    convertAndOpenInDesingerView(id) {
         // TODO validate json against scheme
         console.log('convertAndOpenInDesingerView ...', this.content);
         this.store.saveSourceContent(this.content);
-        this.router.navigateByUrl('/packages/designer');
+        this.router.navigate(['/packages/designer', id]);
     }
 
     ngOnDestroy() {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.service.ts
new file mode 100644
index 000000000..758952221
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.service.ts
@@ -0,0 +1,26 @@
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import { ApiService } from 'src/app/common/core/services/api.typed.service';
+import { BluePrintDetailModel } from '../../model/BluePrint.detail.model';
+import { ModelType } from '../model/ModelType.model';
+import { ResourceDictionaryURLs, BlueprintURLs } from 'src/app/common/constants/app-constants';
+
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class SourceViewService {
+
+    constructor(private api1: ApiService<BluePrintDetailModel>) {
+    }
+
+
+    private getBluePrintModel(id: string): Observable<BluePrintDetailModel> {
+        return this.api1.getOne(BlueprintURLs.getOneBlueprint + '/' + id);
+    }
+    getPagedPackages(id: string) {
+        return this.getBluePrintModel(id);
+    }
+
+}