creating meta data creation component(first tab)

Issue-ID: CCSDK-2014

Signed-off-by: shaaban Altanany <shaaban.eltanany.ext@orange.com>
Change-Id: I35283cbb5b48174606493ecb39c20b9f717a9c06

20 files changed, 468 insertions, 265 deletions

diff --git a/cds-ui/designer-client/src/app/common/constants/app-constants.ts b/cds-ui/designer-client/src/app/common/constants/app-constants.ts
index 506d3b90f..387c35342 100644
--- a/cds-ui/designer-client/src/app/common/constants/app-constants.ts
+++ b/cds-ui/designer-client/src/app/common/constants/app-constants.ts
@@ -98,7 +98,8 @@ export const BlueprintURLs = {
     deploy: '/controllerblueprint/deploy-blueprint',
     getMetaDate: '/controllerblueprint/meta-data/',
     countOfAllBluePrints: '/controllerblueprint/list/count',
-    getMetaDatePageable: '/controllerblueprint/metadata/paged'
+    getMetaDatePageable: '/controllerblueprint/metadata/paged',
+    getBlueprintByName: '/controllerblueprint/by-name/'
 };
 
 export const ResourceDictionaryURLs = {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts
index 068e93160..f4f56c591 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts
@@ -24,6 +24,7 @@ import {BluePrintPage} from './BluePrint.model';
 export class PackagesDashboardState {
 
     page: BluePrintPage;
+    filteredPackages: BluePrintPage;
     command: string;
     currentPage = 0;
     totalPackages: number;
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
index fc1015ca0..affba1b3b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
@@ -1,23 +1,111 @@
-<div class="center">
-    <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
-                   (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
-        gi<ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
-            Optional custom content that replaces the the entire default content.
-            <button type="button" (click)="openFileSelector()">Browse Files</button>
-        </ng-template>
-    </ngx-file-drop>
-    <div class="upload-table">
-        <table class="table">
-            <thead>
-            <tr>
-                <th>Name</th>
-            </tr>
-            </thead>
-            <tbody class="upload-name-style">
-            <tr *ngFor="let item of files; let i=index">
-                <td><strong>{{ item.relativePath }}</strong></td>
-            </tr>
-            </tbody>
-        </table>
+
+<div class="import-container-all">
+    <div class="import-container">
+        <div class="import-container-input">
+            <input placeholder="Enter file URL" type="input" class="ng-pristine ng-valid ng-touched">
+            <a class="enter-link" href="#"><i class="icon-enter"></i></a>
+        </div>
+        <span class="import-container-span">Or you can also <a href="#" data-toggle="modal" data-target="#exampleModal">Import File</a></span>
+
+    </div>
+
+    <div class="accordion">
+        <div class="card creat-card">
+            <div class="single-line">
+                <label class="label-name">File</label>
+            </div>
+        </div>
+        <div id="accordion">
+            <div class="card">
+                <div class="card-header" id="headingOne">
+                    <h5 class="mb-0 d-flex justify-content-between">
+                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                            <i class="icon-file-code"></i>  Definitions/data_types.json
+                        </button>
+                        <a class="accordion-delete" href="#"><i class="icon-delete"></i></a>
+                    </h5>
+                </div>
+
+                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
+                    <div class="card-body">
+                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-header" id="headingTwo">
+                    <h5 class="mb-0">
+                        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                            <i class="icon-file-code"></i>  Definitions/relationship_types.json
+                        </button>
+                    </h5>
+                </div>
+                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
+                    <div class="card-body">
+                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-header" id="headingThree">
+                    <h5 class="mb-0">
+                        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                            <i class="icon-file-code"></i>  Definitions/artifact_types.json
+                        </button>
+                    </h5>
+                </div>
+                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
+                    <div class="card-body">
+                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Import File</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
+                               (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+                    <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
+                        <div class="folder-upload">
+                            <img 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 Files</button>
+                        </div>
+                        <div class="folder-upload-type">Allowed file type: json</div>
+                    </ng-template>
+                </ngx-file-drop>
+                <div class="upload-table"  *ngFor="let item of files; let i=index">
+                    <table class="table">
+                        <thead>
+                        <tr>
+                            <th>Name : {{ item.relativePath }}</th>
+                        </tr>
+                        </thead>
+                    </table>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-sm btn-primary">Import</button>
+            </div>
+        </div>
     </div>
 </div>
+
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts
index 5c59404c2..2d5e520ee 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts
@@ -1,4 +1,5 @@
-import {JsonObject, JsonProperty} from 'json2typescript';
+import {Any, JsonObject, JsonProperty} from 'json2typescript';
+
 
 @JsonObject
 export class VlbDefinition {
@@ -11,17 +12,30 @@ export class VlbDefinition {
     // topology_template: TopologyTemplate;
 }
 
+@JsonObject('metadata')
 export class Metadata {
     @JsonProperty('template_author')
-    templateAuthor: string;
+     // tslint:disable-next-line:variable-name
+    template_author: string;
     'author-email': string;
     'user-groups': string;
     @JsonProperty('template_name')
-    templateName: string;
+        // tslint:disable-next-line:variable-name
+    template_name: string;
     @JsonProperty('template_version')
-    templateVersion: string;
+        // tslint:disable-next-line:variable-name
+    template_version: string;
     @JsonProperty('template_tag')
-    templateTags: string;
+        // tslint:disable-next-line:variable-name
+    template_tags: string;
+
+    @JsonProperty('dictionary_group')
+        // tslint:disable-next-line:variable-name
+    dictionary_group: string;
+
+
+    /* @JsonProperty('custom_keys', {String}, false)
+     mapOfCustomKeys: Map<string, string> = new Map<string, string>();*/
 }
 
 export class Import {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts
index 353ac4e1c..42aac5c4f 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts
@@ -51,9 +51,9 @@ export class MetaDataFile {
             'CSAR-Version: 1.0\n' +
             'Created-By: Shaaban Ebrahim <shaaban.eltanany.ext@orange.con>\n' +
             'Entry-Definitions:' + metaDataTab.entryFileName + '\n' +
-            'Template-Name:' + metaDataTab.templateName + '\n' +
-            'Template-Version: 1.0.0\n' +
-            'Template-Type: DEFAULT\n' +
+            'Template-Name:' + metaDataTab.name + '\n' +
+            'Template-Version:' + metaDataTab.version + '\n' +
+            'Template-Type: ' + metaDataTab.mode + '\n' +
             'Template-Tags:' + metaDataTab.tags;
 
     }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
index 3cc8707c5..dc363b28a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
@@ -34,7 +34,7 @@
                 </div>
                 <nav class="row">
                     <div class="col pr-0">
-                        <button class="float btn btn-sm btn-primary">Save</button>
+                        <button class="float btn btn-sm btn-primary" (click)="saveMetaData()">Save</button>
                         <button class="float btn btn-sm btn-outline-secondary" disabled>Cancel</button>
                     </div>
                 </nav>
@@ -73,32 +73,21 @@
                                         <label class="label-name">Mode</label>
                                         <label name="trst" *ngFor="let mode of modes; let i = index">
                                             <input class="form-check-input" [(ngModel)]="metaDataTab.mode" type="radio"
-                                                   name="exampleRadios" id="exampleRadios1" value={{mode}}>
+                                                   name="exampleRadios" id="exampleRadios1" value={{mode.name}}>
 
                                             <span>
-                                            <i [className]="mode.style" aria-hidden="true"></i>
-                                                <!-- <i class="mode-icon green icon-scripting-mode" aria-hidden="true"></i> -->
+                                            <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i>
                                                 {{mode.name}}
                                             </span>
                                         </label>
                                     </div>
-                                  <!--  <div class="single-line">
-                                        <label class="label-name">Dictionary Library Instances</label>
-                                        <div class="label-input">
-                                            <select name="cars">
-                                                <option class="select-placeholder">Select library</option>
-                                                <option value="audi"
-                                                        *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option>
-                                            </select>
-                                        </div>
-                                    </div>-->
 
                                 </div>
                                 <div class="card creat-card">
                                     <div class="single-line">
                                         <label class="label-name">Name</label>
                                         <div class="label-input">
-                                            <input type="input" (input)="searchPackages($event)"
+                                            <input type="input"
                                                    [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS">
                                         </div>
                                     </div>
@@ -106,21 +95,26 @@
                                     <div class="single-line">
                                         <label class="label-name">Description</label>
                                         <div class="label-input">
-                                            <input type="input" placeholder="Descripe the package">
+                                            <input type="input" [(ngModel)]="metaDataTab.description"
+                                                   placeholder="Descripe the package">
                                         </div>
                                     </div>
                                     <hr/>
                                     <div class="single-line">
                                         <label class="label-name">Version</label>
                                         <div class="label-input">
-                                            <input type="input" placeholder="Example: 1.0.0">
+                                            <input type="input" [(ngModel)]="metaDataTab.version"
+                                                   (input)="validatePackageNameAndVersion()"
+                                                   placeholder="Example: 1.0.0">
                                         </div>
+                                        <div><label style="color: red">{{errorMessage}}</label></div>
                                     </div>
                                     <hr/>
                                     <div class="single-line">
                                         <label class="label-name">tags</label>
                                         <div class="label-input">
-                                            <input type="input" placeholder="Ex., vDNS-CDS">
+                                            <input type="input" [(ngModel)]="metaDataTab.tags"
+                                                   placeholder="Ex., vDNS-CDS">
                                         </div>
                                     </div>
                                 </div>
@@ -129,21 +123,22 @@
                                         <div class="card creat-card">
                                             <div class="single-line">
                                                 <h5 class="label-name">
-                                                    Custom key <a class="delete-key" (click)="deleteCustomKey($event)" >Delete</a>
+                                                    Custom key <a class="delete-key" (click)="deleteCustomKey($event)">Delete</a>
                                                 </h5>
 
                                             </div>
                                             <div class="single-line">
                                                 <label class="label-name">Name</label>
                                                 <div class="label-input">
-                                                    <input type="input" placeholder="Enter Name">
+                                                    <input name="key" type="input" placeholder="Enter Name">
                                                 </div>
                                             </div>
                                             <hr/>
                                             <div class="single-line">
                                                 <label class="label-name">Value</label>
                                                 <div class="label-input">
-                                                    <input type="input" placeholder="Enter Value">
+                                                    <input name="value" type="input"
+                                                           placeholder="Enter Value">
                                                 </div>
                                             </div>
 
@@ -165,110 +160,8 @@
                             </div>
                             <div class="tab-pane fade" id="nav-imports" role="tabpanel"
                                  aria-labelledby="nav-imports-tab">
-                                <div class="import-container-all">
-                                    <div class="import-container">
-                                        <div class="import-container-input">
-                                            <input placeholder="Enter file URL" type="input"
-                                                   class="ng-pristine ng-valid ng-touched">
-                                            <a class="enter-link" href="#"><i class="icon-enter"></i></a>
-                                        </div>
-                                        <span class="import-container-span">Or you can also <a href="#"
-                                                                                               data-toggle="modal"
-                                                                                               data-target="#exampleModal">Import File</a></span>
-
-                                    </div>
-
-                                    <div class="accordion">
-                                        <div class="card creat-card">
-                                            <div class="single-line">
-                                                <label class="label-name">File</label>
-                                            </div>
-                                        </div>
-                                        <div id="accordion">
-                                            <div class="card">
-                                                <div class="card-header" id="headingOne">
-                                                    <h5 class="mb-0 d-flex justify-content-between">
-                                                        <button class="btn btn-link" data-toggle="collapse"
-                                                                data-target="#collapseOne" aria-expanded="true"
-                                                                aria-controls="collapseOne">
-                                                            <i class="icon-file-code"></i> Definitions/data_types.json
-                                                        </button>
-                                                        <a class="accordion-delete" href="#"><i class="icon-delete"></i></a>
-                                                    </h5>
-                                                </div>
-
-                                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                                     data-parent="#accordion">
-                                                    <div class="card-body">
-                                                        Anim pariatur cliche reprehenderit, enim eiusmod high life
-                                                        accusamus terry richardson ad squid. 3 wolf moon officia aute,
-                                                        non cupidatat skateboard dolor brunch. Food truck quinoa
-                                                        nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
-                                                        put a bird on it squid single-origin coffee nulla assumenda
-                                                        shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
-                                                        wes anderson cred nesciunt sapiente ea proident. Ad vegan
-                                                        excepteur butcher vice lomo. Leggings occaecat craft beer
-                                                        farm-to-table, raw denim aesthetic synth nesciunt you probably
-                                                        haven't heard of them accusamus labore sustainable VHS.
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="card">
-                                                <div class="card-header" id="headingTwo">
-                                                    <h5 class="mb-0">
-                                                        <button class="btn btn-link collapsed" data-toggle="collapse"
-                                                                data-target="#collapseTwo" aria-expanded="false"
-                                                                aria-controls="collapseTwo">
-                                                            Definitions/relationship_types.json
-                                                        </button>
-                                                    </h5>
-                                                </div>
-                                                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
-                                                     data-parent="#accordion">
-                                                    <div class="card-body">
-                                                        Anim pariatur cliche reprehenderit, enim eiusmod high life
-                                                        accusamus terry richardson ad squid. 3 wolf moon officia aute,
-                                                        non cupidatat skateboard dolor brunch. Food truck quinoa
-                                                        nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
-                                                        put a bird on it squid single-origin coffee nulla assumenda
-                                                        shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
-                                                        wes anderson cred nesciunt sapiente ea proident. Ad vegan
-                                                        excepteur butcher vice lomo. Leggings occaecat craft beer
-                                                        farm-to-table, raw denim aesthetic synth nesciunt you probably
-                                                        haven't heard of them accusamus labore sustainable VHS.
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="card">
-                                                <div class="card-header" id="headingThree">
-                                                    <h5 class="mb-0">
-                                                        <button class="btn btn-link collapsed" data-toggle="collapse"
-                                                                data-target="#collapseThree" aria-expanded="false"
-                                                                aria-controls="collapseThree">
-                                                            Definitions/artifact_types.json
-                                                        </button>
-                                                    </h5>
-                                                </div>
-                                                <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
-                                                     data-parent="#accordion">
-                                                    <div class="card-body">
-                                                        Anim pariatur cliche reprehenderit, enim eiusmod high life
-                                                        accusamus terry richardson ad squid. 3 wolf moon officia aute,
-                                                        non cupidatat skateboard dolor brunch. Food truck quinoa
-                                                        nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua
-                                                        put a bird on it squid single-origin coffee nulla assumenda
-                                                        shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
-                                                        wes anderson cred nesciunt sapiente ea proident. Ad vegan
-                                                        excepteur butcher vice lomo. Leggings occaecat craft beer
-                                                        farm-to-table, raw denim aesthetic synth nesciunt you probably
-                                                        haven't heard of them accusamus labore sustainable VHS.
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
+                                <app-imports-tab></app-imports-tab>
 
-                                </div>
                             </div>
                             <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
                                  aria-labelledby="nav-authentication-tab">...
@@ -286,24 +179,3 @@
         </div>
     </div>
 </div>
-
-<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
-     aria-hidden="true">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="exampleModalLabel">Import File</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                ...
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary">Import</button>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
index 60fccebc8..37a017953 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
@@ -31,6 +31,8 @@ import {JsonConvert} from 'json2typescript';
 import {JsonPipe} from '@angular/common';
 import {PackageCreationService} from './package-creation.service';
 import {PackageCreationUtils} from './package-creation.utils';
+import List = _.List;
+import {Router} from '@angular/router';
 
 @Component({
     selector: 'app-package-creation',
@@ -38,10 +40,11 @@ import {PackageCreationUtils} from './package-creation.utils';
     styleUrls: ['./package-creation.component.css']
 })
 export class PackageCreationComponent implements OnInit {
-
+    counter = 0;
     modes: object[] = [
         {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'},
         {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}];
+    customKeysAndValues: Map<string, string> = new Map<string, string>();
 
     dictionaryLibraryInstances: string[] = ['x', 'y'];
     private container: HTMLElement;
@@ -54,23 +57,34 @@ export class PackageCreationComponent implements OnInit {
     private folder: FolderNodeElement = new FolderNodeElement();
     private zipFile: JSZip = new JSZip();
     private filesData: any = [];
+    private errorMessage: string;
+    private keys: NodeListOf<HTMLElement>;
+    private values: NodeListOf<HTMLElement>;
 
 
-    constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils) {
+    constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils,
+                private router: Router) {
     }
 
     ngOnInit() {
+        // this.customKeysAndValues.set('Dictionary Library Instances', ' ');
+        this.keys = document.getElementsByName('key');
+        this.values = document.getElementsByName('value');
     }
 
 
     createAnotherCustomKeyDiv() {
-        console.log(this.metaDataTab);
         this.newElement = document.getElementById('target');
+        const id = this.newElement.getAttribute('id');
+        this.newElement.setAttribute('id', 'target' + this.counter++);
         const copiedElement = this.newElement.cloneNode(true);
-        /* this.newElement.setAttribute('class', 'alert-dark');*/
         this.container = document.getElementById('container');
         this.container.appendChild(copiedElement);
         this.elements = this.container.children;
+        this.newElement.setAttribute('id', id);
+        this.clearCopiedElement();
+
+        // console.log(this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version));
         /*this.metaDataTab = new MetaDataTab();
         this.metaDataTab.name = 'klfdj';
         this.metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
@@ -83,66 +97,96 @@ export class PackageCreationComponent implements OnInit {
         this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab));*/
     }
 
-    validatePacakgeName() {
-
+    private clearCopiedElement() {
+        const newCopiedElement: HTMLInputElement = document.getElementById('target' + (this.counter - 1)) as HTMLInputElement;
+        const inputElements = newCopiedElement.getElementsByTagName('input');
+        for (let i = 0; i < inputElements.length; i++) {
+            const element: HTMLInputElement = inputElements.item(i) as HTMLInputElement;
+            element.value = '';
+        }
     }
 
-    getDictionaryLibraryInstances() {
+
+    validatePackageNameAndVersion() {
+        if (this.metaDataTab.name && this.metaDataTab.version) {
+            this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => {
+                if (element) {
+                    this.errorMessage = 'the package with name and version is exists';
+                } else {
+                    this.errorMessage = ' ';
+                }
+            });
+        }
 
     }
 
-    saveMetaData() {
+    getDictionaryLibraryInstances() {
 
 
     }
 
-    private saveToFileSystem(response) {
-
-        const filename = 'TOSCA.meta';
-        FilesContent.putData(filename, response);
-
-        const filenameEntry = 'vLB_CDS.json';
-        const vlbDefinition: VlbDefinition = new VlbDefinition();
-        const metadata: Metadata = new Metadata();
+    saveMetaData() {
+        for (let i = 0; i < this.values.length; i++) {
+            const inputKeyElement: HTMLInputElement = this.keys.item(i) as HTMLInputElement;
+            const inputKey: string = inputKeyElement.value;
+            const inputValueElement: HTMLInputElement = this.values.item(i) as HTMLInputElement;
+            const inputValue: string = inputValueElement.value;
+            this.customKeysAndValues.set(inputKey, inputValue);
+        }
 
-        metadata.templateAuthor = ' lldkslds';
-        metadata.templateName = ' lldkslds';
-        metadata.templateTags = ' lldkslds';
-        metadata.templateVersion = ' lldkslds';
-        metadata['author-email'] = ' lldkslds';
-        metadata['user-groups'] = ' lldkslds';
-        vlbDefinition.metadata = metadata;
+        this.metaDataTab.mapOfCustomKey = this.customKeysAndValues;
+        this.setModeType(this.metaDataTab);
+        this.setEntryPoint(this.metaDataTab);
 
-        vlbDefinition.imports = [{
-            file: 'Definitions/data_types.json'
-        }];
+        this.addToscaMetaDataFile(this.metaDataTab);
 
-        const value = this.packageCreationUtils.transformToJson(vlbDefinition);
-        FilesContent.putData(filenameEntry, value);
+        const vlbDefinition: VlbDefinition = new VlbDefinition();
+        this.fillVLBDefinition(vlbDefinition, this.metaDataTab);
 
         this.filesData.push(this.folder.TREE_DATA);
         this.saveToBackend();
+        this.packageCreationService.refreshPackages();
+        this.router.navigate(['/packages']);
+
     }
 
+    addToscaMetaDataFile(metaDataTab: MetaDataTab) {
+        const filename = 'TOSCA.meta';
+        FilesContent.putData(filename, MetaDataFile.getObjectInstance(this.metaDataTab));
+    }
+
+    private setModeType(metaDataTab: MetaDataTab) {
+        if (metaDataTab.mode.startsWith('Scripting')) {
+            metaDataTab.mode = 'KOTLIN_SCRIPT';
+        } else if (metaDataTab.mode.startsWith('Designer')) {
+            metaDataTab.mode = 'DEFAULT';
+        } else {
+            metaDataTab.mode = 'GENERIC_SCRIPT';
+        }
+    }
 
     saveToBackend() {
         this.create();
         this.zipFile.generateAsync({type: 'blob'})
             .then(blob => {
-                const formData = new FormData();
-                formData.append('file', blob);
-                this.packageCreationService.saveBlueprint(formData)
-                    .subscribe(
-                        data => {
-                            console.log('Success:' + JSON.stringify(data));
-                        }, error => {
-                            console.log('Error -' + error.message);
-                        });
+                this.saveBluePrint(blob);
 
             });
     }
 
 
+    private saveBluePrint(blob) {
+        const formData = new FormData();
+        formData.append('file', blob);
+        this.packageCreationService.saveBlueprint(formData)
+            .subscribe(
+                data => {
+                    console.log('Success:' + JSON.stringify(data));
+                }, error => {
+                    console.log('Error -' + error.message);
+                });
+    }
+
     create() {
         this.folder.TREE_DATA.forEach((path) => {
 
@@ -151,8 +195,6 @@ export class PackageCreationComponent implements OnInit {
                 this.zipFile.folder(name);
                 path.children.forEach(children => {
                     const name2 = children.name;
-                    console.log(FilesContent.getMapOfFilesNamesAndContent());
-                    console.log(name2);
                     if (FilesContent.getMapOfFilesNamesAndContent().has(name2)) {
                         this.zipFile.file(name + '/' + name2, FilesContent.getMapOfFilesNamesAndContent().get(name2));
                     } else {
@@ -165,16 +207,41 @@ export class PackageCreationComponent implements OnInit {
     }
 
 
-    searchPackages($event: Event) {
-        /* const searchQuery = event.target.value;
-         searchQuery = searchQuery.trim();
-         this.packagesStore.search(searchQuery);*/
-    }
-
     deleteCustomKey(event) {
         this.container = document.getElementById('container');
         const element = event.parentElement.parentElement.parentElement;
         this.container.removeChild(element);
-        console.log('removed');
+    }
+
+
+    private setEntryPoint(metaDataTab: MetaDataTab) {
+        if (metaDataTab.mode.startsWith('DEFAULT')) {
+            metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
+        } else {
+            metaDataTab.entryFileName = '';
+        }
+
+
+    }
+
+    private fillVLBDefinition(vlbDefinition: VlbDefinition, metaDataTab: MetaDataTab) {
+
+        const metadata: Metadata = new Metadata();
+        metadata.template_author = 'Shaaban';
+        metadata.template_name = metaDataTab.templateName;
+        metadata.template_tags = metaDataTab.tags;
+
+        metadata.dictionary_group = 'default';
+        metadata.template_version = metaDataTab.version;
+        metadata['author-email'] = 'shaaban.altanany.ext@orange.com';
+        metadata['user-groups'] = 'ADMIN';
+        // metadata.mapOfCustomKeys = this.metaDataTab.mapOfCustomKey;
+        vlbDefinition.tosca_definitions_version = metaDataTab.version;
+        vlbDefinition.metadata = metadata;
+
+        // console.log(vlbDefinition.metadata.mapOfCustomKeys);
+        const value = this.packageCreationUtils.transformToJson(vlbDefinition);
+        console.log(value);
+        FilesContent.putData('vLB_CDS.json', value);
     }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
index 20e147684..0e5cd6a11 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
@@ -24,6 +24,8 @@ import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
 import {ApiService} from '../../../../common/core/services/api.service';
 import {BlueprintURLs} from '../../../../common/constants/app-constants';
+import {PackagesApiService} from '../packages-api.service';
+import {PackagesStore} from '../packages.store';
 
 @Injectable({
     providedIn: 'root'
@@ -31,10 +33,19 @@ import {BlueprintURLs} from '../../../../common/constants/app-constants';
 export class PackageCreationService {
 
 
-    constructor(private api: ApiService) {
+    constructor(private api: ApiService, private packagesListService: PackagesApiService, private packagesStore: PackagesStore) {
     }
 
     saveBlueprint(body: any | null, options?: any): Observable<any> {
         return this.api.post(BlueprintURLs.save, body, {responseType: 'text'});
     }
+
+    async checkBluePrintNameAndVersion(name: string, version: string): Promise<boolean> {
+        return await this.packagesListService.checkBluePrintIfItExists(name, version)
+            .then(bluePrintModelsResult => bluePrintModelsResult != null && bluePrintModelsResult.length > 0);
+    }
+
+    refreshPackages() {
+        this.packagesStore.getAll();
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts
index 2ee0de7e2..4bccb3dd5 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts
@@ -21,6 +21,7 @@ limitations under the License.
 
 import {JsonPipe} from '@angular/common';
 import {Injectable} from '@angular/core';
+import {JsonConvert} from 'json2typescript';
 
 
 @Injectable({
@@ -32,6 +33,7 @@ export class PackageCreationUtils {
     }
 
     public transformToJson(object: any): string {
+
         return this.pipe.transform(object);
     }
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts
index ca4acd36b..2332d8e53 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts
@@ -44,8 +44,8 @@ export class PackagesApiService {
         });
     }
 
-    checkBluePrintIfItExists(keyword: string) {// : Observable<any> {
-        // return this.api.get(BlueprintURLs.get + '/' + keyword);
+    async checkBluePrintIfItExists(name: string, version: string): Promise<BluePrintPage[]> {
+        return await this.api.get(BlueprintURLs.getBlueprintByName + '/' + name + '/version/' + version).toPromise();
     }
 
     getCountOfAllPackages(observable: Observable<number>) {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
index 6ce3a53a1..e5ebc315a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
@@ -1,6 +1,6 @@
 <div class="dropdown packagesFilter w-100">
     <input class="dropdown-toggle" type="text">
-    <div class="dropdown-text">ALL PACKAGES TAGS</div>
+    <div class="dropdown-text">{{checkBoxTages.substr(0,checkBoxTages.length-1)}}</div>
     <ul class="dropdown-content w-100">
         <li>
             <div class="form-group">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts
index b4007215a..28be5f5c8 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts
@@ -37,7 +37,7 @@ export class TagsFilteringComponent implements OnInit {
     searchTag = '';
     viewedPackages: BlueprintModel[] = [];
     private checkBoxTages = '';
-
+    currentPage = 0;
 
     constructor(private packagesStore: PackagesStore,
     ) {
@@ -45,13 +45,18 @@ export class TagsFilteringComponent implements OnInit {
             console.log(state);
             if (state.page) {
                 this.viewedPackages = state.page.content;
+                this.tags = [];
+                if (state.currentPage !== this.currentPage) {
+                    this.checkBoxTages = '';
+                    this.currentPage = state.currentPage;
+                }
                 this.viewedPackages.forEach(element => {
                     element.tags.split(',').forEach(tag => {
                         this.tags.push(tag.trim());
                     });
+                    this.tags.push('All');
                     this.tags = this.tags.filter((value, index, self) => self.indexOf(value) === index);
                     this.assignTags();
-
                 });
             }
         });
@@ -80,20 +85,20 @@ export class TagsFilteringComponent implements OnInit {
     }
 
     reloadPackages(event: any) {
-
         if (!event.target.checked) {
             this.checkBoxTages = this.checkBoxTages.replace(event.target.id + ',', '')
                 .replace(event.target.id, '');
         } else {
             this.checkBoxTages += event.target.id.trim() + ',';
         }
-        console.log(this.checkBoxTages);
-        if (!this.checkBoxTages.includes(',')) {
-            return;
-        }
-        this.viewedPackages = [];
-        // this.packagesStore.getPagesFilterByTags(this.checkBoxTages);
-        //   this.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index);
+        const tagsSelected = this.checkBoxTages.split(',').filter(item => {
+            if (item) {
+                return true;
+            }
+        }).map((item) => {
+            return item.trim();
+        });
+        this.packagesStore.filterByTags(tagsSelected);
     }
 
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
index 18428d4b4..8bc7adf8c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -7,7 +7,7 @@
             </div>
             <div class="card-footer row">
                 <div class="col">
-                    <a href="#" role="button" aria-pressed="true" class="btn-create-package float">Create Package
+                    <a href="/packages/createPackage" role="button" aria-pressed="true" class="btn-create-package float">Create Package
                     </a>
                 </div>
                 <div class="col">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts
index f45f25996..000f9eda1 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts
@@ -4,6 +4,7 @@ import { PackageListComponent } from './package-list.component';
 import { PackagesStore } from '../../packages.store';
 import { getBluePrintPageMock } from '../../blueprint.page.mock';
 import { of } from 'rxjs';
+import {PackagesDashboardState} from '../../model/packages-dashboard.state';
 
 describe('PackageListComponent', () => {
   let component: PackageListComponent;
@@ -12,7 +13,9 @@ describe('PackageListComponent', () => {
 
   beforeEach(async(() => {
 
-    store = { state$: of(getBluePrintPageMock()) };
+    const dashBoard = new PackagesDashboardState();
+    dashBoard.page = getBluePrintPageMock();
+    store = { state$: of(dashBoard) };
 
     TestBed.configureTestingModule({
       declarations: [ PackageListComponent ],
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
index c7ec0af20..049801227 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
@@ -16,8 +16,8 @@ export class PackageListComponent implements OnInit {
         console.log('PackageListComponent');
         this.packagesStore.state$.subscribe(state => {
             console.log(state);
-            if (state.page) {
-                this.viewedPackages = state.page.content;
+            if (state.filteredPackages) {
+                this.viewedPackages = state.filteredPackages.content;
             }
         });
     }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
index ac510893b..7928f2d91 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -2,7 +2,7 @@
 </app-header>
 <div class="new-wrapper">
     <div class="container-fluid main-container">
-
+        <app-packages-header></app-packages-header>
         <div class="container-fluid body-container">
             <nav class="row">
                 <!--Nav Tabs-->
@@ -31,31 +31,11 @@
                         <div class="col-5 pl-2">
                             <app-filter-by-tags class="w-100"></app-filter-by-tags>
                         </div>
-                        
+
                     </div>
                 </div>
             </nav>
-            <div class="row mt-4">
-                <div class="col">
-                    <div class="tab-content" id="nav-tabContent">
-                        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
-                            <div class="row">
-                                <div class="col sort-packages">
-                                    
-                                </div>
-                                <app-package-pagination></app-package-pagination>
-            
-                            </div>
-                            <app-packages-list></app-packages-list>
-            
-                        </div>
-                        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
-                        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
-                        <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact1-tab">...
-                        </div>
-                    </div>
-                </div>
-            </div>
+            <app-sort-packages></app-sort-packages>
         </div>
     </div>
 </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts
index da1031998..913bb1081 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts
@@ -3,6 +3,7 @@ import {Routes, RouterModule} from '@angular/router';
 import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component';
 import {DesignerComponent} from './designer/designer.component';
 import {PackageCreationComponent} from './package-creation/package-creation.component';
+import {ConfigurationDashboardComponent} from './configuration-dashboard/configuration-dashboard.component';
 
 
 const routes: Routes = [
@@ -11,6 +12,7 @@ const routes: Routes = [
         component: PackagesDashboardComponent
     },
     {path: 'designer', component: DesignerComponent},
+    {path: 'package/:id', component: ConfigurationDashboardComponent},
     {path: 'createPackage', component: PackageCreationComponent},
 ];
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
index b8aa73442..83c695f71 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
@@ -24,7 +24,7 @@ import {BluePrintPage} from './model/BluePrint.model';
 import {Store} from '../../../common/core/stores/Store';
 import {PackagesApiService} from './packages-api.service';
 import {PackagesDashboardState} from './model/packages-dashboard.state';
-
+import {Observable, of} from 'rxjs';
 
 @Injectable({
     providedIn: 'root'
@@ -32,6 +32,7 @@ import {PackagesDashboardState} from './model/packages-dashboard.state';
 export class PackagesStore extends Store<PackagesDashboardState> {
     // TDOD fixed for now as there is no requirement to change it from UI
     public pageSize = 5;
+    private bluePrintContent: BluePrintPage = new BluePrintPage();
 
     constructor(private packagesServiceList: PackagesApiService) {
         super(new PackagesDashboardState());
@@ -50,6 +51,13 @@ export class PackagesStore extends Store<PackagesDashboardState> {
         }
     }
 
+    public filterByTags(tags: string[]) {
+        console.log(this.state.currentPage);
+        this.getPagedPackagesByTags(this.state.command, this.state.currentPage,
+            this.pageSize, this.state.sortBy, tags);
+
+    }
+
     public getPage(pageNumber: number, pageSize: number) {
         if (this.isCommandExist()) {
             this.searchPagedPackages(this.state.command, pageNumber, pageSize);
@@ -74,11 +82,13 @@ export class PackagesStore extends Store<PackagesDashboardState> {
                 this.setState({
                     ...this.state,
                     page: pages[0],
+                    filteredPackages: pages[0],
                     command: '',
                     totalPackages: pages[0].totalElements,
                     currentPage: pageNumber,
                     // this param is set only in get all as it represents the total number of pacakges in the server
                     totalPackagesWithoutSearchorFilters: pages[0].totalElements,
+                    tags: [],
                     sortBy
                 });
             });
@@ -90,9 +100,11 @@ export class PackagesStore extends Store<PackagesDashboardState> {
                 this.setState({
                     ...this.state,
                     page: pages[0],
+                    filteredPackages: pages[0],
                     command: keyWord,
                     totalPackages: pages[0].totalElements,
                     currentPage: pageNumber,
+                    tags: [],
                     sortBy
                 });
             });
@@ -101,4 +113,52 @@ export class PackagesStore extends Store<PackagesDashboardState> {
     private isCommandExist() {
         return this.state.command;
     }
+
+    private getPagedPackagesByTags(keyWord: string, currentPage1: number, pageSize: number, sortBy1: string, tagsSearchable: string[]) {
+        this.getPagedPackagesByKeyWordFilteredByTags(tagsSearchable)
+            .subscribe((pages: BluePrintPage) => {
+                this.setState({
+                    ...this.state,
+                    page: this.state.page,
+                    filteredPackages: pages,
+                    command: keyWord,
+                    tags: tagsSearchable,
+                    //  totalPackages: pages.totalElements,
+                    currentPage: currentPage1,
+                    sortBy: sortBy1,
+                    totalPackages: this.state.page.totalElements,
+                });
+            });
+    }
+
+    private getPagedPackagesByKeyWordFilteredByTags(tagsSearchable: string[]): Observable<any> {
+        this.bluePrintContent.content = [];
+        if (tagsSearchable && tagsSearchable.length !== 0 && !tagsSearchable.includes('All')) {
+            tagsSearchable.forEach(tag => {
+                if (tag) {
+                    this.state.page.content.forEach(bluePrintModel => {
+                        if (tag.endsWith(',')) {
+                            tag = tag.replace(',', '');
+                        }
+                        bluePrintModel.tags.split(',').forEach(bluePrintModelTag => {
+                            if (bluePrintModelTag === tag) {
+                                this.bluePrintContent.content.push(bluePrintModel);
+                            }
+                        });
+                    });
+                } else {
+                    this.getPagedPackages(this.state.currentPage, this.pageSize);
+                    return of(this.state.page);
+                }
+            });
+            this.bluePrintContent.content = this.bluePrintContent.content.filter((value, index, self) => self.indexOf(value) === index);
+            console.log('the lenght is ' + this.bluePrintContent.content.length);
+            return of(this.bluePrintContent);
+        } else {
+            this.getPagedPackages(this.state.currentPage, this.pageSize);
+            return of(this.state.page);
+        }
+    }
+
+
 }
diff --git a/cds-ui/designer-client/src/assets/img/folder-upload.svg b/cds-ui/designer-client/src/assets/img/folder-upload.svg
new file mode 100644
index 000000000..a07eb85ce
--- /dev/null
+++ b/cds-ui/designer-client/src/assets/img/folder-upload.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>icon</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3.2-Import---Upload" transform="translate(-676.000000, -411.000000)" fill="#1273EB" fill-rule="nonzero">
+            <g id="modal-new" transform="translate(380.000000, 295.000000)">
+                <g id="upload" transform="translate(30.000000, 86.000000)">
+                    <g id="icon" transform="translate(266.000000, 30.000000)">
+                        <path d="M76.1081081,41.8594595 L76.1081081,19.027027 C76.1004221,17.1729378 74.928946,15.5234994 73.1808732,14.9054802 L73.1808732,10.2453222 C73.1808732,7.82032143 71.2150216,5.85446985 68.7900208,5.85446985 L27.8087318,5.85446985 C27.0003982,5.85446985 26.3451143,5.199186 26.3451143,4.39085239 C26.3451143,1.96585158 24.3792628,0 21.954262,0 L4.39085239,0 C1.96585158,0 0,1.96585158 0,4.39085239 L0,60.008316 C0,62.4333168 1.96585158,64.3991684 4.39085239,64.3991684 L38.1286985,64.3991684 C38.8107319,76.1598631 47.6519103,85.8279505 59.3049335,87.5560014 C70.9579566,89.2840522 82.2243598,82.5977596 86.2900241,71.5411108 C90.3556884,60.484462 86.1046903,48.092232 76.1081081,41.8594595 Z M2.92723493,60.008316 L2.92723493,4.39085239 C2.92723493,3.58251879 3.58251879,2.92723493 4.39085239,2.92723493 L21.954262,2.92723493 C22.7625956,2.92723493 23.4178794,3.58251879 23.4178794,4.39085239 C23.4178794,6.81585321 25.383731,8.78170478 27.8087318,8.78170478 L68.7900208,8.78170478 C69.5983544,8.78170478 70.2536383,9.43698864 70.2536383,10.2453222 L70.2536383,14.6361746 L16.0997921,14.6361746 C12.0601301,14.6410135 8.78654367,17.9146 8.78170478,21.954262 L8.78170478,57.0810811 C8.78708623,58.6697929 9.3147445,60.2126533 10.2833763,61.4719335 L4.39085239,61.4719335 C3.58251879,61.4719335 2.92723493,60.8166496 2.92723493,60.008316 Z M11.7089397,57.0810811 L11.7089397,21.954262 C11.7089397,19.5292611 13.6747913,17.5634096 16.0997921,17.5634096 L71.7172557,17.5634096 C72.5255893,17.5634096 73.1808732,18.2186934 73.1808732,19.027027 L73.1808732,40.2875343 C65.7265206,36.8900031 57.0753868,37.3922287 50.0642601,41.6295266 C43.0531335,45.8668245 38.5863831,53.2926233 38.1286985,61.4719335 L16.0997921,61.4719335 C13.6747913,61.4719335 11.7089397,59.5060819 11.7089397,57.0810811 Z M62.9355509,84.8898129 C50.8105469,84.8898129 40.981289,75.060555 40.981289,62.9355509 C40.981289,50.8105469 50.8105469,40.981289 62.9355509,40.981289 C75.060555,40.981289 84.8898129,50.8105469 84.8898129,62.9355509 C84.876101,75.0548708 75.0548708,84.876101 62.9355509,84.8898129 Z" id="Shape"></path>
+                        <path d="M69.7833333,61.4115756 C69.1416667,58.3450161 66.3916667,56 63,56 C60.3416667,56 58.05,57.4430868 56.95,59.607717 C54.1083333,59.9684887 52,62.2233119 52,65.0192926 C52,67.9956592 54.475,70.4308682 57.5,70.4308682 L69.4166667,70.4308682 C71.9833333,70.4308682 74,68.4466238 74,65.9212219 C74,63.5762058 72.075,61.5919614 69.7833333,61.4115756 Z M64.8333333,64.1173633 L64.8333333,67.7250804 L61.1666667,67.7250804 L61.1666667,64.1173633 L58.4166667,64.1173633 L63,59.607717 L67.5833333,64.1173633 L64.8333333,64.1173633 Z" id="Shape"></path>
+                        <path d="M16.0997921,20.4906445 C15.2914585,20.4906445 14.6361746,21.1459283 14.6361746,21.954262 L14.6361746,27.8087318 L17.5634096,27.8087318 L17.5634096,23.4178794 L21.954262,23.4178794 L21.954262,20.4906445 L16.0997921,20.4906445 Z" id="Path"></path>
+                        <rect id="Rectangle" x="14.6361746" y="30.7359667" width="2.92723493" height="2.92723493"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 0e6a7f3e7..17c49ce48 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -6,7 +6,8 @@ body{
   /* background-image: linear-gradient(-45deg, #000 10%, #fff 0);
   background-size: 6px 6px; */
   margin: 0;
-  font-family: 'Nunito' !important;
+  /* font-family: 'Nunito' !important; */
+  font-family: Arial, Helvetica, sans-serif !important;
   color: #1B3E6F !important;
 }
 *:focus{
@@ -1449,7 +1450,10 @@ ul.package-contributers{
 .btn{
   padding-right: 20px !important;
   padding-left: 20px !important;
-  border-radius: 15px !important;
+
+}
+.btn.border-radius{
+  border-radius: 20px !important;
 }
 .btn-primary{
   background-color: #1273EB !important;
@@ -1592,6 +1596,79 @@ hr {
   display: inline-block;
   margin-top: 5px;
 }
+.btn-link:hover, .btn-link:focus{
+  text-decoration: none !important;
+}
+.btn-link::before{
+  content: "\f107";
+  font-family:'FontAwesome';
+  position: relative;
+  margin-right: 20px;
+}
+.btn-link.collapsed::before{
+  content: "\f105";
+  font-family:'FontAwesome';
+  position: relative;
+  margin-right: 30px;
+}
+.btn-link i{
+  margin-right: 10px;
+}
+.ngx-file-drop__content{
+  background: #F4F9FE;
+  padding: 20px;
+  height: auto !important;
+  display: inline-block !important;
+  width: 100%;
+}
+.ngx-file-drop__drop-zone{
+  border: 2px dotted #F4F9FE !important;
+  border-radius: 0px !important;
+  height: auto !important;
+}
+.folder-upload{
+  width: 100%;
+  display: inline-block;
+  text-align: center;
+}
+.folder-upload-text{
+  margin-top: 10px;
+  width: 100%;
+  display: inline-block;
+  text-align: center;
+  color:#242424 ;
+  font-size: 12px;
+}
+.folder-upload-text button{
+  margin-left: 10px;
+  font-size: 12px;
+}
+.folder-upload-type{
+  color:#A4B2C6 ;
+  font-size: 10px;
+  width: 100%;
+  display: inline-block;
+  text-align: center;
+}
+.upload-table .table thead th{
+  border-top: 0px !important;
+  border-bottom: 0px !important;
+}
+.upload-table .table{
+  margin-bottom: 0px !important;
+}
+.nav-tabs .nav-link{
+  position: relative;
+}
+.nav-tabs .nav-link.tab-done::after{
+  content: "\f058";
+  position: absolute;
+  font-family: 'FontAwesome';
+  left: 3px;
+  font-size: 16px;
+  top: 11px;
+  color: #66BB00;
+}
 /* Extra small devices (portrait phones, less than 576px) */
 @media (max-width: 575.98px) {
   .page-title{