adding import package basic functionalities

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

15 files changed, 378 insertions, 46 deletions

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 449312f99..2b0521bb2 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
@@ -267,6 +267,10 @@ 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/package-creation/creationModes/DesignerCreationMode.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/creationModes/DesignerCreationMode.ts
index f739ceb2e..b8938043c 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
@@ -37,9 +37,11 @@ export class DesignerCreationMode extends PackageCreationModes {
     }
 
     private createDefinitionsFolder(cbaPackage: CBAPackage, packageCreationUtils: PackageCreationUtils) {
-        cbaPackage.definitions.imports.forEach((valueOfFile, key) => {
-            FilesContent.putData(key, valueOfFile);
-        });
+        if (cbaPackage.definitions.imports && cbaPackage.definitions.imports.size > 0) {
+            cbaPackage.definitions.imports.forEach((valueOfFile, key) => {
+                FilesContent.putData(key, valueOfFile);
+            });
+        }
 
         const filenameEntry = 'Definitions/' + cbaPackage.metaData.name + '.json';
         const vlbDefinition: VlbDefinition = new VlbDefinition();
@@ -51,28 +53,34 @@ export class DesignerCreationMode extends PackageCreationModes {
         metadata['author-email'] = 'shaaban.eltanany.ext@orange.com';
         metadata['user-groups'] = 'test';
         metadata.template_description = cbaPackage.metaData.description;
-        cbaPackage.metaData.mapOfCustomKey.forEach((customKeyValue, key) => {
-            metadata[key] = customKeyValue;
-        });
+        if (cbaPackage.metaData.mapOfCustomKey && cbaPackage.metaData.mapOfCustomKey.size > 0) {
+            cbaPackage.metaData.mapOfCustomKey.forEach((customKeyValue, key) => {
+                metadata[key] = customKeyValue;
+            });
+        }
         // create Tags
         let fullTags = '';
         let setCount = 0;
-        cbaPackage.metaData.templateTags.forEach(val => {
-            setCount++;
-            if (setCount === cbaPackage.metaData.templateTags.size) {
-                fullTags += val;
-            } else {
-                fullTags += val + ', ';
-            }
-        });
+        if (cbaPackage.metaData.templateTags && cbaPackage.metaData.templateTags.size > 0) {
+            cbaPackage.metaData.templateTags.forEach(val => {
+                setCount++;
+                if (setCount === cbaPackage.metaData.templateTags.size) {
+                    fullTags += val;
+                } else {
+                    fullTags += val + ', ';
+                }
+            });
+        }
         metadata.template_tags = fullTags;
         vlbDefinition.metadata = metadata;
         const files: Import[] = [];
-        cbaPackage.definitions.imports.forEach((valueOfFile, key) => {
-            if (!key.includes(cbaPackage.metaData.name)) {
-                files.push({file: key});
-            }
-        });
+        if (cbaPackage.definitions.imports && cbaPackage.definitions.imports.size > 0) {
+            cbaPackage.definitions.imports.forEach((valueOfFile, key) => {
+                if (!key.includes(cbaPackage.metaData.name)) {
+                    files.push({file: key});
+                }
+            });
+        }
         console.log(vlbDefinition);
         vlbDefinition.imports = files;
         console.log(cbaPackage.definitions.dslDefinition.content);
@@ -83,6 +91,7 @@ export class DesignerCreationMode extends PackageCreationModes {
             vlbDefinition.topology_template = JSON.parse(cbaPackage.templateTopology.content);
         }
         console.log(vlbDefinition);
+
         const value = packageCreationUtils.transformToJson(vlbDefinition);
         FilesContent.putData(filenameEntry, value);
         console.log('hello there');
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 6b80358fd..8b82cc0eb 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
@@ -1,7 +1,7 @@
-import { CBAPackage } from '../mapping-models/CBAPacakge.model';
-import { ModeType } from '../mapping-models/ModeType';
-import { FilesContent, MetaDataTabModel } from '../mapping-models/metadata/MetaDataTab.model';
-import { PackageCreationUtils } from '../package-creation.utils';
+import {CBAPackage} from '../mapping-models/CBAPacakge.model';
+import {ModeType} from '../mapping-models/ModeType';
+import {FilesContent, MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model';
+import {PackageCreationUtils} from '../package-creation.utils';
 
 
 export abstract class PackageCreationModes {
@@ -21,25 +21,28 @@ export abstract class PackageCreationModes {
 
     public static mapModeType(cbaPackage: CBAPackage) {
         console.log(cbaPackage.metaData.mode);
-        if (cbaPackage.metaData.mode.includes('Scripting')) {
-            cbaPackage.metaData.mode = ModeType.Scripting;
-        } else if (cbaPackage.metaData.mode.includes('Designer') || cbaPackage.metaData.mode.includes('DEFAULT') ) {
-            cbaPackage.metaData.mode = ModeType.Designer;
-        } else {
-            cbaPackage.metaData.mode = ModeType.Generic;
-        }
+        /* if (cbaPackage.metaData.mode.includes('Scripting')) {
+             cbaPackage.metaData.mode = ModeType.Scripting;
+         } else if (cbaPackage.metaData.mode.includes('Designer') || cbaPackage.metaData.mode.includes('DEFAULT') ) {
+             cbaPackage.metaData.mode = ModeType.Designer;
+         } else {
+             cbaPackage.metaData.mode = ModeType.Generic;
+         }*/
+        cbaPackage.metaData.mode = ModeType.Designer;
         return cbaPackage;
     }
 
     getValueOfMetaData(metaDataTab: MetaDataTabModel): string {
         let tags = '';
         let count = 0;
-        for (const tag of metaDataTab.templateTags) {
-            count++;
-            if (count === metaDataTab.templateTags.size) {
-                tags += tag;
-            } else {
-                tags += tag + ', ';
+        if (metaDataTab.templateTags && metaDataTab.templateTags.size > 0) {
+            for (const tag of metaDataTab.templateTags) {
+                count++;
+                if (count === metaDataTab.templateTags.size) {
+                    tags += tag;
+                } else {
+                    tags += tag + ', ';
+                }
             }
         }
         return 'TOSCA-Meta-File-Version: 1.0.0\n' +
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 0e809674a..20cee7340 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
@@ -48,7 +48,6 @@ export class MetadataTabComponent implements OnInit {
                 this.tags = element.metaData.templateTags;
                 this.tags.delete('');
                 this.metaDataTab.templateTags = this.tags;
-                console.log(element);
                 if (element.metaData.mode && element.metaData.mode.includes('DEFAULT')) {
                     this.metaDataTab.mode = 'Designer Mode';
                     this.modeType = this.metaDataTab.mode;
@@ -56,8 +55,12 @@ export class MetadataTabComponent implements OnInit {
 
                 this.customKeysMap = element.metaData.mapOfCustomKey;
                 this.metaDataTab.mapOfCustomKey = this.customKeysMap;
+                if (this.isNameEditable) {
+                    this.validatePackageNameAndVersion();
+                }
                 // this.tags = element.metaData.templateTags;
 
+
             }
         });
     }
@@ -99,6 +102,8 @@ export class MetadataTabComponent implements OnInit {
     }
 
     validatePackageNameAndVersion() {
+        console.log('in validate');
+        console.log('in this.metaDataTab.name' + this.metaDataTab.name);
         if (this.metaDataTab.name && this.metaDataTab.version) {
             this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => {
                 if (element) {
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
new file mode 100644
index 000000000..31a5c3c35
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation-extraction.service.ts
@@ -0,0 +1,130 @@
+import {Injectable, ViewChild} from '@angular/core';
+import {MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
+import {VlbDefinition} from './mapping-models/definitions/VlbDefinition';
+import {DslDefinition} from './mapping-models/CBAPacakge.model';
+import {PackageCreationStore} from './package-creation.store';
+import * as JSZip from 'jszip';
+import {PackageCreationUtils} from './package-creation.utils';
+import {MetadataTabComponent} from './metadata-tab/metadata-tab.component';
+import {DesignerStore} from '../designer/designer.store';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PackageCreationExtractionService {
+
+    zipFile: JSZip = new JSZip();
+    entryDefinitionKeys: string[] = ['template_tags', 'user-groups',
+        'author-email', 'template_version', 'template_name', 'template_author', 'template_description'];
+    @ViewChild(MetadataTabComponent, {static: false})
+    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/'))
+                .forEach((filename) => {
+                    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);
+                                console.log('found file ' + packageName);
+                            }
+                        }
+                    });
+                });
+        });
+
+        this.zipFile.loadAsync(blob).then((zip) => {
+            Object.keys(zip.files).forEach((filename) => {
+                zip.files[filename].async('string').then((fileData) => {
+                    console.log(filename);
+                    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, packageName);
+                        }
+                    }
+                });
+            });
+        });
+    }
+
+    setScripts(filename: string, fileData: any) {
+        this.packageCreationStore.addScripts(filename, fileData);
+    }
+
+    setImports(filename: string, fileData: any, packageName: string) {
+        console.log(filename);
+        if (filename.includes(packageName)) {
+            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);
+            this.setPackageDescription(definition.metadata.template_description);
+            if (definition.topology_template && definition.topology_template.content) {
+                this.designerStore.saveSourceContent(definition.topology_template.content);
+            }
+
+        }
+        this.packageCreationStore.addDefinition(filename, fileData);
+
+    }
+
+    setTemplates(filename: string, fileData: any) {
+        this.packageCreationStore.addTemplate(filename, fileData);
+    }
+
+    setMapping(fileName: string, fileData: string) {
+        this.packageCreationStore.addMapping(fileName, fileData);
+    }
+
+    setMetaData(metaDataObject: MetaDataTabModel) {
+        this.packageCreationStore.changeMetaData(metaDataObject);
+    }
+
+    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(','));
+        }
+        return metaDataTabModel;
+    }
+
+    private setPackageDescription(templateDescription: string) {
+        const metaData = this.packageCreationStore.getMetaData();
+        metaData.description = templateDescription;
+        this.setMetaData(metaData);
+
+    }
+}
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 a09951cd2..03bbc72f4 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
@@ -83,8 +83,9 @@
             <div class="nav nav-tabs " id="nav-tab" role="tablist">
               <a (click)="openTourGuide('metadataTab')" tourAnchor="metadataTab" class="nav-item nav-link active"
                 id="nav-metadata-tab" data-toggle="tab" href="#nav-metadata" role="tab" aria-controls="nav-metadata"
-                aria-selected="false" autofocus #nameit (focusout)="saveMetaData()"
-                [classList]="metadataClasses">METADATA</a>
+                aria-selected="false" autofocus #nameit  (focusout)="saveMetaData()"  [classList]="metadataClasses">METADATA</a>
+
+
               <a (click)="openTourGuide('tm-templateTab')" tourAnchor="tm-templateTab" 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 &
@@ -134,4 +135,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
index 6b29ec4fd..f74015956 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
@@ -34,6 +34,7 @@ import {ToastrService} from 'ngx-toastr';
 import {TourService} from 'ngx-tour-md-menu';
 import {PackageCreationService} from './package-creation.service';
 import {ComponentCanDeactivate} from '../../../../common/core/canDactivate/ComponentCanDeactivate';
+import {DesignerStore} from '../designer/designer.store';
 
 
 @Component({
@@ -53,7 +54,8 @@ export class PackageCreationComponent extends ComponentCanDeactivate implements
         private packageCreationUtils: PackageCreationUtils,
         private router: Router,
         private tourService: TourService,
-        private toastService: ToastrService) {
+        private toastService: ToastrService,
+        private designerStore: DesignerStore) {
 
         super();
     }
@@ -110,6 +112,7 @@ export class PackageCreationComponent extends ComponentCanDeactivate implements
                 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();
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 bd8360a14..bd0944146 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
@@ -84,4 +84,6 @@ export class PackageCreationService {
     }
 
 
+
+
 }
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 7b1c6bfb1..bca6903f6 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
@@ -24,11 +24,7 @@ import {Injectable} from '@angular/core';
 import {Store} from '../../../../common/core/stores/Store';
 
 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';
-import {BluePrintDetailModel} from '../model/BluePrint.detail.model';
 import {TemplateTopology} from './mapping-models/definitions/VlbDefinition';
 
 
@@ -127,4 +123,8 @@ export class PackageCreationStore extends Store<CBAPackage> {
             templateTopology
         });
     }
+
+    getMetaData() {
+        return this.state.metaData;
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html
new file mode 100644
index 000000000..274435cd4
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.html
@@ -0,0 +1,54 @@
+<div class="modal fade" id="importPackageModal" tabindex="-1" role="dialog" aria-labelledby="importPackageModal"
+     aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="importModalLabel">Import File</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <!-- <span aria-hidden="true">&times;</span> -->
+                    <img src="assets/img/icon-close.svg"/>
+                </button>
+            </div>
+            <div class="modal-body">
+                <ngx-file-drop accept=".zip" 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: zip</div>
+                    </ng-template>
+                </ngx-file-drop>
+                <div class="upload-table">
+                    <table class="table">
+                        <thead>
+                        <tr *ngFor="let item of uploadedFiles; let i=index">
+                            <th width="40"><img src="assets/img/icon-file-code.svg"/></th>
+                            <th>{{ item.name }}</th>
+                            <th (click)="removeInitFile(i)" width="40" class="text-right"><img
+                                    src="assets/img/icon-remove-file.svg"/></th>
+                        </tr>
+                        </thead>
+                    </table>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"
+                        (click)="resetTheUploadedFiles()">Cancel
+                </button>
+                <button type="button" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0"
+                        data-dismiss="modal" (click)="openFilesInCreationPackage();saveFileToStore()">
+                    Import
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.spec.ts
new file mode 100644
index 000000000..c594b34aa
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImportPackageComponent } from './import-package.component';
+
+describe('ImportPackageComponent', () => {
+  let component: ImportPackageComponent;
+  let fixture: ComponentFixture<ImportPackageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ImportPackageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImportPackageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 000000000..0f582d7f6
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/import-package/import-package.component.ts
@@ -0,0 +1,90 @@
+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';
+
+@Component({
+    selector: 'app-import-package',
+    templateUrl: './import-package.component.html',
+    styleUrls: ['./import-package.component.css']
+})
+export class ImportPackageComponent implements OnInit {
+
+    public uploadedFiles: FileSystemFileEntry[] = [];
+    private fileNames: Set<string> = new Set();
+    fileToDelete: any = {};
+    public files: NgxFileDropEntry[] = [];
+
+    constructor(private packageCreationExtractionService: PackageCreationExtractionService,
+                private router: Router) {
+    }
+
+    ngOnInit() {
+    }
+
+    removeInitFile(index) {
+        this.uploadedFiles.splice(index, 1);
+    }
+
+    public dropped(files: NgxFileDropEntry[]) {
+        this.files = files;
+        for (const droppedFile of files) {
+            // Is it a file? & Not added before
+            if (droppedFile.fileEntry.isFile) {
+                const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
+                this.uploadedFiles.push(fileEntry);
+                console.log(fileEntry.name);
+                this.fileNames.add(fileEntry.name);
+
+            }
+        }
+    }
+
+    initDelete(file) {
+        console.log(file);
+        this.fileToDelete = file;
+    }
+
+    removeFile() {
+        const filename = this.fileToDelete.key;
+        for (let i = 0; i < this.uploadedFiles.length; i++) {
+            console.log(this.uploadedFiles[i]);
+            if (this.uploadedFiles[i].name === filename) {
+                this.uploadedFiles.splice(i, 1);
+                break;
+            }
+        }
+    }
+
+    resetTheUploadedFiles() {
+        this.uploadedFiles = [];
+    }
+
+
+    public fileOver(event) {
+        console.log(event);
+    }
+
+    public fileLeave(event) {
+        console.log(event);
+    }
+
+    saveFileToStore() {
+        for (const droppedFile of this.uploadedFiles) {
+            const file = this.getFile(droppedFile);
+            this.packageCreationExtractionService.extractBlobToStore(file);
+        }
+    }
+
+    openFilesInCreationPackage() {
+        this.router.navigate(['/packages/createPackage/']);
+    }
+
+    async getFile(fileEntry) {
+        try {
+            return await new Promise((resolve, reject) => fileEntry.file(resolve, reject));
+        } catch (err) {
+            console.log(err);
+        }
+    }
+}
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 1390a7b78..0bb4f1f41 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
@@ -12,7 +12,8 @@
                         Package
                     </a>
                     <br />
-                    <a href="#" id="clone-btn" role="button" aria-pressed="true" class="btn-import-package float"><i
+                    <a data-target="#importPackageModal" data-toggle="modal"  id="clone-btn" role="button"
+                       aria-pressed="true" class="btn-import-package float"><i
                             class="icon-import-blue" aria-hidden="true"></i>Import Package
                     </a>
                     <ngx-ui-loader></ngx-ui-loader>
@@ -121,3 +122,6 @@
         </div>
     </div>
 </div>
+
+
+<app-import-package></app-import-package>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
index c0ec679f7..4cfbb897c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
@@ -32,6 +32,7 @@ import {DesignerSourceViewComponent} from './designer/source-view/source-view.co
 import {NgxUiLoaderModule} from 'ngx-ui-loader';
 import {TourMatMenuModule} from 'ngx-tour-md-menu';
 import {ComponentCanDeactivateGuard} from '../../../common/core/canDactivate/ComponentCanDeactivateGuard';
+import { ImportPackageComponent } from './packages-dashboard/import-package/import-package.component';
 
 @NgModule({
     declarations: [PackagesDashboardComponent,
@@ -54,6 +55,7 @@ import {ComponentCanDeactivateGuard} from '../../../common/core/canDactivate/Com
         MetadataTabComponent,
         DslDefinitionsTabComponent,
         DesignerSourceViewComponent,
+        ImportPackageComponent,
 
     ],
     imports: [