refactor(#3398): Add control flow syntax to icon bar and improved e2e…

… tests (#3399)

* refactor(#3398): Add control flow syntax to icon bar and improved e2e tests

* refactor(#3398): Fix the test testVariousUserRoles.smoke.spec.ts

* refactor(#3398): Change implementation of NavigationUtils.ts

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,
-        );
-    }
 }

ui/cypress/support/utils/UserUtils.ts

@@ -44,7 +44,7 @@ export class UserUtils {
         this.goToUserConfiguration();
 
         // user configuration
-        cy.dataCy('add-new-user').click();
+        cy.dataCy('add-new-user', { timeout: 10000 }).click();
         cy.dataCy('new-user-email').type(user.email);
         cy.dataCy('new-user-full-name').type(user.name);
         cy.dataCy('new-user-password').type(user.password);

ui/cypress/support/utils/navigation/NavigationUtils.ts

@@ -0,0 +1,59 @@
+/*
+ *  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 {
+    // Static variables for module names
+    public static readonly PIPELINES = 'pipelines';
+    public static readonly CONNECT = 'connect';
+    public static readonly DASHBOARD = 'dashboard';
+    public static readonly DATA_EXPLORER = 'dataexplorer';
+    public static readonly ASSET_MANAGEMENT = 'assets';
+    public static readonly CONFIGURATION = 'configuration';
+
+    public static readonly ALL_MODULES = [
+        NavigationUtils.PIPELINES,
+        NavigationUtils.CONNECT,
+        NavigationUtils.DASHBOARD,
+        NavigationUtils.DATA_EXPLORER,
+        NavigationUtils.ASSET_MANAGEMENT,
+        NavigationUtils.CONFIGURATION,
+    ];
+
+    /**
+     * Validates that only the specified navigation icons are displayed.
+     * @param displayedModules List of module names that should be visible.
+     */
+    public static validateActiveModules(displayedModules: string[]) {
+        NavigationUtils.ALL_MODULES.forEach(module => {
+            const shouldBeDisplayed = displayedModules.includes(module);
+            this.validateNavigationIcon(module, shouldBeDisplayed);
+        });
+    }
+
+    /**
+     * 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,
+        );
+    }
+}

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,10 @@ 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.validateActiveModules([
+            NavigationUtils.PIPELINES,
+            NavigationUtils.CONFIGURATION,
+        ]);
 
         // Check if pipeline is visible
         PipelineUtils.goToPipelines();
@@ -119,8 +122,7 @@ describe('Test Group Management for Pipelines', () => {
 
         // Login as user2
         UserUtils.switchUser(user2);
-
-        GeneralUtils.validateAmountOfNavigationIcons(3);
+        NavigationUtils.validateActiveModules([NavigationUtils.PIPELINES]);
 
         // Check if pipeline is invisible to user2
         PipelineUtils.goToPipelines();

ui/cypress/tests/userManagement/testUserRoleConnect.spec.ts

@@ -19,10 +19,11 @@ 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';
+import { User } from '../../support/model/User';
 
 describe('Test User Roles for Connect', () => {
-    var connectAdminUser;
+    let connectAdminUser: User;
     beforeEach('Setup Test', () => {
         cy.initStreamPipesTest();
         connectAdminUser = UserUtils.createUser(
@@ -33,9 +34,7 @@ describe('Test User Roles for Connect', () => {
     });
 
     it('Connect admin should not see adapters of other users', () => {
-        UserUtils.switchUser(connectAdminUser);
-
-        GeneralUtils.validateAmountOfNavigationIcons(3);
+        switchUserAndValidateConnectModuleIsShown();
 
         // Validate that no adapter is visible
         ConnectUtils.checkAmountOfAdapters(0);
@@ -45,9 +44,7 @@ describe('Test User Roles for Connect', () => {
         // Set adapter to public
         PermissionUtils.markElementAsPublic();
 
-        UserUtils.switchUser(connectAdminUser);
-
-        GeneralUtils.validateAmountOfNavigationIcons(3);
+        switchUserAndValidateConnectModuleIsShown();
 
         // Validate that adapter is visible
         ConnectUtils.checkAmountOfAdapters(1);
@@ -57,11 +54,18 @@ describe('Test User Roles for Connect', () => {
         // Share adapter with user
         PermissionUtils.authorizeUser(connectAdminUser.email);
 
-        UserUtils.switchUser(connectAdminUser);
-
-        GeneralUtils.validateAmountOfNavigationIcons(3);
+        switchUserAndValidateConnectModuleIsShown();
 
         // Validate that adapter is visible
         ConnectUtils.checkAmountOfAdapters(1);
     });
+
+    function switchUserAndValidateConnectModuleIsShown() {
+        UserUtils.switchUser(connectAdminUser);
+
+        NavigationUtils.validateActiveModules([
+            NavigationUtils.CONNECT,
+            NavigationUtils.CONFIGURATION,
+        ]);
+    }
 });

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,10 @@ describe('Test User Roles for Pipelines', () => {
         // Login as user and check if pipeline is visible to user
         UserUtils.switchUser(newUser);
 
-        GeneralUtils.validateAmountOfNavigationIcons(4);
+        NavigationUtils.validateActiveModules([
+            NavigationUtils.PIPELINES,
+            NavigationUtils.CONFIGURATION,
+        ]);
 
         PipelineUtils.goToPipelines();
         PipelineUtils.checkAmountOfPipelinesPipeline(0);

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,
@@ -29,18 +29,20 @@ const testedRoles = [
     UserRole.ROLE_ASSET_ADMIN,
 ];
 
-for (var i = 0; i < testedRoles.length; i++) {
+for (let i = 0; i < testedRoles.length; i++) {
     const testRole = testedRoles[i];
     describe('Test User Role ' + testedRoles[i], () => {
         beforeEach('Setup Test', () => {
             cy.initStreamPipesTest();
         });
 
         it('Perform Test', () => {
-            // Add new user
             UserUtils.goToUserConfiguration();
-            GeneralUtils.validateAmountOfNavigationIcons(8);
 
+            // validate navigation bar shows all modules
+            NavigationUtils.validateActiveModules(NavigationUtils.ALL_MODULES);
+
+            // Add new user
             cy.dataCy('user-accounts-table-row', { timeout: 10000 }).should(
                 'have.length',
                 1,
@@ -66,15 +68,30 @@ 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.validateActiveModules([
+                    NavigationUtils.PIPELINES,
+                    NavigationUtils.CONFIGURATION,
+                ]);
             } else if (testRole == UserRole.ROLE_DASHBOARD_ADMIN) {
-                GeneralUtils.validateAmountOfNavigationIcons(4);
+                NavigationUtils.validateActiveModules([
+                    NavigationUtils.PIPELINES,
+                    NavigationUtils.DASHBOARD,
+                ]);
             } else if (testRole == UserRole.ROLE_DATA_EXPLORER_ADMIN) {
-                GeneralUtils.validateAmountOfNavigationIcons(4);
+                NavigationUtils.validateActiveModules([
+                    NavigationUtils.PIPELINES,
+                    NavigationUtils.DATA_EXPLORER,
+                ]);
             } else if (testRole == UserRole.ROLE_CONNECT_ADMIN) {
-                GeneralUtils.validateAmountOfNavigationIcons(3);
+                NavigationUtils.validateActiveModules([
+                    NavigationUtils.CONNECT,
+                    NavigationUtils.CONFIGURATION,
+                ]);
             } else if (testRole == UserRole.ROLE_ASSET_ADMIN) {
-                GeneralUtils.validateAmountOfNavigationIcons(3);
+                NavigationUtils.validateActiveModules([
+                    NavigationUtils.ASSET_MANAGEMENT,
+                    NavigationUtils.CONFIGURATION,
+                ]);
             }
 
             // Login as admin and delete user

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>