fixing issues in configuration package

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

2 files changed, 196 insertions, 161 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 318b30c14..c04053747 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
@@ -26,13 +26,13 @@
                         <i class="icon-save-sm" aria-hidden="true"></i>
                         <span>Save</span>
                     </a>
-                    <a href="#" class="action-button" (click)="goBacktoDashboard()">
+                    <a class="action-button" (click)="discardChanges()">
                         <i class="icon-discard-sm" aria-hidden="true"></i>
                         <span>Discard Changes</span>
                     </a>
 
                     <hr>
-                    <a href="#" class="action-button">
+                    <a class="action-button">
                         <i class="icon-clone-sm" aria-hidden="true"></i>
                         <span>Clone</span>
                     </a>
@@ -43,7 +43,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>
@@ -66,36 +66,36 @@
                                 </div>
                                 <div class="col-12 package-description">
                                     Last modified {{ viewedPackage.createdDate | date:'short' }} By
-                                    {{viewedPackage.updatedBy}}
+                                    {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}
                                 </div>
                             </div>
                             <div class="row package-auth-info">
                                 <div class="col-3">
                                     <p><b>Author Name</b></p>
-                                    <span>Shaaban Ebrahim</span>
+                                    <span> {{viewedPackage.updatedBy ? viewedPackage.updatedBy.split('<')[0] : ""}}</span>
                                 </div>
-                                <div class="col-4">
+                                <!--<div class="col-4">
                                     <p><b>Author Email</b></p>
                                     <span>shaaban.eltanany.ext@orange.com</span>
-                                </div>
+                                </div>-->
                                 <div class="col-5">
                                     <p><b>Contributions</b></p>
                                     <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>
@@ -113,24 +113,24 @@
                             <!-- Button trigger modal - 1st Action -->
 
                             <button type="button" class="btn btn-sm btn-primary mb-2" data-toggle="modal"
-                                data-target="#exampleModalLong">
+                                    data-target="#exampleModalLong">
                                 <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">
@@ -140,15 +140,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>
@@ -158,16 +158,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>
@@ -177,8 +177,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>
@@ -186,8 +186,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>
@@ -197,16 +197,17 @@
                                                             <!--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">
-                                                                                Browse</button>
+                                                                                    data-target="#carouselExampleIndicators"
+                                                                                    data-slide-to="4" class="btn">
+                                                                                Browse
+                                                                            </button>
                                                                         </div>
                                                                     </div>
                                                                 </a>
@@ -215,31 +216,34 @@
                                                         <div class="row">
                                                             <div class="col text-center">
                                                                 <button class="btn skip-btn"
-                                                                    (click)="goToDesignerMode(viewedPackage.id)">Skip
-                                                                    to Designer Canvas</button>
+                                                                        (click)="goToDesignerMode(viewedPackage.id)">
+                                                                    Skip
+                                                                    to Designer Canvas
+                                                                </button>
                                                             </div>
                                                         </div>
                                                     </div>
                                                     <!--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>
+                                                                   class="form-control customAction"
+                                                                   placeholder="Type Action Name" autofocus>
                                                             <button type="button"
-                                                                (click)="goToDesignerMode(viewedPackage.id)"
-                                                                class="btn submit">Start</button>
+                                                                    (click)="goToDesignerMode(viewedPackage.id)"
+                                                                    class="btn submit">Start
+                                                            </button>
                                                         </div>
 
                                                     </div>
                                                     <!--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">
@@ -261,7 +265,7 @@
                                                                 </div>
                                                                 <div class="col">
                                                                     <input type="text" class="form-control searchInput"
-                                                                        placeholder="Search">
+                                                                           placeholder="Search">
                                                                 </div>
                                                             </div>
                                                             <div class="row actionsListScroll">
@@ -269,10 +273,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>
@@ -280,10 +285,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>
@@ -291,10 +297,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>
@@ -302,10 +309,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>
@@ -313,10 +321,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>
@@ -324,10 +333,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>
@@ -335,10 +345,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>
@@ -346,10 +357,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>
@@ -357,10 +369,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>
@@ -368,10 +381,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>
@@ -379,10 +393,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>
@@ -391,8 +406,9 @@
                                                                 <div class="col text-center">
                                                                     <p class="selectedActions">0 selected</p>
                                                                     <button type="button"
-                                                                        (click)="goToDesignerMode(viewedPackage.id)"
-                                                                        class="btn submit">Start</button>
+                                                                            (click)="goToDesignerMode(viewedPackage.id)"
+                                                                            class="btn submit">Start
+                                                                    </button>
                                                                 </div>
                                                             </div>
                                                         </div>
@@ -400,7 +416,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">
@@ -430,7 +446,7 @@
                                                                 </div>
                                                                 <div class="col">
                                                                     <input type="text" class="form-control searchInput"
-                                                                        placeholder="Search">
+                                                                           placeholder="Search">
                                                                 </div>
                                                             </div>
                                                             <div class="row actionsListScroll">
@@ -438,10 +454,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>
@@ -449,10 +466,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>
@@ -460,10 +478,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>
@@ -471,10 +490,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>
@@ -482,10 +502,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>
@@ -493,10 +514,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>
@@ -504,10 +526,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>
@@ -515,10 +538,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>
@@ -526,10 +550,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>
@@ -537,10 +562,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>
@@ -548,10 +574,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>
@@ -560,7 +587,8 @@
                                                                 <div class="col text-center">
                                                                     <p class="selectedActions">0 selected</p>
                                                                     <button type="button"
-                                                                        class="btn submit">Start</button>
+                                                                            class="btn submit">Start
+                                                                    </button>
                                                                 </div>
                                                             </div>
                                                         </div>
@@ -568,52 +596,54 @@
                                                     <!--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()">Browse
+                                                                                        class="btn btn-sm btn-primary"
+                                                                                        (click)="openFileSelector()">
+                                                                                    Browse
                                                                                     Files
                                                                                 </button>
                                                                             </div>
                                                                             <div class="folder-upload-type">
                                                                                 Allowed file
-                                                                                type: json</div>
+                                                                                type: json
+                                                                            </div>
                                                                         </ng-template>
                                                                     </ngx-file-drop>
                                                                     <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>
@@ -622,7 +652,8 @@
                                                             <div class="row">
                                                                 <div class="col text-center">
                                                                     <button type="button"
-                                                                        class="btn submit mt-4">Import</button>
+                                                                            class="btn submit mt-4">Import
+                                                                    </button>
                                                                 </div>
                                                             </div>
                                                         </div>
@@ -634,7 +665,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>
 
@@ -652,17 +683,17 @@
                     <div class="col">
                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
                             <a class="nav-item nav-link active complete" 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>
 
@@ -671,24 +702,24 @@
                     <div class="col">
                         <div class="tab-content" id="nav-tabContent">
                             <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>
@@ -705,13 +736,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">
@@ -720,21 +751,25 @@
                     <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)]="vlbDefinition.topology_template.content" [mode]="'javascript'"
+                            [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</button>
+                <button type="button" data-dismiss="modal" class="btn btn-primary btn-enrich"
+                        (click)="enrichBluePrint()">Enrich
+                </button>
             </div>
         </div>
     </div>
 </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">
@@ -749,7 +784,8 @@
             <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>
+                        class="btn btn-primary">Delete
+                </button>
             </div>
         </div>
     </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 e668b6417..b4ad02364 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
@@ -15,7 +15,6 @@ import {saveAs} from 'file-saver';
 import {DesignerStore} from '../designer/designer.store';
 import {ToastrService} from 'ngx-toastr';
 import {NgxFileDropEntry} from 'ngx-file-drop';
-import {TopologyTemplate} from '../designer/model/designer.topologyTemplate.model';
 
 @Component({
     selector: 'app-configuration-dashboard',
@@ -56,6 +55,10 @@ export class ConfigurationDashboardComponent implements OnInit {
         this.vlbDefinition.topology_template = new TemplateTopology();
 
         this.elementRef.nativeElement.focus();
+        this.refreshCurrentPackage();
+    }
+
+    private refreshCurrentPackage() {
         this.id = this.route.snapshot.paramMap.get('id');
         this.configurationDashboardService.getPagedPackages(this.id).subscribe(
             (bluePrintDetailModels) => {
@@ -65,10 +68,6 @@ export class ConfigurationDashboardComponent implements OnInit {
                     this.packageCreationStore.clear();
                 }
             });
-
-        if (this.route.snapshot.paramMap.has('id')) {
-            console.log('The id is equal to ' + this.route.snapshot.paramMap.get('id'));
-        }
     }
 
     private downloadCBAPackage(bluePrintDetailModels: BluePrintDetailModel) {
@@ -210,8 +209,8 @@ export class ConfigurationDashboardComponent implements OnInit {
 
     }
 
-    goBacktoDashboard() {
-        this.router.navigate(['/packages']);
+    discardChanges() {
+        this.refreshCurrentPackage();
     }
 
     downloadPackage(artifactName: string, artifactVersion: string) {
@@ -244,7 +243,7 @@ export class ConfigurationDashboardComponent implements OnInit {
     }
 
     textChanged($event: {}) {
-    this.packageCreationStore.addTopologyTemplate(this.vlbDefinition.topology_template);
+        this.packageCreationStore.addTopologyTemplate(this.vlbDefinition.topology_template);
     }
 
     enrichBluePrint() {