adding saving simple function at designer

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

17 files changed, 135 insertions, 83 deletions

diff --git a/cds-ui/designer-client/src/app/common/core/services/api.service.ts b/cds-ui/designer-client/src/app/common/core/services/api.service.ts
index de8aab886..8e27befb0 100644
--- a/cds-ui/designer-client/src/app/common/core/services/api.service.ts
+++ b/cds-ui/designer-client/src/app/common/core/services/api.service.ts
@@ -48,4 +48,8 @@ export class ApiService {
 
         return this.httpClient.post(url, body, options);
     }
+
+    getCustomized(url: string, params?: any): Observable<any> {
+        return this.httpClient.get(url, params);
+    }
 }
diff --git a/cds-ui/designer-client/src/app/common/core/stores/Store.ts b/cds-ui/designer-client/src/app/common/core/stores/Store.ts
index 0be804270..c6995787d 100644
--- a/cds-ui/designer-client/src/app/common/core/stores/Store.ts
+++ b/cds-ui/designer-client/src/app/common/core/stores/Store.ts
@@ -17,6 +17,7 @@ export class Store<T> {
     protected setState(nextState: T): void {
         console.log('setting state', this.subject);
         this.subject.next(nextState);
+        console.log('current state', this.subject);
     }
 
     public unsubscribe() {
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 2b0521bb2..228953eb9 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
@@ -17,6 +17,7 @@ import {ToastrService} from 'ngx-toastr';
 import {NgxFileDropEntry} from 'ngx-file-drop';
 import {PackageCreationService} from '../package-creation/package-creation.service';
 import {ComponentCanDeactivate} from '../../../../common/core/canDactivate/ComponentCanDeactivate';
+import {PackageCreationExtractionService} from '../package-creation/package-creation-extraction.service';
 
 @Component({
     selector: 'app-configuration-dashboard',
@@ -54,13 +55,17 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl
         private packageCreationUtils: PackageCreationUtils,
         private router: Router,
         private designerStore: DesignerStore,
-        private toastService: ToastrService
+        private toastService: ToastrService,
+        private packageCreationExtractionService: PackageCreationExtractionService
     ) {
         super();
+
         this.packageCreationStore.state$.subscribe(
             cbaPackage => {
                 this.cbaPackage = cbaPackage;
             });
+
+
     }
 
     ngOnInit() {
@@ -83,9 +88,12 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl
 
     }
 
-    private refreshCurrentPackage() {
+
+    private refreshCurrentPackage(id?) {
         this.id = this.route.snapshot.paramMap.get('id');
-        this.configurationDashboardService.getPagedPackages(this.id).subscribe(
+        console.log(this.id);
+        id = id ? id : this.id;
+        this.configurationDashboardService.getPagedPackages(id).subscribe(
             (bluePrintDetailModels) => {
                 if (bluePrintDetailModels) {
                     this.viewedPackage = bluePrintDetailModels[0];
@@ -97,10 +105,10 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl
 
     private downloadCBAPackage(bluePrintDetailModels: BluePrintDetailModel) {
         this.configurationDashboardService.downloadResource(
-            bluePrintDetailModels[0].artifactName + '/' + bluePrintDetailModels[0].artifactVersion).subscribe(response => {
+            this.viewedPackage.artifactName + '/' + this.viewedPackage.artifactVersion).subscribe(response => {
             const blob = new Blob([response], {type: 'application/octet-stream'});
             this.currentBlob = blob;
-            this.extractBlobToStore(blob, bluePrintDetailModels[0]);
+            this.extractBlobToStore(blob, this.viewedPackage);
         });
     }
 
@@ -218,8 +226,8 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl
                             const id = bluePrintDetailModels.toString().split('id')[1].split(':')[1].split('"')[1];
                             this.toastService.info('package updated successfully ');
                             this.isSaveEnabled = false;
-                            this.id = id;
                             this.router.navigate(['/packages/package/' + id]);
+                            this.refreshCurrentPackage(id);
                         }
                     }, error => {
                         this.toastService.error('error happened when editing ' + error.message);
@@ -266,11 +274,7 @@ export class ConfigurationDashboardComponent extends ComponentCanDeactivate impl
     }
 
     goToDesignerMode(id) {
-        //  this.designerService.setActionName(this.customActionName);
-        this.packageCreationStore.state$.subscribe(cba => {
-            console.log(cba);
-            sessionStorage.setItem('cba', this.packageCreationUtils.transformToJson(cba));
-        });
+
         this.router.navigate(['/packages/designer', id, {actionName: this.customActionName}]);
     }
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
index 4c0835741..88923229b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -10,7 +10,7 @@
                     </li>
                     <i class="fa fa-angle-right ml-2 mr-2"></i>
                     <li class="breadcrumb-item">
-                        <a href="/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
+                        <a href="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
                         <button type="button" class="btn package-info-btn" data-toggle="modal"
                             data-target="#exampleModalLong">
                             <i class="icon-info" aria-hidden="true"></i>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
index e4bcdfe7a..0509b1d0e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -47,6 +47,7 @@ import {PackageCreationStore} from '../package-creation/package-creation.store';
 import {PackageCreationService} from '../package-creation/package-creation.service';
 import {PackageCreationUtils} from '../package-creation/package-creation.utils';
 import * as JSZip from 'jszip';
+import {PackageCreationExtractionService} from '../package-creation/package-creation-extraction.service';
 import {CBAPackage} from '../package-creation/mapping-models/CBAPacakge.model';
 
 @Component({
@@ -75,6 +76,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
     filesData: any = [];
     folder: FolderNodeElement = new FolderNodeElement();
     zipFile: JSZip = new JSZip();
+    private cbaPackage: CBAPackage;
 
     constructor(
         private designerStore: DesignerStore,
@@ -85,7 +87,8 @@ export class DesignerComponent implements OnInit, OnDestroy {
         private graphGenerator: GraphGenerator,
         private route: ActivatedRoute,
         private designerService: DesignerService,
-        private packageCreationService: PackageCreationService) {
+        private packageCreationService: PackageCreationService,
+        private packageCreationExtractionService: PackageCreationExtractionService) {
         this.controllerSideBar = true;
         this.attributesSideBar = false;
         this.showAction = false;
@@ -137,8 +140,19 @@ export class DesignerComponent implements OnInit, OnDestroy {
             (bluePrintDetailModels) => {
                 if (bluePrintDetailModels) {
                     this.viewedPackage = bluePrintDetailModels[0];
+                    this.packageCreationService.downloadPackage(this.viewedPackage.artifactName + '/'
+                        + this.viewedPackage.artifactVersion)
+                        .subscribe(response => {
+                            const blob = new Blob([response], {type: 'application/octet-stream'});
+                            this.packageCreationExtractionService.extractBlobToStore(blob);
+                        });
                 }
             });
+        this.packageCreationStore.state$.subscribe(cba => {
+            this.cbaPackage = cba;
+            console.log(cba.templateTopology.content);
+            this.designerStore.saveSourceContent(cba.templateTopology.content);
+        });
         /**
          * the code to retrieve from server is commented
          */
@@ -386,17 +400,16 @@ export class DesignerComponent implements OnInit, OnDestroy {
     }
 
     saveBluePrint() {
-        let cbaPackage: CBAPackage = JSON.parse(sessionStorage.getItem('cba'));
-        console.log(cbaPackage);
+
         FilesContent.clear();
         let packageCreationModes: PackageCreationModes;
-        cbaPackage = PackageCreationModes.mapModeType(cbaPackage);
-        cbaPackage.metaData = PackageCreationModes.setEntryPoint(cbaPackage.metaData);
-        packageCreationModes = PackageCreationBuilder.getCreationMode(cbaPackage);
+        this.cbaPackage = PackageCreationModes.mapModeType(this.cbaPackage);
+        this.cbaPackage.metaData = PackageCreationModes.setEntryPoint(this.cbaPackage.metaData);
+        packageCreationModes = PackageCreationBuilder.getCreationMode(this.cbaPackage);
         this.designerStore.state$.subscribe(state => {
-            cbaPackage.templateTopology.content = this.packageCreationUtils.transformToJson(state.template);
+            this.cbaPackage.templateTopology.content = this.packageCreationUtils.transformToJson(state.template);
         });
-        packageCreationModes.execute(cbaPackage, this.packageCreationUtils);
+        packageCreationModes.execute(this.cbaPackage, this.packageCreationUtils);
         this.filesData.push(this.folder.TREE_DATA);
         this.saveBluePrintToDataBase();
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
index ba8b2f0f1..0d20f9662 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts
@@ -23,8 +23,8 @@ import {Injectable} from '@angular/core';
 import {Store} from '../../../../common/core/stores/Store';
 import {DesignerService} from './designer.service';
 import {DesignerDashboardState} from './model/designer.dashboard.state';
-import { DeclarativeWorkflow } from './model/designer.workflow';
-import { NodeTemplate } from './model/desinger.nodeTemplate.model';
+import {DeclarativeWorkflow} from './model/designer.workflow';
+import {NodeTemplate} from './model/desinger.nodeTemplate.model';
 
 
 @Injectable({
@@ -54,7 +54,7 @@ export class DesignerStore extends Store<DesignerDashboardState> {
         });
     }
 
-    addStepToDeclarativeWorkFlow(workflowName: string, stepName: string,  stepType: string) {
+    addStepToDeclarativeWorkFlow(workflowName: string, stepName: string, stepType: string) {
         this.setState({
             ...this.state,
             template: {
@@ -76,12 +76,15 @@ export class DesignerStore extends Store<DesignerDashboardState> {
     }
 
     saveSourceContent(code: string) {
-        const topologyTemplate = JSON.parse(code);
-        this.setState({
-            ...this.state,
-            sourceContent: code,
-            template: topologyTemplate
-        });
+        console.log(code);
+        if (code) {
+            const topologyTemplate = JSON.parse(code);
+            this.setState({
+                ...this.state,
+                sourceContent: code,
+                template: topologyTemplate
+            });
+        }
     }
 
 
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 b8938043c..e9dd667d2 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
@@ -87,6 +87,7 @@ export class DesignerCreationMode extends PackageCreationModes {
         if (cbaPackage.definitions.dslDefinition.content) {
             vlbDefinition.dsl_definitions = JSON.parse(cbaPackage.definitions.dslDefinition.content);
         }
+
         if (cbaPackage.templateTopology.content) {
             vlbDefinition.topology_template = JSON.parse(cbaPackage.templateTopology.content);
         }
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 8f2b554d9..641caf2ad 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
@@ -74,7 +74,7 @@
                 <div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex"
                     data-parent="#accordion">
                     <div class="card-body">
-                        <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'json'"
+                        <ace-editor [(text)]="file.value" readOnly="true" (textChange)="textChanges($event,file.key)" [mode]="'json'"
                             [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'"
                             #editor style="height:300px;">
                         </ace-editor>
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 f82310872..7a029fb3f 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,8 +1,11 @@
-import { Any, JsonObject, JsonProperty } from 'json2typescript';
+import {JsonObject, JsonProperty} from 'json2typescript';
 
 @JsonObject('topology_template')
 export class TemplateTopology {
-    public content: string;
+    // tslint:disable-next-line:variable-name
+    public node_templates: object;
+    public workflows: object;
+    public content: string ;
 }
 
 @JsonObject
@@ -22,26 +25,27 @@ export class VlbDefinition {
 export class DslContent {
 
 }
+
 // Refactor varaibles name and use JsonConverteri
 @JsonObject('metadata')
 export class Metadata {
     @JsonProperty('template_author')
-    // tslint:disable-next-line:variable-name
+        // tslint:disable-next-line:variable-name
     template_author: string;
     'author-email': string;
     'user-groups': string;
     @JsonProperty('template_name')
-    // tslint:disable-next-line:variable-name
+        // tslint:disable-next-line:variable-name
     template_name: string;
     @JsonProperty('template_version')
-    // tslint:disable-next-line:variable-name
+        // tslint:disable-next-line:variable-name
     template_version: string;
     @JsonProperty('template_tag')
-    // tslint:disable-next-line:variable-name
+        // tslint:disable-next-line:variable-name
     template_tags: string;
 
     @JsonProperty('dictionary_group')
-    // tslint:disable-next-line:variable-name
+        // tslint:disable-next-line:variable-name
     dictionary_group: string;
     @JsonProperty('template_tags')
     templateTags: string;
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 20cee7340..a46d2a3ec 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
@@ -55,9 +55,9 @@ export class MetadataTabComponent implements OnInit {
 
                 this.customKeysMap = element.metaData.mapOfCustomKey;
                 this.metaDataTab.mapOfCustomKey = this.customKeysMap;
-                if (this.isNameEditable) {
-                    this.validatePackageNameAndVersion();
-                }
+                /* if (this.isNameEditable) {
+                     this.validatePackageNameAndVersion();
+                 }*/
                 // this.tags = element.metaData.templateTags;
 
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts
index 31a5c3c35..b1dcded1c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts
@@ -13,18 +13,23 @@ import {DesignerStore} from '../designer/designer.store';
 })
 export class PackageCreationExtractionService {
 
-    zipFile: JSZip = new JSZip();
-    entryDefinitionKeys: string[] = ['template_tags', 'user-groups',
+    private zipFile: JSZip = new JSZip();
+    private entryDefinitionKeys: string[] = ['template_tags', 'user-groups',
         'author-email', 'template_version', 'template_name', 'template_author', 'template_description'];
+
+    private toscaMetaDataKeys: string[] = ['TOSCA-Meta-File-Version', 'CSAR-Version',
+        'Created-By', 'Entry-Definitions', 'Template-Name', 'Template-Version', 'Template-Type', 'Template-Tags'];
     @ViewChild(MetadataTabComponent, {static: false})
-    metadataTabComponent: MetadataTabComponent;
+    private metadataTabComponent: MetadataTabComponent;
 
     constructor(private packageCreationStore: PackageCreationStore,
                 private packageCreationUtils: PackageCreationUtils,
                 private designerStore: DesignerStore) {
+
     }
 
     public extractBlobToStore(blob) {
+
         let packageName = null;
         this.zipFile.loadAsync(blob).then((zip) => {
             Object.keys(zip.files).filter(fileName => fileName.includes('TOSCA-Metadata/'))
@@ -32,6 +37,7 @@ export class PackageCreationExtractionService {
                     zip.files[filename].async('string').then((fileData) => {
                         if (fileData) {
                             if (filename.includes('TOSCA-Metadata/')) {
+
                                 const metaDataTabInfo: MetaDataTabModel = this.getMetaDataTabInfo(fileData);
                                 packageName = metaDataTabInfo.name;
                                 this.setMetaData(metaDataTabInfo);
@@ -65,11 +71,11 @@ export class PackageCreationExtractionService {
         });
     }
 
-    setScripts(filename: string, fileData: any) {
+    private setScripts(filename: string, fileData: any) {
         this.packageCreationStore.addScripts(filename, fileData);
     }
 
-    setImports(filename: string, fileData: any, packageName: string) {
+    private setImports(filename: string, fileData: any, packageName: string) {
         console.log(filename);
         if (filename.includes(packageName)) {
             let definition = new VlbDefinition();
@@ -86,37 +92,48 @@ export class PackageCreationExtractionService {
             this.packageCreationStore.changeDslDefinition(dslDefinition);
             this.packageCreationStore.setCustomKeys(mapOfCustomKeys);
             this.setPackageDescription(definition.metadata.template_description);
-            if (definition.topology_template && definition.topology_template.content) {
-                this.designerStore.saveSourceContent(definition.topology_template.content);
-            }
+            console.log(definition);
+            console.log(definition.topology_template);
+            const content = {};
+            const workflow = 'workflows';
+            content[workflow] = definition.topology_template.workflows;
+            const nodeTemplates = 'node_templates';
+            content[nodeTemplates] = definition.topology_template.node_templates;
+            this.designerStore.saveSourceContent(JSON.stringify(content));
 
         }
         this.packageCreationStore.addDefinition(filename, fileData);
 
     }
 
-    setTemplates(filename: string, fileData: any) {
+    private setTemplates(filename: string, fileData: any) {
         this.packageCreationStore.addTemplate(filename, fileData);
     }
 
-    setMapping(fileName: string, fileData: string) {
+    private setMapping(fileName: string, fileData: string) {
         this.packageCreationStore.addMapping(fileName, fileData);
     }
 
-    setMetaData(metaDataObject: MetaDataTabModel) {
+    private setMetaData(metaDataObject: MetaDataTabModel) {
         this.packageCreationStore.changeMetaData(metaDataObject);
     }
 
-    getMetaDataTabInfo(fileData: string) {
+    private 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];
-        console.log(arrayOfLines[7]);
-        if (arrayOfLines[7].split(':')) {
-            metaDataTabModel.templateTags = new Set<string>(arrayOfLines[7].split(':')[1].split(','));
+        const map = new Map<string, string>();
+        for (const currentLine of arrayOfLines) {
+            const currentKey = currentLine.split(':')[0];
+            const currentValue = currentLine.split(':')[1];
+            map.set(currentKey, currentValue);
+        }
+        metaDataTabModel.entryFileName = map.get(this.toscaMetaDataKeys[3]);
+        metaDataTabModel.name = map.get(this.toscaMetaDataKeys[4]);
+        metaDataTabModel.version = map.get(this.toscaMetaDataKeys[5]).trim();
+        metaDataTabModel.mode = map.get(this.toscaMetaDataKeys[6]);
+        if (map.get(this.toscaMetaDataKeys[7])) {
+            metaDataTabModel.templateTags = new Set<string>(map.get(this.toscaMetaDataKeys[7]).split(','));
         }
         return metaDataTabModel;
     }
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 f74015956..25f5c5996 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
@@ -24,7 +24,7 @@ import {FilesContent, FolderNodeElement, MetaDataTabModel} from './mapping-model
 
 import * as JSZip from 'jszip';
 import {PackageCreationStore} from './package-creation.store';
-import {Definition} from './mapping-models/CBAPacakge.model';
+import {CBAPackage, Definition} from './mapping-models/CBAPacakge.model';
 import {PackageCreationModes} from './creationModes/PackageCreationModes';
 import {PackageCreationBuilder} from './creationModes/PackageCreationBuilder';
 import {PackageCreationUtils} from './package-creation.utils';
@@ -78,11 +78,13 @@ export class PackageCreationComponent extends ComponentCanDeactivate implements
     elementRef: ElementRef;
     versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$';
     metadataClasses = 'nav-item nav-link active complete';
+    private cbaPackage: CBAPackage;
 
     ngOnInit() {
         this.elementRef.nativeElement.focus();
         const regexp = RegExp(this.versionPattern);
         this.packageCreationStore.state$.subscribe(cbaPackage => {
+            this.cbaPackage = cbaPackage;
             if (cbaPackage && cbaPackage.metaData && cbaPackage.metaData.description
                 && cbaPackage.metaData.name && cbaPackage.metaData.version &&
                 regexp.test(cbaPackage.metaData.version)) {
@@ -104,19 +106,17 @@ export class PackageCreationComponent extends ComponentCanDeactivate implements
     }
 
     saveBluePrint() {
-        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);
-                cbaPackage.templateTopology.content = this.designerStore.state.sourceContent;
-                packageCreationModes.execute(cbaPackage, this.packageCreationUtils);
-                this.filesData.push(this.folder.TREE_DATA);
-                this.saveBluePrintToDataBase();
-            });
+        console.log(this.cbaPackage);
+        FilesContent.clear();
+        let packageCreationModes: PackageCreationModes;
+        this.cbaPackage = PackageCreationModes.mapModeType(this.cbaPackage);
+        this.cbaPackage.metaData = PackageCreationModes.setEntryPoint(this.cbaPackage.metaData);
+        packageCreationModes = PackageCreationBuilder.getCreationMode(this.cbaPackage);
+
+        // this.cbaPackage.templateTopology.content = this.designerStore.state.sourceContent;
+        packageCreationModes.execute(this.cbaPackage, this.packageCreationUtils);
+        this.filesData.push(this.folder.TREE_DATA);
+        this.saveBluePrintToDataBase();
 
 
     }
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 bd0944146..94ab9ed02 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
@@ -42,7 +42,7 @@ export class PackageCreationService {
     }
 
     private enrichBlueprint(body: any | null, options?: any): Observable<any> {
-        return this.api.post(BlueprintURLs.enrich, body, { responseType: 'blob' });
+        return this.api.post(BlueprintURLs.enrich, body, {responseType: 'blob'});
     }
 
     private deployBluePrint(body: any | null, options?: any): Observable<any> {
@@ -83,7 +83,9 @@ export class PackageCreationService {
         return this.api.post(ResourceDictionaryURLs.searchResourceDictionaryByNames, variables);
     }
 
-
+    downloadPackage(id) {
+        return this.api.getCustomized(BlueprintURLs.download + id, {responseType: 'blob'});
+    }
 
 
 }
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 bca6903f6..77867e55e 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
@@ -110,7 +110,9 @@ export class PackageCreationStore extends Store<CBAPackage> {
     }
 
     clear() {
+        console.log('clearing the store');
         this.setState(new CBAPackage());
+        console.log('it should be empty');
     }
 
     setEntryDefinition(data: string) {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
index c3704365c..2653d739c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
@@ -24,6 +24,7 @@ export class ScriptsTabComponent implements OnInit {
 
 
     ngOnInit() {
+
         this.packageCreationStore.state$.subscribe(cbaPackage => {
             if (cbaPackage.scripts && cbaPackage.scripts.files && cbaPackage.scripts.files.size > 0) {
                 this.scriptsFiles = cbaPackage.scripts.files;
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts
index 0f582d7f6..50799a531 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts
@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
 import {PackageCreationExtractionService} from '../../package-creation/package-creation-extraction.service';
 import {Router} from '@angular/router';
+import {PackageCreationStore} from '../../package-creation/package-creation.store';
 
 @Component({
     selector: 'app-import-package',
@@ -16,10 +17,13 @@ export class ImportPackageComponent implements OnInit {
     public files: NgxFileDropEntry[] = [];
 
     constructor(private packageCreationExtractionService: PackageCreationExtractionService,
+                private packageCreationStore: PackageCreationStore,
                 private router: Router) {
+        this.packageCreationStore.clear();
     }
 
     ngOnInit() {
+        this.packageCreationStore.clear();
     }
 
     removeInitFile(index) {
@@ -70,10 +74,10 @@ export class ImportPackageComponent implements OnInit {
     }
 
     saveFileToStore() {
-        for (const droppedFile of this.uploadedFiles) {
-            const file = this.getFile(droppedFile);
-            this.packageCreationExtractionService.extractBlobToStore(file);
-        }
+        console.log(this.uploadedFiles.length);
+        const file = this.getFile(this.uploadedFiles[this.uploadedFiles.length - 1]);
+        this.packageCreationStore.clear();
+        this.packageCreationExtractionService.extractBlobToStore(file);
     }
 
     openFilesInCreationPackage() {
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 3cecd33fd..4d0e108cf 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
@@ -39,10 +39,6 @@ export class PackageListComponent implements OnInit {
 
     ngOnInit() {
         this.packagesStore.getAll();
-
-
-
-
     }
 
     view(id) {