Adding view and edit feature

Issue-ID: CCSDK-2123

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

14 files changed, 319 insertions, 247 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 f07258439..6194a9bb3 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
@@ -11,16 +11,16 @@
                         <li>Package Name</li>
                     </ul>
                 </h2>
-               <!-- <div class="col d-flex justify-content-end header-button-save">
-                    <button class="float btn btn-sm btn-outline-secondary" disabled>Discard Changes</button>
-                    <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button>
-                </div>-->
+                <div class="col d-flex justify-content-end header-button-save">
+                    <button class="float btn btn-sm btn-outline-secondary" (click)="goBacktoDashboard()" >Discard Changes</button>
+                    <button class="float btn btn-sm btn-primary" (click)="editBluePrint()">Apply Changes</button>
+                </div>
             </div>
         </header>
 
 
 
-        <div class="container-fluid body-container">
+        <div class="container-fluid body-container">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
 
             <div class="container">
                <!-- <div class="creat-action-container">
@@ -77,7 +77,7 @@
                             <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
                                href="#nav-metadata"
                                role="tab" aria-controls="nav-metadata"
-                               aria-selected="true">METADATA</a>
+                               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>
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 766e0b120..1fcc35f5a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
@@ -1,7 +1,16 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { PackageStore } from './package.store';
-import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {BluePrintDetailModel} from '../model/BluePrint.detail.model';
+import {PackageCreationStore} from '../package-creation/package-creation.store';
+import {FilesContent, FolderNodeElement, MetaDataTabModel} from '../package-creation/mapping-models/metadata/MetaDataTab.model';
+import {MetadataTabComponent} from '../package-creation/metadata-tab/metadata-tab.component';
+import * as JSZip from 'jszip';
+import {ConfigurationDashboardService} from './configuration-dashboard.service';
+import {VlbDefinition} from '../package-creation/mapping-models/definitions/VlbDefinition';
+import {DslDefinition} from '../package-creation/mapping-models/CBAPacakge.model';
+import {PackageCreationUtils} from '../package-creation/package-creation.utils';
+import {PackageCreationModes} from '../package-creation/creationModes/PackageCreationModes';
+import {PackageCreationBuilder} from '../package-creation/creationModes/PackageCreationBuilder';
 
 
 @Component({
@@ -11,24 +20,156 @@ import { BluePrintDetailModel } from '../model/BluePrint.detail.model';
 })
 export class ConfigurationDashboardComponent implements OnInit {
     viewedPackage: BluePrintDetailModel = new BluePrintDetailModel();
+    @ViewChild(MetadataTabComponent, {static: false})
+    private metadataTabComponent: MetadataTabComponent;
 
-    constructor(private route: ActivatedRoute, private configurationStore: PackageStore) {
+    entryDefinitionKeys: string[] = ['template_tags', 'user-groups',
+        'author-email', 'template_version', 'template_name', 'template_author'];
+    @ViewChild('nameit', {static: true})
+    private elementRef: ElementRef;
+
+    private zipFile: JSZip = new JSZip();
+    private filesData: any = [];
+    private folder: FolderNodeElement = new FolderNodeElement();
+
+    constructor(private route: ActivatedRoute, private configurationDashboardService: ConfigurationDashboardService,
+                private packageCreationStore: PackageCreationStore,
+                private packageCreationUtils: PackageCreationUtils,
+                private router: Router) {
     }
-    // test
+
     ngOnInit() {
+        this.elementRef.nativeElement.focus();
         const id = this.route.snapshot.paramMap.get('id');
-        this.configurationStore.getPagedPackages(id).subscribe(
+        this.configurationDashboardService.getPagedPackages(id).subscribe(
             (bluePrintDetailModels) => {
-                console.log('-------------xxxxxxxxxxx----------------');
-                console.log(bluePrintDetailModels);
-                this.configurationStore.setConfiguration(bluePrintDetailModels);
-
-                console.log('----------------- id ' + id);
                 if (bluePrintDetailModels) {
-                    this.configurationStore.downloadResource(
-                        bluePrintDetailModels[0].artifactName + '/' + bluePrintDetailModels[0].artifactVersion);
+                    this.downloadCBAPackage(bluePrintDetailModels);
+                }
+            });
+    }
+
+
+    private downloadCBAPackage(bluePrintDetailModels: BluePrintDetailModel) {
+        this.configurationDashboardService.downloadResource(
+            bluePrintDetailModels[0].artifactName + '/' + bluePrintDetailModels[0].artifactVersion).subscribe(response => {
+            const blob = new Blob([response], {type: 'application/octet-stream'});
+            this.zipFile.loadAsync(blob).then((zip) => {
+                Object.keys(zip.files).forEach((filename) => {
+                    console.log(filename);
+                    zip.files[filename].async('string').then((fileData) => {
+                        if (fileData) {
+                            if (filename.includes('Scripts/')) {
+                                this.setScripts(filename, fileData);
+                            } else if (filename.includes('Templates/')) {
+                                if (filename.includes('-mapping.')) {
+                                    this.setMapping(filename, fileData);
+                                } else if (filename.includes('-template.')) {
+                                    this.setTemplates(filename, fileData);
+                                }
+                            } else if (filename.includes('Definitions/')) {
+                                this.setImports(filename, fileData);
+                            } else if (filename.includes('TOSCA-Metadata/')) {
+                                const metaDataTabInfo: MetaDataTabModel = this.getMetaDataTabInfo(fileData);
+                                // console.log(metaDataTabInfo);
+                                this.setMetaData(metaDataTabInfo, bluePrintDetailModels[0]);
+                            }
+                        }
+                    });
+                });
+            });
+        });
+    }
+
+    private setScripts(filename: string, fileData: any) {
+        this.packageCreationStore.addScripts(filename, fileData);
+    }
+
+    private setImports(filename: string, fileData: any) {
+        if (filename.includes('blueprint.json') || filename.includes('vLB_CDS.json')) {
+            let definition = new VlbDefinition();
+            definition = fileData as VlbDefinition;
+            definition = JSON.parse(fileData);
+            const dslDefinition = new DslDefinition();
+            dslDefinition.content = this.packageCreationUtils.transformToJson(definition.dsl_definitions);
+            const mapOfCustomKeys = new Map<string, string>();
+            for (const metadataKey in definition.metadata) {
+                if (!this.entryDefinitionKeys.includes(metadataKey + '')) {
+                    mapOfCustomKeys.set(metadataKey + '', definition.metadata[metadataKey + '']);
                 }
+            }
+            this.packageCreationStore.changeDslDefinition(dslDefinition);
+            this.packageCreationStore.setCustomKeys(mapOfCustomKeys);
+        } else {
+            this.packageCreationStore.addDefinition(filename, fileData);
+
+        }
+    }
+
+    private setTemplates(filename: string, fileData: any) {
+        this.packageCreationStore.addTemplate(filename, fileData);
+    }
+
+    private setMapping(fileName: string, fileData: string) {
+        this.packageCreationStore.addMapping(fileName, fileData);
+    }
+
+    editBluePrint() {
+        this.packageCreationStore.state$.subscribe(
+            cbaPackage => {
+                console.log(cbaPackage);
+                FilesContent.clear();
+                let packageCreationModes: PackageCreationModes;
+                cbaPackage = PackageCreationModes.mapModeType(cbaPackage);
+                cbaPackage.metaData = PackageCreationModes.setEntryPoint(cbaPackage.metaData);
+                packageCreationModes = PackageCreationBuilder.getCreationMode(cbaPackage);
+                packageCreationModes.execute(cbaPackage, this.packageCreationUtils);
+                this.filesData.push(this.folder.TREE_DATA);
+                this.saveBluePrintToDataBase();
+            });
+    }
+
+    private setMetaData(metaDataObject: MetaDataTabModel, bluePrintDetailModel: BluePrintDetailModel) {
+        metaDataObject.description = bluePrintDetailModel.artifactDescription;
+        this.packageCreationStore.changeMetaData(metaDataObject);
+
+    }
+
+    saveMetaData() {
+        this.metadataTabComponent.saveMetaDataToStore();
+    }
+
+    getMetaDataTabInfo(fileData: string) {
+        const metaDataTabModel = new MetaDataTabModel();
+        const arrayOfLines = fileData.split('\n');
+        metaDataTabModel.entryFileName = arrayOfLines[3].split(':')[1];
+        metaDataTabModel.name = arrayOfLines[4].split(':')[1];
+        metaDataTabModel.version = arrayOfLines[5].split(':')[1];
+        metaDataTabModel.mode = arrayOfLines[6].split(':')[1];
+        metaDataTabModel.templateTags = new Set<string>(arrayOfLines[7].split(':')[1].split(','));
+        console.log(metaDataTabModel.mode);
+        return metaDataTabModel;
+    }
+
+    saveBluePrintToDataBase() {
+        this.create();
+        this.zipFile.generateAsync({type: 'blob'})
+            .then(blob => {
+                this.packageCreationStore.saveBluePrint(blob);
+                this.router.navigate(['/packages']);
             });
     }
 
+
+    create() {
+        FilesContent.getMapOfFilesNamesAndContent().forEach((value, key) => {
+            this.zipFile.folder(key.split('/')[0]);
+            this.zipFile.file(key, value);
+        });
+
+    }
+
+    goBacktoDashboard() {
+        this.router.navigate(['/packages']);
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts
index 566339db8..239dd6339 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts
@@ -13,13 +13,15 @@ export class ConfigurationDashboardService {
 
     }
 
-    getBluePrintModel(id: string): Observable<BluePrintDetailModel> {
+    private getBluePrintModel(id: string): Observable<BluePrintDetailModel> {
         return this.api.getOne(BlueprintURLs.getOneBlueprint + '/' + id);
     }
+    getPagedPackages(id: string) {
+        return this.getBluePrintModel(id);
+    }
 
-
-    public downloadResource(id: string) {
-        return this.api.getCustomized(id, {responseType: 'blob'});
+    public downloadResource(path: string) {
+        return this.api.getCustomized(BlueprintURLs.download + path, {responseType: 'blob'});
     }
 
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts
index 4669ef12d..49de59e62 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts
@@ -19,11 +19,11 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import { Injectable } from '@angular/core';
-import { Store } from '../../../../common/core/stores/Store';
-import { ConfigurationDashboardService } from './configuration-dashboard.service';
-import { PackageDashboardState } from '../model/package-dashboard.state';
-import { BlueprintURLs } from '../../../../common/constants/app-constants';
+import {Injectable} from '@angular/core';
+import {Store} from '../../../../common/core/stores/Store';
+import {ConfigurationDashboardService} from './configuration-dashboard.service';
+import {PackageDashboardState} from '../model/package-dashboard.state';
+import {BlueprintURLs} from '../../../../common/constants/app-constants';
 import * as JSZip from 'jszip';
 
 @Injectable({
@@ -37,53 +37,13 @@ export class PackageStore extends Store<PackageDashboardState> {
         super(new PackageDashboardState());
     }
 
-    getPagedPackages(id: string) {
+   /* getPagedPackages(id: string) {
         return this.configurationDashboardService.getBluePrintModel(id);
     }
 
     public downloadResource(path: string) {
-        console.log('download resource xx');
-        this.configurationDashboardService.downloadResource(BlueprintURLs.download + path).subscribe(response => {
-            console.log('try to download ');
-            const blob = new Blob([response], { type: 'application/octet-stream' });
-            this.zipFile.loadAsync(blob).then((zip) => {
-                Object.keys(zip.files).forEach((filename) => {
-                    console.log(filename);
-                    zip.files[filename].async('string').then((fileData) => {
-                        if (fileData) {
-                            if (filename.includes('Scripts/')) {
-                                this.setScripts(filename, fileData);
-                            } else if (filename.includes('templates/')) {
-                                this.setTemplates(filename, fileData);
-                            } else if (filename.includes('definitions/')) {
-                                this.setImports(filename, fileData);
-                            }
-                        }
-                    });
-                });
-            });
-        });
-    }
-
-    setConfiguration(bluePrintDetailModels) {
-        this.setState({
-            ...this.state,
-            configuration: bluePrintDetailModels[0]
-        });
-    }
-
-    private setScripts(filename: string, fileData: any) {
-        this.setState({
-            ...this.state,
-            scripts: this.state.scripts.setScripts(filename, fileData)
-        });
-    }
+        return this.configurationDashboardService.downloadResource(BlueprintURLs.download + path);
+    }*/
 
-    private setImports(filename: string, fileData: any) {
 
-    }
-
-    private setTemplates(filename: string, fileData: any) {
-
-    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts
index 1606d6574..e1efc3c22 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts
@@ -41,7 +41,7 @@ export class DesignerCreationMode extends PackageCreationModes {
             FilesContent.putData(key, valueOfFile);
         });
 
-        const filenameEntry = 'Definitions/vLB_CDS.json';
+        const filenameEntry = 'Definitions/blueprint.json';
         const vlbDefinition: VlbDefinition = new VlbDefinition();
         const metadata: Metadata = new Metadata();
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts
index b2a9d14b3..8ccf0c39e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/PackageCreationModes.ts
@@ -11,7 +11,7 @@ export abstract class PackageCreationModes {
 
     public static setEntryPoint(metaDataTab: MetaDataTabModel) {
         if (metaDataTab.mode.startsWith(ModeType.Designer)) {
-            metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
+            metaDataTab.entryFileName = 'Definitions/blueprint.json';
         } else {
             // TODO Not implemented
             metaDataTab.entryFileName = '';
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html
index 6fb1dcfd8..a67d12bcf 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html
@@ -1,5 +1,5 @@
 <ace-editor [(text)]="dslDefinition.content" [mode]="'javascript'" [autoUpdateContent]="true"
-    [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor style="height:300px;">
+    [durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'tomorrow_night_bright'" #editor style="height:300px;">
 </ace-editor>
 
-<!-- <app-source-editor [lang]="'javascript'" (textChanged)="textChanged($event)" [(text)]="dslDefinition.content"></app-source-editor> -->
\ No newline at end of file
+<!-- <app-source-editor [lang]="'javascript'" (textChanged)="textChanged($event)" [(text)]="dslDefinition.content"></app-source-editor> -->
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts
index 7171e730e..1297bc14e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import { DslDefinition } from '../mapping-models/CBAPacakge.model';
-import { PackageCreationStore } from '../package-creation.store';
+import {Component, OnInit} from '@angular/core';
+import {DslDefinition} from '../mapping-models/CBAPacakge.model';
+import {PackageCreationStore} from '../package-creation.store';
 
 @Component({
     selector: 'app-dsl-definitions-tab',
@@ -16,11 +16,15 @@ export class DslDefinitionsTabComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.packageCreationStore.changeDslDefinition(this.dslDefinition);
+        this.packageCreationStore.state$.subscribe(cbaPackage => {
+            if (cbaPackage && cbaPackage.definitions && cbaPackage.definitions.dslDefinition) {
+                this.dslDefinition.content = cbaPackage.definitions.dslDefinition.content;
+            }
+        });
 
     }
 
     textChanged(event) {
-        console.log('event changed');
+        this.packageCreationStore.changeDslDefinition(this.dslDefinition);
     }
 }
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 1f8783d5b..7200e1210 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
@@ -31,6 +31,11 @@ export class MetaDataTabModel {
     templateName: string;
     templateTags: Set<string> = new Set<string>();
 
+    setCustomKey(mapOfCustomKey: Map<string, string>) {
+        this.mapOfCustomKey = mapOfCustomKey;
+        return this;
+    }
+
 }
 
 /*TOSCA-Meta-File-Version: 1.0.0
@@ -59,10 +64,10 @@ export class FolderNodeElement {
         {
             name: 'Definitions',
             children: [
-                { name: 'activation-blueprint.json' },
-                { name: 'artifacts_types.json' },
-                { name: 'data_types.json' },
-                { name: 'vLB_CDS.json' },
+                {name: 'activation-blueprint.json'},
+                {name: 'artifacts_types.json'},
+                {name: 'data_types.json'},
+                {name: 'vLB_CDS.json'},
             ]
         },
         {
@@ -71,8 +76,8 @@ export class FolderNodeElement {
                 {
                     name: 'kotlin',
                     children: [
-                        { name: 'ScriptComponent.cba.kts' },
-                        { name: 'ResourceAssignmentProcessor.cba.kts' },
+                        {name: 'ScriptComponent.cba.kts'},
+                        {name: 'ResourceAssignmentProcessor.cba.kts'},
                     ]
                 }
             ]
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
index 6508c96de..0ae8efb47 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
@@ -3,10 +3,11 @@
         <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}}>
+                  id="exampleRadios1" value={{mode.name}}>
 
             <span>
-                <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i>
+                <i [className]="mode.style" aria-hidden="true"
+                   [id]="mode.name"></i>
                 {{mode.name}}
             </span>
         </label>
@@ -26,22 +27,23 @@
 
 </div>
 <div class="card creat-card">
-    <div class="single-line-model error">
+    <div class="single-line-model">
         <label class="label-name">Name <span>*</span></label>
         <div class="label-input">
-            <input type="input" [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS">
+            <input type="input" [readOnly]="!packageNameAndVersionEnables" [(ngModel)]="metaDataTab.name"
+                   placeholder="Topology name.vLB.CDS">
         </div>
-        <div class="model-note-container error-message">
+        <!--<div class="model-note-container error-message">
             Package name already exists with this version. Please enter a different name or enter different version
             number.
-        </div>
+        </div>-->
     </div>
 
     <div class="single-line-model">
         <label class="label-name">Version <span>*</span></label>
         <div class="label-input">
-            <input type="input" [(ngModel)]="metaDataTab.version" (input)="validatePackageNameAndVersion()"
-                placeholder="Example: 1.0.0">
+            <input type="input" [readOnly]="!packageNameAndVersionEnables" [(ngModel)]="metaDataTab.version" (input)="validatePackageNameAndVersion()"
+                   placeholder="Example: 1.0.0">
         </div>
         <div class="model-note-container error-message">{{errorMessage}}</div>
     </div>
@@ -56,13 +58,13 @@
         <label class="label-name">tags</label>
         <div class="label-input">
             <input type="input" (keyup.enter)="addTag($event)" [(ngModel)]="metaDataTab.tags"
-                placeholder="Ex., vDNS-CDS">
+                   placeholder="Ex., vDNS-CDS">
 
         </div>
         <div class="model-note-container tag-notes">Seprate tags with comma or space</div>
         <div class="model-note-container tages-container">
             <span *ngFor="let tag of tags" class="single-tage">{{tag}} <i (click)="removeTag(tag)"
-                    class="fa fa-times-circle"></i></span>
+                                                                          class="fa fa-times-circle"></i></span>
         </div>
     </div>
 </div>
@@ -77,7 +79,7 @@
             </div>
             <div *ngFor="let map of customKeysMap | keyvalue; let i=index" class="single-custom-key">
                 <div class="single-line-custom-key">
-                    <label class="label-name"><span>{{i+1}}-</span> Name</label>
+                    <label class="label-name"><span>{{i + 1}}-</span> Name</label>
                     <div class="label-input">
                         <input value="{{map.key}}" name="key" type="input" placeholder="Enter name">
                     </div>
@@ -88,23 +90,25 @@
                         <input value="{{map.value}}" name="value" type="input" placeholder="Enter value">
                     </div>
                 </div>
-                <div class="single-line-custom-key-delete"><button (click)="removeKey($event,map.key)"
-                        class="custom-key-delete"><i aria-hidden="true" class="icon-delete"></i></button></div>
+                <div class="single-line-custom-key-delete">
+                    <button (click)="removeKey($event,map.key)"
+                            class="custom-key-delete"><i aria-hidden="true" class="icon-delete"></i></button>
+                </div>
             </div>
 
             <div class="single-custom-key">
                 <div class="single-line-custom-key">
-                    <label class="label-name"><span>{{customKeysMap.size+1}}.</span> Name</label>
+                    <label class="label-name"><span>{{customKeysMap.size + 1}}.</span> Name</label>
                     <div class="label-input">
                         <input (keyup.enter)="addCustomKey()" name="key" type="input" class="mapKey"
-                            placeholder="Enter name">
+                               placeholder="Enter name">
                     </div>
                 </div>
                 <div class="single-line-custom-key">
                     <label class="label-name">Value</label>
                     <div class="label-input">
                         <input (keyup.enter)="addCustomKey()" class="mapValue" name="value" type="input"
-                            placeholder="Enter value">
+                               placeholder="Enter value">
                     </div>
                 </div>
                 <!-- <div class="single-line-custom-key-delete"><button (click)="removeKey($event)"
@@ -113,4 +117,4 @@
 
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts
index eb486cf4f..b99925716 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts
@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
-import { PackageCreationService } from '../package-creation.service';
-import { MetaDataTabModel } from '../mapping-models/metadata/MetaDataTab.model';
-import { PackageCreationStore } from '../package-creation.store';
-import { PackageStore } from '../../configuration-dashboard/package.store';
+import {Component, OnInit} from '@angular/core';
+import {PackageCreationService} from '../package-creation.service';
+import {MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model';
+import {PackageCreationStore} from '../package-creation.store';
+import {PackageStore} from '../../configuration-dashboard/package.store';
+import {ActivatedRoute} from '@angular/router';
 
 
 @Component({
@@ -11,37 +12,47 @@ import { PackageStore } from '../../configuration-dashboard/package.store';
     styleUrls: ['./metadata-tab.component.css']
 })
 export class MetadataTabComponent implements OnInit {
-
+    packageNameAndVersionEnables = true;
     counter = 0;
     tags = new Set<string>();
     customKeysMap = new Map();
     modes: object[] = [
-        { name: 'Designer Mode', style: 'mode-icon icon-designer-mode' },
-        { name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode' },
-        { name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode' }];
+        {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}];
+    /*  {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'},
+      {name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode'}];*/
     private metaDataTab: MetaDataTabModel = new MetaDataTabModel();
     private errorMessage: string;
 
-    constructor(
-        private packageCreationService: PackageCreationService,
-        private packageCreationStore: PackageCreationStore,
-        private packageStore: PackageStore) {
+    constructor(private route: ActivatedRoute,
+                private packageCreationService: PackageCreationService,
+                private packageCreationStore: PackageCreationStore,
+                private packageStore: PackageStore) {
 
     }
 
     ngOnInit() {
         this.metaDataTab.templateTags = this.tags;
         this.metaDataTab.mapOfCustomKey = this.customKeysMap;
-        this.packageCreationStore.changeMetaData(this.metaDataTab);
 
-        this.packageStore.state$.subscribe(element => {
-            if (element && element.configuration) {
-                console.log('from element2');
+        const id = this.route.snapshot.paramMap.get('id');
+        id ? this.packageNameAndVersionEnables = false :
+            this.packageNameAndVersionEnables = true;
+        this.packageCreationStore.state$.subscribe(element => {
+
+            if (element && element.metaData) {
+
+                this.metaDataTab.name = element.metaData.name;
+                this.metaDataTab.version = element.metaData.version;
+                this.metaDataTab.description = element.metaData.description;
+                this.tags = element.metaData.templateTags;
+                this.metaDataTab.templateTags = this.tags;
                 console.log(element);
-                this.metaDataTab.name = element.configuration.artifactName;
-                this.metaDataTab.version = element.configuration.artifactVersion;
-                this.metaDataTab.description = element.configuration.artifactDescription;
-                this.tags = new Set(element.configuration.tags.split(','));
+                if (element.metaData.mode && element.metaData.mode.includes(' DEFAULT')) {
+                    this.metaDataTab.mode = 'Designer Mode';
+                }
+
+                this.customKeysMap = element.metaData.mapOfCustomKey;
+                // this.tags = element.metaData.templateTags;
 
             }
         });
@@ -95,4 +106,8 @@ export class MetadataTabComponent implements OnInit {
         }
 
     }
+
+    saveMetaDataToStore() {
+        this.packageCreationStore.changeMetaData(this.metaDataTab);
+    }
 }
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 906904855..af5ed4f21 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
@@ -2,21 +2,20 @@
 
 <div class="new-wrapper">
     <div class="container-fluid main-container">
-    <header class="page-title">
-        <div class="row">
-            <h2 class="col m-0">
-                <ul class="breadcrumb-header">
-                    <li>CBA Packages</li>
-                    <li>Package Name</li>
-                </ul>
-            </h2>
-            <div class="col d-flex justify-content-end header-button-save">
-                <button class="float btn btn-sm btn-outline-secondary" disabled>Discard Changes</button>
-                <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button>
+        <header class="page-title">
+            <div class="row">
+                <h2 class="col m-0">
+                    <ul class="breadcrumb-header">
+                        <li>CBA Packages</li>
+                        <li>Package Name</li>
+                    </ul>
+                </h2>
+                <div class="col d-flex justify-content-end header-button-save">
+                    <button class="float btn btn-sm btn-outline-secondary" (click)="goBackToDashBorad()" >Discard Changes</button>
+                    <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button>
+                </div>
             </div>
-        </div>
-    </header>
-
+        </header>
 
 
         <div class="container-fluid body-container">
@@ -39,71 +38,6 @@
                     </a>
                 </div>
 
-                <div class="card creat-card view-package-container">
-                    <div class="row">
-                        <div class="col-8">
-                            <div class="row">
-                                <div class="col d-flex">
-                                    <i class="package-type-icon icon-designer-mode"></i>
-                                    <div class="package-name-container">
-                                        <div class="row">
-                                            <div class="col-12 package-name deployed">
-                                                Package Name
-                                                <span>.vLB.CDS</span>
-                                                <i class="icon-deploy"></i>
-                                            </div>
-                                            <div class="col-12 package-description">
-                                                Last modified Oct 4, 2019 03:48 PM By Ahmed Abbas
-                                            </div>
-                                        </div>
-                                        <!-- <div class="row">
-                                            <div class="col-4">
-                                                <div class="package-view-title">Author Name</div>
-                                                <p>Abdelmuhaimen Seaudi</p>
-                                            </div>
-                                            <div class="col-4">
-                                                <div class="package-view-title">Author Email</div>
-                                                <p>abdelmuhaimen.seaudi@orange.com</p>
-                                            </div>
-                                            <div class="col-4">
-                                                <div class="package-view-title">Contributions</div>
-                                                <ul class="package-contributers">
-                                                    <li>
-                                                        <button type="button" class="border-fade" data-toggle="tooltip"
-                                                                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">
-                                                            <img src="/assets/img/img-user2.jpg">
-                                                        </button>
-                                                    </li>
-                                                    <li>
-                                                        <button type="button" data-toggle="tooltip" data-placement="bottom"
-                                                                title="User name">
-                                                            <img src="/assets/img/img-user3.jpg">
-                                                        </button>
-                                                    </li>
-                                                    <li>
-                                                        <a href="">5 contributors</a>
-                                                    </li>
-                                                </ul>
-                                            </div>
-                                        </div> -->
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-4 package-view-button">
-                            <button class="btn btn-sm btn-outline-secondary"><i class="fa fa-play-circle"></i> Deploy</button>
-                            <button class="btn btn-sm btn-primary">Designer Mode</button>
-                        </div>
-                    </div>
-                 
-                </div>
 
                 <nav class="row">
                     <!--Nav Tabs-->
@@ -112,7 +46,7 @@
                             <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
                                href="#nav-metadata"
                                role="tab" aria-controls="nav-metadata"
-                               aria-selected="true">METADATA</a>
+                               aria-selected="false"  autofocus  #nameit (focusout)="test()">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>
@@ -163,5 +97,5 @@
                 </div>
             </div>
         </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 58c04e83e..42db2688e 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
@@ -19,15 +19,17 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import { Component, OnInit } from '@angular/core';
-import { FilesContent, FolderNodeElement, MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model';
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {FilesContent, FolderNodeElement, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
 
 import * as JSZip from 'jszip';
-import { PackageCreationStore } from './package-creation.store';
-import { Definition } from './mapping-models/CBAPacakge.model';
-import { PackageCreationModes } from './creationModes/PackageCreationModes';
-import { PackageCreationBuilder } from './creationModes/PackageCreationBuilder';
-import { PackageCreationUtils } from './package-creation.utils';
+import {PackageCreationStore} from './package-creation.store';
+import {Definition} from './mapping-models/CBAPacakge.model';
+import {PackageCreationModes} from './creationModes/PackageCreationModes';
+import {PackageCreationBuilder} from './creationModes/PackageCreationBuilder';
+import {PackageCreationUtils} from './package-creation.utils';
+import {MetadataTabComponent} from './metadata-tab/metadata-tab.component';
+import {Router} from '@angular/router';
 
 
 @Component({
@@ -36,24 +38,33 @@ import { PackageCreationUtils } from './package-creation.utils';
     styleUrls: ['./package-creation.component.css']
 })
 export class PackageCreationComponent implements OnInit {
+
+    // adding initial referencing to designer mode
+
+
+    constructor(private packageCreationStore: PackageCreationStore,
+                private packageCreationUtils: PackageCreationUtils,
+                private router: Router) {
+    }
+
     counter = 0;
     modes: object[] = [
-        { name: 'Designer Mode', style: 'mode-icon icon-designer-mode' },
-        { name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode' }];
+        {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'},
+        {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}];
     private metaDataTab: MetaDataTabModel = new MetaDataTabModel();
     private folder: FolderNodeElement = new FolderNodeElement();
     private zipFile: JSZip = new JSZip();
     private filesData: any = [];
     private definition: Definition = new Definition();
 
-    // adding initial referencing to designer mode
+    @ViewChild(MetadataTabComponent, {static: false})
+    private metadataTabComponent: MetadataTabComponent;
 
-
-    constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) {
-    }
+    @ViewChild('nameit', {static: true})
+    private elementRef: ElementRef;
 
     ngOnInit() {
-
+        this.elementRef.nativeElement.focus();
     }
 
     saveBluePrint() {
@@ -76,9 +87,10 @@ export class PackageCreationComponent implements OnInit {
 
     saveBluePrintToDataBase() {
         this.create();
-        this.zipFile.generateAsync({ type: 'blob' })
+        this.zipFile.generateAsync({type: 'blob'})
             .then(blob => {
                 this.packageCreationStore.saveBluePrint(blob);
+                this.router.navigate(['/packages']);
             });
     }
 
@@ -88,23 +100,14 @@ export class PackageCreationComponent implements OnInit {
             this.zipFile.folder(key.split('/')[0]);
             this.zipFile.file(key, value);
         });
-        /*this.folder.TREE_DATA.forEach((path) => {
-            const name = path.name;
-            if (path.children) {
-                this.zipFile.folder(name);
-                path.children.forEach(children => {
-                    const name2 = children.name;
-                    if (FilesContent.getMapOfFilesNamesAndContent().has(name2)) {
-                        this.zipFile.file(name + '/' + name2, FilesContent.getMapOfFilesNamesAndContent().get(name2));
-                    } else {
-                        // this.zipFile.file(name2, FilesContent.getMapOfFilesNamesAndContent().get(name2));
-                    }
-
-                });
-
-            }
-        });*/
+
     }
 
+    test() {
+        this.metadataTabComponent.saveMetaDataToStore();
+    }
 
+    goBackToDashBorad() {
+        this.router.navigate(['/packages']);
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
index 6a9d9c4b3..b2268f060 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
@@ -19,16 +19,15 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 
-import { Store } from '../../../../common/core/stores/Store';
+import {Store} from '../../../../common/core/stores/Store';
 
-import { CBAPackage, DslDefinition } from './mapping-models/CBAPacakge.model';
-import { PackageCreationService } from './package-creation.service';
-import { FolderNodeElement, MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model';
-import * as JSZip from 'jszip';
-import { Observable } from 'rxjs';
-import { ResourceDictionary } from './mapping-models/ResourceDictionary.model';
+import {CBAPackage, DslDefinition} from './mapping-models/CBAPacakge.model';
+import {PackageCreationService} from './package-creation.service';
+import {MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
+import {Observable} from 'rxjs';
+import {ResourceDictionary} from './mapping-models/ResourceDictionary.model';
 
 
 @Injectable({
@@ -36,8 +35,6 @@ import { ResourceDictionary } from './mapping-models/ResourceDictionary.model';
 })
 export class PackageCreationStore extends Store<CBAPackage> {
 
-    private folder: FolderNodeElement = new FolderNodeElement();
-    private zipFile: JSZip = new JSZip();
 
     constructor(private packageCreationService: PackageCreationService) {
         super(new CBAPackage());
@@ -51,6 +48,13 @@ export class PackageCreationStore extends Store<CBAPackage> {
         });
     }
 
+    setCustomKeys(mapOfCustomKey: Map<string, string>) {
+        this.setState({
+            ...this.state,
+            metaData: this.state.metaData.setCustomKey(mapOfCustomKey)
+        });
+    }
+
     changeDslDefinition(dslDefinition: DslDefinition) {
 
         this.setState({