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 e662ccf294 refactor(#3116): Extract button menu in static-tree-input
e662ccf294 is described below
commit e662ccf294c0a974b941d518e3d886f35e611d29
Author: Philipp Zehnder <[email protected]>
AuthorDate: Sat Aug 10 07:08:57 2024 +0200
refactor(#3116): Extract button menu in static-tree-input
---
ui/cypress/support/general/dataCy.ts | 5 ++-
.../support/utils/userInput/StaticPropertyUtils.ts | 1 -
.../utils/userInput/TreeStaticPropertyUtils.ts | 17 +++-----
.../tests/connect/opcAdapterConfiguration.spec.ts | 20 ++++-----
.../static-tree-input-button-menu.component.html | 33 ++++++++++++++-
.../static-tree-input-button-menu.component.scss | 17 --------
.../static-tree-input-button-menu.component.ts | 23 ++++++++--
.../static-tree-input.component.html | 49 ++++++----------------
8 files changed, 83 insertions(+), 82 deletions(-)
diff --git a/ui/cypress/support/general/dataCy.ts
b/ui/cypress/support/general/dataCy.ts
index 13c5a35f8d..cb81205295 100644
--- a/ui/cypress/support/general/dataCy.ts
+++ b/ui/cypress/support/general/dataCy.ts
@@ -19,7 +19,7 @@
declare global {
namespace Cypress {
interface Chainable {
- dataCy: typeof dataCy
+ dataCy: typeof dataCy;
}
}
}
@@ -35,7 +35,8 @@ declare global {
export const dataCy = (
value: string,
config: any = {},
- startsWith: boolean = false) => {
+ startsWith: boolean = false,
+) => {
const selector = startsWith ? `[data-cy^=${value}]` : `[data-cy=${value}]`;
return cy.get(selector, config);
};
diff --git a/ui/cypress/support/utils/userInput/StaticPropertyUtils.ts
b/ui/cypress/support/utils/userInput/StaticPropertyUtils.ts
index e3ecf69be1..f588f5db49 100644
--- a/ui/cypress/support/utils/userInput/StaticPropertyUtils.ts
+++ b/ui/cypress/support/utils/userInput/StaticPropertyUtils.ts
@@ -70,5 +70,4 @@ export class StaticPropertyUtils {
cy.get(cssClassName).click();
});
}
-
}
diff --git a/ui/cypress/support/utils/userInput/TreeStaticPropertyUtils.ts
b/ui/cypress/support/utils/userInput/TreeStaticPropertyUtils.ts
index ad8f4422c5..43ea0b451c 100644
--- a/ui/cypress/support/utils/userInput/TreeStaticPropertyUtils.ts
+++ b/ui/cypress/support/utils/userInput/TreeStaticPropertyUtils.ts
@@ -16,11 +16,9 @@
*
*/
-
import { TreeNode } from '../../model/TreeNode';
export class TreeStaticPropertyUtils {
-
/**
* Selects the @param treeNode in the tree view. If the tree node has
* children, it will expand the tree node and recursivly navigate through
@@ -51,10 +49,11 @@ export class TreeStaticPropertyUtils {
* to @param expectedAmount.
*/
public static validateAmountOfSelectedNodes(expectedAmount: number) {
- cy.dataCy('selected-node-', {}, true)
- .should('have.length', expectedAmount);
- };
-
+ cy.dataCy('selected-node-', {}, true).should(
+ 'have.length',
+ expectedAmount,
+ );
+ }
/**
* Validates that the @param nodeName is marked as selected in the
@@ -66,13 +65,9 @@ export class TreeStaticPropertyUtils {
.contains('remove_circle')
.should('exist');
});
- };
-
+ }
public static clickClearAndReloadButton() {
cy.dataCy('clear-tree-node-selection').click();
}
-
}
-
-
diff --git a/ui/cypress/tests/connect/opcAdapterConfiguration.spec.ts
b/ui/cypress/tests/connect/opcAdapterConfiguration.spec.ts
index 08e46aeebb..08af064ffb 100644
--- a/ui/cypress/tests/connect/opcAdapterConfiguration.spec.ts
+++ b/ui/cypress/tests/connect/opcAdapterConfiguration.spec.ts
@@ -24,7 +24,6 @@ import { StaticPropertyUtils } from
'../../support/utils/userInput/StaticPropert
import { TreeStaticPropertyUtils } from
'../../support/utils/userInput/TreeStaticPropertyUtils';
describe('Test OPC-UA Adapter Pull Mode', () => {
-
beforeEach('Setup Test', () => {
cy.initStreamPipesTest();
});
@@ -40,26 +39,27 @@ describe('Test OPC-UA Adapter Pull Mode', () => {
TreeStaticPropertyUtils.validateAmountOfSelectedNodes(2);
-
TreeStaticPropertyUtils.checkThatNodeIsSelectedInTree('AlternatingBoolean');
+ TreeStaticPropertyUtils.checkThatNodeIsSelectedInTree(
+ 'AlternatingBoolean',
+ );
// Test if delete node works
-
TreeStaticPropertyUtils.removeSelectedNode('ns=3\\;s=AlternatingBoolean');
+ TreeStaticPropertyUtils.removeSelectedNode(
+ 'ns=3\\;s=AlternatingBoolean',
+ );
TreeStaticPropertyUtils.validateAmountOfSelectedNodes(1);
// Test clear selection and reload button
TreeStaticPropertyUtils.clickClearAndReloadButton();
TreeStaticPropertyUtils.validateAmountOfSelectedNodes(0);
-
});
-
});
const getAdapterBuilder = () => {
const host: string = ParameterUtils.get('localhost', 'opcua');
- const builder = AdapterBuilder.create('OPC_UA').setName(
- 'OPC UA Configuration Test',
- )
+ const builder = AdapterBuilder.create('OPC_UA')
+ .setName('OPC UA Configuration Test')
.addInput('radio', 'adapter_type-pull_mode', '')
.addInput('input', 'undefined-PULLING_INTERVAL-0', '1000')
.addInput('radio', 'access_mode-none', '')
@@ -83,8 +83,8 @@ const getAdapterBuilder = () => {
),
),
),
- ).setAutoAddTimestampPropery();
+ )
+ .setAutoAddTimestampPropery();
return builder.build();
};
-
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html
index 09b340c2b6..bf008690bb 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html
@@ -15,4 +15,35 @@
~ limitations under the License.
~
-->
-<p>static-tree-input-button-menu works!</p>
+<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
+ <div>
+ <button
+ mat-raised-button
+ color="accent"
+ class="small-button"
+ (click)="onResetOptionsAndReload()"
+ style="margin-right: 10px"
+ [disabled]="!showOptions"
+ data-cy="clear-tree-node-selection"
+ >
+ <span>Clear selection & reload</span>
+ </button>
+ <button
+ mat-raised-button
+ color="accent"
+ class="small-button"
+ (click)="onReload()"
+ style="margin-right: 10px"
+ [disabled]="!showOptions"
+ >
+ <span>Reload</span>
+ </button>
+ </div>
+ <div fxLayout="column" *ngIf="loading" class="mt-10">
+ <mat-spinner
+ color="accent"
+ [mode]="'indeterminate'"
+ [diameter]="20"
+ ></mat-spinner>
+ </div>
+</div>
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.scss
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.scss
deleted file mode 100644
index 13cbc4aacb..0000000000
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You 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.
- *
- */
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.ts
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.ts
index c21d951494..8249baebb3 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.ts
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.ts
@@ -15,11 +15,28 @@
* limitations under the License.
*
*/
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'sp-static-tree-input-button-menu',
templateUrl: './static-tree-input-button-menu.component.html',
- styleUrl: './static-tree-input-button-menu.component.scss',
})
-export class StaticTreeInputButtonMenuComponent {}
+export class StaticTreeInputButtonMenuComponent {
+ @Input()
+ showOptions: boolean;
+ @Input()
+ loading: boolean;
+
+ @Output()
+ resetOptionsAndReload = new EventEmitter<void>();
+ @Output()
+ reload = new EventEmitter<void>();
+
+ onResetOptionsAndReload() {
+ this.resetOptionsAndReload.emit();
+ }
+
+ onReload() {
+ this.reload.emit();
+ }
+}
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.html
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.html
index e66ece2672..39e39c3fe2 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.html
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.html
@@ -15,41 +15,15 @@
~ limitations under the License.
~
-->
-
<div [formGroup]="parentForm" id="formWrapper" fxFlex="100" fxLayout="column">
- <sp-static-tree-input-button-menu></sp-static-tree-input-button-menu>
- <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
- <div>
- <button
- mat-raised-button
- color="accent"
- class="small-button"
- (click)="resetOptionsAndReload()"
- style="margin-right: 10px"
- [disabled]="!showOptions"
- data-cy='clear-tree-node-selection'
- >
- <span>Clear selection & reload</span>
- </button>
- <button
- mat-raised-button
- color="accent"
- class="small-button"
- (click)="reload()"
- style="margin-right: 10px"
- [disabled]="!showOptions"
- >
- <span>Reload</span>
- </button>
- </div>
- <div fxLayout="column" *ngIf="loading" class="mt-10">
- <mat-spinner
- color="accent"
- [mode]="'indeterminate'"
- [diameter]="20"
- ></mat-spinner>
- </div>
- </div>
+ <sp-static-tree-input-button-menu
+ [showOptions]="showOptions"
+ [loading]="loading"
+ (resetOptionsAndReload)="resetOptionsAndReload()"
+ (reload)="reload()"
+ >
+ </sp-static-tree-input-button-menu>
+
<div fxLayout="column" *ngIf="error" class="mt-10">
<sp-exception-message [message]="errorMessage"></sp-exception-message>
</div>
@@ -66,8 +40,8 @@
>
<mat-icon
*ngIf="!largeView">open_in_full</mat-icon>
<mat-icon *ngIf="largeView"
- >close_fullscreen</mat-icon
- >
+ >close_fullscreen
+ </mat-icon>
</button>
</div>
</div>
@@ -89,7 +63,8 @@
: 'node'
"
fxLayoutAlign="start center"
- [attr.data-cy]="'tree-node-' + node.nodeName"
>
+ [attr.data-cy]="'tree-node-' + node.nodeName"
+ >
<i class="material-icons color-primary pr-5">wifi</i>
<i
class="material-icons pr-5 icon-button"
