Improve OnboardingFlow API and typescript types

4 files changed, 27 insertions, 14 deletions

diff --git a/packages/typescript-typings/types/react-joyride/index.d.ts b/packages/typescript-typings/types/react-joyride/index.d.ts
index 6c1a5b092..f126e4c86 100644
--- a/packages/typescript-typings/types/react-joyride/index.d.ts
+++ b/packages/typescript-typings/types/react-joyride/index.d.ts
@@ -37,17 +37,34 @@ declare module 'react-joyride' {
         [prop: string]: any;
     }
 
-    interface StyleOptionsProp {
+    export interface StyleOptionsProp {
         options: StyleOptions;
     }
 
+    interface CallbackMetadata {
+        type:
+            | 'tour:start'
+            | 'step:before'
+            | 'beacon'
+            | 'tooltip'
+            | 'close'
+            | 'step:after'
+            | 'tour:end'
+            | 'tour:status'
+            | 'error:target_not_found'
+            | 'error';
+        step: number;
+    }
+
+    export type CallbackData = CallbackMetadata & State;
+
     export interface Props {
         steps?: Step[];
         beaconComponent?: React.ReactNode;
         disableOverlayClose?: boolean;
         run?: boolean;
         stepIndex?: number;
-        callback?: (options: any) => void;
+        callback?: (data: CallbackData) => void;
         debug?: boolean;
         styles?: StyleOptionsProp;
     }
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index dd417856f..621d14260 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import Joyride, { Step, StyleOptions } from 'react-joyride';
+import Joyride, { CallbackData, Step, StyleOptions } from 'react-joyride';
 
 import { zIndex } from 'ts/utils/style';
 
@@ -30,8 +30,8 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         );
     }
 
-    private _handleChange(options: any): void {
-        switch (options.action) {
+    private _handleChange(data: CallbackData): void {
+        switch (data.action) {
             case 'close':
                 this.props.onClose();
         }
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 9bccd0a9c..11684aaee 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -6,7 +6,7 @@ import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow';
 export interface PortalOnboardingFlowProps {
     stepIndex: number;
     isRunning: boolean;
-    setOnboardingShowing: (isShowing: boolean) => void;
+    onClose: () => void;
 }
 
 const steps: Step[] = [
@@ -25,12 +25,8 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
                 steps={steps}
                 stepIndex={this.props.stepIndex}
                 isRunning={this.props.isRunning}
-                onClose={this._handleClose.bind(this)}
+                onClose={this.props.onClose}
             />
         );
     }
-
-    private _handleClose(): void {
-        this.props.setOnboardingShowing(false);
-    }
 }
diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts
index e62e46dd1..3cd4e8510 100644
--- a/packages/website/ts/containers/portal_onboarding_flow.ts
+++ b/packages/website/ts/containers/portal_onboarding_flow.ts
@@ -14,7 +14,7 @@ interface ConnectedState {
 }
 
 interface ConnectedDispatch {
-    setOnboardingShowing: (isShowing: boolean) => void;
+    onClose: () => void;
 }
 
 const mapStateToProps = (state: State): ConnectedState => ({
@@ -23,10 +23,10 @@ const mapStateToProps = (state: State): ConnectedState => ({
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
-    setOnboardingShowing: (isShowing: boolean): void => {
+    onClose: (): void => {
         dispatch({
             type: ActionTypes.UpdatePortalOnboardingShowing,
-            data: isShowing,
+            data: false,
         });
     },
 });