[Stateful sidenav] Functional tests helpers (elastic#189804)

.buildkite/ftr_platform_stateful_configs.yml

@@ -272,6 +272,7 @@ enabled:
   - x-pack/test/functional/config.firefox.js
   - x-pack/test/functional/config.upgrade_assistant.ts
   - x-pack/test/functional_cloud/config.ts
+  - x-pack/test/functional_solution_sidenav/config.ts
   - x-pack/test/kubernetes_security/basic/config.ts
   - x-pack/test/licensing_plugin/config.public.ts
   - x-pack/test/licensing_plugin/config.ts

.github/CODEOWNERS

@@ -1762,6 +1762,8 @@ x-pack/plugins/observability_solution/observability_shared/public/components/pro
 
 # Shared UX
 packages/react @elastic/appex-sharedux
+test/functional/page_objects/solution_navigation.ts @elastic/appex-sharedux
+/x-pack/test_serverless/functional/page_objects/svl_common_navigation.ts @elastic/appex-sharedux
 
 # OpenAPI spec files
 /x-pack/plugins/fleet/common/openapi          @elastic/platform-docs

packages/core/chrome/core-chrome-browser-internal/src/project_navigation/project_navigation_service.ts

@@ -20,6 +20,7 @@ import type {
 } from '@kbn/core-chrome-browser';
 import type { InternalHttpStart } from '@kbn/core-http-browser-internal';
 import {
+  Subject,
   BehaviorSubject,
   combineLatest,
   map,
@@ -32,6 +33,7 @@ import {
   of,
   type Observable,
   type Subscription,
+  timer,
 } from 'rxjs';
 import { type Location, createLocation } from 'history';
 import deepEqual from 'react-fast-compare';
@@ -326,20 +328,50 @@ export class ProjectNavigationService {
         }
 
         const { sideNavComponent, homePage = '' } = definition;
-        const homePageLink = this.navLinksService?.get(homePage);
 
         if (sideNavComponent) {
           this.setSideNavComponent(sideNavComponent);
         }
 
-        if (homePageLink) {
-          this.setProjectHome(homePageLink.href);
-        }
+        this.waitForLink(homePage, (navLink: ChromeNavLink) => {
+          this.setProjectHome(navLink.href);
+        });
 
         this.initNavigation(nextId, definition.navigationTree$);
       });
   }
 
+  /**
+   * This method waits for the chrome nav link to be available and then calls the callback.
+   * This is necessary to avoid race conditions when we register the solution navigation
+   * before the deep links are available (plugins can register them later).
+   *
+   * @param linkId The chrome nav link id
+   * @param cb The callback to call when the link is found
+   * @returns
+   */
+  private waitForLink(linkId: string, cb: (chromeNavLink: ChromeNavLink) => undefined): void {
+    if (!this.navLinksService) return;
+
+    let navLink: ChromeNavLink | undefined = this.navLinksService.get(linkId);
+    if (navLink) {
+      cb(navLink);
+      return;
+    }
+
+    const stop$ = new Subject<void>();
+    const tenSeconds = timer(10000);
+
+    this.deepLinksMap$.pipe(takeUntil(tenSeconds), takeUntil(stop$)).subscribe((navLinks) => {
+      navLink = navLinks[linkId];
+
+      if (navLink) {
+        cb(navLink);
+        stop$.next();
+      }
+    });
+  }
+
   private setProjectHome(homeHref: string) {
     this.projectHome$.next(homeHref);
   }

packages/shared-ux/chrome/navigation/src/ui/components/navigation_item_open_panel.tsx

@@ -73,6 +73,7 @@ export const NavigationItemOpenPanel: FC<Props> = ({ item, navigateToUrl, active
     [`nav-item-isActive`]: isActive,
   });
   const buttonDataTestSubj = classNames(`panelOpener`, `panelOpener-${path}`, {
+    [`panelOpener-id-${id}`]: id,
     [`panelOpener-deepLinkId-${deepLink?.id}`]: !!deepLink,
   });
 

packages/shared-ux/chrome/navigation/src/ui/components/panel/navigation_panel.tsx

@@ -19,6 +19,17 @@ import classNames from 'classnames';
 
 import { usePanel } from './context';
 import { getNavPanelStyles, getPanelWrapperStyles } from './styles';
+import { PanelNavNode } from './types';
+
+const getTestSubj = (selectedNode: PanelNavNode | null): string | undefined => {
+  if (!selectedNode) return;
+
+  const deeplinkId = selectedNode.deepLink?.id;
+  return classNames(`sideNavPanel`, {
+    [`sideNavPanel-id-${selectedNode.id}`]: selectedNode.id,
+    [`sideNavPanel-deepLinkId-${deeplinkId}`]: !!deeplinkId,
+  });
+};
 
 export const NavigationPanel: FC = () => {
   const { euiTheme } = useEuiTheme();
@@ -67,7 +78,7 @@ export const NavigationPanel: FC = () => {
               hasShadow
               borderRadius="none"
               paddingSize="m"
-              data-test-subj="sideNavPanel"
+              data-test-subj={getTestSubj(selectedNode)}
             >
               {getContent()}
             </EuiPanel>

packages/shared-ux/chrome/navigation/src/ui/components/panel/types.ts

@@ -27,7 +27,7 @@ export type ContentProvider = (nodeId: string) => PanelContent | void;
 
 export type PanelNavNode = Pick<
   ChromeProjectNavigationNode,
-  'id' | 'children' | 'path' | 'sideNavStatus'
+  'id' | 'children' | 'path' | 'sideNavStatus' | 'deepLink'
 > & {
   title: string | ReactNode;
 };

test/functional/page_objects/embedded_console.ts

@@ -0,0 +1,49 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { FtrProviderContext } from '../ftr_provider_context';
+
+export function EmbeddedConsoleProvider(ctx: FtrProviderContext) {
+  const testSubjects = ctx.getService('testSubjects');
+
+  return {
+    async expectEmbeddedConsoleControlBarExists() {
+      await testSubjects.existOrFail('consoleEmbeddedSection');
+    },
+    async expectEmbeddedConsoleToBeOpen() {
+      await testSubjects.existOrFail('consoleEmbeddedBody');
+    },
+    async expectEmbeddedConsoleToBeClosed() {
+      await testSubjects.missingOrFail('consoleEmbeddedBody');
+    },
+    async clickEmbeddedConsoleControlBar() {
+      await testSubjects.click('consoleEmbeddedControlBar');
+    },
+    async expectEmbeddedConsoleNotebooksButtonExists() {
+      await testSubjects.existOrFail('consoleEmbeddedNotebooksButton');
+    },
+    async clickEmbeddedConsoleNotebooksButton() {
+      await testSubjects.click('consoleEmbeddedNotebooksButton');
+    },
+    async expectEmbeddedConsoleNotebooksToBeOpen() {
+      await testSubjects.existOrFail('consoleEmbeddedNotebooksContainer');
+    },
+    async expectEmbeddedConsoleNotebooksToBeClosed() {
+      await testSubjects.missingOrFail('consoleEmbeddedNotebooksContainer');
+    },
+    async expectEmbeddedConsoleNotebookListItemToBeAvailable(id: string) {
+      await testSubjects.existOrFail(`console-embedded-notebook-select-btn-${id}`);
+    },
+    async clickEmbeddedConsoleNotebook(id: string) {
+      await testSubjects.click(`console-embedded-notebook-select-btn-${id}`);
+    },
+    async expectEmbeddedConsoleNotebookToBeAvailable(id: string) {
+      await testSubjects.click(`console-embedded-notebook-select-btn-${id}`);
+    },
+  };
+}

test/functional/page_objects/index.ts

@@ -36,6 +36,8 @@ import { UnifiedSearchPageObject } from './unified_search_page';
 import { UnifiedFieldListPageObject } from './unified_field_list';
 import { FilesManagementPageObject } from './files_management';
 import { AnnotationEditorPageObject } from './annotation_library_editor_page';
+import { SolutionNavigationProvider } from './solution_navigation';
+import { EmbeddedConsoleProvider } from './embedded_console';
 
 export const pageObjects = {
   annotationEditor: AnnotationEditorPageObject,
@@ -46,12 +48,14 @@ export const pageObjects = {
   dashboardControls: DashboardPageControls,
   dashboardLinks: DashboardPageLinks,
   discover: DiscoverPageObject,
+  embeddedConsole: EmbeddedConsoleProvider,
   error: ErrorPageObject,
   header: HeaderPageObject,
   home: HomePageObject,
   newsfeed: NewsfeedPageObject,
   settings: SettingsPageObject,
   share: SharePageObject,
+  solutionNavigation: SolutionNavigationProvider,
   legacyDataTableVis: LegacyDataTableVisPageObject,
   login: LoginPageObject,
   timelion: TimelionPageObject,
@@ -69,3 +73,5 @@ export const pageObjects = {
   unifiedFieldList: UnifiedFieldListPageObject,
   filesManagement: FilesManagementPageObject,
 };
+
+export { SolutionNavigationProvider } from './solution_navigation';