Import data type in UI

Develop all necessary changes in the UI to allow importing a data type from a yaml file

Issue-ID: SDC-4279
Signed-off-by: franciscovila <javier.paradela.vila@est.tech>
Change-Id: Id413386fad8b362e8c4a1d25c859a22178189074

5 files changed, 61 insertions, 4 deletions

diff --git a/catalog-ui/src/app/ng2/pages/home/__snapshots__/home.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/home/__snapshots__/home.component.spec.ts.snap
index 42686c1567..dd864d48f7 100644
--- a/catalog-ui/src/app/ng2/pages/home/__snapshots__/home.component.spec.ts.snap
+++ b/catalog-ui/src/app/ng2/pages/home/__snapshots__/home.component.spec.ts.snap
@@ -12,7 +12,9 @@ exports[`home component should match current snapshot 1`] = `
   isDefaultFilter={[Function Function]}
   loaderService={[Function Object]}
   modalService={[Function Object]}
+  modalServiceSdc="undefined"
   modalsHandler={[Function Object]}
+  openModalImportType={[Function Function]}
   resourceService={[Function Object]}
   sdcConfig={[Function Object]}
   sdcMenu={[Function Object]}
diff --git a/catalog-ui/src/app/ng2/pages/home/home.component.html b/catalog-ui/src/app/ng2/pages/home/home.component.html
index 0c2e41eb11..b16b30b2b2 100644
--- a/catalog-ui/src/app/ng2/pages/home/home.component.html
+++ b/catalog-ui/src/app/ng2/pages/home/home.component.html
@@ -58,6 +58,7 @@
                                 (fileUpload)="onImportService($event)"
                                 [convertToBase64]="true"
                             ></sdc-button-file-opener>
+                            <sdc-button *ngIf="roles[user.role].dashboard.showCreateNew" testId="importTypebutton" size="medium" type="secondary" text="Import Type" (click)="openModalImportType()"></sdc-button>
                         </div>
                     </div>
                 </div>
diff --git a/catalog-ui/src/app/ng2/pages/home/home.component.spec.ts b/catalog-ui/src/app/ng2/pages/home/home.component.spec.ts
index 1c03790e04..2642b9e41b 100644
--- a/catalog-ui/src/app/ng2/pages/home/home.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/home/home.component.spec.ts
@@ -7,7 +7,7 @@ import {HomeComponent} from "./home.component";
 import {ConfigureFn, configureTests} from "../../../../jest/test-config.helper";
 import {NO_ERRORS_SCHEMA} from "@angular/core";
 import {TranslateService} from "../../shared/translator/translate.service";
-import {AuthenticationService, CacheService, HomeService, ImportVSPService, ResourceServiceNg2} from '../../../../app/services-ng2';
+import {AuthenticationService, CacheService, HomeService, ImportVSPService, ModalService, ResourceServiceNg2} from '../../../../app/services-ng2';
 import {ModalsHandler} from "../../../../app/utils";
 import {SdcUiServices} from "onap-ui-angular";
 import {ComponentType, ResourceType} from "../../../utils/constants";
@@ -23,6 +23,7 @@ describe('home component', () => {
     let importVspService: Partial<ImportVSPService>;
     let mockStateService;
     let modalServiceMock :Partial<SdcUiServices.ModalService>;
+    let modalServiceMock_ :Partial<ModalService>;
     let translateServiceMock : Partial<TranslateService>;
     let foldersItemsMenuMock;
     let homeFilterMock :Partial<HomeFilter>;
@@ -79,6 +80,7 @@ describe('home component', () => {
                         {provide: TranslateService, useValue: translateServiceMock},
                         {provide: ModalsHandler, useValue: {}},
                         {provide: SdcUiServices.ModalService, useValue: modalServiceMock},
+                        {provide: ModalService, useValue: modalServiceMock_},
                         {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock},
                         {provide: ImportVSPService, useValue: {}},
                         {provide: ResourceServiceNg2, useValue: resourceServiceNg2Mock}
diff --git a/catalog-ui/src/app/ng2/pages/home/home.component.ts b/catalog-ui/src/app/ng2/pages/home/home.component.ts
index 784823eacd..666b36eb8e 100644
--- a/catalog-ui/src/app/ng2/pages/home/home.component.ts
+++ b/catalog-ui/src/app/ng2/pages/home/home.component.ts
@@ -19,10 +19,20 @@
  */
 'use strict';
 import {Component as NgComponent, Inject, OnInit} from '@angular/core';
-import {Component, ComponentMetadata, IConfigRoles, IUserProperties, Resource, Service} from 'app/models';
+import {
+    ButtonModel,
+    Component,
+    ComponentMetadata,
+    IConfigRoles,
+    IUserProperties,
+    ModalModel,
+    Resource,
+    Service
+} from 'app/models';
+import {ModalService} from "../../services/modal.service";
 import {HomeFilter} from 'app/models/home-filter';
 import {AuthenticationService, CacheService, HomeService, ResourceServiceNg2} from 'app/services-ng2';
-import {ComponentState, ModalsHandler} from 'app/utils';
+import {ComponentState, ModalsHandler, States} from 'app/utils';
 import {SdcUiServices} from 'onap-ui-angular';
 import {CHANGE_COMPONENT_CSAR_VERSION_FLAG, ComponentType, ResourceType} from '../../../utils/constants';
 import {ImportVSPService} from '../../components/modals/onboarding-modal/import-vsp.service';
@@ -33,6 +43,7 @@ import {TranslateService} from '../../shared/translator/translate.service';
 import {FoldersItemsMenu, FoldersItemsMenuGroup, FoldersMenu} from './folders';
 import {ImportVSPdata} from "../../components/modals/onboarding-modal/onboarding-modal.component";
 import {DataTypeCatalogComponent} from "../../../models/data-type-catalog-component";
+import {ModalImportTypeComponent} from "../../components/ui/modal-import-type/modal-import-type.component";
 
 @NgComponent({
     selector: 'home-page',
@@ -64,6 +75,7 @@ export class HomeComponent implements OnInit {
         private translateService: TranslateService,
         private modalsHandler: ModalsHandler,
         private modalService: SdcUiServices.ModalService,
+        private modalServiceSdc: ModalService,
         private loaderService: SdcUiServices.LoaderService,
         private importVSPService: ImportVSPService,
         private resourceService: ResourceServiceNg2
@@ -398,4 +410,41 @@ export class HomeComponent implements OnInit {
         this.notificationIconCallback = this.notificationIconCallback.bind(this);
     }
 
+    openModalImportType = () => {
+        let modalTitle = 'Import Type';
+        let modal = this.modalServiceSdc.createCustomModal(new ModalModel(
+            'sm',
+            modalTitle,
+            null,
+            [
+                new ButtonModel('Import', 'blue', () =>
+                { this.uploadDataTypeFile(modal.instance.dynamicContent.instance.file); modal.instance.close();}, () => false),
+                new ButtonModel('Cancel', 'outline grey', () => {
+                    modal.instance.close();
+                }),
+            ],
+            null
+        ));
+        this.modalServiceSdc.addDynamicContentToModal(modal, ModalImportTypeComponent, {});
+        modal.instance.open();
+    }
+
+    private uploadDataTypeFile(file: any): void {
+        if (file && file.name) {
+            // Check that the file has valid extension.
+            const fileExtension: string = file.name.split('.').pop();
+            if (this.sdcConfig.toscaFileExtension.indexOf(fileExtension.toLowerCase()) !== -1) {
+                this.$state.go(States.TYPE_WORKSPACE, {
+                    type: "datatype",
+                    subPage: "general",
+                    id: "import",
+                    importedFile: file
+                });
+            } else {
+                const title: string = this.translateService.translate('NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS_TITLE');
+                const message: string = this.translateService.translate('NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS', {extensions: this.sdcConfig.toscaFileExtension});
+                this.modalService.openWarningModal(title, message, 'error-invalid-tosca-ext');
+            }
+        }
+    }
 }
diff --git a/catalog-ui/src/app/ng2/pages/home/home.module.ts b/catalog-ui/src/app/ng2/pages/home/home.module.ts
index 1a397b44be..acfc299a31 100644
--- a/catalog-ui/src/app/ng2/pages/home/home.module.ts
+++ b/catalog-ui/src/app/ng2/pages/home/home.module.ts
@@ -7,6 +7,7 @@ import { GlobalPipesModule } from "../../pipes/global-pipes.module";
 import { TranslateModule } from "../../shared/translator/translate.module";
 import { SdcUiComponentsModule } from "onap-ui-angular";
 import { ResourceServiceNg2 } from "../../services/component-services/resource.service";
+import {ModalImportTypeComponent} from "../../components/ui/modal-import-type/modal-import-type.component";
 
 @NgModule({
     declarations: [
@@ -19,12 +20,14 @@ import { ResourceServiceNg2 } from "../../services/component-services/resource.s
         UiElementsModule,
         GlobalPipesModule,
         TranslateModule
+
     ],
     exports: [
         HomeComponent
     ],
     entryComponents: [
-        HomeComponent
+        HomeComponent,
+        ModalImportTypeComponent
     ],
     providers: [ResourceServiceNg2]
 })