This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch
3398-migrate-iconbar-component-to-control-flow-syntax
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to
refs/heads/3398-migrate-iconbar-component-to-control-flow-syntax by this push:
new b47fb22c42 refactor(#3398): Add control flow syntax to icon bar and
improved e2e tests
b47fb22c42 is described below
commit b47fb22c4250843a88877cff31916fe982b0b8ef
Author: Philipp Zehnder <[email protected]>
AuthorDate: Fri Jan 3 15:02:46 2025 +0100
refactor(#3398): Add control flow syntax to icon bar and improved e2e tests
---
ui/cypress/support/utils/GeneralUtils.ts | 7 --
.../support/utils/navigation/NavigationUtils.ts | 115 +++++++++++++++++++++
.../userManagement/testGroupManagement.spec.ts | 9 +-
.../userManagement/testUserRoleConnect.spec.ts | 8 +-
.../userManagement/testUserRolePipeline.spec.ts | 4 +-
.../testVariousUserRoles.smoke.spec.ts | 22 ++--
ui/package-lock.json | 4 +-
.../core/components/iconbar/iconbar.component.html | 57 +++++-----
8 files changed, 171 insertions(+), 55 deletions(-)
diff --git a/ui/cypress/support/utils/GeneralUtils.ts
b/ui/cypress/support/utils/GeneralUtils.ts
index 9b0186b1f6..8db505e32b 100644
--- a/ui/cypress/support/utils/GeneralUtils.ts
+++ b/ui/cypress/support/utils/GeneralUtils.ts
@@ -20,11 +20,4 @@ export class GeneralUtils {
public static tab(identifier: string) {
return cy.dataCy(`tab-${identifier}`).click();
}
-
- public static validateAmountOfNavigationIcons(expected: number) {
- cy.dataCy('navigation-icon', { timeout: 10000 }).should(
- 'have.length',
- expected,
- );
- }
}
diff --git a/ui/cypress/support/utils/navigation/NavigationUtils.ts
b/ui/cypress/support/utils/navigation/NavigationUtils.ts
new file mode 100644
index 0000000000..97593b0d97
--- /dev/null
+++ b/ui/cypress/support/utils/navigation/NavigationUtils.ts
@@ -0,0 +1,115 @@
+/*
+ * 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.
+ *
+ */
+export class NavigationUtils {
+ /**
+ * Validates that the Pipelines navigation icon is displayed.
+ */
+ public static pipelinesIsDisplayed() {
+ this.validateNavigationIcon('pipelines', true);
+ }
+
+ /**
+ * Validates that the Pipelines navigation icon is not displayed.
+ */
+ public static pipelinesNotDisplayed() {
+ this.validateNavigationIcon('pipelines', false);
+ }
+
+ /**
+ * Validates that the Connect navigation icon is displayed.
+ */
+ public static connectIsDisplayed() {
+ this.validateNavigationIcon('connect', true);
+ }
+
+ /**
+ * Validates that the Connect navigation icon is not displayed.
+ */
+ public static connectNotDisplayed() {
+ this.validateNavigationIcon('connect', false);
+ }
+
+ /**
+ * Validates that the Dashboard navigation icon is displayed.
+ */
+ public static dashboardIsDisplayed() {
+ this.validateNavigationIcon('dashboard', true);
+ }
+
+ /**
+ * Validates that the Dashboard navigation icon is not displayed.
+ */
+ public static dashboardNotDisplayed() {
+ this.validateNavigationIcon('dashboard', false);
+ }
+
+ /**
+ * Validates that the Data Explorer navigation icon is displayed.
+ */
+ public static dataExplorerIsDisplayed() {
+ this.validateNavigationIcon('dataexplorer', true);
+ }
+
+ /**
+ * Validates that the Data Explorer navigation icon is not displayed.
+ */
+ public static dataExplorerNotDisplayed() {
+ this.validateNavigationIcon('dataexplorer', false);
+ }
+
+ /**
+ * Validates that the Asset Management navigation icon is displayed.
+ */
+ public static assetManagementIsDisplayed() {
+ this.validateNavigationIcon('assets', true);
+ }
+
+ /**
+ * Validates that the Asset Management navigation icon is not displayed.
+ */
+ public static assetManagementNotDisplayed() {
+ this.validateNavigationIcon('assets', false);
+ }
+
+ /**
+ * Validates that the Configuration navigation icon is displayed.
+ */
+ public static configurationIsDisplayed() {
+ this.validateNavigationIcon('configuration', true);
+ }
+
+ /**
+ * Validates that the Configuration navigation icon is not displayed.
+ */
+ public static configurationNotDisplayed() {
+ this.validateNavigationIcon('configuration', false);
+ }
+
+ /**
+ * Validates the visibility of a navigation icon.
+ * @param icon The icon identifier.
+ * @param shown Whether the icon should be shown.
+ */
+ private static validateNavigationIcon(icon: string, shown: boolean) {
+ const expectedLength = shown ? 1 : 0;
+ cy.dataCy(`navigation-icon-${icon}`, { timeout: 10000 }).should(
+ 'have.length',
+ expectedLength,
+ );
+ }
+}
diff --git a/ui/cypress/tests/userManagement/testGroupManagement.spec.ts
b/ui/cypress/tests/userManagement/testGroupManagement.spec.ts
index 4c62669b2b..be5e6ac99e 100644
--- a/ui/cypress/tests/userManagement/testGroupManagement.spec.ts
+++ b/ui/cypress/tests/userManagement/testGroupManagement.spec.ts
@@ -23,8 +23,8 @@ import { ConnectUtils } from
'../../support/utils/connect/ConnectUtils';
import { PipelineUtils } from '../../support/utils/pipeline/PipelineUtils';
import { PipelineElementBuilder } from
'../../support/builder/PipelineElementBuilder';
import { PipelineBuilder } from '../../support/builder/PipelineBuilder';
-import { GeneralUtils } from '../../support/utils/GeneralUtils';
import { PermissionUtils } from '../../support/utils/user/PermissionUtils';
+import { NavigationUtils } from
'../../support/utils/navigation/NavigationUtils';
describe('Test Group Management for Pipelines', () => {
beforeEach('Setup Test', () => {
@@ -104,7 +104,8 @@ describe('Test Group Management for Pipelines', () => {
// Login as first user which belongs to user group with pipeline admin
role
UserUtils.switchUser(user);
- GeneralUtils.validateAmountOfNavigationIcons(4);
+ NavigationUtils.pipelinesIsDisplayed();
+ NavigationUtils.configurationIsDisplayed();
// Check if pipeline is visible
PipelineUtils.goToPipelines();
@@ -119,8 +120,8 @@ describe('Test Group Management for Pipelines', () => {
// Login as user2
UserUtils.switchUser(user2);
-
- GeneralUtils.validateAmountOfNavigationIcons(3);
+ NavigationUtils.pipelinesIsDisplayed();
+ NavigationUtils.configurationNotDisplayed();
// Check if pipeline is invisible to user2
PipelineUtils.goToPipelines();
diff --git a/ui/cypress/tests/userManagement/testUserRoleConnect.spec.ts
b/ui/cypress/tests/userManagement/testUserRoleConnect.spec.ts
index 04290d02ca..812eeff5fa 100644
--- a/ui/cypress/tests/userManagement/testUserRoleConnect.spec.ts
+++ b/ui/cypress/tests/userManagement/testUserRoleConnect.spec.ts
@@ -19,7 +19,7 @@ import { UserRole } from
'../../../src/app/_enums/user-role.enum';
import { UserUtils } from '../../support/utils/UserUtils';
import { ConnectUtils } from '../../support/utils/connect/ConnectUtils';
import { PermissionUtils } from '../../support/utils/user/PermissionUtils';
-import { GeneralUtils } from '../../support/utils/GeneralUtils';
+import { NavigationUtils } from
'../../support/utils/navigation/NavigationUtils';
describe('Test User Roles for Connect', () => {
var connectAdminUser;
@@ -35,7 +35,7 @@ describe('Test User Roles for Connect', () => {
it('Connect admin should not see adapters of other users', () => {
UserUtils.switchUser(connectAdminUser);
- GeneralUtils.validateAmountOfNavigationIcons(3);
+ NavigationUtils.connectIsDisplayed();
// Validate that no adapter is visible
ConnectUtils.checkAmountOfAdapters(0);
@@ -47,7 +47,7 @@ describe('Test User Roles for Connect', () => {
UserUtils.switchUser(connectAdminUser);
- GeneralUtils.validateAmountOfNavigationIcons(3);
+ NavigationUtils.connectIsDisplayed();
// Validate that adapter is visible
ConnectUtils.checkAmountOfAdapters(1);
@@ -59,7 +59,7 @@ describe('Test User Roles for Connect', () => {
UserUtils.switchUser(connectAdminUser);
- GeneralUtils.validateAmountOfNavigationIcons(3);
+ NavigationUtils.connectIsDisplayed();
// Validate that adapter is visible
ConnectUtils.checkAmountOfAdapters(1);
diff --git a/ui/cypress/tests/userManagement/testUserRolePipeline.spec.ts
b/ui/cypress/tests/userManagement/testUserRolePipeline.spec.ts
index 3c690ffe92..5b5373ab2a 100644
--- a/ui/cypress/tests/userManagement/testUserRolePipeline.spec.ts
+++ b/ui/cypress/tests/userManagement/testUserRolePipeline.spec.ts
@@ -20,9 +20,9 @@ import { UserRole } from
'../../../src/app/_enums/user-role.enum';
import { UserUtils } from '../../support/utils/UserUtils';
import { ConnectUtils } from '../../support/utils/connect/ConnectUtils';
import { PipelineUtils } from '../../support/utils/pipeline/PipelineUtils';
-import { GeneralUtils } from '../../support/utils/GeneralUtils';
import { PermissionUtils } from '../../support/utils/user/PermissionUtils';
import { PipelineBtns } from '../../support/utils/pipeline/PipelineBtns';
+import { NavigationUtils } from
'../../support/utils/navigation/NavigationUtils';
describe('Test User Roles for Pipelines', () => {
beforeEach('Setup Test', () => {
@@ -40,7 +40,7 @@ describe('Test User Roles for Pipelines', () => {
// Login as user and check if pipeline is visible to user
UserUtils.switchUser(newUser);
- GeneralUtils.validateAmountOfNavigationIcons(4);
+ NavigationUtils.pipelinesIsDisplayed();
PipelineUtils.goToPipelines();
PipelineUtils.checkAmountOfPipelinesPipeline(0);
diff --git a/ui/cypress/tests/userManagement/testVariousUserRoles.smoke.spec.ts
b/ui/cypress/tests/userManagement/testVariousUserRoles.smoke.spec.ts
index 4c00e01667..308d3d1b01 100644
--- a/ui/cypress/tests/userManagement/testVariousUserRoles.smoke.spec.ts
+++ b/ui/cypress/tests/userManagement/testVariousUserRoles.smoke.spec.ts
@@ -19,7 +19,7 @@
import { UserBuilder } from '../../support/builder/UserBuilder';
import { UserRole } from '../../../src/app/_enums/user-role.enum';
import { UserUtils } from '../../support/utils/UserUtils';
-import { GeneralUtils } from '../../support/utils/GeneralUtils';
+import { NavigationUtils } from
'../../support/utils/navigation/NavigationUtils';
const testedRoles = [
UserRole.ROLE_PIPELINE_ADMIN,
@@ -37,10 +37,16 @@ for (var i = 0; i < testedRoles.length; i++) {
});
it('Perform Test', () => {
+ // validate navigation bar shows all modules
+ NavigationUtils.pipelinesIsDisplayed();
+ NavigationUtils.connectIsDisplayed();
+ NavigationUtils.dashboardIsDisplayed();
+ NavigationUtils.dataExplorerIsDisplayed();
+ NavigationUtils.assetManagementIsDisplayed();
+ NavigationUtils.configurationIsDisplayed();
+
// Add new user
UserUtils.goToUserConfiguration();
- GeneralUtils.validateAmountOfNavigationIcons(8);
-
cy.dataCy('user-accounts-table-row', { timeout: 10000 }).should(
'have.length',
1,
@@ -66,15 +72,15 @@ for (var i = 0; i < testedRoles.length; i++) {
// Check if every role displays correct navigation menu
if (testRole == UserRole.ROLE_PIPELINE_ADMIN) {
- GeneralUtils.validateAmountOfNavigationIcons(4);
+ NavigationUtils.pipelinesIsDisplayed();
} else if (testRole == UserRole.ROLE_DASHBOARD_ADMIN) {
- GeneralUtils.validateAmountOfNavigationIcons(4);
+ NavigationUtils.dashboardIsDisplayed();
} else if (testRole == UserRole.ROLE_DATA_EXPLORER_ADMIN) {
- GeneralUtils.validateAmountOfNavigationIcons(4);
+ NavigationUtils.dataExplorerIsDisplayed();
} else if (testRole == UserRole.ROLE_CONNECT_ADMIN) {
- GeneralUtils.validateAmountOfNavigationIcons(3);
+ NavigationUtils.connectIsDisplayed();
} else if (testRole == UserRole.ROLE_ASSET_ADMIN) {
- GeneralUtils.validateAmountOfNavigationIcons(3);
+ NavigationUtils.assetManagementIsDisplayed();
}
// Login as admin and delete user
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 054742cf18..cad7803cb0 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "apache-streampipes",
- "version": "0.97.0-SNAPSHOT",
+ "version": "0.98.0-SNAPSHOT",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "apache-streampipes",
- "version": "0.97.0-SNAPSHOT",
+ "version": "0.98.0-SNAPSHOT",
"dependencies": {
"@ali-hm/angular-tree-component": "12.0.5",
"@angular-architects/native-federation": "^17.1.8",
diff --git a/ui/src/app/core/components/iconbar/iconbar.component.html
b/ui/src/app/core/components/iconbar/iconbar.component.html
index 85d6238171..e90d1b9d12 100644
--- a/ui/src/app/core/components/iconbar/iconbar.component.html
+++ b/ui/src/app/core/components/iconbar/iconbar.component.html
@@ -17,34 +17,35 @@
-->
<div style="padding-top: 0" fxFlex="100" fxLayout="column">
- <div *ngFor="let item of menu">
- <div
- *ngIf="item.visible"
- style="min-width: 0; padding: 5px 0"
- [ngClass]="
- item.link === activePage
- ? 'sp-navbar-item-selected'
- : 'sp-navbar-item'
- "
- >
- <button
- mat-icon-button
- class="button-margin-iconbar iconbar-size"
- (click)="go(item.link)"
- matTooltip="{{ item.title }}"
- matTooltipPosition="right"
+ @for (item of menu; track item.title) {
+ @if (item.visible) {
+ <div
+ style="min-width: 0; padding: 5px 0"
+ [ngClass]="
+ item.link === activePage
+ ? 'sp-navbar-item-selected'
+ : 'sp-navbar-item'
+ "
>
- <mat-icon
- [ngClass]="
- item.link === activePage
- ? 'sp-navbar-icon-selected'
- : 'sp-navbar-icon'
- "
- data-cy="navigation-icon"
+ <button
+ mat-icon-button
+ class="button-margin-iconbar iconbar-size"
+ (click)="go(item.link)"
+ matTooltip="{{ item.title }}"
+ matTooltipPosition="right"
>
- {{ item.icon }}
- </mat-icon>
- </button>
- </div>
- </div>
+ <mat-icon
+ [ngClass]="
+ item.link === activePage
+ ? 'sp-navbar-icon-selected'
+ : 'sp-navbar-icon'
+ "
+ [attr.data-cy]="'navigation-icon-' + item.link"
+ >
+ {{ item.icon }}
+ </mat-icon>
+ </button>
+ </div>
+ }
+ }
</div>
