[Serverless] Fix active nav elements for oblt side nav (elastic#162402)

## Summary closes elastic#162173 ## Before https://github.com/elastic/kibana/assets/3369346/bf857880-9b34-4b1a-b3ae-9ca3fabf43ac ## After https://github.com/elastic/kibana/assets/3369346/474df79f-ebf5-4fce-acef-fc1f5e28d0c2
ThomThomson · Aug 1, 2023 · 1bbe584 · 1bbe584
1 parent 469a92a
commit 1bbe584
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 7 deletions.
diff --git a/x-pack/plugins/serverless_observability/public/components/side_navigation/index.tsx b/x-pack/plugins/serverless_observability/public/components/side_navigation/index.tsx
@@ -67,10 +67,18 @@ const navigationTree: NavigationTreeDefinition = {
                   }),
                   link: 'ml:logRateAnalysis',
                   icon: 'beaker',
+                  getIsActive: ({ pathNameSerialized, prepend }) => {
+                    return pathNameSerialized.includes(prepend('/app/ml/aiops/log_rate_analysis'));
+                  },
                 },
                 {
                   link: 'ml:changePointDetections',
                   icon: 'beaker',
+                  getIsActive: ({ pathNameSerialized, prepend }) => {
+                    return pathNameSerialized.includes(
+                      prepend('/app/ml/aiops/change_point_detection')
+                    );
+                  },
                 },
                 {
                   title: i18n.translate('xpack.serverlessObservability.nav.ml.job.notifications', {
@@ -93,12 +101,22 @@ const navigationTree: NavigationTreeDefinition = {
               children: [
                 {
                   link: 'apm:services',
+                  getIsActive: ({ pathNameSerialized, prepend }) => {
+                    const regex = /app\/apm\/.*service.*/;
+                    return regex.test(pathNameSerialized);
+                  },
                 },
                 {
                   link: 'apm:traces',
+                  getIsActive: ({ pathNameSerialized, prepend }) => {
+                    return pathNameSerialized.startsWith(prepend('/app/apm/traces'));
+                  },
                 },
                 {
                   link: 'apm:dependencies',
+                  getIsActive: ({ pathNameSerialized, prepend }) => {
+                    return pathNameSerialized.startsWith(prepend('/app/apm/dependencies'));
+                  },
                 },
               ],
             },

diff --git a/x-pack/test_serverless/functional/test_suites/observability/cypress/e2e/navigation.cy.ts b/x-pack/test_serverless/functional/test_suites/observability/cypress/e2e/navigation.cy.ts
@@ -77,13 +77,13 @@ describe('Serverless', () => {
     cy.url().should('include', '/app/ml/jobs');
 
     cy.contains('Log rate analysis').click();
-    cy.url().should('include', 'app/ml/aiops/log_rate_analysis_index_select');
+    cy.url().should('include', '/app/ml/aiops/log_rate_analysis_index_select');
 
     cy.contains('Change Point Detection').click();
-    cy.url().should('include', 'app/ml/aiops/change_point_detection_index_select');
+    cy.url().should('include', '/app/ml/aiops/change_point_detection_index_select');
 
     cy.contains('Job notifications').click();
-    cy.url().should('include', 'app/ml/notifications');
+    cy.url().should('include', '/app/ml/notifications');
   });
 
   it('navigates to project settings', () => {
@@ -99,6 +99,81 @@ describe('Serverless', () => {
     cy.contains('Fleet').click();
     cy.url().should('include', '/app/fleet/agents');
   });
+
+  it('sets service nav item as active', () => {
+    cy.loginAsElasticUser('/app/apm/service-groups');
+
+    cy.getByTestSubj('nav-item-id-apm').should('have.class', 'euiSideNavItemButton-isOpen');
+    cy.getByTestSubj('nav-item-id-apm:services').should(
+      'have.class',
+      'euiSideNavItemButton-isSelected'
+    );
+
+    cy.loginAsElasticUser('/app/apm/service-maps');
+    cy.getByTestSubj('nav-item-id-apm').should('have.class', 'euiSideNavItemButton-isOpen');
+    cy.getByTestSubj('nav-item-id-apm:services').should(
+      'have.class',
+      'euiSideNavItemButton-isSelected'
+    );
+
+    cy.loginAsElasticUser('/app/apm/mobile-services/foo');
+    cy.getByTestSubj('nav-item-id-apm').should('have.class', 'euiSideNavItemButton-isOpen');
+    cy.getByTestSubj('nav-item-id-apm:services').should(
+      'have.class',
+      'euiSideNavItemButton-isSelected'
+    );
+  });
+
+  it('sets dependencies nav item as active', () => {
+    cy.loginAsElasticUser('/app/apm/dependencies/inventory');
+
+    cy.getByTestSubj('nav-item-id-apm').should('have.class', 'euiSideNavItemButton-isOpen');
+    cy.getByTestSubj('nav-item-id-apm:dependencies').should(
+      'have.class',
+      'euiSideNavItemButton-isSelected'
+    );
+
+    cy.loginAsElasticUser('/app/apm/dependencies/operations?dependencyName=foo');
+    cy.getByTestSubj('nav-item-id-apm').should('have.class', 'euiSideNavItemButton-isOpen');
+    cy.getByTestSubj('nav-item-id-apm:dependencies').should(
+      'have.class',
+      'euiSideNavItemButton-isSelected'
+    );
+  });
+
+  it('sets traces nav item as active', () => {
+    cy.loginAsElasticUser('/app/apm/traces/explorer/waterfall');
+
+    cy.getByTestSubj('nav-item-id-apm').should('have.class', 'euiSideNavItemButton-isOpen');
+    cy.getByTestSubj('nav-item-id-apm:traces').should(
+      'have.class',
+      'euiSideNavItemButton-isSelected'
+    );
+
+    cy.loginAsElasticUser('/app/apm/traces/explorer/critical_path');
+    cy.getByTestSubj('nav-item-id-apm').should('have.class', 'euiSideNavItemButton-isOpen');
+    cy.getByTestSubj('nav-item-id-apm:traces').should(
+      'have.class',
+      'euiSideNavItemButton-isSelected'
+    );
+  });
+
+  it('sets AIOps nav item as active', () => {
+    cy.loginAsElasticUser('app/ml/aiops/explain_log_rate_spikes');
+
+    cy.getByTestSubj('nav-item-id-aiops').should('have.class', 'euiSideNavItemButton-isOpen');
+    cy.getByTestSubj('nav-item-id-ml:logRateAnalysis').should(
+      'have.class',
+      'euiSideNavItemButton-isSelected'
+    );
+
+    cy.loginAsElasticUser('app/ml/aiops/change_point_detection');
+    cy.getByTestSubj('nav-item-id-aiops').should('have.class', 'euiSideNavItemButton-isOpen');
+    cy.getByTestSubj('nav-item-id-ml:changePointDetections').should(
+      'have.class',
+      'euiSideNavItemButton-isSelected'
+    );
+  });
 });
 
 export {};
diff --git a/x-pack/test_serverless/functional/test_suites/observability/cypress/support/commands.ts b/x-pack/test_serverless/functional/test_suites/observability/cypress/support/commands.ts
@@ -7,8 +7,8 @@
 import 'cypress-real-events/support';
 import 'cypress-axe';
 
-Cypress.Commands.add('loginAsElasticUser', () => {
-  cy.visit('/', {
+Cypress.Commands.add('loginAsElasticUser', (path?: string) => {
+  cy.visit(path ?? '/', {
     auth: {
       username: 'elastic',
       password: 'changeme',
@@ -17,5 +17,5 @@ Cypress.Commands.add('loginAsElasticUser', () => {
 });
 
 Cypress.Commands.add('getByTestSubj', (selector: string) => {
-  return cy.get(`[data-test-subj="${selector}"]`);
+  return cy.get(`[data-test-subj*="${selector}"]`);
 });
diff --git a/x-pack/test_serverless/functional/test_suites/observability/cypress/support/types.d.ts b/x-pack/test_serverless/functional/test_suites/observability/cypress/support/types.d.ts
@@ -7,7 +7,7 @@
 
 declare namespace Cypress {
   interface Chainable {
-    loginAsElasticUser(): Cypress.Chainable<Cypress.Response<any>>;
+    loginAsElasticUser(path?: string): Cypress.Chainable<Cypress.Response<any>>;
     getByTestSubj(selector: string): Chainable<JQuery<Element>>;
   }
 }