[Stateful sidenav] Welcome tour (#194926)

elastic · Oct 15, 2024 · 8cceaee · 8cceaee
1 parent 63e116b
commit 8cceaee
Show file tree

Hide file tree

Showing 14 changed files with 509 additions and 25 deletions.
diff --git a/x-pack/plugins/spaces/common/constants.ts b/x-pack/plugins/spaces/common/constants.ts
@@ -52,3 +52,8 @@ export const API_VERSIONS = {
     v1: '2023-10-31',
   },
 };
+
+/**
+ * The setting to control whether the Space Solution Tour is shown.
+ */
+export const SHOW_SPACE_SOLUTION_TOUR_SETTING = 'showSpaceSolutionTour';
diff --git a/x-pack/plugins/spaces/public/nav_control/components/spaces_description.tsx b/x-pack/plugins/spaces/public/nav_control/components/spaces_description.tsx
@@ -20,7 +20,7 @@ import { getSpacesFeatureDescription } from '../../constants';
 interface Props {
   id: string;
   isLoading: boolean;
-  toggleSpaceSelector: () => void;
+  onClickManageSpaceBtn: () => void;
   capabilities: Capabilities;
   navigateToApp: ApplicationStart['navigateToApp'];
 }
@@ -45,7 +45,7 @@ export const SpacesDescription: FC<Props> = (props: Props) => {
         <ManageSpacesButton
           size="s"
           style={{ width: `100%` }}
-          onClick={props.toggleSpaceSelector}
+          onClick={props.onClickManageSpaceBtn}
           capabilities={props.capabilities}
           navigateToApp={props.navigateToApp}
         />

diff --git a/x-pack/plugins/spaces/public/nav_control/components/spaces_menu.tsx b/x-pack/plugins/spaces/public/nav_control/components/spaces_menu.tsx
@@ -43,6 +43,7 @@ interface Props {
   spaces: Space[];
   serverBasePath: string;
   toggleSpaceSelector: () => void;
+  onClickManageSpaceBtn: () => void;
   intl: InjectedIntl;
   capabilities: Capabilities;
   navigateToApp: ApplicationStart['navigateToApp'];
@@ -218,7 +219,7 @@ class SpacesMenuUI extends Component<Props> {
         key="manageSpacesButton"
         className="spcMenu__manageButton"
         size="s"
-        onClick={this.props.toggleSpaceSelector}
+        onClick={this.props.onClickManageSpaceBtn}
         capabilities={this.props.capabilities}
         navigateToApp={this.props.navigateToApp}
       />

diff --git a/x-pack/plugins/spaces/public/nav_control/nav_control.tsx b/x-pack/plugins/spaces/public/nav_control/nav_control.tsx
@@ -12,6 +12,7 @@ import ReactDOM from 'react-dom';
 import type { CoreStart } from '@kbn/core/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 
+import { initTour } from './solution_view_tour';
 import type { EventTracker } from '../analytics';
 import type { ConfigType } from '../config';
 import type { SpacesManager } from '../spaces_manager';
@@ -22,6 +23,8 @@ export function initSpacesNavControl(
   config: ConfigType,
   eventTracker: EventTracker
 ) {
+  const { showTour$, onFinishTour } = initTour(core, spacesManager);
+
   core.chrome.navControls.registerLeft({
     order: 1000,
     mount(targetDomElement: HTMLElement) {
@@ -47,6 +50,8 @@ export function initSpacesNavControl(
               navigateToUrl={core.application.navigateToUrl}
               allowSolutionVisibility={config.allowSolutionVisibility}
               eventTracker={eventTracker}
+              showTour$={showTour$}
+              onFinishTour={onFinishTour}
             />
           </Suspense>
         </KibanaRenderContextProvider>,

diff --git a/x-pack/plugins/spaces/public/nav_control/nav_control_popover.test.tsx b/x-pack/plugins/spaces/public/nav_control/nav_control_popover.test.tsx
@@ -8,7 +8,6 @@
 import {
   EuiFieldSearch,
   EuiHeaderSectionItemButton,
-  EuiPopover,
   EuiSelectable,
   EuiSelectableListItem,
 } from '@elastic/eui';
@@ -18,7 +17,7 @@ import * as Rx from 'rxjs';
 
 import { findTestSubject, mountWithIntl } from '@kbn/test-jest-helpers';
 
-import { NavControlPopover } from './nav_control_popover';
+import { NavControlPopover, type Props as NavControlPopoverProps } from './nav_control_popover';
 import type { Space } from '../../common';
 import { EventTracker } from '../analytics';
 import { SpaceAvatarInternal } from '../space_avatar/space_avatar_internal';
@@ -49,7 +48,12 @@ const reportEvent = jest.fn();
 const eventTracker = new EventTracker({ reportEvent });
 
 describe('NavControlPopover', () => {
-  async function setup(spaces: Space[], allowSolutionVisibility = false, activeSpace?: Space) {
+  async function setup(
+    spaces: Space[],
+    allowSolutionVisibility = false,
+    activeSpace?: Space,
+    props?: Partial<NavControlPopoverProps>
+  ) {
     const spacesManager = spacesManagerMock.create();
     spacesManager.getSpaces = jest.fn().mockResolvedValue(spaces);
 
@@ -68,6 +72,9 @@ describe('NavControlPopover', () => {
         navigateToUrl={jest.fn()}
         allowSolutionVisibility={allowSolutionVisibility}
         eventTracker={eventTracker}
+        showTour$={Rx.of(false)}
+        onFinishTour={jest.fn()}
+        {...props}
       />
     );
 
@@ -81,7 +88,7 @@ describe('NavControlPopover', () => {
   it('renders without crashing', () => {
     const spacesManager = spacesManagerMock.create();
 
-    const { baseElement } = render(
+    const { baseElement, queryByTestId } = render(
       <NavControlPopover
         spacesManager={spacesManager as unknown as SpacesManager}
         serverBasePath={'/server-base-path'}
@@ -91,9 +98,12 @@ describe('NavControlPopover', () => {
         navigateToUrl={jest.fn()}
         allowSolutionVisibility={false}
         eventTracker={eventTracker}
+        showTour$={Rx.of(false)}
+        onFinishTour={jest.fn()}
       />
     );
     expect(baseElement).toMatchSnapshot();
+    expect(queryByTestId('spaceSolutionTour')).toBeNull();
   });
 
   it('renders a SpaceAvatar with the active space', async () => {
@@ -117,6 +127,8 @@ describe('NavControlPopover', () => {
         navigateToUrl={jest.fn()}
         allowSolutionVisibility={false}
         eventTracker={eventTracker}
+        showTour$={Rx.of(false)}
+        onFinishTour={jest.fn()}
       />
     );
 
@@ -223,20 +235,29 @@ describe('NavControlPopover', () => {
   });
 
   it('can close its popover', async () => {
+    jest.useFakeTimers();
     const wrapper = await setup(mockSpaces);
 
+    expect(findTestSubject(wrapper, 'spaceMenuPopoverPanel').exists()).toEqual(false); // closed
+
+    // Open the popover
     await act(async () => {
       wrapper.find(EuiHeaderSectionItemButton).find('button').simulate('click');
     });
     wrapper.update();
-    expect(wrapper.find(EuiPopover).props().isOpen).toEqual(true);
+    expect(findTestSubject(wrapper, 'spaceMenuPopoverPanel').exists()).toEqual(true); // open
 
+    // Close the popover
     await act(async () => {
-      wrapper.find(EuiPopover).props().closePopover();
+      wrapper.find(EuiHeaderSectionItemButton).find('button').simulate('click');
+    });
+    act(() => {
+      jest.runAllTimers();
     });
     wrapper.update();
+    expect(findTestSubject(wrapper, 'spaceMenuPopoverPanel').exists()).toEqual(false); // closed
 
-    expect(wrapper.find(EuiPopover).props().isOpen).toEqual(false);
+    jest.useRealTimers();
   });
 
   it('should render solution for spaces', async () => {
@@ -301,4 +322,42 @@ describe('NavControlPopover', () => {
       space_id_prev: 'space-1',
     });
   });
+
+  it('should show the solution view tour', async () => {
+    jest.useFakeTimers(); // the underlying EUI tour component has a timeout that needs to be flushed for the test to pass
+
+    const spaces: Space[] = [
+      {
+        id: 'space-1',
+        name: 'Space-1',
+        disabledFeatures: [],
+        solution: 'es',
+      },
+    ];
+
+    const activeSpace = spaces[0];
+    const showTour$ = new Rx.BehaviorSubject(true);
+    const onFinishTour = jest.fn().mockImplementation(() => {
+      showTour$.next(false);
+    });
+
+    const wrapper = await setup(spaces, true /** allowSolutionVisibility **/, activeSpace, {
+      showTour$,
+      onFinishTour,
+    });
+
+    expect(findTestSubject(wrapper, 'spaceSolutionTour').exists()).toBe(true);
+
+    act(() => {
+      findTestSubject(wrapper, 'closeTourBtn').simulate('click');
+    });
+    act(() => {
+      jest.runAllTimers();
+    });
+    wrapper.update();
+
+    expect(findTestSubject(wrapper, 'spaceSolutionTour').exists()).toBe(false);
+
+    jest.useRealTimers();
+  });
 });
diff --git a/x-pack/plugins/spaces/public/nav_control/nav_control_popover.tsx b/x-pack/plugins/spaces/public/nav_control/nav_control_popover.tsx
@@ -13,13 +13,14 @@ import {
   withEuiTheme,
 } from '@elastic/eui';
 import React, { Component, lazy, Suspense } from 'react';
-import type { Subscription } from 'rxjs';
+import type { Observable, Subscription } from 'rxjs';
 
 import type { ApplicationStart, Capabilities } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
 
 import { SpacesDescription } from './components/spaces_description';
 import { SpacesMenu } from './components/spaces_menu';
+import { SolutionViewTour } from './solution_view_tour';
 import type { Space } from '../../common';
 import type { EventTracker } from '../analytics';
 import { getSpaceAvatarComponent } from '../space_avatar';
@@ -30,7 +31,7 @@ const LazySpaceAvatar = lazy(() =>
   getSpaceAvatarComponent().then((component) => ({ default: component }))
 );
 
-interface Props {
+export interface Props {
   spacesManager: SpacesManager;
   anchorPosition: PopoverAnchorPosition;
   capabilities: Capabilities;
@@ -40,19 +41,23 @@ interface Props {
   theme: WithEuiThemeProps['theme'];
   allowSolutionVisibility: boolean;
   eventTracker: EventTracker;
+  showTour$: Observable<boolean>;
+  onFinishTour: () => void;
 }
 
 interface State {
   showSpaceSelector: boolean;
   loading: boolean;
   activeSpace: Space | null;
   spaces: Space[];
+  showTour: boolean;
 }
 
 const popoutContentId = 'headerSpacesMenuContent';
 
 class NavControlPopoverUI extends Component<Props, State> {
   private activeSpace$?: Subscription;
+  private showTour$Sub?: Subscription;
 
   constructor(props: Props) {
     super(props);
@@ -61,6 +66,7 @@ class NavControlPopoverUI extends Component<Props, State> {
       loading: false,
       activeSpace: null,
       spaces: [],
+      showTour: false,
     };
   }
 
@@ -72,25 +78,37 @@ class NavControlPopoverUI extends Component<Props, State> {
         });
       },
     });
+
+    this.showTour$Sub = this.props.showTour$.subscribe((showTour) => {
+      this.setState({ showTour });
+    });
   }
 
   public componentWillUnmount() {
     this.activeSpace$?.unsubscribe();
+    this.showTour$Sub?.unsubscribe();
   }
 
   public render() {
     const button = this.getActiveSpaceButton();
     const { theme } = this.props;
+    const { activeSpace } = this.state;
+
+    const isTourOpen = Boolean(activeSpace) && this.state.showTour && !this.state.showSpaceSelector;
 
     let element: React.ReactNode;
     if (this.state.loading || this.state.spaces.length < 2) {
       element = (
         <SpacesDescription
           id={popoutContentId}
           isLoading={this.state.loading}
-          toggleSpaceSelector={this.toggleSpaceSelector}
           capabilities={this.props.capabilities}
           navigateToApp={this.props.navigateToApp}
+          onClickManageSpaceBtn={() => {
+            // No need to show the tour anymore, the user is taking action
+            this.props.onFinishTour();
+            this.toggleSpaceSelector();
+          }}
         />
       );
     } else {
@@ -106,24 +124,38 @@ class NavControlPopoverUI extends Component<Props, State> {
           activeSpace={this.state.activeSpace}
           allowSolutionVisibility={this.props.allowSolutionVisibility}
           eventTracker={this.props.eventTracker}
+          onClickManageSpaceBtn={() => {
+            // No need to show the tour anymore, the user is taking action
+            this.props.onFinishTour();
+            this.toggleSpaceSelector();
+          }}
         />
       );
     }
 
     return (
-      <EuiPopover
-        id="spcMenuPopover"
-        button={button}
-        isOpen={this.state.showSpaceSelector}
-        closePopover={this.closeSpaceSelector}
-        anchorPosition={this.props.anchorPosition}
-        panelPaddingSize="none"
-        repositionOnScroll
-        ownFocus
-        zIndex={Number(theme.euiTheme.levels.navigation) + 1} // it needs to sit above the collapsible nav menu
+      <SolutionViewTour
+        solution={activeSpace?.solution}
+        isTourOpen={isTourOpen}
+        onFinishTour={this.props.onFinishTour}
       >
-        {element}
-      </EuiPopover>
+        <EuiPopover
+          id="spcMenuPopover"
+          button={button}
+          isOpen={this.state.showSpaceSelector}
+          closePopover={this.closeSpaceSelector}
+          anchorPosition={this.props.anchorPosition}
+          panelPaddingSize="none"
+          repositionOnScroll
+          ownFocus
+          zIndex={Number(theme.euiTheme.levels.navigation) + 1} // it needs to sit above the collapsible nav menu
+          panelProps={{
+            'data-test-subj': 'spaceMenuPopoverPanel',
+          }}
+        >
+          {element}
+        </EuiPopover>
+      </SolutionViewTour>
     );
   }
 
@@ -195,6 +227,7 @@ class NavControlPopoverUI extends Component<Props, State> {
 
   protected toggleSpaceSelector = () => {
     const isOpening = !this.state.showSpaceSelector;
+
     if (isOpening) {
       this.loadSpaces();
     }

diff --git a/x-pack/plugins/spaces/public/nav_control/solution_view_tour/index.ts b/x-pack/plugins/spaces/public/nav_control/solution_view_tour/index.ts
@@ -0,0 +1,10 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { initTour } from './lib';
+
+export { SolutionViewTour } from './solution_view_tour';