Skip last step if controls disabled

elastic · Apr 29, 2022 · c6def54 · c6def54
1 parent 44c0533
commit c6def54
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 24 deletions.
diff --git a/src/plugins/dashboard/public/application/dashboard_app.tsx b/src/plugins/dashboard/public/application/dashboard_app.tsx
@@ -22,7 +22,6 @@ import { EmbeddableRenderer, ViewMode } from '../services/embeddable';
 import { DashboardTopNav, isCompleteDashboardAppState } from './top_nav/dashboard_top_nav';
 import { DashboardAppServices, DashboardEmbedSettings, DashboardRedirect } from '../types';
 import { createKbnUrlStateStorage, withNotifyOnErrors } from '../services/kibana_utils';
-import { DashboardEditTour, DashboardViewTour } from '../tour';
 export interface DashboardAppProps {
   history: History;
   savedDashboardId?: string;
@@ -107,12 +106,9 @@ export function DashboardApp({
     };
   }, [data.search.session]);
 
-  const [printMode, editMode] = useMemo(() => {
+  const [printMode] = useMemo(() => {
     const latestDashboardState = dashboardAppState.getLatestDashboardState?.();
-    return [
-      latestDashboardState?.viewMode === ViewMode.PRINT,
-      latestDashboardState?.viewMode === ViewMode.EDIT,
-    ];
+    return [latestDashboardState?.viewMode === ViewMode.PRINT];
   }, [dashboardAppState]);
 
   useEffect(() => {
@@ -123,13 +119,6 @@ export function DashboardApp({
     <>
       {isCompleteDashboardAppState(dashboardAppState) && (
         <>
-          {editMode && (
-            <DashboardEditTour
-              panelCount={
-                Object.keys(dashboardAppState.dashboardContainer?.getInput().panels ?? {}).length
-              }
-            />
-          )}
           {!printMode && (
             <>
               <DashboardTopNav

diff --git a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx
@@ -13,13 +13,14 @@ import {
   ControlGroupContainer,
   LazyControlsCallout,
 } from '@kbn/controls-plugin/public';
-import { DashboardTour } from '@kbn/dashboard-plugin/public/dashboard_tour';
+
 import { ViewMode } from '../../../services/embeddable';
 import { DashboardContainer, DashboardReactContextValue } from '../dashboard_container';
 import { DashboardGrid } from '../grid';
 import { context } from '../../../services/kibana_react';
 import { DashboardEmptyScreen } from '../empty_screen/dashboard_empty_screen';
 import { withSuspense } from '../../../services/presentation_util';
+import { DashboardEditTour } from '../../../tour';
 
 export interface DashboardViewportProps {
   container: DashboardContainer;
@@ -110,6 +111,9 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
 
     return (
       <>
+        {isEditMode && (
+          <DashboardEditTour panelCount={panelCount} controlsEnabled={controlsEnabled ?? false} />
+        )}
         {controlsEnabled ? (
           <>
             {isEditMode && panelCount !== 0 && controlGroup?.getPanelCount() === 0 ? (

diff --git a/src/plugins/dashboard/public/tour/custom_footer.tsx b/src/plugins/dashboard/public/tour/custom_footer.tsx
@@ -6,20 +6,20 @@
  * Side Public License, v 1.
  */
 
-import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiI18n } from '@elastic/eui';
 import React from 'react';
 
 export const CustomFooter = ({ onSkip, onNext }: { onSkip: () => void; onNext: () => void }) => {
   return (
     <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiButtonEmpty color="text" size="xs" onClick={onSkip}>
-          Skip tour
+          {EuiI18n({ token: 'core.euiTourStep.skipTour', default: 'Skip tour' })}
         </EuiButtonEmpty>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiButton size="s" color="success" onClick={onNext}>
-          Next
+          {EuiI18n({ token: 'core.euiTourStep.nextStep', default: 'Next' })}
         </EuiButton>
       </EuiFlexItem>
     </EuiFlexGroup>

diff --git a/src/plugins/dashboard/public/tour/dashboard_edit_tour.tsx b/src/plugins/dashboard/public/tour/dashboard_edit_tour.tsx
@@ -6,7 +6,15 @@
  * Side Public License, v 1.
  */
 
-import { EuiStatelessTourStep, EuiText, EuiTourState, EuiTourStep, useEuiTour } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiI18n,
+  EuiStatelessTourStep,
+  EuiText,
+  EuiTourState,
+  EuiTourStep,
+  useEuiTour,
+} from '@elastic/eui';
 import React, { useEffect } from 'react';
 import { CustomFooter } from './custom_footer';
 import { DashboardTourStrings } from './translations';
@@ -64,7 +72,13 @@ const dashboardEditTourSteps = [
   } as EuiStatelessTourStep,
 ];
 
-export const DashboardEditTour = ({ panelCount }: { panelCount: number }) => {
+export const DashboardEditTour = ({
+  panelCount,
+  controlsEnabled,
+}: {
+  panelCount: number;
+  controlsEnabled: boolean;
+}) => {
   const initialState = localStorage.getItem(DASHBOARD_EDIT_TOUR_STORAGE_KEY);
   let tourState: EuiTourState;
   if (initialState) {
@@ -96,6 +110,15 @@ export const DashboardEditTour = ({ panelCount }: { panelCount: number }) => {
     }
   };
 
+  const EndTourIfNoControlsFooter = () => {
+    if (controlsEnabled) return <CustomFooter {...commonFooterProps} />;
+    return (
+      <EuiButtonEmpty color="text" size="xs" onClick={() => actions.finishTour()}>
+        {EuiI18n({ token: 'core.euiTourStep.endTour', default: 'End tour' })}
+      </EuiButtonEmpty>
+    );
+  };
+
   const TourSteps = () => {
     return (
       <>
@@ -110,7 +133,7 @@ export const DashboardEditTour = ({ panelCount }: { panelCount: number }) => {
         />
         <EuiTourStep {...euiTourStepTwo} footerAction={<CustomFooter {...commonFooterProps} />} />
         <EuiTourStep {...euiTourStepThree} footerAction={<CustomFooter {...commonFooterProps} />} />
-        <EuiTourStep {...euiTourStepFour} footerAction={<CustomFooter {...commonFooterProps} />} />
+        <EuiTourStep {...euiTourStepFour} footerAction={<EndTourIfNoControlsFooter />} />
         <EuiTourStep {...euiTourStepFive} />
       </>
     );

diff --git a/src/plugins/dashboard/public/tour/dashboard_view_tour.tsx b/src/plugins/dashboard/public/tour/dashboard_view_tour.tsx
@@ -32,14 +32,17 @@ export const dashboardViewTourSteps = [
 
 export const DashboardViewTour = () => {
   const initialState = localStorage.getItem(DASHBOARD_VIEW_TOUR_STORAGE_KEY);
-  let tourState: EuiTourState;
+  let tourState: Pick<EuiTourState, Exclude<keyof EuiTourState, 'tourSubtitle'>>;
   if (initialState) {
     tourState = { ...JSON.parse(initialState) };
   } else {
     tourState = dashboardViewTourConfig;
   }
 
-  const [[euiTourStepOne], _, reducerState] = useEuiTour(dashboardViewTourSteps, tourState);
+  const [[euiTourStepOne], _, reducerState] = useEuiTour(
+    dashboardViewTourSteps,
+    tourState as EuiTourState
+  );
 
   useEffect(() => {
     localStorage.setItem(DASHBOARD_VIEW_TOUR_STORAGE_KEY, JSON.stringify(reducerState));

diff --git a/src/plugins/dashboard/public/tour/translations.ts b/src/plugins/dashboard/public/tour/translations.ts
@@ -16,8 +16,7 @@ export const DashboardTourStrings = {
       }),
     getDescription: () =>
       i18n.translate('dashboard.tour.viewMode.firstStep.description', {
-        defaultMessage:
-          'Build maps, charts, gauges, and other visualizations that best display your data.',
+        defaultMessage: 'Start editing here.',
       }),
   },
   editModeTour: {