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, 208 insertions, 2 deletions

diff --git a/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.html b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.html
new file mode 100644
index 0000000000..37439f8d70
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.html
@@ -0,0 +1,51 @@
+<!--
+  ~ -
+  ~  ============LICENSE_START=======================================================
+  ~  Copyright (C) 2023 Nordix Foundation.
+  ~  ================================================================================
+  ~  Licensed under the Apache License, Version 2.0 (the "License");
+  ~  you may not use this file 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.
+  ~
+  ~  SPDX-License-Identifier: Apache-2.0
+  ~  ============LICENSE_END=========================================================
+  -->
+<div class="import-type-container">
+
+    <form novalidate class="w-sdc-form" name="importForm" validation-on-load form-to-validate="importForm">
+
+        <div class="w-sdc-form-section-container">
+
+                <div class="i-sdc-form-item">
+                    <label class="i-sdc-form-label required">Type</label>
+                    <select class="i-sdc-form-select"
+                            data-ng-class="{'view-mode': true}"
+                            data-ng-disabled="false"
+
+                            data-tests-id="selectType"
+                            data-ng-required="true"
+
+                            >
+                        <option value="" selected>Data Type</option>
+                    </select>
+                </div>
+
+                <div class="i-sdc-form-item">
+                  <label class="i-sdc-form-label required">Select File to Import
+                    <input (change)="onFileChange($event)" type="file" class="i-sdc-dashboard-item-upload-input"/>
+                  </label>
+                </div>
+
+            </div>
+
+    </form>
+
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.less b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.less
new file mode 100644
index 0000000000..8c391c52c8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.less
@@ -0,0 +1,60 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file 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.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
+.import-type-container {
+    max-width: 100%;
+}
+
+.default-value-container {
+    overflow: scroll;
+    max-height: 300px;
+    max-width: 100%;
+
+    ul {
+        margin: 0 0 0 20px;
+        list-style: none;
+        line-height: 2em;
+    }
+
+    &::-webkit-scrollbar-track {
+         border: 0;
+     }
+}
+
+.input-label {
+    margin: 0;
+    font-weight: bold;
+}
+
+.input-value {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 7px;
+
+    input {
+        min-width: 150px;
+        max-width: 250px;
+    }
+}
+
+.empty-value {
+    color: #aaaaaa;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.spec.ts b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.spec.ts
new file mode 100644
index 0000000000..9e785638d8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file 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.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalImportTypeComponent } from './modal-import-type.component';
+
+describe('ModalImportTypeComponent', () => {
+  let component: ModalImportTypeComponent;
+  let fixture: ComponentFixture<ModalImportTypeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModalImportTypeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalImportTypeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.ts b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.ts
new file mode 100644
index 0000000000..2c56b2ef7f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.ts
@@ -0,0 +1,47 @@
+/*
+ * -
+ *  ============LICENSE_START=======================================================
+ *  Copyright (C) 2023 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file 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.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+import {Component, Inject, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-modal-import-type',
+  templateUrl: './modal-import-type.component.html',
+  styleUrls: ['./modal-import-type.component.less']
+})
+export class ModalImportTypeComponent implements OnInit {
+
+  file:File = null;
+
+  constructor() {}
+
+  ngOnInit() {
+  }
+
+  onFileChange(event: any) {
+      this.file = event.target.files[0];
+  }
+
+  public onImportDataType(file: any): void {
+    if (file && file.filename) {
+        console.log("file: " + file.filename);
+    }
+  }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
index cdb173cb12..8e0a66c8f5 100644
--- a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
@@ -44,6 +44,7 @@ import {FileOpenerComponent} from "./file-opener/file-opener.component";
 import {DownloadArtifactComponent} from "app/ng2/components/ui/download-artifact/download-artifact.component";
 import {SdcElementIconComponent} from "./sdc-element-icon/sdc-element-icon.component";
 import {PanelWrapperComponent} from "./panel-wrapper/panel-wrapper.component";
+import { ModalImportTypeComponent } from './modal-import-type/modal-import-type.component';
 
 @NgModule({
     declarations: [
@@ -56,7 +57,8 @@ import {PanelWrapperComponent} from "./panel-wrapper/panel-wrapper.component";
         FileOpenerComponent,
         SdcElementIconComponent,
         DownloadArtifactComponent,
-        PanelWrapperComponent
+        PanelWrapperComponent,
+        ModalImportTypeComponent
     ],
 
     imports: [
@@ -97,7 +99,8 @@ import {PanelWrapperComponent} from "./panel-wrapper/panel-wrapper.component";
         SdcElementIconComponent,
         FileOpenerComponent,
         DownloadArtifactComponent,
-        PanelWrapperComponent
+        PanelWrapperComponent,
+        ModalImportTypeComponent
     ],
     entryComponents: [SearchWithAutoCompleteComponent, SdcElementIconComponent, PaletteAnimationComponent]
 })