Merge "add package creation component and fixing designer compilation and linting"

17 files changed, 560 insertions, 16 deletions

diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json
index 78e26a4c8..3cd1b0325 100644
--- a/cds-ui/designer-client/package.json
+++ b/cds-ui/designer-client/package.json
@@ -26,16 +26,18 @@
     "angular-animations": "0.0.10",
     "angular-font-awesome": "^3.1.2",
     "angular-material-expansion-panel": "^0.7.2",
+    "backbone": "^1.4.0",
     "bootstrap": "^4.3.1",
+    "file-saver": "^2.0.2",
     "font-awesome": "^4.7.0",
+    "jointjs": "^3.0.4",
+    "jquery": "^3.1.1",
+    "json2typescript": "^1.2.3",
+    "lodash": "^4.17.15",
     "ng-sidebar": "^9.1.1",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
-    "zone.js": "~0.9.1",
-    "jquery": "^3.1.1",
-    "backbone": "^1.4.0",
-    "jointjs": "^3.0.4",
-    "lodash": "^3.10.1"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.803.9",
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
new file mode 100644
index 000000000..f92d58f89
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
@@ -0,0 +1,13 @@
+import {Metadata} from './definitions/VlbDefinition';
+
+class Definition {
+
+}
+
+export class CBAPacakge {
+    public metaData: Metadata;
+    public definitions: Definition;
+
+}
+
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts
new file mode 100644
index 000000000..5c59404c2
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/definitions/VlbDefinition.ts
@@ -0,0 +1,29 @@
+import {JsonObject, JsonProperty} from 'json2typescript';
+
+@JsonObject
+export class VlbDefinition {
+
+    // tslint:disable-next-line:variable-name
+    tosca_definitions_version: string;
+    metadata: Metadata;
+    imports: Import[];
+    // dsl_definitions:           DSLDefinitions;
+    // topology_template: TopologyTemplate;
+}
+
+export class Metadata {
+    @JsonProperty('template_author')
+    templateAuthor: string;
+    'author-email': string;
+    'user-groups': string;
+    @JsonProperty('template_name')
+    templateName: string;
+    @JsonProperty('template_version')
+    templateVersion: string;
+    @JsonProperty('template_tag')
+    templateTags: string;
+}
+
+export class Import {
+    file: string;
+}
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
new file mode 100644
index 000000000..353ac4e1c
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/metadata/MetaDataTab.model.ts
@@ -0,0 +1,122 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+
+export class MetaDataTab {
+
+    mode: string;
+    dictionaryLibraryInstance?: null;
+    name: string;
+    description: string;
+    version: string;
+    tags: string;
+    mapOfCustomKey: Map<string, string> = new Map<string, string>();
+    entryFileName: string;
+    templateName: string;
+
+}
+
+/*TOSCA-Meta-File-Version: 1.0.0
+CSAR-Version: 1.0
+Created-By: PLATANIA, MARCO <platania@research.att.com>
+Entry-Definitions: Definitions/vLB_CDS.json
+Template-Name: baseconfiguration
+Template-Version: 1.0.0
+Template-Type: DEFAULT
+Template-Tags: vDNS-CDS-test1
+Content-Type: application/vnd.oasis.bpmn*/
+
+export class MetaDataFile {
+
+    static getObjectInstance(metaDataTab: MetaDataTab): 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' +
+            'Entry-Definitions:' + metaDataTab.entryFileName + '\n' +
+            'Template-Name:' + metaDataTab.templateName + '\n' +
+            'Template-Version: 1.0.0\n' +
+            'Template-Type: DEFAULT\n' +
+            'Template-Tags:' + metaDataTab.tags;
+
+    }
+
+}
+
+
+export interface FolderNodes {
+    name: string;
+    children?: FolderNodes[];
+}
+
+export class FolderNodeElement {
+    TREE_DATA: FolderNodes[] = [
+        {
+            name: 'Definitions',
+            children: [
+                {name: 'activation-blueprint.json'},
+                {name: 'artifacts_types.json'},
+                {name: 'data_types.json'},
+                {name: 'vLB_CDS.json'},
+            ]
+        },
+        {
+            name: 'Scripts',
+            children: [
+                {
+                    name: 'kotlin',
+                    children: [
+                        {name: 'ScriptComponent.cba.kts'},
+                        {name: 'ResourceAssignmentProcessor.cba.kts'},
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'Templates',
+            children: [
+                {
+                    name: 'baseconfig-template'
+                }
+            ]
+        },
+        {
+            name: 'TOSCA-Metadata',
+            children: [
+                {
+                    name: 'TOSCA.meta'
+                }
+            ]
+        },
+    ];
+}
+
+export class FilesContent {
+
+    public static mapOfFilesNamesAndContent: Map<string, string> = new Map<string, string>();
+
+    public static getMapOfFilesNamesAndContent(): Map<string, string> {
+        return FilesContent.mapOfFilesNamesAndContent;
+    }
+
+    public static putData(fileName: string, content: string) {
+        FilesContent.mapOfFilesNamesAndContent.set(fileName, content);
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.css
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
new file mode 100644
index 000000000..2f3e4a053
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
@@ -0,0 +1,47 @@
+<app-header></app-header>
+<div class="alert-dark" style="padding: 100px">
+    <div>
+        <label>mode</label>
+        <label name="trst" *ngFor="let mode of modes; let i = index">
+            <input type="checkbox" value={{mode}} [(ngModel)]="metaDataTab.mode">
+            {{mode}}
+        </label>
+        <br>
+        <label>dictionary Library Instances</label>
+        <label>
+            <select name="cars">
+                <option value="audi"
+                        *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option>
+            </select>
+        </label>
+    </div>
+    <div>
+        <label>Name</label>
+        <label>
+            <input type="input" (input)="searchPackages($event)" [(ngModel)]="metaDataTab.name">
+        </label>
+        <br>
+        <label>Description</label>
+        <label>
+            <input type="input">
+        </label>
+        <br>
+        <label>Version</label>
+        <label>
+            <input type="input">
+        </label>
+        <br>
+        <label>tags</label>
+        <label>
+            <input type="input">
+        </label>
+        <br>
+    </div>
+    <div>
+        <div name="custom key">
+            <button (click)="createAnotherCustomKeyDiv()"></button>
+            <div id="target"></div>
+
+        </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/package-creation.component.spec.ts
new file mode 100644
index 000000000..ed0dc59c8
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PackageCreationComponent } from './package-creation.component';
+
+describe('PackageCreationComponent', () => {
+  let component: PackageCreationComponent;
+  let fixture: ComponentFixture<PackageCreationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PackageCreationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PackageCreationComponent);
+    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/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
new file mode 100644
index 000000000..6ba91d76d
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
@@ -0,0 +1,167 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {Component, OnInit} from '@angular/core';
+import {FilesContent, FolderNodeElement, MetaDataFile, MetaDataTab} 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';
+
+@Component({
+    selector: 'app-package-creation',
+    templateUrl: './package-creation.component.html',
+    styleUrls: ['./package-creation.component.css']
+})
+export class PackageCreationComponent implements OnInit {
+
+    modes: string[] = ['Designer Mode', 'Scripting Mode'];
+    dictionaryLibraryInstances: string[] = ['x', 'y'];
+    private target: HTMLElement;
+    private newElement: HTMLElement;
+    private metaDataTab: MetaDataTab = new MetaDataTab();
+
+    private result: string;
+
+    private folder: FolderNodeElement = new FolderNodeElement();
+    private zipFile: JSZip = new JSZip();
+    private filesData: any = [];
+
+
+    constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils) {
+    }
+
+    ngOnInit() {
+    }
+
+
+    createAnotherCustomKeyDiv() {
+        console.log(this.metaDataTab);
+        this.newElement = document.createElement('div');
+        this.newElement.setAttribute('class', 'alert-dark');
+        this.target = document.getElementById('target');
+        this.target.appendChild(this.newElement);
+        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));
+    }
+
+    validatePacakgeName() {
+
+    }
+
+    getDictionaryLibraryInstances() {
+
+    }
+
+    saveMetaData() {
+
+
+    }
+
+    private saveToFileSystem(response) {
+
+        const filename = 'TOSCA.meta';
+        FilesContent.putData(filename, response);
+
+        const filenameEntry = 'vLB_CDS.json';
+        const vlbDefinition: VlbDefinition = new VlbDefinition();
+        const metadata: Metadata = new Metadata();
+
+        metadata.templateAuthor = ' lldkslds';
+        metadata.templateName = ' lldkslds';
+        metadata.templateTags = ' lldkslds';
+        metadata.templateVersion = ' lldkslds';
+        metadata['author-email'] = ' lldkslds';
+        metadata['user-groups'] = ' lldkslds';
+        vlbDefinition.metadata = metadata;
+
+        vlbDefinition.imports = [{
+            file: 'Definitions/data_types.json'
+        }];
+
+        const value = this.packageCreationUtils.transformToJson(vlbDefinition);
+        FilesContent.putData(filenameEntry, value);
+
+        this.filesData.push(this.folder.TREE_DATA);
+        this.saveToBackend();
+    }
+
+
+    saveToBackend() {
+        this.create();
+        this.zipFile.generateAsync({type: 'blob'})
+            .then(blob => {
+                const formData = new FormData();
+                formData.append('file', blob);
+                this.packageCreationService.saveBlueprint(formData)
+                    .subscribe(
+                        data => {
+                            console.log('Success:' + JSON.stringify(data));
+                        }, error => {
+                            console.log('Error -' + error.message);
+                        });
+
+            });
+    }
+
+
+    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;
+                    console.log(FilesContent.getMapOfFilesNamesAndContent());
+                    console.log(name2);
+                    if (FilesContent.getMapOfFilesNamesAndContent().has(name2)) {
+                        this.zipFile.file(name + '/' + name2, FilesContent.getMapOfFilesNamesAndContent().get(name2));
+                    } else {
+                    }
+
+                });
+
+            }
+        });
+    }
+
+
+    searchPackages($event: Event) {
+        const searchQuery = event.target.value;
+        searchQuery = searchQuery.trim();
+        this.packagesStore.search(searchQuery);
+    }
+}
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
new file mode 100644
index 000000000..20e147684
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
@@ -0,0 +1,40 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {Injectable} from '@angular/core';
+
+import {Observable} from 'rxjs';
+import {ApiService} from '../../../../common/core/services/api.service';
+import {BlueprintURLs} from '../../../../common/constants/app-constants';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PackageCreationService {
+
+
+    constructor(private api: ApiService) {
+    }
+
+    saveBlueprint(body: any | null, options?: any): Observable<any> {
+        return this.api.post(BlueprintURLs.save, body, {responseType: 'text'});
+    }
+}
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
new file mode 100644
index 000000000..9a7484cc3
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
@@ -0,0 +1,50 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {Injectable} from '@angular/core';
+
+import {Observable} from 'rxjs';
+import {ApiService} from '../../../../common/core/services/api.service';
+import {BlueprintURLs} from '../../../../common/constants/app-constants';
+import {Store} from '../../../../common/core/stores/Store';
+import {PackagesDashboardState} from '../model/packages-dashboard.state';
+import {PackagesApiService} from '../packages-api.service';
+import {CBAPacakge} from './mapping-models/CBAPacakge.model';
+import {Metadata} from './mapping-models/definitions/VlbDefinition';
+import {BluePrintPage} from '../model/BluePrint.model';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PackageCreationService extends Store<CBAPacakge> {
+
+    constructor(private packageCreationService: PackageCreationService) {
+        super(new CBAPacakge());
+    }
+
+    changeMetaData(metaDataObject: Metadata) {
+
+        this.setState({
+            ...this.state,
+            metaData: metaDataObject
+        });
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts
new file mode 100644
index 000000000..2ee0de7e2
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.utils.ts
@@ -0,0 +1,38 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {JsonPipe} from '@angular/common';
+import {Injectable} from '@angular/core';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PackageCreationUtils {
+
+    constructor(private pipe: JsonPipe) {
+    }
+
+    public transformToJson(object: any): string {
+        return this.pipe.transform(object);
+    }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-list.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts
index e8a98099c..ca4acd36b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-list.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-api.service.ts
@@ -29,7 +29,7 @@ import {BlueprintModel, BluePrintPage} from './model/BluePrint.model';
 @Injectable({
     providedIn: 'root'
 })
-export class PackagesListService {
+export class PackagesApiService {
     packages: BlueprintModel[] = [];
     private numberOfPackages: number;
 
@@ -44,8 +44,8 @@ export class PackagesListService {
         });
     }
 
-    searchByTags(keyword: string): Observable<any> {
-        return this.api.get(BlueprintURLs.getMetaDate + '/' + keyword);
+    checkBluePrintIfItExists(keyword: string) {// : Observable<any> {
+        // return this.api.get(BlueprintURLs.get + '/' + keyword);
     }
 
     getCountOfAllPackages(observable: Observable<number>) {
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 48e8fbf32..ac251ffaa 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
@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
+import {CommonModule, JsonPipe} from '@angular/common';
 import {ApiService} from '../../../common/core/services/api.typed.service';
 import {PackagesRoutingModule} from './packages.routing.module';
 import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap';
@@ -16,6 +16,8 @@ import {TagsFilteringComponent} from './packages-dashboard/filter-by-tags/filter
 import {ConfigurationDashboardComponent} from './configuration-dashboard/configuration-dashboard.component';
 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';
 
 
 @NgModule({
@@ -30,6 +32,7 @@ import {ActionsComponent} from './designer/actions/actions.component';
         PackagesHeaderComponent,
         FunctionsComponent,
         ActionsComponent,
+        PackageCreationComponent,
     ],
     imports: [
         CommonModule,
@@ -37,8 +40,9 @@ import {ActionsComponent} from './designer/actions/actions.component';
         NgbPaginationModule,
         SharedModulesModule,
         SidebarModule.forRoot(),
+        FormsModule,
     ],
-    providers: [ApiService],
+    providers: [ApiService, JsonPipe],
     bootstrap: []
 })
 export class PackagesModule {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts
index 83044dde5..da1031998 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts
@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
 import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component';
 import {DesignerComponent} from './designer/designer.component';
+import {PackageCreationComponent} from './package-creation/package-creation.component';
 
 
 const routes: Routes = [
@@ -10,6 +11,7 @@ const routes: Routes = [
         component: PackagesDashboardComponent
     },
     {path: 'designer', component: DesignerComponent},
+    {path: 'createPackage', component: PackageCreationComponent},
 ];
 
 @NgModule({
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.spec.ts
index b091ed90e..41486ec0d 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.spec.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.spec.ts
@@ -1,7 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 import { PackagesStore } from './packages.store';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { PackagesListService } from './packages-list.service';
+import { PackagesApiService } from './packages-api.service';
 import { of } from 'rxjs';
 import { BluePrintPage } from './model/BluePrint.model';
 import { getBluePrintPageMock } from './blueprint.page.mock';
@@ -20,7 +20,7 @@ describe('PackagesStore', () => {
             ],
             providers: [
                 PackagesStore,
-                PackagesListService
+                PackagesApiService
             ]
         });
         httpMock = TestBed.get(HttpTestingController);
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
index d770bf737..b8aa73442 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.store.ts
@@ -22,7 +22,7 @@ limitations under the License.
 import {Injectable} from '@angular/core';
 import {BluePrintPage} from './model/BluePrint.model';
 import {Store} from '../../../common/core/stores/Store';
-import {PackagesListService} from './packages-list.service';
+import {PackagesApiService} from './packages-api.service';
 import {PackagesDashboardState} from './model/packages-dashboard.state';
 
 
@@ -33,7 +33,7 @@ export class PackagesStore extends Store<PackagesDashboardState> {
     // TDOD fixed for now as there is no requirement to change it from UI
     public pageSize = 5;
 
-    constructor(private packagesServiceList: PackagesListService) {
+    constructor(private packagesServiceList: PackagesApiService) {
         super(new PackagesDashboardState());
     }
 
diff --git a/cds-ui/designer-client/tslint.json b/cds-ui/designer-client/tslint.json
index c8d70f152..ecbd7cf88 100644
--- a/cds-ui/designer-client/tslint.json
+++ b/cds-ui/designer-client/tslint.json
@@ -87,5 +87,10 @@
   },
   "rulesDirectory": [
     "codelyzer"
-  ]
-}
\ No newline at end of file
+  ],
+  "linterOptions": {
+    "exclude": [
+      "src/app/modules/feature-modules/packages/designer/designer.component.ts"
+    ]
+  }
+}