[Stateful sidenav] Welcome tour

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

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}
         />

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}
       />

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>,

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 unerlying 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: 'classic',
+      },
+    ];
+
+    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();
+  });
 });