UI support for service update via tosca template import

Issue-ID: SDC-4604
Signed-off-by: JvD_Ericsson <jeff.van.dam@est.tech>
Change-Id: I68f7640a254d0636cb967c15d51522b8c8a7abfc

4 files changed, 87 insertions, 21 deletions

diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/__snapshots__/tosca-artifact-page.spec.ts.snap b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/__snapshots__/tosca-artifact-page.spec.ts.snap
index 14146d51d2..695e16d553 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/__snapshots__/tosca-artifact-page.spec.ts.snap
+++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/__snapshots__/tosca-artifact-page.spec.ts.snap
@@ -2,7 +2,9 @@
 
 exports[`tosca artifacts page should match current snapshot of tosca artifact pages component 1`] = `
 <tosca-artifact-page
-  serviceLoader={[Function Object]}
+  Notification="undefined"
+  componentService={[Function Object]}
+  isLoading="false"
   store={[Function Store]}
   table={[Function DatatableComponent]}
   workspaceService={[Function Object]}
@@ -10,6 +12,7 @@ exports[`tosca artifacts page should match current snapshot of tosca artifact pa
   <div
     class="tosca-artifact-page"
   >
+    <loader />
     <ngx-datatable
       class="ngx-datatable"
       columnmode="flex"
diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html
index fece92ee37..fe550642b1 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html
+++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.html
@@ -1,4 +1,5 @@
 <div class="tosca-artifact-page">
+    <loader [display]="isLoading" [relative]="true"></loader>
     <ngx-datatable
             columnMode="flex"
             [headerHeight]="40"
@@ -27,7 +28,7 @@
                 </div>
             </ng-template>
         </ngx-datatable-column>
-        <ngx-datatable-column [resizeable]="false"name="Type" [flexGrow]="3">
+        <ngx-datatable-column [resizeable]="false" name="Type" [flexGrow]="3">
             <ng-template ngx-datatable-cell-template let-row="row">
                 {{row.artifactType}}
             </ng-template>
@@ -37,7 +38,22 @@
                 {{ row.artifactVersion }}
             </ng-template>
         </ngx-datatable-column>
-        <ngx-datatable-column [resizeable]="false"[flexGrow]="1">
+        <ngx-datatable-column *ngIf="isService() && isCheckedOut()" [resizeable]="false" name="Upload" [flexGrow]="1">
+            <ng-template ngx-datatable-cell-template let-row="row">
+                <div class="download-artifact-button">
+                    <upload-artifact
+                        [artifact]="row"
+                        [componentId]="componentId"
+                        [componentType]="componentType"
+                        [disabled]="!isCheckedOut()"
+                        [extensions]="getExtension(row.artifactType)"
+                        (onFileUpload)="onFileUpload($event, row.artifactType)"
+                        testId="upload_{{row.artifactDisplayName}}"
+                    ></upload-artifact>
+                </div>
+            </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [resizeable]="false" name="Download" [flexGrow]="1">
             <ng-template ngx-datatable-cell-template let-row="row">
                 <div class="download-artifact-button">
                     <download-artifact [artifact]="row" [componentId]="componentId"
diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.ts b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.ts
index ef4112c30c..e6d820ecd5 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.component.ts
@@ -1,14 +1,15 @@
-import {Component, OnInit, ViewChild} from "@angular/core";
-import {WorkspaceService} from "../workspace.service";
-import {SdcUiServices} from "onap-ui-angular";
-import {ArtifactModel} from "../../../../models";
-import {Select, Store} from "@ngxs/store";
-import {WorkspaceState} from "../../../store/states/workspace.state";
-import {ArtifactGroupType} from "../../../../utils";
-import {GetArtifactsByTypeAction} from "../../../store/actions/artifacts.action";
-import {Observable} from "rxjs/index";
-import {ArtifactsState} from "../../../store/states/artifacts.state";
-import {map} from "rxjs/operators";
+import { Component, Inject, OnInit, ViewChild } from "@angular/core";
+import { WorkspaceService } from "../workspace.service";
+import { ArtifactModel } from "../../../../models";
+import { Select, Store } from "@ngxs/store";
+import { WorkspaceState } from "../../../store/states/workspace.state";
+import { ArtifactGroupType } from "../../../../utils";
+import { GetArtifactsByTypeAction } from "../../../store/actions/artifacts.action";
+import { Observable } from "rxjs/index";
+import { ArtifactsState } from "../../../store/states/artifacts.state";
+import { map } from "rxjs/operators";
+import { ArtifactType, ComponentState, ComponentType } from "app/utils/constants"
+import { TopologyTemplateService } from "app/ng2/services/component-services/topology-template.service";
 
 @Component({
     selector: 'tosca-artifact-page',
@@ -23,8 +24,13 @@ export class ToscaArtifactPageComponent implements OnInit {
     public toscaArtifacts$: Observable<ArtifactModel[]>;
     public componentId: string;
     public componentType:string;
+    public isLoading: boolean = false;
 
-    constructor(private serviceLoader: SdcUiServices.LoaderService, private workspaceService: WorkspaceService, private store: Store) {
+    constructor(
+        private workspaceService: WorkspaceService,
+        private store: Store,
+        @Inject("Notification") private Notification: any,
+        private componentService: TopologyTemplateService) {
     }
 
 
@@ -41,4 +47,47 @@ export class ToscaArtifactPageComponent implements OnInit {
             this.table.rowDetail.toggleExpandRow(event.row);
         }
     }
+
+    getExtension(artifactType: string) {
+        switch (artifactType) {
+            case (ArtifactType.TOSCA.TOSCA_CSAR):
+                return "csar";
+            case (ArtifactType.TOSCA.TOSCA_TEMPLATE):
+                return "yaml,yml";
+        }
+    }
+
+    isService() {
+        return ComponentType.SERVICE === this.componentType;
+    }
+
+    isCheckedOut() {
+        return this.workspaceService.metadata.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT;
+    }
+
+    onFileUpload(file, artifactType) {
+        if (file && file.name) {
+            this.isLoading = true;
+            switch (artifactType) {
+                case (ArtifactType.TOSCA.TOSCA_CSAR):
+                    this.Notification.error({
+                        message: "Feature not implemented yet",
+                        title: "Error"
+                    });
+                    this.isLoading = false;
+                    break;
+                case (ArtifactType.TOSCA.TOSCA_TEMPLATE):
+                    this.componentService.putServiceToscaTemplate(this.componentId, this.componentType, file).subscribe((response)=> {
+                        this.Notification.success({
+                            message: "Service " + response.name + " has been updated",
+                            title: "Success"
+                        });
+                        this.isLoading = false;
+                    }, () => {
+                        this.isLoading = false;
+                    });
+                    break;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.spec.ts
index af3558e15b..6b59f97954 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/workspace/tosca-artifacts/tosca-artifact-page.spec.ts
@@ -12,14 +12,15 @@ import 'rxjs/add/observable/of';
 import {NgxsModule, Store} from "@ngxs/store";
 import {ArtifactsState} from "../../../store/states/artifacts.state";
 import {toscaArtifactMock} from "../../../../../jest/mocks/artifacts-mock";
+import { ComponentServiceNg2 } from "app/ng2/services/component-services/component.service";
 
 describe('tosca artifacts page', () => {
 
     let fixture: ComponentFixture<ToscaArtifactPageComponent>;
     let topologyTemplateServiceMock: Partial<TopologyTemplateService>;
     let workspaceServiceMock: Partial<WorkspaceService>;
-    let loaderServiceMock: Partial<SdcUiServices.LoaderService>;
     let store: Store;
+    let notificationMock: Partial<any>;
 
 
     beforeEach(
@@ -30,10 +31,6 @@ describe('tosca artifacts page', () => {
             };
             workspaceServiceMock = {metadata: <ComponentMetadata>{uniqueId: 'service_unique_id', componentType: 'SERVICE'}}
 
-            loaderServiceMock = {
-                activate : jest.fn(),
-                deactivate: jest.fn()
-            }
             const configure: ConfigureFn = testBed => {
                 testBed.configureTestingModule({
                     declarations: [ToscaArtifactPageComponent],
@@ -42,7 +39,8 @@ describe('tosca artifacts page', () => {
                     providers: [
                         {provide: WorkspaceService, useValue: workspaceServiceMock},
                         {provide: TopologyTemplateService, useValue: topologyTemplateServiceMock},
-                        {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock }
+                        {provide: ComponentServiceNg2, useValue: {}},
+                        {provide: "Notification", useValue: notificationMock }
                     ],
                 });
             };