Add new test suite and workflow for left navigation menu

Signed-off-by: Owen Wang <[email protected]>

.github/workflows/left-navigation-release-e2e-workflow.yml

@@ -0,0 +1,55 @@
+name: Left Navigation Release tests workflow in Bundled OpenSearch Dashboards
+on:
+  pull_request:
+    branches: ['**']
+
+jobs:
+  changes:
+    runs-on: ubuntu-latest
+    outputs:
+      tests: ${{ steps.filter.outputs.tests }}
+    steps:
+      - uses: dorny/paths-filter@v2
+        id: filter
+        with:
+          filters: |
+            tests:
+              - 'cypress/**/left-navigation/**'
+  tests-workspace-enabled-with-security:
+    needs: changes
+    if: ${{ needs.changes.outputs.tests == 'true' }}
+    uses: ./.github/workflows/release-e2e-workflow-template.yml
+    with:
+      test-name: left navigation workspace enabled with security
+      test-command: env CYPRESS_WORKSPACE_ENABLED=true CYPRESS_SAVED_OBJECTS_PERMISSION_ENABLED=true yarn cypress:run-with-security --browser chromium --spec 'cypress/integration/core-opensearch-dashboards/opensearch-dashboards/left-navigation/*'
+      osd-serve-args: --workspace.enabled=true --savedObjects.permission.enabled=true --opensearch_security.multitenancy.enabled=false --opensearchDashboards.dashboardAdmin.users='["admin"]' --uiSettings.overrides.home:useNewHomePage=true
+      artifact-name-suffix: '-workspace-enabled-with-security'
+  tests-workspace-enabled-without-security:
+    needs: changes
+    if: ${{ needs.changes.outputs.tests == 'true' }}
+    uses: ./.github/workflows/release-e2e-workflow-template.yml
+    with:
+      test-name: left navigation workspace enabled without security
+      test-command: env CYPRESS_WORKSPACE_ENABLED=true yarn cypress:run-without-security --browser chromium --spec 'cypress/integration/core-opensearch-dashboards/opensearch-dashboards/left-navigation/*'
+      osd-serve-args: --workspace.enabled=true --savedObjects.permission.enabled=false --uiSettings.overrides.home:useNewHomePage=true
+      security-enabled: false
+      artifact-name-suffix: '-workspace-enabled-without-security'
+  tests-workspace-disabled-with-security:
+    needs: changes
+    if: ${{ needs.changes.outputs.tests == 'true' }}
+    uses: ./.github/workflows/release-e2e-workflow-template.yml
+    with:
+      test-name: left navigation workspace disabled with security
+      test-command: env CYPRESS_WORKSPACE_ENABLED=true CYPRESS_SAVED_OBJECTS_PERMISSION_ENABLED=true yarn cypress:run-with-security --browser chromium --spec 'cypress/integration/core-opensearch-dashboards/opensearch-dashboards/left-navigation/*'
+      osd-serve-args: --workspace.enabled=false --savedObjects.permission.enabled=true --opensearch_security.multitenancy.enabled=false --opensearchDashboards.dashboardAdmin.users='["admin"]' --uiSettings.overrides.home:useNewHomePage=true
+      artifact-name-suffix: '-workspace-disabled-with-security'
+  tests-workspace-disabled-without-security:
+    needs: changes
+    if: ${{ needs.changes.outputs.tests == 'true' }}
+    uses: ./.github/workflows/release-e2e-workflow-template.yml
+    with:
+      test-name: left navigation workspace disabled without security
+      test-command: env CYPRESS_WORKSPACE_ENABLED=false yarn cypress:run-without-security --browser chromium --spec 'cypress/integration/core-opensearch-dashboards/opensearch-dashboards/left-navigation/*'
+      osd-serve-args: --workspace.enabled=true --savedObjects.permission.enabled=false --uiSettings.overrides.home:useNewHomePage=true
+      security-enabled: false
+      artifact-name-suffix: '-workspace-disabled-without-security'

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/left-navigation/left_navigation.spec.js

@@ -0,0 +1,298 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const isWorkspaceEnabled = Cypress.env('WORKSPACE_ENABLED');
+const workspaceName = `test_nav_menu`;
+const workspaceDescription =
+  'This is a test workspace for left navigation menu.';
+let workspaceId;
+
+const createWorkspace = (feature) => {
+  return cy
+    .createWorkspace({
+      name: `${workspaceName}_${feature}`,
+      description: workspaceDescription,
+      features: [`use-case-${feature}`],
+    })
+    .then((value) => {
+      workspaceId = value;
+      return value;
+    });
+};
+
+if (isWorkspaceEnabled) {
+  const validateWorkspaceNavMenu = (feature, callbackFn) => {
+    createWorkspace(feature).then(() => {
+      cy.visit(`w/${workspaceId}/app/discover`);
+      // overview page should be loaded
+      cy.get('.content').should('exist');
+
+      // navigation menu should be hidden initially
+      cy.get('.navGroupEnabledNavTopWrapper').should('not.exist');
+
+      // top right navigation menu button should exist
+      cy.get('.navToggleInLargeScreen').should('exist').click();
+
+      // navigation should be expanded and display content correctly
+      cy.get('.left-navigation-wrapper').within(() => {
+        cy.contains(`${workspaceName}_${feature}`).should('exist');
+        cy.get('.navGroupEnabledHomeIcon').should('exist');
+        cy.get('input[type="search"]').should('exist');
+
+        // additional assertion according to different type of workspace
+        callbackFn();
+      });
+    });
+  };
+
+  const validateWorkspaceNavMenuSearch = (input, callbackFn) => {
+    createWorkspace('all').then(() => {
+      cy.visit(`w/${workspaceId}/app/all_overview`);
+
+      // expand the navigation menu
+      cy.get('.navToggleInLargeScreen').should('exist').click();
+
+      cy.get('input[type="search"]').should('exist').click();
+      cy.get('input[type="search"]').type(input);
+
+      callbackFn();
+    });
+  };
+
+  describe('Left navigation menu in workspace', () => {
+    before(() => {
+      cy.deleteAllWorkspaces();
+    });
+
+    afterEach(() => {
+      if (workspaceId) {
+        cy.deleteWorkspaceById(workspaceId);
+      }
+    });
+
+    it('features are visible inside left navigation analytics for analytics use case', () => {
+      validateWorkspaceNavMenu('all', () => {
+        cy.contains('Visualize and report').should('exist');
+        cy.contains('Search').should('exist');
+        cy.contains('Manage workspace').should('exist');
+      });
+    });
+
+    it('features are visible inside left navigation analytics for essentials use case', () => {
+      validateWorkspaceNavMenu('essentials', () => {
+        cy.contains('Manage workspace').should('exist');
+      });
+    });
+
+    it('features are visible inside left navigation analytics for search use case', () => {
+      validateWorkspaceNavMenu('search', () => {
+        cy.contains('Visualize and report').should('exist');
+        cy.contains('Manage workspace').should('exist');
+      });
+    });
+
+    it('features are visible inside left navigation analytics for security analytics use case', () => {
+      validateWorkspaceNavMenu('security-analytics', () => {
+        cy.contains('Visualize and report').should('exist');
+        cy.contains('Manage workspace').should('exist');
+      });
+    });
+
+    it('features are visible inside left navigation for observability use case', () => {
+      validateWorkspaceNavMenu('observability', () => {
+        cy.contains('Visualize and report').should('exist');
+        cy.contains('Detect').should('exist');
+        cy.contains('Manage workspace').should('exist');
+      });
+    });
+
+    it('verify workspace identification in navigation', () => {
+      createWorkspace('all').then(() => {
+        cy.visit(`w/${workspaceId}/app/all_overview`);
+        // expand the navigation menu
+        cy.get('.navToggleInLargeScreen').should('exist').click();
+        cy.get('.bottom-container').within(() => {
+          cy.get('div[id="workspaceDropdownMenu"]').should('exist').click();
+        });
+
+        // expect workspace menu to be expanded with current workspace name displayed
+        cy.get('.workspaceMenuHeader').within(() => {
+          cy.contains(`${workspaceName}_all`).should('exist');
+        });
+      });
+    });
+
+    it('navigation search should only search use case related features when inside a workspace', () => {
+      validateWorkspaceNavMenuSearch('visu', () => {
+        cy.getElementByTestId('search-result-panel').within(() => {
+          cy.contains('Visualizations').should('exist');
+        });
+      });
+    });
+
+    it('navigation search should show be able to search dev tools and open it as modal', () => {
+      validateWorkspaceNavMenuSearch('dev', () => {
+        cy.getElementByTestId('search-result-panel').within(() => {
+          cy.contains('Dev Tools').should('exist');
+          cy.contains('Console').should('exist').click();
+          cy.document().then((doc) => {
+            // click on the page to remove welcome message
+            cy.wrap(doc.body).click('center');
+            // expect dev tool popover to be opened
+            cy.wrap(doc.body).contains('Dev Tools').should('exist');
+          });
+        });
+      });
+    });
+  });
+}
+
+describe('Left navigation menu', () => {
+  before(() => {
+    if (isWorkspaceEnabled) {
+      cy.deleteAllWorkspaces();
+    }
+  });
+
+  afterEach(() => {
+    if (isWorkspaceEnabled && workspaceId) {
+      cy.deleteWorkspaceById(workspaceId);
+    }
+  });
+
+  it('collapsible menu sections', () => {
+    const validateMenuSection = () => {
+      // expand the navigation menu
+      cy.get('.navToggleInLargeScreen').should('exist').click();
+
+      // menu section should be able to expand/collapse, with inside items display/hide corectly
+      cy.contains('Visualizations').should('exist');
+
+      // collapse the menu section and expect content to be hidden
+      cy.contains('Visualize and report').should('exist').click();
+      cy.contains('Visualizations').should('not.exist');
+
+      // expand the menu section and expect content to be visible
+      cy.contains('Visualize and report').should('exist').click();
+      cy.contains('Visualizations').should('exist');
+    };
+    if (isWorkspaceEnabled) {
+      createWorkspace('all').then(() => {
+        cy.visit(`w/${workspaceId}/app/all_overview`);
+        validateMenuSection();
+      });
+    } else {
+      cy.visit('app/home');
+      validateMenuSection();
+    }
+  });
+
+  it('navigation should remember state of expand in browser', () => {
+    const validateMenuState = () => {
+      cy.get('.navToggleInLargeScreen').should('exist').click(); // expand the menu
+
+      cy.reload();
+      // navigation menu should remain expanded after reload
+      cy.get('.left-navigation-wrapper').within(() => {
+        isWorkspaceEnabled &&
+          cy.contains(`${workspaceName}_all`).should('exist');
+        cy.get('.navGroupEnabledHomeIcon').should('exist');
+        cy.get('input[type="search"]').should('exist');
+        cy.get('.bottom-container-expanded').should('exist');
+        cy.getElementByTestId('collapsibleNavShrinkButton')
+          .should('exist')
+          .click(); // collapse the menu
+      });
+
+      cy.reload();
+      // navigation menu should remain collapsed after reload
+      cy.get('.left-navigation-wrapper').find('.euiPanel').should('not.exist');
+      cy.get('.left-navigation-wrapper').within(() => {
+        isWorkspaceEnabled &&
+          cy.contains(`${workspaceName}_all`).should('not.exist');
+        cy.get('.navGroupEnabledHomeIcon').should('not.exist');
+        cy.get('input[type="search"]').should('not.exist');
+        cy.get('.bottom-container-expanded').should('not.exist');
+      });
+    };
+
+    if (isWorkspaceEnabled) {
+      createWorkspace('all').then(() => {
+        cy.visit(`w/${workspaceId}/app/all_overview`);
+        validateMenuState();
+      });
+    } else {
+      cy.visit('app/home');
+      validateMenuState();
+    }
+  });
+
+  it('validate navigation history functionality', () => {
+    const validateRecentHistory = () => {
+      // expand the navigation menu
+      cy.get('.navToggleInLargeScreen').should('exist').click();
+      cy.contains('Visualizations').should('exist').click();
+
+      let visualizationName;
+      cy.getElementByTestId('itemsInMemTable').within(() => {
+        cy.get('.euiLink')
+          .first()
+          .invoke('text')
+          .then((text) => {
+            visualizationName = text;
+            // Click to the first visualization item
+            cy.contains(visualizationName).click();
+          });
+      });
+
+      cy.wait(1000);
+
+      // open recent history dialog
+      cy.get('.headerRecentItemsButton').should('exist').click();
+      cy.get('div[role="dialog"]').within(() => {
+        // dialog displays correct visited content
+        cy.contains('Recent assets').should('exist');
+        cy.contains(visualizationName).should('exist');
+      });
+
+      // click recent history button again to close the dialog
+      cy.get('.headerRecentItemsButton').click();
+
+      // back to dashboard
+      cy.get('.left-navigation-wrapper').within(() => {
+        cy.contains('Dashboards').should('exist').click();
+      });
+
+      cy.wait(1000);
+
+      // open recent history dialog again
+      cy.get('.headerRecentItemsButton').should('exist').click();
+      cy.get('div[role="dialog"]').within(() => {
+        // click recent visited visualization in the dialog
+        cy.contains(visualizationName).should('exist').click();
+      });
+
+      // should go back to the visualization screen just visited
+      cy.getElementByTestId('headerAppActionMenu').within(() => {
+        cy.url().should('contain', 'edit').should('contain', 'visualize');
+        cy.contains(visualizationName).should('exist');
+      });
+    };
+
+    if (isWorkspaceEnabled) {
+      createWorkspace('all').then(() => {
+        cy.loadSampleDataForWorkspace('ecommerce', workspaceId).then(() => {
+          cy.visit(`w/${workspaceId}/app/all_overview`);
+          validateRecentHistory();
+        });
+      });
+    } else {
+      cy.loadSampleData('logs').then(() => {
+        cy.visit('app/home');
+        validateRecentHistory();
+      });
+    }
+  });
+});