Add UI support for adding tosca artifact types

UI support for adding artifacts to an interface operation implementation

Issue-ID: SDC-3768
Signed-off-by: aribeiro <anderson.ribeiro@est.tech>
Change-Id: I71b3e49a160521e35a45515ad7adef836f901e78

3 files changed, 151 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/property-param-row/property-param-row.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/property-param-row/property-param-row.component.html
new file mode 100644
index 0000000000..ef7b94ccc1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/property-param-row/property-param-row.component.html
@@ -0,0 +1,44 @@
+<!--
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2021 Nordix Foundation. All rights reserved.
+ * ================================================================================
+ * 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.
+ * ============LICENSE_END=========================================================
+ -->
+
+<div class="cell field-input-name">
+    <sdc-input
+        [(value)]="artifactProperty.name"
+        [disabled]="true"
+        testId="interface-operation-input-name">
+    </sdc-input>
+</div>
+
+<div class="cell field-input-type">
+    <sdc-input
+        [(value)]="artifactProperty.type"
+        [disabled]="true"
+        testId="operation-implementation-property-type">
+    </sdc-input>
+</div>
+
+<div class="cell field-input-value">
+    <dynamic-element
+        [(value)]="artifactProperty.value"
+        data-tests-id="operation-implementation-property-value"
+        (elementChanged)="isPropertyValueValid($event)"
+        [type]="artifactProperty ? artifactProperty.type : 'string'">
+    </dynamic-element>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/property-param-row/property-param-row.component.less b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/property-param-row/property-param-row.component.less
new file mode 100644
index 0000000000..12eacc6473
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/property-param-row/property-param-row.component.less
@@ -0,0 +1,72 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2021 Nordix Foundation. All rights reserved.
+ * ================================================================================
+ * 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.
+ * ============LICENSE_END=========================================================
+ */
+
+@import '../../../../../../../assets/styles/variables.less';
+
+.remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg-icon {
+        position: relative;
+        right: -3px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+}
+
+.cell {
+    min-height: 50px;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    > * {
+        flex-basis: 100%;
+    }
+
+    /deep/ select {
+        height: 30px;
+    }
+
+    input {
+        height: 30px;
+        border: none;
+        padding-left: 10px;
+    }
+
+    select {
+        width: 100%;
+    }
+
+    &.field-property {
+        &:last-child {
+            flex: 1;
+        }
+
+        .no-properties-error {
+            color: @func_color_q;
+            font-style: italic;
+        }
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/property-param-row/property-param-row.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/property-param-row/property-param-row.component.ts
new file mode 100644
index 0000000000..6ae75fa5d9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/property-param-row/property-param-row.component.ts
@@ -0,0 +1,35 @@
+/*
+* ============LICENSE_START=======================================================
+* SDC
+* ================================================================================
+*  Copyright (C) 2021 Nordix Foundation. All rights reserved.
+*  ================================================================================
+*  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, Input} from '@angular/core';
+import {PropertyOperationParameter} from "../../../../../../models/interfaceOperation";
+
+@Component({
+  selector: 'property-param-row',
+  templateUrl: './property-param-row.component.html',
+  styleUrls: ['./property-param-row.component.less']
+})
+
+export class PropertyParamRowComponent {
+  @Input() artifactProperty: PropertyOperationParameter;
+  @Input() isPropertyValueValid: Function;
+
+}