update imports-tab,source-editor and create scripts-tab component

Issue-ID: CCSDK-2016
Issue-ID: CCSDK-2042

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

29 files changed, 791 insertions, 344 deletions

diff --git a/cds-ui/designer-client/angular.json b/cds-ui/designer-client/angular.json
index b169e7bcf..916ea2ff2 100644
--- a/cds-ui/designer-client/angular.json
+++ b/cds-ui/designer-client/angular.json
@@ -34,7 +34,22 @@
 
             ],
             "scripts": [
-              "./node_modules/jquery/dist/jquery.min.js",
+              "./node_modules/ace-builds/src-min/ace.js",
+              "./node_modules/ace-builds/src-min/theme-eclipse.js",
+              "./node_modules/ace-builds/src-min/mode-json.js",
+              "./node_modules/ace-builds/src-min/mode-javascript.js",
+              "./node_modules/ace-builds/src-min/mode-python.js",
+              "./node_modules/ace-builds/src-min/mode-xml.js",
+              "./node_modules/ace-builds/src-min/mode-kotlin.js",
+              "./node_modules/ace-builds/src-min/mode-text.js",
+              "./node_modules/ace-builds/src-min/mode-velocity.js",
+              "./node_modules/ace-builds/src-min/mode-yaml.js",
+              "./node_modules/ace-builds/src-min/theme-vibrant_ink.js",
+              "./node_modules/ace-builds/src-min/snippets/html.js",
+              "./node_modules/ace-builds/src-min/ext-beautify.js",
+              "./node_modules/ace-builds/src-min/ext-searchbox.js",
+              "./node_modules/ace-builds/src-min/ext-language_tools.js",
+              "./node_modules/jquery/dist/jquery.js",
               "./node_modules/lodash/index.js",
               "./node_modules/backbone/backbone.js",
               "./node_modules/jointjs/dist/joint.js"
@@ -141,4 +156,4 @@
     }
   },
   "defaultProject": "designer-client"
-}
\ No newline at end of file
+}
diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json
index 021d8a222..033fee1fa 100644
--- a/cds-ui/designer-client/package.json
+++ b/cds-ui/designer-client/package.json
@@ -35,6 +35,7 @@
     "json2typescript": "^1.2.3",
     "lodash": "^4.17.15",
     "ng-sidebar": "^9.1.1",
+    "ng2-ace-editor": "^0.3.9",
     "ngx-file-drop": "^8.0.8",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.css
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
new file mode 100644
index 000000000..844481a2d
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html
@@ -0,0 +1 @@
+<p>dsl-definitions-tab works!</p>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.spec.ts
new file mode 100644
index 000000000..ab9220830
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DslDefinitionsTabComponent } from './dsl-definitions-tab.component';
+
+describe('DslDefinitionsTabComponent', () => {
+  let component: DslDefinitionsTabComponent;
+  let fixture: ComponentFixture<DslDefinitionsTabComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DslDefinitionsTabComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DslDefinitionsTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 000000000..af0630293
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dsl-definitions-tab',
+  templateUrl: './dsl-definitions-tab.component.html',
+  styleUrls: ['./dsl-definitions-tab.component.css']
+})
+export class DslDefinitionsTabComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.css
index e69de29bb..4ab1d7b7e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.css
@@ -0,0 +1,11 @@
+a.accordion-delete i {
+    color: red;
+}
+
+a.accordion-delete i:hover {
+    color: #007bff;
+    cursor: pointer;
+    transition-duration: .5s;
+    /* for Safari & Chrome */
+    -webkit-transition-duration: .5s;
+}
\ No newline at end of file
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 baf1b8821..5cd888828 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
@@ -4,7 +4,8 @@
             <input placeholder="Enter file URL" type="input" class="ng-pristine ng-valid ng-touched">
             <a class="enter-link" href="#"><i class="icon-enter"></i></a>
         </div>
-        <span class="import-container-span">Or you can also <a href="#" data-toggle="modal" data-target="#exampleModal">Import File</a></span>
+        <span class="import-container-span">Or you can also <a href="#" data-toggle="modal"
+                data-target="#exampleModal">Import File</a></span>
 
     </div>
 
@@ -14,12 +15,12 @@
                 <label class="label-name">File</label>
             </div>
         </div>
-        <div id="accordion" *ngFor="let file of definitionFiles | keyvalue">
-            <div class="card">
+        <div id="accordion" *ngFor="let file of definitionFiles | keyvalue; let mapIndex = index">
+            <!-- <div class="card">
                 <div class="card-header" [id]="file.key">
                     <h5 class="mb-0 d-flex justify-content-between">
                         <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"
-                                aria-expanded="true" aria-controls="collapseOne">
+                            aria-expanded="true" aria-controls="collapseOne">
                             <i class="icon-file-code"></i> Definitions/{{file.key}}
                         </button>
                         <a class="accordion-delete" href="#"><i class="icon-delete"></i></a>
@@ -31,28 +32,26 @@
                         {{file.value | json}}
                     </div>
                 </div>
+            </div> -->
+            <div class="card">
+                <div class="card-header" [id]="'head-'+mapIndex">
+                    <h5 class="mb-0 d-flex justify-content-between">
+                        <button class="btn btn-link collapsed" data-toggle="collapse"
+                            [attr.data-target]="'#id-'+mapIndex" aria-expanded="false"
+                            [attr.aria-controls]="'id-'+mapIndex">
+                            <i class="icon-file-code"></i> Definitions/{{file.key}}
+                        </button>
+                        <a class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete"></i></a>
+                    </h5>
+                </div>
+                <div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex"
+                    data-parent="#accordion">
+                    <div class="card-body">
+                        {{file.value}}
+                    </div>
+                </div>
             </div>
-            <!--   <div class="card">
-                   <div class="card-header" id="headingTwo">
-                       <h5 class="mb-0">
-                           <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
-                                   aria-expanded="false" aria-controls="collapseTwo">
-                               <i class="icon-file-code"></i> Definitions/relationship_types.json
-                           </button>
-                       </h5>
-                   </div>
-                   <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
-                       <div class="card-body">
-                           Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
-                           3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
-                           laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin
-                           coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes
-                           anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
-                           occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard
-                           of them accusamus labore sustainable VHS.
-                       </div>
-                   </div>
-               </div>
+            <!--
                <div class="card">
                    <div class="card-header" id="headingThree">
                        <h5 class="mb-0">
@@ -74,13 +73,14 @@
                        </div>
                    </div>
                </div>
-           --></div>
+           -->
+        </div>
     </div>
 
 </div>
 
 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
-     aria-hidden="true">
+    aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -91,10 +91,10 @@
             </div>
             <div class="modal-body">
                 <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
-                               (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($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"/>
+                            <img src="assets/img/folder-upload.svg" />
                         </div>
                         <div class="folder-upload-text">
                             Drag & Drop file
@@ -110,16 +110,16 @@
                 <div class="upload-table" *ngFor="let item of uploadedFiles; let i=index">
                     <table class="table">
                         <thead>
-                        <tr>
-                            <th>Name : {{ item.name }}</th>
-                        </tr>
+                            <tr>
+                                <th>Name : {{ item.name }}</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
+                    (click)="resetTheUploadedFiles()">Cancel
                 </button>
                 <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" (click)="setFilesToStore()">
                     Import
@@ -127,6 +127,4 @@
             </div>
         </div>
     </div>
-</div>
-
-
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
index 6cd52015d..4db67b8dc 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
@@ -1,7 +1,7 @@
-import {Component, OnInit} from '@angular/core';
-import {NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry} from 'ngx-file-drop';
-import {PackageCreationStore} from '../package-creation.store';
-import {PackageCreationUtils} from '../package-creation.utils';
+import { Component, OnInit } from '@angular/core';
+import { NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry } from 'ngx-file-drop';
+import { PackageCreationStore } from '../package-creation.store';
+import { PackageCreationUtils } from '../package-creation.utils';
 
 
 @Component({
@@ -9,10 +9,11 @@ import {PackageCreationUtils} from '../package-creation.utils';
     templateUrl: './imports-tab.component.html',
     styleUrls: ['./imports-tab.component.css']
 })
-export class ImportsTabComponent {
+export class ImportsTabComponent implements OnInit {
 
     public definitionFiles: Map<string, string> = new Map<string, string>();
     public uploadedFiles: FileSystemFileEntry[] = [];
+    private fileNames: Set<string> = new Set();
 
     public files: NgxFileDropEntry[] = [];
 
@@ -24,15 +25,19 @@ export class ImportsTabComponent {
         });
     }
 
+    ngOnInit(): void {
+        // TODO
+    }
+
     public dropped(files: NgxFileDropEntry[]) {
         this.files = files;
         for (const droppedFile of files) {
-
-            // Is it a file?
-            if (droppedFile.fileEntry.isFile) {
+            // Is it a file? & Not added before
+            if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) {
                 const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
                 this.uploadedFiles.push(fileEntry);
-
+                console.log(fileEntry.name);
+                this.fileNames.add(fileEntry.name);
 
             } /*else {
                 const directorEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
@@ -57,6 +62,13 @@ export class ImportsTabComponent {
         }
     }
 
+    removeFile(fileIndex: number) {
+        console.log(this.uploadedFiles[fileIndex]);
+        console.log(this.uploadedFiles);
+        this.packageCreationStore.removeFromState(this.uploadedFiles[fileIndex].name, 'definitions');
+        this.uploadedFiles.splice(fileIndex, 1);
+    }
+
     public fileOver(event) {
         console.log(event);
     }
@@ -64,8 +76,6 @@ export class ImportsTabComponent {
     public fileLeave(event) {
         console.log(event);
     }
-
-
     /* readFileContent(file: File): string | ArrayBuffer {
          const fileReader = new FileReader();
         // let content: string | ArrayBuffer = '';
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
index 7b6743f6a..cbb82f118 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
@@ -1,4 +1,5 @@
-import {Metadata} from './definitions/VlbDefinition';
+
+import {MetaDataTabModel} from './metadata/MetaDataTab.model';
 
 export class Definition {
     public files: Map<string, string> = new Map<string, string>();
@@ -8,13 +9,24 @@ export class Definition {
     }
 }
 
+export class Scripts {
+    public files: Map<string, string> = new Map<string, string>();
+
+    constructor(files: Map<string, string>) {
+        this.files = files;
+    }
+}
+
 export class CBAPackage {
-    public metaData: Metadata;
+
+    public metaData: MetaDataTabModel;
     public definitions: Definition;
+    public scripts: Scripts;
 
     constructor() {
         this.definitions = new Definition(new Map<string, string>());
-        this.metaData = new Metadata();
+        this.scripts = new Scripts(new Map<string, string>());
+        this.metaData = new MetaDataTabModel();
     }
 
 }
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 42aac5c4f..c62694213 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
@@ -20,10 +20,9 @@ limitations under the License.
 */
 
 
-export class MetaDataTab {
+export class MetaDataTabModel {
 
     mode: string;
-    dictionaryLibraryInstance?: null;
     name: string;
     description: string;
     version: string;
@@ -46,7 +45,7 @@ Content-Type: application/vnd.oasis.bpmn*/
 
 export class MetaDataFile {
 
-    static getObjectInstance(metaDataTab: MetaDataTab): string {
+    static getObjectInstance(metaDataTab: MetaDataTabModel): string {
         return 'TOSCA-Meta-File-Version: 1.0.0\n' +
             'CSAR-Version: 1.0\n' +
             'Created-By: Shaaban Ebrahim <shaaban.eltanany.ext@orange.con>\n' +
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.css
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
new file mode 100644
index 000000000..a94687b37
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
@@ -0,0 +1,88 @@
+<div class="card creat-card">
+    <div class="single-line">
+        <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}}>
+
+            <span>
+                                            <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i>
+                {{mode.name}}
+                                            </span>
+        </label>
+    </div>
+
+</div>
+<div class="card creat-card">
+    <div class="single-line">
+        <label class="label-name">Name</label>
+        <div class="label-input">
+            <input type="input"
+                   [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS">
+        </div>
+    </div>
+    <hr/>
+    <div class="single-line">
+        <label class="label-name">Description</label>
+        <div class="label-input">
+            <input type="input" [(ngModel)]="metaDataTab.description"
+                   placeholder="Descripe the package">
+        </div>
+    </div>
+    <hr/>
+    <div class="single-line">
+        <label class="label-name">Version</label>
+        <div class="label-input">
+            <input type="input" [(ngModel)]="metaDataTab.version"
+                   (input)="validatePackageNameAndVersion()"
+                   placeholder="Example: 1.0.0">
+        </div>
+        <div><label style="color: red">{{errorMessage}}</label></div>
+    </div>
+    <hr/>
+    <div class="single-line">
+        <label class="label-name">tags</label>
+        <div class="label-input">
+            <input type="input" [(ngModel)]="metaDataTab.tags"
+                   placeholder="Ex., vDNS-CDS">
+        </div>
+    </div>
+</div>
+<div id="container">
+    <div id="target">
+        <div class="card creat-card">
+            <div class="single-line">
+                <h5 class="label-name">
+                    Custom key <a class="delete-key" (click)="deleteCustomKey($event)">Delete</a>
+                </h5>
+
+            </div>
+            <div class="single-line">
+                <label class="label-name">Name</label>
+                <div class="label-input">
+                    <input name="key" type="input" placeholder="Enter Name">
+                </div>
+            </div>
+            <hr/>
+            <div class="single-line">
+                <label class="label-name">Value</label>
+                <div class="label-input">
+                    <input name="value" type="input"
+                           placeholder="Enter Value">
+                </div>
+            </div>
+
+        </div>
+    </div>
+</div>
+<div class="card creat-card">
+    <div class="single-line">
+        <div name="custom key">
+            <button class="custom-key" (click)="createAnotherCustomKeyDiv()"><i
+                    class="fa fa-plus" aria-hidden="true"></i> Add a custom key
+            </button>
+
+
+        </div>
+    </div>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.spec.ts
index ed0dc59c8..90586d900 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.spec.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PackageCreationComponent } from './package-creation.component';
+import { MetadataTabComponent } from './metadata-tab.component';
 
-describe('PackageCreationComponent', () => {
-  let component: PackageCreationComponent;
-  let fixture: ComponentFixture<PackageCreationComponent>;
+describe('MetadataTabComponent', () => {
+  let component: MetadataTabComponent;
+  let fixture: ComponentFixture<MetadataTabComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ PackageCreationComponent ]
+      declarations: [ MetadataTabComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PackageCreationComponent);
+    fixture = TestBed.createComponent(MetadataTabComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
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
new file mode 100644
index 000000000..894716711
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts
@@ -0,0 +1,137 @@
+import {Component, OnInit} from '@angular/core';
+import {PackageCreationService} from '../package-creation.service';
+import {PackageCreationUtils} from '../package-creation.utils';
+import {Router} from '@angular/router';
+import {FilesContent, FolderNodeElement, MetaDataFile, MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model';
+import * as JSZip from 'jszip';
+import {PackageCreationStore} from '../package-creation.store';
+
+
+@Component({
+    selector: 'app-metadata-tab',
+    templateUrl: './metadata-tab.component.html',
+    styleUrls: ['./metadata-tab.component.css']
+})
+export class MetadataTabComponent implements OnInit {
+
+    counter = 0;
+    modes: object[] = [
+        {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 errorMessage: string;
+
+    constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils,
+                private router: Router, private packageCreationStore: PackageCreationStore) {
+
+    }
+
+    ngOnInit() {
+        this.packageCreationStore.changeMetaData(this.metaDataTab);
+    }
+
+    saveMetaData() {
+        this.setModeType(this.metaDataTab);
+        this.setEntryPoint(this.metaDataTab);
+
+        this.addToscaMetaDataFile(this.metaDataTab);
+
+        // const vlbDefinition: VlbDefinition = new VlbDefinition();
+        // this.fillVLBDefinition(vlbDefinition, this.metaDataTab);
+
+        this.filesData.push(this.folder.TREE_DATA);
+        this.saveBluePrint();
+        this.packageCreationService.refreshPackages();
+        this.router.navigate(['/packages']);
+
+    }
+
+    addToscaMetaDataFile(metaDataTab: MetaDataTabModel) {
+        const filename = 'TOSCA.meta';
+        FilesContent.putData(filename, MetaDataFile.getObjectInstance(this.metaDataTab));
+    }
+
+    private setModeType(metaDataTab: MetaDataTabModel) {
+        if (metaDataTab.mode.startsWith('Scripting')) {
+            metaDataTab.mode = 'KOTLIN_SCRIPT';
+        } else if (metaDataTab.mode.startsWith('Designer')) {
+            metaDataTab.mode = 'DEFAULT';
+        } else {
+            metaDataTab.mode = 'GENERIC_SCRIPT';
+        }
+    }
+
+    saveBluePrint() {
+        this.create();
+        this.zipFile.generateAsync({type: 'blob'})
+            .then(blob => {
+                this.packageCreationService.savePackage(blob);
+
+            });
+    }
+
+
+    create() {
+        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 {
+                    }
+
+                });
+
+            }
+        });
+    }
+
+    private setEntryPoint(metaDataTab: MetaDataTabModel) {
+        if (metaDataTab.mode.startsWith('DEFAULT')) {
+            metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
+        } else {
+            metaDataTab.entryFileName = '';
+        }
+
+
+    }
+
+    /* private fillVLBDefinition(vlbDefinition: VlbDefinition, metaDataTab: MetaDataTabModel) {
+
+         const metadata: Metadata = new Metadata();
+         metadata.template_author = 'Shaaban';
+         metadata.template_name = metaDataTab.templateName;
+         metadata.template_tags = metaDataTab.tags;
+
+         metadata.dictionary_group = 'default';
+         metadata.template_version = metaDataTab.version;
+         metadata['author-email'] = 'shaaban.altanany.ext@orange.com';
+         metadata['user-groups'] = 'ADMIN';
+         vlbDefinition.tosca_definitions_version = metaDataTab.version;
+         vlbDefinition.metadata = metadata;
+         const value = this.packageCreationUtils.transformToJson(vlbDefinition);
+         console.log(value);
+         FilesContent.putData('vLB_CDS.json', value);
+     }*/
+
+    validatePackageNameAndVersion() {
+        if (this.metaDataTab.name && this.metaDataTab.version) {
+            this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => {
+                if (element) {
+                    this.errorMessage = 'the package with name and version is exists';
+                } else {
+                    this.errorMessage = ' ';
+                }
+            });
+        }
+
+    }
+}
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 776533845..89a190ef6 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
@@ -34,7 +34,7 @@
                 </div>
                 <nav class="row">
                     <div class="col pr-0">
-                        <button class="float btn btn-sm btn-primary" (click)="saveMetaData()">Save</button>
+                        <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button>
                         <button class="float btn btn-sm btn-outline-secondary" disabled>Cancel</button>
                     </div>
                 </nav>
@@ -68,95 +68,7 @@
                         <div class="tab-content" id="nav-tabContent">
                             <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
                                  aria-labelledby="nav-metadata-tab">
-                                <div class="card creat-card">
-                                    <div class="single-line">
-                                        <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}}>
-
-                                            <span>
-                                            <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i>
-                                                {{mode.name}}
-                                            </span>
-                                        </label>
-                                    </div>
-
-                                </div>
-                                <div class="card creat-card">
-                                    <div class="single-line">
-                                        <label class="label-name">Name</label>
-                                        <div class="label-input">
-                                            <input type="input"
-                                                   [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS">
-                                        </div>
-                                    </div>
-                                    <hr/>
-                                    <div class="single-line">
-                                        <label class="label-name">Description</label>
-                                        <div class="label-input">
-                                            <input type="input" [(ngModel)]="metaDataTab.description"
-                                                   placeholder="Descripe the package">
-                                        </div>
-                                    </div>
-                                    <hr/>
-                                    <div class="single-line">
-                                        <label class="label-name">Version</label>
-                                        <div class="label-input">
-                                            <input type="input" [(ngModel)]="metaDataTab.version"
-                                                   (input)="validatePackageNameAndVersion()"
-                                                   placeholder="Example: 1.0.0">
-                                        </div>
-                                        <div><label style="color: red">{{errorMessage}}</label></div>
-                                    </div>
-                                    <hr/>
-                                    <div class="single-line">
-                                        <label class="label-name">tags</label>
-                                        <div class="label-input">
-                                            <input type="input" [(ngModel)]="metaDataTab.tags"
-                                                   placeholder="Ex., vDNS-CDS">
-                                        </div>
-                                    </div>
-                                </div>
-                                <div id="container">
-                                    <div id="target">
-                                        <div class="card creat-card">
-                                            <div class="single-line">
-                                                <h5 class="label-name">
-                                                    Custom key <a class="delete-key" (click)="deleteCustomKey($event)">Delete</a>
-                                                </h5>
-
-                                            </div>
-                                            <div class="single-line">
-                                                <label class="label-name">Name</label>
-                                                <div class="label-input">
-                                                    <input name="key" type="input" placeholder="Enter Name">
-                                                </div>
-                                            </div>
-                                            <hr/>
-                                            <div class="single-line">
-                                                <label class="label-name">Value</label>
-                                                <div class="label-input">
-                                                    <input name="value" type="input"
-                                                           placeholder="Enter Value">
-                                                </div>
-                                            </div>
-
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="card creat-card">
-                                    <div class="single-line">
-                                        <div name="custom key">
-                                            <button class="custom-key" (click)="createAnotherCustomKeyDiv()"><i
-                                                    class="fa fa-plus" aria-hidden="true"></i> Add a custom key
-                                            </button>
-
-
-                                        </div>
-                                    </div>
-                                </div>
-
+                                <app-metadata-tab></app-metadata-tab>
                             </div>
                             <div class="tab-pane fade" id="nav-imports" role="tabpanel"
                                  aria-labelledby="nav-imports-tab">
@@ -164,13 +76,16 @@
 
                             </div>
                             <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
-                                 aria-labelledby="nav-authentication-tab">...
+                                 aria-labelledby="nav-authentication-tab">
+                                <app-source-editor [Data]="'test'" lang="javascript"></app-source-editor>
                             </div>
                             <div class="tab-pane fade" id="nav-template" role="tabpanel"
-                                 aria-labelledby="nav-template-tab"><app-template-mapping></app-template-mapping>
+                                 aria-labelledby="nav-template-tab">
+                                <app-template-mapping></app-template-mapping>
                             </div>
                             <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
-                                 aria-labelledby="nav-scripts-tab">...
+                                 aria-labelledby="nav-scripts-tab">
+                                <app-scripts-tab></app-scripts-tab>
                             </div>
                         </div>
                     </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 37a017953..aa44cdf7c 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
@@ -20,19 +20,10 @@ limitations under the License.
 */
 
 import {Component, OnInit} from '@angular/core';
-import {FilesContent, FolderNodeElement, MetaDataFile, MetaDataTab} from './mapping-models/metadata/MetaDataTab.model';
+import {FilesContent, FolderNodeElement, MetaDataFile, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
 // import {saveAs} from 'file-saver/dist/FileSaver';
 import * as JSZip from 'jszip';
-import {Observable} from 'rxjs';
-import {ApiService} from '../../../../common/core/services/api.service';
-import {BlueprintURLs} from '../../../../common/constants/app-constants';
-import {Import, Metadata, VlbDefinition} from './mapping-models/definitions/VlbDefinition';
-import {JsonConvert} from 'json2typescript';
-import {JsonPipe} from '@angular/common';
-import {PackageCreationService} from './package-creation.service';
-import {PackageCreationUtils} from './package-creation.utils';
-import List = _.List;
-import {Router} from '@angular/router';
+import {PackageCreationStore} from './package-creation.store';
 
 @Component({
     selector: 'app-package-creation',
@@ -44,118 +35,44 @@ export class PackageCreationComponent implements OnInit {
     modes: object[] = [
         {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'},
         {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}];
-    customKeysAndValues: Map<string, string> = new Map<string, string>();
-
-    dictionaryLibraryInstances: string[] = ['x', 'y'];
-    private container: HTMLElement;
-    private elements: HTMLCollection;
-    private newElement: HTMLElement;
-    private metaDataTab: MetaDataTab = new MetaDataTab();
-
-    private result: string;
-
+    private metaDataTab: MetaDataTabModel = new MetaDataTabModel();
     private folder: FolderNodeElement = new FolderNodeElement();
     private zipFile: JSZip = new JSZip();
     private filesData: any = [];
-    private errorMessage: string;
-    private keys: NodeListOf<HTMLElement>;
-    private values: NodeListOf<HTMLElement>;
-
 
-    constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils,
-                private router: Router) {
+    constructor(private packageCreationStore: PackageCreationStore) {
     }
 
     ngOnInit() {
-        // this.customKeysAndValues.set('Dictionary Library Instances', ' ');
-        this.keys = document.getElementsByName('key');
-        this.values = document.getElementsByName('value');
-    }
-
-
-    createAnotherCustomKeyDiv() {
-        this.newElement = document.getElementById('target');
-        const id = this.newElement.getAttribute('id');
-        this.newElement.setAttribute('id', 'target' + this.counter++);
-        const copiedElement = this.newElement.cloneNode(true);
-        this.container = document.getElementById('container');
-        this.container.appendChild(copiedElement);
-        this.elements = this.container.children;
-        this.newElement.setAttribute('id', id);
-        this.clearCopiedElement();
-
-        // console.log(this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version));
-        /*this.metaDataTab = new MetaDataTab();
-        this.metaDataTab.name = 'klfdj';
-        this.metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
-        this.metaDataTab.description = 'rere';
-        this.metaDataTab.tags = 'ffsssssss';
-        this.metaDataTab.version = '1.01.10';
-        this.metaDataTab.templateName = 'test';
-
-
-        this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab));*/
-    }
-
-    private clearCopiedElement() {
-        const newCopiedElement: HTMLInputElement = document.getElementById('target' + (this.counter - 1)) as HTMLInputElement;
-        const inputElements = newCopiedElement.getElementsByTagName('input');
-        for (let i = 0; i < inputElements.length; i++) {
-            const element: HTMLInputElement = inputElements.item(i) as HTMLInputElement;
-            element.value = '';
-        }
-    }
-
-
-    validatePackageNameAndVersion() {
-        if (this.metaDataTab.name && this.metaDataTab.version) {
-            this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => {
-                if (element) {
-                    this.errorMessage = 'the package with name and version is exists';
-                } else {
-                    this.errorMessage = ' ';
-                }
-            });
-        }
 
     }
 
-    getDictionaryLibraryInstances() {
+    saveBluePrint() {
+        this.packageCreationStore.state$.subscribe(
+            cbaPackage => {
+                this.metaDataTab = cbaPackage.metaData;
+                this.setModeType(this.metaDataTab);
+                this.setEntryPoint(this.metaDataTab);
 
+                this.addToscaMetaDataFile(this.metaDataTab);
 
-    }
+                // const vlbDefinition: VlbDefinition = new VlbDefinition();
+                // this.fillVLBDefinition(vlbDefinition, this.metaDataTab);
 
-    saveMetaData() {
-        for (let i = 0; i < this.values.length; i++) {
-            const inputKeyElement: HTMLInputElement = this.keys.item(i) as HTMLInputElement;
-            const inputKey: string = inputKeyElement.value;
-            const inputValueElement: HTMLInputElement = this.values.item(i) as HTMLInputElement;
-            const inputValue: string = inputValueElement.value;
-            this.customKeysAndValues.set(inputKey, inputValue);
-        }
-
-        this.metaDataTab.mapOfCustomKey = this.customKeysAndValues;
-        this.setModeType(this.metaDataTab);
-        this.setEntryPoint(this.metaDataTab);
-
-        this.addToscaMetaDataFile(this.metaDataTab);
-
-        const vlbDefinition: VlbDefinition = new VlbDefinition();
-        this.fillVLBDefinition(vlbDefinition, this.metaDataTab);
+                this.filesData.push(this.folder.TREE_DATA);
+                console.log(FilesContent.getMapOfFilesNamesAndContent());
+                this.saveBluePrintToDataBase();
+            });
 
-        this.filesData.push(this.folder.TREE_DATA);
-        this.saveToBackend();
-        this.packageCreationService.refreshPackages();
-        this.router.navigate(['/packages']);
 
     }
 
-    addToscaMetaDataFile(metaDataTab: MetaDataTab) {
+    addToscaMetaDataFile(metaDataTab: MetaDataTabModel) {
         const filename = 'TOSCA.meta';
         FilesContent.putData(filename, MetaDataFile.getObjectInstance(this.metaDataTab));
     }
 
-    private setModeType(metaDataTab: MetaDataTab) {
+    private setModeType(metaDataTab: MetaDataTabModel) {
         if (metaDataTab.mode.startsWith('Scripting')) {
             metaDataTab.mode = 'KOTLIN_SCRIPT';
         } else if (metaDataTab.mode.startsWith('Designer')) {
@@ -165,28 +82,15 @@ export class PackageCreationComponent implements OnInit {
         }
     }
 
-    saveToBackend() {
+    saveBluePrintToDataBase() {
         this.create();
         this.zipFile.generateAsync({type: 'blob'})
             .then(blob => {
-                this.saveBluePrint(blob);
-
+                this.packageCreationStore.saveBluePrint(blob);
             });
     }
 
 
-    private saveBluePrint(blob) {
-        const formData = new FormData();
-        formData.append('file', blob);
-        this.packageCreationService.saveBlueprint(formData)
-            .subscribe(
-                data => {
-                    console.log('Success:' + JSON.stringify(data));
-                }, error => {
-                    console.log('Error -' + error.message);
-                });
-    }
-
     create() {
         this.folder.TREE_DATA.forEach((path) => {
 
@@ -206,15 +110,7 @@ export class PackageCreationComponent implements OnInit {
         });
     }
 
-
-    deleteCustomKey(event) {
-        this.container = document.getElementById('container');
-        const element = event.parentElement.parentElement.parentElement;
-        this.container.removeChild(element);
-    }
-
-
-    private setEntryPoint(metaDataTab: MetaDataTab) {
+    private setEntryPoint(metaDataTab: MetaDataTabModel) {
         if (metaDataTab.mode.startsWith('DEFAULT')) {
             metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
         } else {
@@ -224,24 +120,5 @@ export class PackageCreationComponent implements OnInit {
 
     }
 
-    private fillVLBDefinition(vlbDefinition: VlbDefinition, metaDataTab: MetaDataTab) {
-
-        const metadata: Metadata = new Metadata();
-        metadata.template_author = 'Shaaban';
-        metadata.template_name = metaDataTab.templateName;
-        metadata.template_tags = metaDataTab.tags;
-
-        metadata.dictionary_group = 'default';
-        metadata.template_version = metaDataTab.version;
-        metadata['author-email'] = 'shaaban.altanany.ext@orange.com';
-        metadata['user-groups'] = 'ADMIN';
-        // metadata.mapOfCustomKeys = this.metaDataTab.mapOfCustomKey;
-        vlbDefinition.tosca_definitions_version = metaDataTab.version;
-        vlbDefinition.metadata = metadata;
-
-        // console.log(vlbDefinition.metadata.mapOfCustomKeys);
-        const value = this.packageCreationUtils.transformToJson(vlbDefinition);
-        console.log(value);
-        FilesContent.putData('vLB_CDS.json', value);
-    }
+
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
index 0e5cd6a11..36da6a42f 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
@@ -36,7 +36,7 @@ export class PackageCreationService {
     constructor(private api: ApiService, private packagesListService: PackagesApiService, private packagesStore: PackagesStore) {
     }
 
-    saveBlueprint(body: any | null, options?: any): Observable<any> {
+    private saveBlueprint(body: any | null, options?: any): Observable<any> {
         return this.api.post(BlueprintURLs.save, body, {responseType: 'text'});
     }
 
@@ -48,4 +48,18 @@ export class PackageCreationService {
     refreshPackages() {
         this.packagesStore.getAll();
     }
+
+    savePackage(blob) {
+
+        const formData = new FormData();
+        formData.append('file', blob);
+        this.saveBlueprint(formData)
+            .subscribe(
+                data => {
+                    console.log('Success:' + JSON.stringify(data));
+                }, error => {
+                    console.log('Error -' + error.message);
+                });
+    }
+
 }
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 214b516a2..f19ada820 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
@@ -23,9 +23,10 @@ import {Injectable} from '@angular/core';
 
 import {Store} from '../../../../common/core/stores/Store';
 
-import {CBAPackage, Definition} from './mapping-models/CBAPacakge.model';
-import {Metadata} from './mapping-models/definitions/VlbDefinition';
+import {CBAPackage, Definition, Scripts} 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';
 
 
 @Injectable({
@@ -33,11 +34,14 @@ import {PackageCreationService} from './package-creation.service';
 })
 export class PackageCreationStore extends Store<CBAPackage> {
 
+    private folder: FolderNodeElement = new FolderNodeElement();
+    private zipFile: JSZip = new JSZip();
+
     constructor(private packageCreationService: PackageCreationService) {
         super(new CBAPackage());
     }
 
-    changeMetaData(metaDataObject: Metadata) {
+    changeMetaData(metaDataObject: MetaDataTabModel) {
 
         this.setState({
             ...this.state,
@@ -52,4 +56,23 @@ export class PackageCreationStore extends Store<CBAPackage> {
             definitions: new Definition(this.state.definitions.files.set(name, content))
         });
     }
+
+    addScripts(name: string, content: string) {
+
+        this.setState({
+            ...this.state,
+            scripts: new Scripts(this.state.scripts.files.set(name, content))
+        });
+
+    }
+
+    // type => refer to scripts || definitions
+    // from Files from scripts or imports
+    removeFromState(name: string, type: string) {
+        this.state[type].files.delete(name);
+    }
+
+    saveBluePrint(blob) {
+        this.packageCreationService.savePackage(blob);
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.css
new file mode 100644
index 000000000..4ab1d7b7e
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.css
@@ -0,0 +1,11 @@
+a.accordion-delete i {
+    color: red;
+}
+
+a.accordion-delete i:hover {
+    color: #007bff;
+    cursor: pointer;
+    transition-duration: .5s;
+    /* for Safari & Chrome */
+    -webkit-transition-duration: .5s;
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
new file mode 100644
index 000000000..1685b7eaf
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
@@ -0,0 +1,92 @@
+<div class="import-container-all">
+    <div class="import-container">
+        <div class="import-container-input">
+            <input class="ng-pristine ng-valid ng-touched" placeholder="Enter file URL" type="input">
+            <a class="enter-link" href="#"><i class="icon-enter"></i></a>
+        </div>
+        <span class="import-container-span">Or you can also <a data-target="#scriptsModal" data-toggle="modal"
+                                                               href="#">Import File</a></span>
+
+    </div>
+
+    <div class="accordion">
+        <div class="card creat-card">
+            <div class="single-line">
+                <label class="label-name">File</label>
+            </div>
+        </div>
+        <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion">
+
+            <div class="card">
+                <div [id]="'head-'+mapIndex" class="card-header">
+                    <h5 class="mb-0 d-flex justify-content-between">
+                        <button [attr.aria-controls]="'id-'+mapIndex" [attr.data-target]="'#id-'+mapIndex"
+                                aria-expanded="false" class="btn btn-link collapsed"
+                                data-toggle="collapse">
+                            <i class="icon-file-code"></i> Definitions/{{file.key}}
+                        </button>
+                        <a (click)="removeFile(mapIndex)" class="accordion-delete"><i class="icon-delete"></i></a>
+                    </h5>
+                </div>
+                <div [attr.aria-labelledby]="'head-'+mapIndex" [id]="'id-'+mapIndex" class="collapse"
+                     data-parent="#accordion">
+                    <div class="card-body">
+                        {{file.value}}
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+</div>
+
+<div aria-hidden="true" aria-labelledby="scriptsModalLabel" class="modal fade" id="scriptsModal" role="dialog"
+     tabindex="-1">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="scriptsModalLabel">Import File</h5>
+                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <ngx-file-drop (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
+                               (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here">
+                    <ng-template let-openFileSelector="openFileSelector" ngx-file-drop-content-tmp>
+                        <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 (click)="openFileSelector()" class="btn btn-sm btn-primary" type="button">Browse
+                                Files
+                            </button>
+                        </div>
+                        <div class="folder-upload-type">Allowed file type: Kotlin(Kt)</div>
+                    </ng-template>
+                </ngx-file-drop>
+                <div *ngFor="let item of uploadedFiles; let i=index" class="upload-table">
+                    <table class="table">
+                        <thead>
+                        <tr>
+                            <th>Name : {{ item.name }}</th>
+                        </tr>
+                        </thead>
+                    </table>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal"
+                        type="button">Cancel
+                </button>
+                <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" data-dismiss="modal" type="button">
+                    Import
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.spec.ts
new file mode 100644
index 000000000..5257822a2
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.spec.ts
@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ScriptsTabComponent} from './scripts-tab.component';
+
+describe('ScriptsTabComponent', () => {
+    let component: ScriptsTabComponent;
+    let fixture: ComponentFixture<ScriptsTabComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [ScriptsTabComponent]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ScriptsTabComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
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
new file mode 100644
index 000000000..d4d2b20d0
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
@@ -0,0 +1,76 @@
+import {Component, OnInit} from '@angular/core';
+import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
+import {PackageCreationStore} from '../package-creation.store';
+import {PackageCreationUtils} from '../package-creation.utils';
+
+@Component({
+    selector: 'app-scripts-tab',
+    templateUrl: './scripts-tab.component.html',
+    styleUrls: ['./scripts-tab.component.css']
+})
+export class ScriptsTabComponent implements OnInit {
+
+    public scriptsFiles: Map<string, string> = new Map<string, string>();
+    public uploadedFiles: FileSystemFileEntry[] = [];
+    public files: NgxFileDropEntry[] = [];
+    private fileNames: Set<string> = new Set();
+
+    constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) {
+        this.packageCreationStore.state$.subscribe(cbaPackage => {
+            if (cbaPackage.scripts && cbaPackage.scripts.files && cbaPackage.scripts.files.size > 0) {
+                this.scriptsFiles = cbaPackage.scripts.files;
+            }
+        });
+    }
+
+
+    ngOnInit() {
+    }
+
+    public dropped(files: NgxFileDropEntry[]) {
+        this.files = files;
+        for (const droppedFile of files) {
+            // Is it a file & Not added before ?
+            if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) {
+                const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
+                this.uploadedFiles.push(fileEntry);
+                console.log(fileEntry.name);
+                this.fileNames.add(fileEntry.name);
+
+            }
+        }
+    }
+
+    removeFile(fileIndex: number) {
+        console.log(this.uploadedFiles[fileIndex]);
+        this.packageCreationStore.removeFromState(this.uploadedFiles[fileIndex].name, 'scripts');
+        this.uploadedFiles.splice(fileIndex, 1);
+    }
+
+    public fileOver(event) {
+        console.log(event);
+    }
+
+    public fileLeave(event) {
+        console.log(event);
+    }
+
+
+    setFilesToStore() {
+        for (const droppedFile of this.uploadedFiles) {
+            droppedFile.file((file: File) => {
+                const fileReader = new FileReader();
+                fileReader.onload = (e) => {
+                    this.packageCreationStore.addScripts(droppedFile.name,
+                        this.packageCreationUtils.transformToJson(fileReader.result));
+                };
+                fileReader.readAsText(file);
+            });
+
+        }
+    }
+
+    resetTheUploadedFiles() {
+        this.uploadedFiles = [];
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html
index c21bae3af..57bd2b1ad 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html
@@ -3,11 +3,12 @@
     <div class="single-line">
         <label class="label-name">Name</label>
         <div class="label-input">
-            <input type="input" (input)="searchPackages($event)" [(ngModel)]="metaDataTab.name"
-                placeholder="Topology name.vLB.CDS">
+            <input type="input" placeholder="Topology name.vLB.CDS">
+            <!--(input)="searchPackages($event)" [(ngModel)]="metaDataTab.name"-->
+
         </div>
     </div>
-    <hr />
+    <hr/>
     <div class="single-line">
         <label class="label-name">Management Type</label>
         <div class="label-input">
@@ -35,26 +36,26 @@
 
         </div>
     </div>
-    <hr />
+    <hr/>
     <div class="single-line">
         <label class="label-name">Type</label>
         <div class="label-input">
             <label name="trst">
-                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>                                       
+                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>
 
                 <span>
                     Velcoity
                     </span>
             </label>
             <label name="trst">
-                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>                                       
+                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value=Velcoity>
 
                 <span>
                     Jinja
                     </span>
             </label>
             <label name="trst">
-                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>                                       
+                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value=Velcoity>
 
                 <span>
                     Kotlin
@@ -65,36 +66,50 @@
 </div>
 
 <div class="template-mapping-accordion">
-<div id="accordion">
-    <div class="card">
-      <div class="card-header" id="headingOne">
-        <h5 class="mb-0 d-flex justify-content-between">
-          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-            1. Create Template
-          </button>
-          
-        </h5>
-      </div>
-  
-      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
-        <div class="card-body">
-          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+    <div id="accordion">
+        <div class="card">
+            <div class="card-header" id="headingOne">
+                <h5 class="mb-0 d-flex justify-content-between">
+                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
+                            aria-controls="collapseOne">
+                        1. Create Template
+                    </button>
+
+                </h5>
+            </div>
+
+            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
+                <div class="card-body">
+                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
+                    wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
+                    eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
+                    assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
+                    sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
+                    farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
+                    labore sustainable VHS.
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-header" id="headingTwo">
-        <h5 class="mb-0">
-          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-            2. Manage Mapping
-          </button>
-        </h5>
-      </div>
-      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
-        <div class="card-body">
-          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+        <div class="card">
+            <div class="card-header" id="headingTwo">
+                <h5 class="mb-0">
+                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
+                            aria-expanded="false" aria-controls="collapseTwo">
+                        2. Manage Mapping
+                    </button>
+                </h5>
+            </div>
+            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
+                <div class="card-body">
+                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
+                    wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
+                    eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
+                    assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
+                    sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
+                    farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
+                    labore sustainable VHS.
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
-</div>
\ No newline at end of file
+</div>
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 a83f6eca3..6901d5773 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
@@ -18,9 +18,14 @@ import {FunctionsComponent} from './designer/functions/functions.component';
 import {ActionsComponent} from './designer/actions/actions.component';
 import {PackageCreationComponent} from './package-creation/package-creation.component';
 import {FormsModule} from '@angular/forms';
-import { ImportsTabComponent } from './package-creation/imports-tab/imports-tab.component';
-import { NgxFileDropModule } from 'ngx-file-drop';
-import { TemplateMappingComponent } from './package-creation/template-mapping/template-mapping.component';
+import {ImportsTabComponent} from './package-creation/imports-tab/imports-tab.component';
+import {NgxFileDropModule} from 'ngx-file-drop';
+import {TemplateMappingComponent} from './package-creation/template-mapping/template-mapping.component';
+import {SourceEditorComponent} from './source-editor/source-editor.component';
+import {ScriptsTabComponent} from './package-creation/scripts-tab/scripts-tab.component';
+import {AceEditorModule} from 'ng2-ace-editor';
+import {MetadataTabComponent} from './package-creation/metadata-tab/metadata-tab.component';
+import {DslDefinitionsTabComponent} from './package-creation/dsl-definitions-tab/dsl-definitions-tab.component';
 
 @NgModule({
     declarations: [PackagesDashboardComponent,
@@ -37,6 +42,10 @@ import { TemplateMappingComponent } from './package-creation/template-mapping/te
         PackageCreationComponent,
         ImportsTabComponent,
         TemplateMappingComponent,
+        SourceEditorComponent,
+        ScriptsTabComponent,
+        MetadataTabComponent,
+        DslDefinitionsTabComponent,
     ],
     imports: [
         CommonModule,
@@ -46,6 +55,7 @@ import { TemplateMappingComponent } from './package-creation/template-mapping/te
         SidebarModule.forRoot(),
         FormsModule,
         NgxFileDropModule,
+        AceEditorModule
     ],
     providers: [ApiService, JsonPipe],
     bootstrap: []
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.css
new file mode 100644
index 000000000..f60cc0e17
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.css
@@ -0,0 +1,7 @@
+.aceEditor {
+    overflow: hidden;
+    height: 100% !important;
+    background-color: white !important;
+    border: 1px solid #3f51b5;
+     border-left: 5px solid #3f51b5;
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.html
new file mode 100644
index 000000000..f934888a6
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.html
@@ -0,0 +1 @@
+<ace-editor [(text)]="text" [mode]="'javascript'" #editor style="height:150px;"></ace-editor>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.spec.ts
new file mode 100644
index 000000000..37386468b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SourceEditorComponent } from './source-editor.component';
+
+describe('SourceEditorComponent', () => {
+  let component: SourceEditorComponent;
+  let fixture: ComponentFixture<SourceEditorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SourceEditorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SourceEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts
new file mode 100644
index 000000000..9c3435d98
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/source-editor/source-editor.component.ts
@@ -0,0 +1,44 @@
+import { Component, OnInit, ViewChild, Input, AfterViewInit } from '@angular/core';
+// import 'brace/ext/searchbox';
+// import 'ace-builds/webpack-resolver';
+// import 'brace';
+// import 'brace/ext/language_tools';
+// import 'ace-builds/src-min-noconflict/snippets/html';
+
+@Component({
+  selector: 'app-source-editor',
+  templateUrl: './source-editor.component.html',
+  styleUrls: ['./source-editor.component.css']
+})
+export class SourceEditorComponent implements OnInit, AfterViewInit {
+
+
+  @Input() Data: string;
+  @Input() lang: string;
+  mode = 'json';
+  @ViewChild('editor', { static: false }) editor;
+  text = '';
+
+  ngOnInit(): void {
+    //  throw new Error("Method not implemented.");
+  }
+
+
+
+  ngAfterViewInit() {
+    this.editor.setTheme('eclipse');
+
+    this.editor.getEditor().setOptions({
+      enableBasicAutocompletion: true
+    });
+
+    this.editor.getEditor().commands.addCommand({
+      name: 'showOtherCompletions',
+      bindKey: 'Ctrl-.',
+      exec(editor) {
+
+      }
+    });
+  }
+
+}