This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch
3116-refactor-staticruntimeresolvabletreeinput-into-smaller-subcomponents
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to
refs/heads/3116-refactor-staticruntimeresolvabletreeinput-into-smaller-subcomponents
by this push:
new 8745fa6e05 refactor(#3116): Add test to show node details
8745fa6e05 is described below
commit 8745fa6e050ef115e67bb58eb7445770d534beca
Author: Philipp Zehnder <[email protected]>
AuthorDate: Mon Aug 12 10:51:48 2024 +0200
refactor(#3116): Add test to show node details
---
.../utils/userInput/TreeStaticPropertyUtils.ts | 26 ++++++++++++++++++++
.../tests/connect/opcAdapterConfiguration.spec.ts | 9 +++++++
...ic-runtime-resolvable-tree-input.component.html | 5 ++--
...ic-runtime-resolvable-tree-input.component.scss | 18 --------------
...atic-runtime-resolvable-tree-input.component.ts | 7 +++++-
.../static-tree-input-browse-nodes.component.html | 28 +++++++---------------
.../static-tree-input-browse-nodes.component.ts | 17 ++++++++++---
7 files changed, 66 insertions(+), 44 deletions(-)
diff --git a/ui/cypress/support/utils/userInput/TreeStaticPropertyUtils.ts
b/ui/cypress/support/utils/userInput/TreeStaticPropertyUtils.ts
index 43ea0b451c..118a562542 100644
--- a/ui/cypress/support/utils/userInput/TreeStaticPropertyUtils.ts
+++ b/ui/cypress/support/utils/userInput/TreeStaticPropertyUtils.ts
@@ -55,6 +55,32 @@ export class TreeStaticPropertyUtils {
);
}
+ /**
+ * Validates the number of node details metadata rows displayed.
+ */
+ public static validateAmountOfShownNodeDetailsMetaDataRows(
+ expectedAmount: number,
+ ) {
+ cy.dataCy('node-details-metadata-row-', {}, true).should(
+ 'have.length',
+ expectedAmount,
+ );
+ }
+
+ /**
+ * Select node to be shown in node details
+ */
+ public static showNodeDetails(nodeName: string) {
+ cy.dataCy(`show-node-details-${nodeName}`).click();
+ }
+
+ /**
+ * Unselect the node to be removed from node details view
+ */
+ public static hideNodeDetails(nodeName: string) {
+ cy.dataCy('hide-node-details-' + nodeName).click();
+ }
+
/**
* Validates that the @param nodeName is marked as selected in the
* tree view.
diff --git a/ui/cypress/tests/connect/opcAdapterConfiguration.spec.ts
b/ui/cypress/tests/connect/opcAdapterConfiguration.spec.ts
index 08af064ffb..57b10bd41a 100644
--- a/ui/cypress/tests/connect/opcAdapterConfiguration.spec.ts
+++ b/ui/cypress/tests/connect/opcAdapterConfiguration.spec.ts
@@ -43,6 +43,15 @@ describe('Test OPC-UA Adapter Pull Mode', () => {
'AlternatingBoolean',
);
+ // Test if node details view works
+
TreeStaticPropertyUtils.validateAmountOfShownNodeDetailsMetaDataRows(0);
+ TreeStaticPropertyUtils.showNodeDetails('StepUp');
+ TreeStaticPropertyUtils.validateAmountOfShownNodeDetailsMetaDataRows(
+ 10,
+ );
+ TreeStaticPropertyUtils.hideNodeDetails('StepUp');
+
TreeStaticPropertyUtils.validateAmountOfShownNodeDetailsMetaDataRows(0);
+
// Test if delete node works
TreeStaticPropertyUtils.removeSelectedNode(
'ns=3\\;s=AlternatingBoolean',
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.html
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.html
index 4975e8413c..dfda968073 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.html
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.html
@@ -32,8 +32,8 @@
<div fxFlex="30" class="tree-input-section" fxLayout="column">
<sp-static-tree-input-browse-nodes
#staticTreeInputBrowseNodesComponent
- [selectedNodeMetadata]="selectedNodeMetadata"
[staticProperty]="staticProperty"
+ (showNodeDetailsEmitter)="showNodeDetails($event)"
(loadOptionsFromRestApiEmitter)="loadOptionsFromRestApi($event)"
(performValidationEmitter)="performValidation()"
>
@@ -45,8 +45,9 @@
</div>
<div
class="node-metadata"
- *ngFor="let metadata of selectedNodeMetadata | keyvalue"
+ *ngFor="let metadata of nodeDetails?.nodeMetadata | keyvalue"
fxLayout="row"
+ [attr.data-cy]="'node-details-metadata-row-' + metadata.key"
>
<div fxFlex="30">{{ metadata.key }}</div>
<div fxFlex="70">{{ metadata.value }}</div>
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.scss
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.scss
index 93e93f6136..ac5d7522bf 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.scss
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.scss
@@ -84,21 +84,3 @@
.node-name {
font-weight: bold;
}
-
-.selected-node {
- padding: 10px;
- border-bottom: 1px solid var(--color-bg-3);
-}
-
-.selected-node:nth-child(odd) {
- background: var(--color-bg-1);
-}
-
-.selected-node:nth-child(even) {
- background: var(--color-bg-2);
-}
-
-.selected-node {
- padding: 5px;
- border: 1px solid var(--color-bg-3);
-}
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.ts
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.ts
index 57e5005af7..caf6937331 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.ts
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.ts
@@ -37,7 +37,8 @@ export class StaticRuntimeResolvableTreeInputComponent
extends
BaseRuntimeResolvableInput<RuntimeResolvableTreeInputStaticProperty>
implements OnInit
{
- selectedNodeMetadata: Record<string, string>;
+ // selectedNodeMetadata: Record<string, string>;
+ nodeDetails: TreeInputNode;
@ViewChild('staticTreeInputBrowseNodesComponent')
staticTreeInputBrowseNodesComponent: StaticTreeInputBrowseNodesComponent;
@@ -127,6 +128,10 @@ export class StaticRuntimeResolvableTreeInputComponent
this.performValidation();
}
+ showNodeDetails(node: TreeInputNode) {
+ this.nodeDetails = node;
+ }
+
resetOptionsAndReload(): void {
this.staticProperty.nextBaseNodeToResolve = undefined;
this.staticProperty.selectedNodesInternalNames = [];
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-browse-nodes/static-tree-input-browse-nodes.component.html
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-browse-nodes/static-tree-input-browse-nodes.component.html
index 23d7deb1cc..0f3957558e 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-browse-nodes/static-tree-input-browse-nodes.component.html
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-browse-nodes/static-tree-input-browse-nodes.component.html
@@ -41,11 +41,6 @@
>
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<div
- [ngClass]="
- selectedNodeId === node.internalNodeName
- ? 'selected-node'
- : 'node'
- "
fxLayoutAlign="start center"
[attr.data-cy]="'tree-node-' + node.nodeName"
>
@@ -68,19 +63,16 @@
<i
class="material-icons pr-5 icon-button"
*ngIf="selectedNodeId !== node.internalNodeName"
- (click)="
- selectedNodeMetadata = node.nodeMetadata;
- selectedNodeId = node.internalNodeName
- "
+ [attr.data-cy]="'show-node-details-' + node.nodeName"
+ (click)="showNodeDetails(node)"
matTooltip="Show details"
>visibility</i
>
<i
class="material-icons pr-5 icon-button"
*ngIf="selectedNodeId === node.internalNodeName"
- (click)="
- selectedNodeMetadata = undefined; selectedNodeId =
undefined
- "
+ [attr.data-cy]="'hide-node-details-' + node.nodeName"
+ (click)="hideNodeDetails()"
matTooltip="Show details"
>visibility_off</i
>
@@ -127,20 +119,16 @@
<i
class="material-icons pr-5 icon-button"
*ngIf="selectedNodeId !== node.internalNodeName"
- (click)="
- selectedNodeMetadata = node.nodeMetadata;
- selectedNodeId = node.internalNodeName
- "
+ [attr.data-cy]="'show-node-details-' + node.nodeName"
+ (click)="showNodeDetails(node)"
matTooltip="Show details"
>visibility</i
>
<i
class="material-icons pr-5 icon-button"
*ngIf="selectedNodeId === node.internalNodeName"
- (click)="
- selectedNodeMetadata = undefined;
- selectedNodeId = undefined
- "
+ [attr.data-cy]="'hide-node-details-' + node.nodeName"
+ (click)="hideNodeDetails()"
matTooltip="Show details"
>visibility_off</i
>
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-browse-nodes/static-tree-input-browse-nodes.component.ts
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-browse-nodes/static-tree-input-browse-nodes.component.ts
index 93dbf9671b..de04432f80 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-browse-nodes/static-tree-input-browse-nodes.component.ts
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-browse-nodes/static-tree-input-browse-nodes.component.ts
@@ -40,12 +40,13 @@ import { StaticTreeInputServiceService } from
'../static-tree-input-service.serv
],
})
export class StaticTreeInputBrowseNodesComponent implements OnInit {
- @Input()
- selectedNodeMetadata: Record<string, string>;
-
@Input()
staticProperty: RuntimeResolvableTreeInputStaticProperty;
+ @Output()
+ showNodeDetailsEmitter: EventEmitter<TreeInputNode> =
+ new EventEmitter<TreeInputNode>();
+
@Output()
performValidationEmitter: EventEmitter<void> = new EventEmitter<void>();
@@ -132,6 +133,16 @@ export class StaticTreeInputBrowseNodesComponent
implements OnInit {
);
}
+ showNodeDetails(node: TreeInputNode) {
+ this.selectedNodeId = node.internalNodeName;
+ this.showNodeDetailsEmitter.emit(node);
+ }
+
+ hideNodeDetails() {
+ this.selectedNodeId = undefined;
+ this.showNodeDetailsEmitter.emit(undefined);
+ }
+
hasDataChildren(node: TreeInputNode) {
return (
node.children.length > 0 &&
