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

[tenthe]

Purpose

This PR introduces the following improvements:

1. Refactoring the Icon Bar Component:

   • Migrated the icon bar component to leverage Angular's control flow syntax (@for and @if) for enhanced readability and maintainability.
   • Updated the iconbar.component.html to include dynamic data-cy attributes for improved test targeting.

2. Enhanced End-to-End Tests:

   • Replaced the generic validateAmountOfNavigationIcons method with specific assertions for individual navigation icons (e.g., pipelinesIsDisplayed).
   • Introduced a new NavigationUtils utility to manage navigation icon assertions in a modular and reusable way.

Remarks

PR introduces (a) breaking change(s): no

PR introduces (a) deprecation(s): no

[Marcelfrueh]

Theoretically, during the test for the ROLE_ASSET, all navigation icons could be visible (including those that shouldn't be), and the test would still pass, even though a user with the Asset-role shouldn't see all the icons, right?

[tenthe]

Yes, you are right. I thought of that, but then we would always need a block like this:

NavigationUtils.pipelinesIsDisplayed();
NavigationUtils.connectIsDisplayed();
NavigationUtils.dashboardIsDisplayed();
NavigationUtils.dataExplorerIsDisplayed();
NavigationUtils.assetManagementNotDisplayed();
NavigationUtils.configurationIsDisplayed();

This is quite hard to read and understand.

I could change the API of NavigationUtils to take a list of strings representing all the modules that should be displayed. This way, we can validate that only the specified modules are shown. Additionally, I could add all the module names as static variables to the class to make the API easier to use.

Updated API Code

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';

    /**
     * Validates that only the specified navigation icons are displayed.
     * @param displayedModules List of module names that should be visible.
     */
    public static validateActiveModules(displayedModules: string[]) {
        const allModules = [
            NavigationUtils.PIPELINES,
            NavigationUtils.CONNECT,
            NavigationUtils.DASHBOARD,
            NavigationUtils.DATA_EXPLORER,
            NavigationUtils.ASSET_MANAGEMENT,
            NavigationUtils.CONFIGURATION,
        ];

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

Usage Example

// Validate that only the specified modules are displayed
NavigationUtils.validateActiveModules([
    NavigationUtils.PIPELINES,
    NavigationUtils.CONNECT,
    NavigationUtils.DASHBOARD,
    NavigationUtils.CONFIGURATION,
]);

What do you think?

[Marcelfrueh]

Yes, this looks great! I believe this approach makes it easier to verify that the user roles behave as expected.

[tenthe]

@Marcelfrueh, I have changed the code accordingly. Please take a look at this.

[Marcelfrueh]

Looks great!