From a4d84ebd1db8f9b881c33f5efefc4aa6c1fbf02f Mon Sep 17 00:00:00 2001
From: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Date: Wed, 23 Sep 2020 11:40:09 +0200
Subject: adding save for topology template content

Issue-ID: CCSDK-2298
Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Change-Id: I8333f84e1551bb49f016c25f1c98f8b0f15b7ed3
---
 .../configuration-dashboard.component.html         |  4 +-
 .../configuration-dashboard.component.ts           | 19 ++++-
 .../packages/designer/designer.component.html      | 87 +++++++++++++---------
 .../packages/designer/designer.component.ts        | 70 ++++++++++-------
 .../packages/designer/graph.generator.util.ts      | 15 ++--
 .../creationModes/DesignerCreationMode.ts          |  7 ++
 .../feature-modules/packages/packages.store.ts     |  2 +-
 7 files changed, 128 insertions(+), 76 deletions(-)

(limited to 'cds-ui/designer-client')

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
index 879b9b94a..e006f23e6 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
@@ -167,8 +167,8 @@
                             </button> -->
                             <!-- Button trigger modal - 1st Action -->
 
-                            <button type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal"
-                                    data-target="#exampleModalLong">
+                            <button (click)="checkSkipTypesOfAction()" type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal"
+                                    [attr.data-target]="dataTarget">
                                 <i class="icon-topologyView-active"></i> Designer Mode
                             </button>
                             <!-- Designer Modal -->
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
index 228953eb9..eb121e98e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
@@ -46,6 +46,7 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl
     versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$';
     metadataClasses = 'nav-item nav-link active';
     private cbaPackage: CBAPackage = new CBAPackage();
+    dataTarget: any = '';
 
     constructor(
         private route: ActivatedRoute,
@@ -159,8 +160,14 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl
             }
             this.packageCreationStore.changeDslDefinition(dslDefinition);
             this.packageCreationStore.setCustomKeys(mapOfCustomKeys);
-            if (definition.topology_template && definition.topology_template.content) {
-                this.designerStore.saveSourceContent(definition.topology_template.content);
+            if (definition.topology_template) {
+                const content = {};
+                const workflow = 'workflows';
+                content[workflow] = definition.topology_template.workflows;
+                const nodeTemplates = 'node_templates';
+                content[nodeTemplates] = definition.topology_template.node_templates;
+                this.designerStore.saveSourceContent(JSON.stringify(content));
+                this.packageCreationStore.addTopologyTemplate(definition.topology_template);
             }
 
         }
@@ -274,7 +281,6 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl
     }
 
     goToDesignerMode(id) {
-
         this.router.navigate(['/packages/designer', id, {actionName: this.customActionName}]);
     }
 
@@ -344,4 +350,11 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl
         return this.isSaveEnabled;
     }
 
+    checkSkipTypesOfAction() {
+        if (this.cbaPackage.templateTopology.node_templates && this.cbaPackage.templateTopology.workflows) {
+            this.goToDesignerMode(this.id);
+        } else {
+            this.dataTarget = '#exampleModalLong';
+        }
+    }
 }
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 88923229b..dd39cb243 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,9 +10,9 @@
                     </li>
                     <i class="fa fa-angle-right ml-2 mr-2"></i>
                     <li class="breadcrumb-item">
-                        <a href="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
+                        <a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
                         <button type="button" class="btn package-info-btn" data-toggle="modal"
-                            data-target="#exampleModalLong">
+                                data-target="#exampleModalLong">
                             <i class="icon-info" aria-hidden="true"></i>
                         </button>
                     </li>
@@ -22,13 +22,13 @@
                     </li>
                 </ol>
                 <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
-                    aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+                     aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                     <div class="modal-dialog" role="document">
                         <div class="modal-content">
                             <div class="modal-header">
                                 <h5 class="modal-title" id="exampleModalLongTitle">Package Details</h5>
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                    <img src="assets/img/icon-close.svg" />
+                                    <img src="assets/img/icon-close.svg"/>
                                 </button>
                             </div>
                             <div class="modal-body package-info">
@@ -70,15 +70,15 @@
                 <li>
                     <div class="btn-group" role="group" aria-label="Basic example">
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                            data-tooltip="Preview">
+                           data-tooltip="Preview">
                             <i class="fa fa-eye"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                            data-tooltip="Download">
+                           data-tooltip="Download">
                             <i class="fa fa-download"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
-                            data-tooltip="Share">
+                           data-tooltip="Share">
                             <i class="fa fa-share-square"></i>
                         </a>
                     </div>
@@ -106,7 +106,7 @@
 
 <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
     <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
-        data-tooltip="Collapse Side bar">
+            data-tooltip="Collapse Side bar">
         <i class="fa arr-size">&#xf100;</i>
     </button>
     <div class="collapse navbar-collapse ">
@@ -117,9 +117,9 @@
                     <div class="col-12">
                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
                             <a class="nav-item nav-link active col-6" id=" " data-toggle="tab" href="" role="tab"
-                                aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
+                               aria-controls=" " aria-selected="false" autofocus #nameit>Workflow</a>
                             <a class="nav-item nav-link col-6" id=" " data-toggle="tab" href="" role="tab"
-                                aria-controls=" " aria-selected="false">Template</a>
+                               aria-controls=" " aria-selected="false">Template</a>
                         </div>
                     </div>
                 </nav>
@@ -142,13 +142,15 @@
                 </button>
             </li>
             <li class="vertical_line"></li>
-            <li><button type="button" class="btn tooltip-bottom" data-tooltip="Zoom Out">
+            <li>
+                <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom Out">
                     <img src="/assets/img/icon-zoomOut.svg">
-                </button></li>
+                </button>
+            </li>
             <li class="zoom-percent">100%</li>
             <li>
                 <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom In">
-                    <img src="/assets/img/icon-zoomIn.svg"> </button>
+                    <img src="/assets/img/icon-zoomIn.svg"></button>
             </li>
         </ul>
 
@@ -157,7 +159,8 @@
                 <div class="btn-group viewBtns" role="group">
                     <button type="button" class="btn btn-secondary topologySource active">Designer</button>
                     <button [routerLink]="['/designer/source', viewedPackage.id]" type="button"
-                        class="btn btn-secondary topologyView">Scripting</button>
+                            class="btn btn-secondary topologyView">Scripting
+                    </button>
                 </div>
             </li>
         </ul>
@@ -168,16 +171,16 @@
 <ng-sidebar-container class="sidebar-container">
     <!-- Controller SideBar -->
     <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'"
-        [mode]="'push'" #sidebarLeft>
+                [mode]="'push'" #sidebarLeft>
 
         <nav class="row">
             <!--Nav Tabs-->
             <div class="col">
                 <div class="nav nav-tabs " id="nav-tab" role="tablist">
                     <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action"
-                        role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
+                       role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
                     <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function"
-                        role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
+                       role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
                 </div>
             </div>
         </nav>
@@ -185,7 +188,7 @@
             <div class="col">
                 <div class="tab-content" id="nav-tabContent">
                     <div class="tab-pane fade show active" id="nav-action" role="tabpanel"
-                        aria-labelledby="nav-action-tab">
+                         aria-labelledby="nav-action-tab">
                         <!--Action Search Box-->
                         <input type="text" class="form-control input-search-controller" placeholder="Search Actions">
 
@@ -197,12 +200,20 @@
                                 <label><i class="icon-file" aria-hidden="true"></i>
                                     {{customActionName}} </label>
                             </div>
+                            <div *ngIf="!showAction" class="custom-control">
+                                <ul>
+                                    <li *ngFor="let customActionName of actions">
+                                        <label><i class="icon-file" aria-hidden="true"></i>
+                                            {{customActionName}} </label>
+                                    </li>
+                                </ul>
+                            </div>
                         </div>
                     </div>
                     <div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab">
                         <!--Function Search Box-->
                         <input type="text" class="form-control input-search-controller" placeholder="Search Functions">
-                        <div id="palette-paper" class="componentsList"> </div>
+                        <div id="palette-paper" class="componentsList"></div>
                     </div>
 
                 </div>
@@ -277,7 +288,7 @@
     </div>
     <!-- Action Attribute SideBar -->
     <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'"
-        [position]="'right'" #sidebarRight>
+                [position]="'right'" #sidebarRight>
         <div class="container-fluid0">
             <div class="row m-0">
                 <div class="col-2 pr-0">
@@ -299,7 +310,8 @@
                                 <div class="card-header row" id="headingOne">
                                     <h2 class="col-10 mb-0">
                                         <button class="btn btn-link" type="button" data-toggle="collapse"
-                                            data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                                data-target="#collapseOne" aria-expanded="true"
+                                                aria-controls="collapseOne">
                                             Steps
                                         </button>
                                     </h2>
@@ -309,7 +321,7 @@
                                 </div>
 
                                 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                    data-parent="#accordionExample">
+                                     data-parent="#accordionExample">
                                     <div class="card-body">
                                         <div class="row">
                                             <div class="col-9">
@@ -329,7 +341,7 @@
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">Description</label>
                                             <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                rows="3"></textarea>
+                                                      rows="3"></textarea>
                                         </div>
                                         <div class="form-group">
                                             <label for="exampleInputEmail1">Target</label>
@@ -343,7 +355,8 @@
                                 <div class="card-header row" id="headingTwo">
                                     <h2 class="col-10 mb-0">
                                         <button class="btn btn-link" type="button" data-toggle="collapse"
-                                            data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+                                                data-target="#collapseTwo" aria-expanded="true"
+                                                aria-controls="collapseTwo">
                                             Inputs
                                         </button>
                                     </h2>
@@ -352,7 +365,7 @@
                                     </div>
                                 </div>
                                 <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
-                                    data-parent="#accordionExample">
+                                     data-parent="#accordionExample">
                                     <div class="card-body">
                                         <div class="row">
                                             <div class="col-9">
@@ -372,7 +385,7 @@
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">Description</label>
                                             <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                rows="3"></textarea>
+                                                      rows="3"></textarea>
                                         </div>
                                         <div class="form-group">
                                             <label for="exampleInputEmail1">Target</label>
@@ -386,8 +399,8 @@
                                 <div class="card-header row" id="headingThree">
                                     <h2 class="col-10 mb-0">
                                         <button class="btn btn-link" type="button" data-toggle="collapse"
-                                            data-target="#collapseThree" aria-expanded="true"
-                                            aria-controls="collapseThree">
+                                                data-target="#collapseThree" aria-expanded="true"
+                                                aria-controls="collapseThree">
                                             Outputs
                                         </button>
                                     </h2>
@@ -396,7 +409,7 @@
                                     </div>
                                 </div>
                                 <div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
-                                    data-parent="#accordionExample">
+                                     data-parent="#accordionExample">
                                     <div class="card-body">
                                         <div class="row">
                                             <div class="col-9">
@@ -416,7 +429,7 @@
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">Description</label>
                                             <textarea class="form-control" id="exampleFormControlTextarea1"
-                                                rows="3"></textarea>
+                                                      rows="3"></textarea>
                                         </div>
                                         <div class="form-group">
                                             <label for="exampleInputEmail1">Target</label>
@@ -435,7 +448,7 @@
 
     <!-- Function Attribute SideBar -->
     <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '"
-        [mode]="'push'" [position]="'right'" #sidebarRight>
+                [mode]="'push'" [position]="'right'" #sidebarRight>
         <div class="container-fluid0">
             <div class="row m-0">
                 <div class="col-2 pr-0">
@@ -493,7 +506,7 @@
                             <div class="card-header row" id="headingOne">
                                 <h2 class="col-10 mb-0">
                                     <button class="btn btn-link" type="button" data-toggle="collapse"
-                                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                            data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                         Interface
                                     </button>
                                 </h2>
@@ -503,7 +516,7 @@
                             </div>
 
                             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                data-parent="#accordionExample">
+                                 data-parent="#accordionExample">
                                 <div class="card-body">
                                     <div class="row">
                                         <div class="col-9">
@@ -525,11 +538,11 @@
                                     </div>
                                     <div class="form-group">
                                         <label>
-                                            <input class="with-gap radio-btn" name="group1" type="radio" />
+                                            <input class="with-gap radio-btn" name="group1" type="radio"/>
                                             <span class="radio-btn">True</span>
                                         </label>
                                         <label class="radio-btn">
-                                            <input class="with-gap radio-btn" name="group1" type="radio" />
+                                            <input class="with-gap radio-btn" name="group1" type="radio"/>
                                             <span class="radio-btn">False</span>
                                         </label>
                                     </div>
@@ -554,7 +567,7 @@
                             <div class="card-header row" id="headingOne">
                                 <h2 class="col-10 mb-0">
                                     <button class="btn btn-link" type="button" data-toggle="collapse"
-                                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                            data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                         Artifact
                                     </button>
                                 </h2>
@@ -564,7 +577,7 @@
                             </div>
 
                             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                data-parent="#accordionExample">
+                                 data-parent="#accordionExample">
                                 <div class="card-body">
                                     <div class="row">
                                         <div class="col-9">
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 0509b1d0e..d8113633d 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
@@ -25,30 +25,32 @@ limitations under the License.
 
 import dagre from 'dagre';
 import graphlib from 'graphlib';
-import {Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import * as joint from 'jointjs';
 import './jointjs/elements/palette.function.element';
 import './jointjs/elements/action.element';
 import './jointjs/elements/board.function.element';
-import {DesignerStore} from './designer.store';
-import {ActionElementTypeName} from 'src/app/common/constants/app-constants';
-import {GraphUtil} from './graph.util';
-import {GraphGenerator} from './graph.generator.util';
-import {FunctionsStore} from './functions.store';
-import {Subject} from 'rxjs';
-import {distinctUntilChanged, takeUntil} from 'rxjs/operators';
-import {BluePrintDetailModel} from '../model/BluePrint.detail.model';
-import {ActivatedRoute} from '@angular/router';
-import {DesignerService} from './designer.service';
-import {FilesContent, FolderNodeElement} from '../package-creation/mapping-models/metadata/MetaDataTab.model';
-import {PackageCreationModes} from '../package-creation/creationModes/PackageCreationModes';
-import {PackageCreationBuilder} from '../package-creation/creationModes/PackageCreationBuilder';
-import {PackageCreationStore} from '../package-creation/package-creation.store';
-import {PackageCreationService} from '../package-creation/package-creation.service';
-import {PackageCreationUtils} from '../package-creation/package-creation.utils';
+import { DesignerStore } from './designer.store';
+import { ActionElementTypeName } from 'src/app/common/constants/app-constants';
+import { GraphUtil } from './graph.util';
+import { GraphGenerator } from './graph.generator.util';
+import { FunctionsStore } from './functions.store';
+import { Subject } from 'rxjs';
+import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DesignerService } from './designer.service';
+import { FilesContent, FolderNodeElement } from '../package-creation/mapping-models/metadata/MetaDataTab.model';
+import { PackageCreationModes } from '../package-creation/creationModes/PackageCreationModes';
+import { PackageCreationBuilder } from '../package-creation/creationModes/PackageCreationBuilder';
+import { PackageCreationStore } from '../package-creation/package-creation.store';
+import { PackageCreationService } from '../package-creation/package-creation.service';
+import { PackageCreationUtils } from '../package-creation/package-creation.utils';
 import * as JSZip from 'jszip';
-import {PackageCreationExtractionService} from '../package-creation/package-creation-extraction.service';
-import {CBAPackage} from '../package-creation/mapping-models/CBAPacakge.model';
+import { PackageCreationExtractionService } from '../package-creation/package-creation-extraction.service';
+import { CBAPackage } from '../package-creation/mapping-models/CBAPacakge.model';
+import { TopologyTemplate } from './model/designer.topologyTemplate.model';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
     selector: 'app-designer',
@@ -72,11 +74,12 @@ export class DesignerComponent implements OnInit, OnDestroy {
     paletteGraph: joint.dia.Graph;
     palettePaper: joint.dia.Paper;
     ngUnsubscribe = new Subject();
-    opt = {tx: 100, ty: 100};
+    opt = { tx: 100, ty: 100 };
     filesData: any = [];
     folder: FolderNodeElement = new FolderNodeElement();
     zipFile: JSZip = new JSZip();
-    private cbaPackage: CBAPackage;
+    cbaPackage: CBAPackage;
+    actions: string[] = [];
 
     constructor(
         private designerStore: DesignerStore,
@@ -86,9 +89,11 @@ export class DesignerComponent implements OnInit, OnDestroy {
         private graphUtil: GraphUtil,
         private graphGenerator: GraphGenerator,
         private route: ActivatedRoute,
+        private router: Router,
         private designerService: DesignerService,
         private packageCreationService: PackageCreationService,
-        private packageCreationExtractionService: PackageCreationExtractionService) {
+        private packageCreationExtractionService: PackageCreationExtractionService,
+        private toastService: ToastrService) {
         this.controllerSideBar = true;
         this.attributesSideBar = false;
         this.showAction = false;
@@ -143,7 +148,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
                     this.packageCreationService.downloadPackage(this.viewedPackage.artifactName + '/'
                         + this.viewedPackage.artifactVersion)
                         .subscribe(response => {
-                            const blob = new Blob([response], {type: 'application/octet-stream'});
+                            const blob = new Blob([response], { type: 'application/octet-stream' });
                             this.packageCreationExtractionService.extractBlobToStore(blob);
                         });
                 }
@@ -152,7 +157,9 @@ export class DesignerComponent implements OnInit, OnDestroy {
             this.cbaPackage = cba;
             console.log(cba.templateTopology.content);
             this.designerStore.saveSourceContent(cba.templateTopology.content);
+
         });
+
         /**
          * the code to retrieve from server is commented
          */
@@ -186,9 +193,10 @@ export class DesignerComponent implements OnInit, OnDestroy {
                 if (state.sourceContent) {
                     console.log('inside desinger.component---> ', state);
                     // generate graph from store objects if exist
-                    const topologtTemplate = JSON.parse(state.sourceContent);
+                    const topologtTemplate: TopologyTemplate = JSON.parse(state.sourceContent);
                     console.log(topologtTemplate);
                     delete state.sourceContent;
+                    this.graphGenerator.clear(this.boardGraph);
                     this.graphGenerator.populate(topologtTemplate, this.boardGraph);
 
                     console.log('all cells', this.boardGraph.getCells());
@@ -202,9 +210,14 @@ export class DesignerComponent implements OnInit, OnDestroy {
                         setLinkVertices: false,
                         marginX: 10,
                         marginY: 10,
-                        clusterPadding: {top: 100, left: 30, right: 10, bottom: 100},
+                        clusterPadding: { top: 100, left: 30, right: 10, bottom: 100 },
                         rankDir: 'TB'
                     });
+                    for (const workflowsKey in topologtTemplate.workflows) {
+                        if (workflowsKey && !this.actions.includes(workflowsKey)) {
+                            this.actions.push(workflowsKey);
+                        }
+                    }
                 }
             });
 
@@ -426,13 +439,16 @@ export class DesignerComponent implements OnInit, OnDestroy {
 
     saveBluePrintToDataBase() {
         this.create();
-        this.zipFile.generateAsync({type: 'blob'})
+        this.zipFile.generateAsync({ type: 'blob' })
             .then(blob => {
                 this.packageCreationService.savePackage(blob).subscribe(
                     bluePrintDetailModels => {
+                        this.toastService.info('success updating the package');
+                        const id = bluePrintDetailModels.toString().split('id')[1].split(':')[1].split('"')[1];
+                        this.router.navigate(['/packages/designer/' + id]);
                         console.log('success');
                     }, error => {
-                        // this.toastService.error('error happened when editing ' + error.message);
+                        this.toastService.error('error happened when editing ' + error.message);
                         console.log('Error -' + error.message);
                     });
             });
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts
index 8e1d88907..226f54399 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts
@@ -18,10 +18,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 */
-import { TopologyTemplate } from './model/designer.topologyTemplate.model';
-import { Injectable } from '@angular/core';
-import { GraphUtil } from './graph.util';
-import { NodeTemplate } from './model/desinger.nodeTemplate.model';
+import {TopologyTemplate} from './model/designer.topologyTemplate.model';
+import {Injectable} from '@angular/core';
+import {GraphUtil} from './graph.util';
 
 @Injectable({
     providedIn: 'root'
@@ -31,6 +30,10 @@ export class GraphGenerator {
     constructor(private graphUtil: GraphUtil) {
     }
 
+    clear(boardGraph: joint.dia.Graph) {
+        boardGraph.clear();
+    }
+
     /**
      * loops over workflows
      * create action element
@@ -79,7 +82,7 @@ export class GraphGenerator {
 
             // create action element
             const actionElement =
-                    this.graphUtil.createCustomActionWithName(workFlowName, boardGraph);
+                this.graphUtil.createCustomActionWithName(workFlowName, boardGraph);
 
             // create board function elements
             const workflow = topologyTempalte.workflows[workFlowName].steps;
@@ -91,7 +94,7 @@ export class GraphGenerator {
 
                 this.graphUtil.dropFunctionOverActionRelativeToParent(
                     actionElement,
-                    stepName , functionType, boardGraph);
+                    stepName, functionType, boardGraph);
 
                 // TODO handle dg-generic case (multi-step in the same action)
                 if (functionType === 'dg-generic') {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts
index e9dd667d2..a9deb675a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts
@@ -74,15 +74,22 @@ export class DesignerCreationMode extends PackageCreationModes {
         metadata.template_tags = fullTags;
         vlbDefinition.metadata = metadata;
         const files: Import[] = [];
+        let insideVlbDefinition: VlbDefinition = null;
         if (cbaPackage.definitions.imports && cbaPackage.definitions.imports.size > 0) {
             cbaPackage.definitions.imports.forEach((valueOfFile, key) => {
                 if (!key.includes(cbaPackage.metaData.name)) {
                     files.push({file: key});
+                } else {
+                    // it means this is entry definition
+                    insideVlbDefinition = JSON.parse(valueOfFile);
                 }
             });
         }
         console.log(vlbDefinition);
         vlbDefinition.imports = files;
+        if (insideVlbDefinition && insideVlbDefinition.topology_template) {
+            vlbDefinition.topology_template = insideVlbDefinition.topology_template;
+        }
         console.log(cbaPackage.definitions.dslDefinition.content);
         if (cbaPackage.definitions.dslDefinition.content) {
             vlbDefinition.dsl_definitions = JSON.parse(cbaPackage.definitions.dslDefinition.content);
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
index b6d008b67..1377d256a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
@@ -32,7 +32,7 @@ import { NgxUiLoaderService } from 'ngx-ui-loader';
 })
 export class PackagesStore extends Store<PackagesDashboardState> {
     // TDOD fixed for now as there is no requirement to change it from UI
-    public pageSize = 5;
+    public pageSize = 15;
     private bluePrintContent: BluePrintPage = new BluePrintPage();
 
     constructor(
-- 
cgit 1.2.3-korg