Improve Manual Enrichment phase2.

Issue-ID: CCSDK-2542
Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Change-Id: I4fba6371146761cc584f0b183955c021aa14a7bf

2 files changed, 209 insertions, 163 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 ddde3dadc..a281aafae 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
@@ -24,14 +24,14 @@
                                 <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
                                 <ul class="dropdown-content">
                                     <li>
-                                      <i class="icon-get_started" aria-hidden="true"></i>
-                                      <p>
-                                        <input id="clicker3" type="checkbox" />
-                                        <label for="clicker">
-                                          Getting Started
-                                          <span>Quick steps to help you get started</span>
-                                        </label>
-                                      </p>
+                                        <i class="icon-get_started" aria-hidden="true"></i>
+                                        <p>
+                                            <input id="clicker3" type="checkbox"/>
+                                            <label for="clicker">
+                                                Getting Started
+                                                <span>Quick steps to help you get started</span>
+                                            </label>
+                                        </p>
                                     </li>
                                     <!-- <li>
                                         <i class="icon-get_started" aria-hidden="true"></i>
@@ -91,7 +91,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>
@@ -108,7 +108,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>
@@ -149,19 +149,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>
@@ -179,24 +179,24 @@
                             <!-- 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">
+                                    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">
@@ -206,15 +206,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>
@@ -224,16 +224,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>
@@ -243,8 +243,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>
@@ -252,8 +252,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>
@@ -263,15 +263,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>
@@ -282,7 +282,7 @@
                                                         <div class="row">
                                                             <div class="col text-center">
                                                                 <button class="btn skip-btn" data-dismiss="modal"
-                                                                    (click)="goToDesignerMode(viewedPackage.id)">
+                                                                        (click)="goToDesignerMode(viewedPackage.id)">
                                                                     Skip
                                                                     to Designer Canvas
                                                                 </button>
@@ -292,16 +292,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"  data-dismiss="modal"
-                                                                (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>
 
@@ -309,7 +309,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">
@@ -331,7 +331,7 @@
                                                                 </div>
                                                                 <div class="col">
                                                                     <input type="text" class="form-control searchInput"
-                                                                        placeholder="Search">
+                                                                           placeholder="Search">
                                                                 </div>
                                                             </div>
                                                             <div class="row actionsListScroll">
@@ -339,10 +339,11 @@
                                                                     <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>
@@ -350,10 +351,11 @@
                                                                     <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>
@@ -361,10 +363,11 @@
                                                                     <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>
@@ -372,10 +375,11 @@
                                                                     <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>
@@ -383,10 +387,11 @@
                                                                     <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>
@@ -394,10 +399,11 @@
                                                                     <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>
@@ -405,10 +411,11 @@
                                                                     <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>
@@ -416,10 +423,11 @@
                                                                     <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>
@@ -427,10 +435,11 @@
                                                                     <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>
@@ -438,10 +447,11 @@
                                                                     <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>
@@ -449,10 +459,11 @@
                                                                     <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>
@@ -461,8 +472,8 @@
                                                                 <div class="col text-center">
                                                                     <p class="selectedActions">0 selected</p>
                                                                     <button type="button" data-dismiss="modal"
-                                                                        (click)="goToDesignerMode(viewedPackage.id)"
-                                                                        class="btn submit">Start
+                                                                            (click)="goToDesignerMode(viewedPackage.id)"
+                                                                            class="btn submit">Start
                                                                     </button>
                                                                 </div>
                                                             </div>
@@ -471,7 +482,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 +512,7 @@
                                                                 </div>
                                                                 <div class="col">
                                                                     <input type="text" class="form-control searchInput"
-                                                                        placeholder="Search">
+                                                                           placeholder="Search">
                                                                 </div>
                                                             </div>
                                                             <div class="row actionsListScroll">
@@ -509,10 +520,11 @@
                                                                     <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>
@@ -520,10 +532,11 @@
                                                                     <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>
@@ -531,10 +544,11 @@
                                                                     <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>
@@ -542,10 +556,11 @@
                                                                     <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>
@@ -553,10 +568,11 @@
                                                                     <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>
@@ -564,10 +580,11 @@
                                                                     <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>
@@ -575,10 +592,11 @@
                                                                     <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>
@@ -586,10 +604,11 @@
                                                                     <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>
@@ -597,10 +616,11 @@
                                                                     <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>
@@ -608,10 +628,11 @@
                                                                     <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>
@@ -619,10 +640,11 @@
                                                                     <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>
@@ -639,30 +661,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>
@@ -676,17 +698,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>
@@ -707,7 +729,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>
 
@@ -725,17 +747,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>
 
@@ -744,24 +766,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>
@@ -778,13 +800,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">
@@ -793,15 +815,16 @@
                     <li>1. Copy and paste "workflows" and "node_templates"</li>
                     <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;">
+                <ace-editor [(text)]="this.vlbDefinition.topology_template.content" [mode]="'json'"
+                            [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'"
+                            (textChanged)="textChanged($event)"
+                            #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>
@@ -809,7 +832,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">
@@ -831,7 +854,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">
@@ -851,4 +874,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
index 079e4edbc..fbdfd007a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {BluePrintDetailModel} from '../model/BluePrint.detail.model';
 import {PackageCreationStore} from '../package-creation/package-creation.store';
@@ -18,13 +18,15 @@ import {NgxFileDropEntry} from 'ngx-file-drop';
 import {PackageCreationService} from '../package-creation/package-creation.service';
 import {ComponentCanDeactivate} from '../../../../common/core/canDactivate/ComponentCanDeactivate';
 import {PackageCreationExtractionService} from '../package-creation/package-creation-extraction.service';
+import {distinctUntilChanged, takeUntil} from 'rxjs/operators';
+import {Subject} from 'rxjs';
 
 @Component({
     selector: 'app-configuration-dashboard',
     templateUrl: './configuration-dashboard.component.html',
     styleUrls: ['./configuration-dashboard.component.css'],
 })
-export class ConfigurationDashboardComponent extends ComponentCanDeactivate implements OnInit {
+export class ConfigurationDashboardComponent extends ComponentCanDeactivate implements OnInit, OnDestroy {
     viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
     @ViewChild(MetadataTabComponent, {static: false})
     metadataTabComponent: MetadataTabComponent;
@@ -47,6 +49,8 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl
     metadataClasses = 'nav-item nav-link active';
     private cbaPackage: CBAPackage = new CBAPackage();
     dataTarget: any = '';
+    ngUnsubscribe = new Subject();
+    private designerState: any;
 
     constructor(
         private route: ActivatedRoute,
@@ -61,15 +65,25 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl
     ) {
         super();
 
-        this.packageCreationStore.state$.subscribe(
-            cbaPackage => {
-                this.cbaPackage = cbaPackage;
-            });
+
     }
 
     ngOnInit() {
         this.vlbDefinition.topology_template = new TemplateTopology();
-
+        this.packageCreationStore.state$
+            .pipe(distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
+                takeUntil(this.ngUnsubscribe))
+            .subscribe(
+                cbaPackage => {
+                    this.cbaPackage = cbaPackage;
+                });
+        this.designerStore.state$.pipe(
+            distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
+            takeUntil(this.ngUnsubscribe))
+            .subscribe(state => {
+                this.designerState = state;
+                this.vlbDefinition.topology_template.content = this.packageCreationUtils.transformToJson(state.template);
+            });
         this.elementRef.nativeElement.focus();
         this.refreshCurrentPackage();
         const regexp = RegExp(this.versionPattern);
@@ -206,13 +220,17 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl
     }
 
     textChanged($event: {}) {
-        this.packageCreationStore.addTopologyTemplate(this.vlbDefinition.topology_template);
+        this.cbaPackage.templateTopology.node_templates = this.designerState.template.node_templates;
+        this.cbaPackage.templateTopology.workflows = this.designerState.template.workflows;
+        this.cbaPackage.templateTopology.content = this.vlbDefinition.topology_template.content;
     }
 
     enrichBluePrint() {
-
+        this.packageCreationStore.addTopologyTemplate(this.cbaPackage.templateTopology);
         this.formTreeData();
         this.enrichPackage();
+        this.designerStore.clear();
+        this.packageCreationStore.clear();
     }
 
 
@@ -259,13 +277,18 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl
         return this.isSaveEnabled;
     }
 
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+
     checkSkipTypesOfAction() {
         console.log(this.cbaPackage);
         if (this.cbaPackage.templateTopology.node_templates && this.cbaPackage.templateTopology.workflows) {
-            console.log('eeeeee');
             this.goToDesignerMode(this.id);
         } else {
             this.dataTarget = '#exampleModalLong';
         }
     }
 }
+