From 8049a6f71ddfae40b62b23f4307acce65fee8001 Mon Sep 17 00:00:00 2001
From: Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>
Date: Sun, 27 Sep 2020 11:29:59 +0200
Subject: add save & deploy button in designer

Issue-ID: CCSDK-2299

Signed-off-by: Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: I35bf9a40633e9bd3f114671912c5e0521e44f754
---
 .../configuration-dashboard.component.html         | 334 ++++++++++-----------
 .../packages/designer/designer.component.css       |   4 +-
 .../packages/designer/designer.component.html      |  72 +++--
 .../packages/designer/designer.component.ts        |  16 +
 .../packages/designer/designer.service.ts          |  21 +-
 .../package-creation-extraction.service.ts         |  30 +-
 6 files changed, 238 insertions(+), 239 deletions(-)

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 e006f23e6..edb247a1f 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
@@ -81,7 +81,7 @@
                         <span>Save</span>
                     </button>
                     <button data-target="#discardChangesModal" data-toggle="modal" class="action-button"
-                            [disabled]="!isSaveEnabled">
+                        [disabled]="!isSaveEnabled">
                         <i class="icon-discard-sm" aria-hidden="true"></i>
                         <span>Discard Changes</span>
                     </button>
@@ -98,7 +98,7 @@
                     </a>
 
                     <a class="action-button"
-                       (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)">
+                        (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)">
                         <i class="icon-download" aria-hidden="true"></i>
                         <span>Download</span>
                     </a>
@@ -127,7 +127,8 @@
                             <div class="row package-auth-info">
                                 <div class="col-3">
                                     <p><b>Author Name</b></p>
-                                    <span> {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}</span>
+                                    <span>
+                                        {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}</span>
                                 </div>
                                 <!--<div class="col-4">
                                     <p><b>Author Email</b></p>
@@ -138,19 +139,19 @@
                                     <ul class="package-contributers">
                                         <li>
                                             <button type="button" class="border-fade" data-toggle="tooltip"
-                                                    data-placement="bottom" title="User name">
+                                                data-placement="bottom" title="User name">
                                                 <img src="/assets/img/img-user1.jpeg">
                                             </button>
                                         </li>
                                         <li>
                                             <button type="button" data-toggle="tooltip" data-placement="bottom"
-                                                    title="User name">
+                                                title="User name">
                                                 <img src="/assets/img/img-user2.jpg">
                                             </button>
                                         </li>
                                         <li>
                                             <button type="button" data-toggle="tooltip" data-placement="bottom"
-                                                    title="User name">
+                                                title="User name">
                                                 <img src="/assets/img/img-user3.jpg">
                                             </button>
                                         </li>
@@ -167,25 +168,25 @@
                             </button> -->
                             <!-- Button trigger modal - 1st Action -->
 
-                            <button (click)="checkSkipTypesOfAction()" type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal"
-                                    [attr.data-target]="dataTarget">
+                            <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 -->
                             <div class="modal fade createActionModal" 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"></h5>
                                             <button type="button" class="close" data-dismiss="modal" aria-label="Close"
-                                                    title="Close">
+                                                title="Close">
                                                 <i class="icon-action-close"></i>
                                             </button>
                                         </div>
                                         <div class="modal-body">
                                             <div id="carouselExampleIndicators" class="carousel slide"
-                                                 data-ride="carousel" data-interval="false">
+                                                data-ride="carousel" data-interval="false">
                                                 <div class="carousel-inner">
                                                     <!--OPTIONS SLIDE-->
                                                     <div class="carousel-item active">
@@ -195,15 +196,15 @@
                                                             <!--Custom Action-->
                                                             <div class="col-3 d-flex">
                                                                 <a class="d-flex"
-                                                                   data-target="#carouselExampleIndicators"
-                                                                   data-slide-to="1">
+                                                                    data-target="#carouselExampleIndicators"
+                                                                    data-slide-to="1">
                                                                     <div class="card actionType custom">
                                                                         <div class="card-body">
                                                                             <h3>Custom</h3>
                                                                             <p>Start with your own settings</p>
                                                                             <button
-                                                                                    data-target="#carouselExampleIndicators"
-                                                                                    data-slide-to="1" class="btn">
+                                                                                data-target="#carouselExampleIndicators"
+                                                                                data-slide-to="1" class="btn">
                                                                                 Create
                                                                             </button>
                                                                         </div>
@@ -213,16 +214,16 @@
                                                             <!--Default Action-->
                                                             <div class="col-3 d-flex">
                                                                 <a class="d-flex"
-                                                                   data-target="#carouselExampleIndicators"
-                                                                   data-slide-to="2">
+                                                                    data-target="#carouselExampleIndicators"
+                                                                    data-slide-to="2">
                                                                     <div class="card actionType default">
                                                                         <div class="card-body">
                                                                             <h3>Default</h3>
                                                                             <p>Explore preset actions from CDS
                                                                                 Action Catalog</p>
                                                                             <button
-                                                                                    data-target="#carouselExampleIndicators"
-                                                                                    data-slide-to="2" class="btn">
+                                                                                data-target="#carouselExampleIndicators"
+                                                                                data-slide-to="2" class="btn">
                                                                                 Select
                                                                             </button>
                                                                         </div>
@@ -232,8 +233,8 @@
                                                             <!--Recent Action-->
                                                             <div class="col-3 d-flex">
                                                                 <a class="d-flex"
-                                                                   data-target="#carouselExampleIndicators"
-                                                                   data-slide-to="3">
+                                                                    data-target="#carouselExampleIndicators"
+                                                                    data-slide-to="3">
                                                                     <div class="card actionType recent">
                                                                         <div class="card-body">
                                                                             <h3>Recent</h3>
@@ -241,8 +242,8 @@
                                                                                 recent
                                                                                 packages</p>
                                                                             <button
-                                                                                    data-target="#carouselExampleIndicators"
-                                                                                    data-slide-to="3" class="btn">
+                                                                                data-target="#carouselExampleIndicators"
+                                                                                data-slide-to="3" class="btn">
                                                                                 Select
                                                                             </button>
                                                                         </div>
@@ -252,15 +253,15 @@
                                                             <!--Import Action-->
                                                             <div class="col-3 d-flex">
                                                                 <a class="d-flex"
-                                                                   data-target="#carouselExampleIndicators"
-                                                                   data-slide-to="4">
+                                                                    data-target="#carouselExampleIndicators"
+                                                                    data-slide-to="4">
                                                                     <div class="card actionType import">
                                                                         <div class="card-body">
                                                                             <h3>Import</h3>
                                                                             <p>Import your own action files</p>
                                                                             <button
-                                                                                    data-target="#carouselExampleIndicators"
-                                                                                    data-slide-to="4" class="btn">
+                                                                                data-target="#carouselExampleIndicators"
+                                                                                data-slide-to="4" class="btn">
                                                                                 Browse
                                                                             </button>
                                                                         </div>
@@ -270,8 +271,8 @@
                                                         </div>
                                                         <div class="row">
                                                             <div class="col text-center">
-                                                                <button class="btn skip-btn"
-                                                                        (click)="goToDesignerMode(viewedPackage.id)">
+                                                                <button class="btn skip-btn" data-dismiss="modal"
+                                                                    (click)="goToDesignerMode(viewedPackage.id)">
                                                                     Skip
                                                                     to Designer Canvas
                                                                 </button>
@@ -281,16 +282,16 @@
                                                     <!--Custom Action Form-->
                                                     <div class="carousel-item">
                                                         <button data-target="#carouselExampleIndicators"
-                                                                data-slide-to="0" title="Back" class="btn back"><i
+                                                            data-slide-to="0" title="Back" class="btn back"><i
                                                                 class="icon-action-back"></i></button>
                                                         <h1>Create Custom Action</h1>
                                                         <div class="form-group text-center">
                                                             <input type="text" [(ngModel)]="customActionName"
-                                                                   class="form-control customAction"
-                                                                   placeholder="Type Action Name" autofocus>
-                                                            <button type="button"
-                                                                    (click)="goToDesignerMode(viewedPackage.id)"
-                                                                    class="btn submit">Start
+                                                                class="form-control customAction"
+                                                                placeholder="Type Action Name" autofocus>
+                                                            <button type="button"  data-dismiss="modal"
+                                                                (click)="goToDesignerMode(viewedPackage.id)"
+                                                                class="btn submit">Start
                                                             </button>
                                                         </div>
 
@@ -298,7 +299,7 @@
                                                     <!--Default Actions Form-->
                                                     <div class="carousel-item">
                                                         <button data-target="#carouselExampleIndicators"
-                                                                data-slide-to="0" title="Back" class="btn back"><i
+                                                            data-slide-to="0" title="Back" class="btn back"><i
                                                                 class="icon-action-back"></i></button>
                                                         <h1>Choose Action(s) from CDS Default Package </h1>
                                                         <div class="actionFormWrapper">
@@ -320,7 +321,7 @@
                                                                 </div>
                                                                 <div class="col">
                                                                     <input type="text" class="form-control searchInput"
-                                                                           placeholder="Search">
+                                                                        placeholder="Search">
                                                                 </div>
                                                             </div>
                                                             <div class="row actionsListScroll">
@@ -328,11 +329,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation1"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation1" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation1">config-assign</label>
+                                                                                for="customControlValidation1">config-assign</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -340,11 +340,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation2"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation2" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation2">config-assign-test</label>
+                                                                                for="customControlValidation2">config-assign-test</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -352,11 +351,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation3"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation3" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation3">config-deploy</label>
+                                                                                for="customControlValidation3">config-deploy</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -364,11 +362,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation4"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation4" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation4">config-modify</label>
+                                                                                for="customControlValidation4">config-modify</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -376,11 +373,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -388,11 +384,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -400,11 +395,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -412,11 +406,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -424,11 +417,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -436,11 +428,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -448,11 +439,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -460,9 +450,9 @@
                                                             <div class="row">
                                                                 <div class="col text-center">
                                                                     <p class="selectedActions">0 selected</p>
-                                                                    <button type="button"
-                                                                            (click)="goToDesignerMode(viewedPackage.id)"
-                                                                            class="btn submit">Start
+                                                                    <button type="button" data-dismiss="modal"
+                                                                        (click)="goToDesignerMode(viewedPackage.id)"
+                                                                        class="btn submit">Start
                                                                     </button>
                                                                 </div>
                                                             </div>
@@ -471,7 +461,7 @@
                                                     <!--Recent Actions Form-->
                                                     <div class="carousel-item">
                                                         <button data-target="#carouselExampleIndicators"
-                                                                data-slide-to="0" title="Back" class="btn back"><i
+                                                            data-slide-to="0" title="Back" class="btn back"><i
                                                                 class="icon-action-back"></i></button>
                                                         <h1>Choose Action(s) from Recent Packages</h1>
                                                         <div class="actionFormWrapper">
@@ -501,7 +491,7 @@
                                                                 </div>
                                                                 <div class="col">
                                                                     <input type="text" class="form-control searchInput"
-                                                                           placeholder="Search">
+                                                                        placeholder="Search">
                                                                 </div>
                                                             </div>
                                                             <div class="row actionsListScroll">
@@ -509,11 +499,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation1"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation1" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation1">config-assign</label>
+                                                                                for="customControlValidation1">config-assign</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -521,11 +510,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation2"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation2" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation2">config-assign-test</label>
+                                                                                for="customControlValidation2">config-assign-test</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -533,11 +521,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation3"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation3" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation3">config-deploy</label>
+                                                                                for="customControlValidation3">config-deploy</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -545,11 +532,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation4"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation4" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation4">config-modify</label>
+                                                                                for="customControlValidation4">config-modify</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -557,11 +543,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -569,11 +554,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -581,11 +565,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -593,11 +576,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -605,11 +587,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -617,11 +598,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -629,11 +609,10 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                   class="custom-control-input"
-                                                                                   id="customControlValidation5"
-                                                                                   required>
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
                                                                             <label class="custom-control-label"
-                                                                                   for="customControlValidation5">config-assign1</label>
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -641,8 +620,7 @@
                                                             <div class="row">
                                                                 <div class="col text-center">
                                                                     <p class="selectedActions">0 selected</p>
-                                                                    <button type="button"
-                                                                            class="btn submit">Start
+                                                                    <button type="button" class="btn submit">Start
                                                                     </button>
                                                                 </div>
                                                             </div>
@@ -651,30 +629,30 @@
                                                     <!--Import Actions Form-->
                                                     <div class="carousel-item">
                                                         <button data-target="#carouselExampleIndicators"
-                                                                data-slide-to="0" title="Back" class="btn back"><i
+                                                            data-slide-to="0" title="Back" class="btn back"><i
                                                                 class="icon-action-back"></i></button>
                                                         <h1>Import Action(s)</h1>
                                                         <div class="actionFormWrapper">
                                                             <div class="row">
                                                                 <div class="col">
                                                                     <ngx-file-drop accept=".json"
-                                                                                   dropZoneLabel="Drop files here"
-                                                                                   (onFileDrop)="dropped($event)"
-                                                                                   (onFileOver)="fileOver($event)"
-                                                                                   (onFileLeave)="fileLeave($event)">
+                                                                        dropZoneLabel="Drop files here"
+                                                                        (onFileDrop)="dropped($event)"
+                                                                        (onFileOver)="fileOver($event)"
+                                                                        (onFileLeave)="fileLeave($event)">
                                                                         <ng-template ngx-file-drop-content-tmp
-                                                                                     let-openFileSelector="openFileSelector">
+                                                                            let-openFileSelector="openFileSelector">
                                                                             <div class="folder-upload">
                                                                                 <img
-                                                                                        src="assets/img/folder-upload.svg"/>
+                                                                                    src="assets/img/folder-upload.svg" />
                                                                             </div>
                                                                             <div class="folder-upload-text">
                                                                                 Drag & Drop file
                                                                             </div>
                                                                             <div class="folder-upload-text">or
                                                                                 <button type="button"
-                                                                                        class="btn btn-sm btn-primary"
-                                                                                        (click)="openFileSelector()">
+                                                                                    class="btn btn-sm btn-primary"
+                                                                                    (click)="openFileSelector()">
                                                                                     Browse
                                                                                     Files
                                                                                 </button>
@@ -688,17 +666,17 @@
                                                                     <div class="upload-table">
                                                                         <table class="table">
                                                                             <thead>
-                                                                            <tr
+                                                                                <tr
                                                                                     *ngFor="let item of uploadedFiles; let i=index">
-                                                                                <th width="40"><img
-                                                                                        src="assets/img/icon-file-code.svg"/>
-                                                                                </th>
-                                                                                <th>{{ item.name }}</th>
-                                                                                <th width="40" class="text-right">
-                                                                                    <img
-                                                                                            src="assets/img/icon-remove-file.svg"/>
-                                                                                </th>
-                                                                            </tr>
+                                                                                    <th width="40"><img
+                                                                                            src="assets/img/icon-file-code.svg" />
+                                                                                    </th>
+                                                                                    <th>{{ item.name }}</th>
+                                                                                    <th width="40" class="text-right">
+                                                                                        <img
+                                                                                            src="assets/img/icon-remove-file.svg" />
+                                                                                    </th>
+                                                                                </tr>
                                                                             </thead>
                                                                         </table>
                                                                     </div>
@@ -706,8 +684,7 @@
                                                             </div>
                                                             <div class="row">
                                                                 <div class="col text-center">
-                                                                    <button type="button"
-                                                                            class="btn submit mt-4">Import
+                                                                    <button type="button" class="btn submit mt-4">Import
                                                                     </button>
                                                                 </div>
                                                             </div>
@@ -720,7 +697,7 @@
                                 </div>
                             </div>
                             <button type="button" class="btn btn-sm mb-2 btn-enrich" data-toggle="modal"
-                                    data-target="#enrichModal">
+                                data-target="#enrichModal">
                                 <i class="icon-enrich" aria-hidden="true"></i> Manual Enrich
                             </button>
 
@@ -738,17 +715,17 @@
                     <div class="col">
                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
                             <a [classList]="metadataClasses" id="nav-metadata-tab" data-toggle="tab"
-                               href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
-                               autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
+                                href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
+                                autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
                             <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
-                               role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
+                                role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
                             <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
-                               role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
+                                role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
                             <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
-                               role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
+                                role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
                             <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
-                               href="#nav-authentication" role="tab" aria-controls="nav-authentication"
-                               aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
+                                href="#nav-authentication" role="tab" aria-controls="nav-authentication"
+                                aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
                         </div>
                     </div>
 
@@ -757,24 +734,24 @@
                     <div class="col">
                         <div class="tab-content" id="nav-tabContent" (change)="clickEvent()">
                             <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
-                                 aria-labelledby="nav-metadata-tab">
+                                aria-labelledby="nav-metadata-tab">
                                 <app-metadata-tab></app-metadata-tab>
                             </div>
                             <div class="tab-pane fade" id="nav-template" role="tabpanel"
-                                 aria-labelledby="nav-template-tab">
+                                aria-labelledby="nav-template-tab">
                                 <app-template-mapping></app-template-mapping>
                             </div>
                             <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
-                                 aria-labelledby="nav-scripts-tab">
+                                aria-labelledby="nav-scripts-tab">
                                 <app-scripts-tab></app-scripts-tab>
                             </div>
                             <div class="tab-pane fade" id="nav-imports" role="tabpanel"
-                                 aria-labelledby="nav-imports-tab">
+                                aria-labelledby="nav-imports-tab">
                                 <app-imports-tab></app-imports-tab>
 
                             </div>
                             <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
-                                 aria-labelledby="nav-authentication-tab">
+                                aria-labelledby="nav-authentication-tab">
                                 <div class="card creat-card">
                                     <div class="editor-container">
                                         <app-dsl-definitions-tab></app-dsl-definitions-tab>
@@ -791,13 +768,13 @@
 
 <!-- Enrich Modal -->
 <div class="modal fade enrichModal" id="enrichModal" tabindex="-1" role="dialog" aria-labelledby="enrichModalLabel"
-     aria-hidden="true">
+    aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="enrichModalLabel">Manual Enrich</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">
@@ -807,16 +784,14 @@
                     <li>2. Press <b>Enrich</b> button</li>
                 </ul>
                 <ace-editor [(text)]="vlbDefinition.topology_template.content" [mode]="'javascript'"
-                            [autoUpdateContent]="true"
-                            [durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'eclipse'"
-                            #editor
-                            style="height:300px;">
+                    [autoUpdateContent]="true" [durationBeforeCallback]="1000" (textChanged)="textChanged($event)"
+                    [theme]="'eclipse'" #editor style="height:300px;">
                 </ace-editor>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                 <button type="button" data-dismiss="modal" class="btn btn-primary btn-enrich"
-                        (click)="enrichBluePrint()">Enrich
+                    (click)="enrichBluePrint()">Enrich
                 </button>
             </div>
         </div>
@@ -824,7 +799,7 @@
 </div>
 <!-- Delete Modal -->
 <div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel"
-     aria-hidden="true">
+    aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -838,8 +813,7 @@
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-                <button type="button" (click)="deletePackage()" data-dismiss="modal"
-                        class="btn btn-primary">Delete
+                <button type="button" (click)="deletePackage()" data-dismiss="modal" class="btn btn-primary">Delete
                 </button>
             </div>
         </div>
@@ -847,7 +821,7 @@
 </div>
 
 <div class="modal fade" id="discardChangesModal" tabindex="-1" role="dialog" aria-labelledby="discardChangesModalLabel"
-     aria-hidden="true">
+    aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -861,10 +835,10 @@
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-                <button type="button" (click)="discardChanges()" data-dismiss="modal"
-                        class="btn btn-primary">Discard Changes
+                <button type="button" (click)="discardChanges()" data-dismiss="modal" class="btn btn-primary">Discard
+                    Changes
                 </button>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
index f7cff5072..e1de6f60f 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -203,7 +203,9 @@ header{
   font-size: 11px;
   line-height: 20px;
 }
-
+.save-blueprint li:hover{
+  cursor: pointer;
+}
 
 
 
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 dd39cb243..f8f1d8099 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
@@ -12,7 +12,7 @@
                     <li class="breadcrumb-item">
                         <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>
@@ -87,12 +87,12 @@
                     <div class="dropdown">
                         <input class="dropdown-toggle" type="text">
                         <div class="dropdown-text">Save</div>
-                        <ul class="dropdown-content">
+                        <ul class="dropdown-content save-blueprint">
                             <li>
                                 <a (click)="saveBluePrint()">Save</a>
                             </li>
                             <li>
-                                <a href="">Save &amp; Deploy</a>
+                                <a (click)="publishBluePrint()">Save &amp; Deploy</a>
                             </li>
                         </ul>
                     </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>
@@ -159,7 +159,7 @@
                 <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
+                        class="btn btn-secondary topologyView">Scripting
                     </button>
                 </div>
             </li>
@@ -171,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>
@@ -188,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">
 
@@ -288,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">
@@ -310,8 +310,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">
                                             Steps
                                         </button>
                                     </h2>
@@ -321,7 +320,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">
@@ -341,7 +340,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>
@@ -355,8 +354,7 @@
                                 <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>
@@ -365,7 +363,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">
@@ -385,7 +383,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>
@@ -399,8 +397,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>
@@ -409,7 +407,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">
@@ -429,7 +427,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>
@@ -448,7 +446,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">
@@ -506,7 +504,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>
@@ -516,7 +514,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">
@@ -538,11 +536,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>
@@ -567,7 +565,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>
@@ -577,7 +575,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">
@@ -651,4 +649,4 @@
         </div>
     </ng-sidebar>
 
-</ng-sidebar-container>
+</ng-sidebar-container>
\ No newline at end of file
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 d8113633d..099d96615 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
@@ -115,6 +115,22 @@ export class DesignerComponent implements OnInit, OnDestroy {
         this.attributesSideBar = !this.attributesSideBar;
     }
 
+    publishBluePrint() {
+        this.create();
+        this.zipFile.generateAsync({ type: 'blob' })
+            .then(blob => {
+                const formData = new FormData();
+                formData.append('file', blob);
+                this.designerService.publishBlueprint(formData).subscribe(res => {
+                    console.log('Package Deployed...');
+                }, error => {
+                    console.log(error);
+                }, () => {
+                    //  this.deployBluePrint = false;
+                });
+            });
+    }
+
     // private _toggleSidebar3() {
     //   this.functionAttributeSidebar = !this.functionAttributeSidebar;
     // }
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 771c44ba8..c0d79cae1 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
@@ -21,11 +21,11 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import {Injectable} from '@angular/core';
-import {Observable} from 'rxjs';
-import {ApiService} from '../../../../common/core/services/api.typed.service';
-import {ResourceDictionaryURLs, BlueprintURLs} from '../../../../common/constants/app-constants';
-import {ModelType} from './model/ModelType.model';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ApiService } from '../../../../common/core/services/api.typed.service';
+import { ResourceDictionaryURLs, BlueprintURLs } from '../../../../common/constants/app-constants';
+import { ModelType } from './model/ModelType.model';
 import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
 
 
@@ -34,8 +34,10 @@ import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
 })
 export class DesignerService {
 
-    constructor(private api: ApiService<ModelType>,
-                private api2: ApiService<BluePrintDetailModel>) {
+    constructor(
+        private api: ApiService<ModelType>,
+        private api2: ApiService<BluePrintDetailModel>
+    ) {
     }
 
     getFunctions(modelDefinitionType: string): Observable<ModelType[]> {
@@ -50,4 +52,9 @@ export class DesignerService {
         return this.getBluePrintModel(id);
     }
 
+    publishBlueprint(body: any | null, options?: any): Observable<any> {
+
+        return this.api.post(BlueprintURLs.publish, body, { responseType: 'text' });
+    }
+
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts
index b1dcded1c..fe98fa22b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts
@@ -1,12 +1,12 @@
-import {Injectable, ViewChild} from '@angular/core';
-import {MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
-import {VlbDefinition} from './mapping-models/definitions/VlbDefinition';
-import {DslDefinition} from './mapping-models/CBAPacakge.model';
-import {PackageCreationStore} from './package-creation.store';
+import { Injectable, ViewChild } from '@angular/core';
+import { MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model';
+import { VlbDefinition } from './mapping-models/definitions/VlbDefinition';
+import { DslDefinition } from './mapping-models/CBAPacakge.model';
+import { PackageCreationStore } from './package-creation.store';
 import * as JSZip from 'jszip';
-import {PackageCreationUtils} from './package-creation.utils';
-import {MetadataTabComponent} from './metadata-tab/metadata-tab.component';
-import {DesignerStore} from '../designer/designer.store';
+import { PackageCreationUtils } from './package-creation.utils';
+import { MetadataTabComponent } from './metadata-tab/metadata-tab.component';
+import { DesignerStore } from '../designer/designer.store';
 
 @Injectable({
     providedIn: 'root'
@@ -19,12 +19,14 @@ export class PackageCreationExtractionService {
 
     private toscaMetaDataKeys: string[] = ['TOSCA-Meta-File-Version', 'CSAR-Version',
         'Created-By', 'Entry-Definitions', 'Template-Name', 'Template-Version', 'Template-Type', 'Template-Tags'];
-    @ViewChild(MetadataTabComponent, {static: false})
+    @ViewChild(MetadataTabComponent, { static: false })
     private metadataTabComponent: MetadataTabComponent;
 
-    constructor(private packageCreationStore: PackageCreationStore,
-                private packageCreationUtils: PackageCreationUtils,
-                private designerStore: DesignerStore) {
+    constructor(
+        private packageCreationStore: PackageCreationStore,
+        private packageCreationUtils: PackageCreationUtils,
+        private designerStore: DesignerStore
+    ) {
 
     }
 
@@ -96,9 +98,9 @@ export class PackageCreationExtractionService {
             console.log(definition.topology_template);
             const content = {};
             const workflow = 'workflows';
-            content[workflow] = definition.topology_template.workflows;
+            content[workflow] = definition.topology_template ? definition.topology_template.workflows : {};
             const nodeTemplates = 'node_templates';
-            content[nodeTemplates] = definition.topology_template.node_templates;
+            content[nodeTemplates] = definition.topology_template ? definition.topology_template.node_templates : {};
             this.designerStore.saveSourceContent(JSON.stringify(content));
 
         }
-- 
cgit 1.2.3-korg