From 09c4e4fc49fa2e136d55890f278daf74b4ba3a42 Mon Sep 17 00:00:00 2001
From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com>
Date: Mon, 11 Jan 2021 09:46:59 +0530
Subject: [PATCH] Onboarding deploy tooltip fix (#2490)

---
 .../editorComponents/Onboarding/Tooltip.tsx   |  4 ++++
 .../src/constants/OnboardingConstants.tsx     |  9 ++++---
 app/client/src/pages/Editor/EditorHeader.tsx  |  1 +
 app/client/src/sagas/OnboardingSagas.ts       | 24 -------------------
 4 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/app/client/src/components/editorComponents/Onboarding/Tooltip.tsx b/app/client/src/components/editorComponents/Onboarding/Tooltip.tsx
index d914f3ac2b..19ddb89629 100644
--- a/app/client/src/components/editorComponents/Onboarding/Tooltip.tsx
+++ b/app/client/src/components/editorComponents/Onboarding/Tooltip.tsx
@@ -169,6 +169,10 @@ const OnboardingToolTip: React.FC<OnboardingToolTipProps> = (
             if (!nextOpenState && props.dismissOnOutsideClick) {
               dispatch(showTooltip(OnboardingStep.NONE));
             }
+
+            if (!nextOpenState && tooltipConfig.onClickOutside) {
+              dispatch(tooltipConfig.onClickOutside);
+            }
           }}
         >
           {props.children}
diff --git a/app/client/src/constants/OnboardingConstants.tsx b/app/client/src/constants/OnboardingConstants.tsx
index 82daf732a0..13aa546587 100644
--- a/app/client/src/constants/OnboardingConstants.tsx
+++ b/app/client/src/constants/OnboardingConstants.tsx
@@ -1,5 +1,6 @@
 import { ReduxAction, ReduxActionTypes } from "./ReduxActionConstants";
 import { EventName } from "../utils/AnalyticsUtil";
+import { showTooltip } from "actions/onboardingActions";
 
 export enum OnboardingStep {
   NONE = -1,
@@ -20,6 +21,7 @@ export type OnboardingTooltip = {
     label: string;
     action?: ReduxAction<OnboardingStep>;
   };
+  onClickOutside?: ReduxAction<any>;
   snippet?: string;
   isFinalStep?: boolean;
 };
@@ -113,16 +115,13 @@ export const OnboardingConfig: Record<OnboardingStep, OnboardingStepConfig> = {
   },
   [OnboardingStep.SUCCESSFUL_BINDING]: {
     setup: () => {
-      return [
-        {
-          type: ReduxActionTypes.LISTEN_FOR_WIDGET_UNSELECTION,
-        },
-      ];
+      return [];
     },
     tooltip: {
       title: "Your widget is now talking to your data 👌👏",
       description:
         "You can access widgets and actions as JS variables anywhere inside {{ }}",
+      onClickOutside: showTooltip(OnboardingStep.DEPLOY),
     },
     eventName: "ONBOARDING_SUCCESSFUL_BINDING",
   },
diff --git a/app/client/src/pages/Editor/EditorHeader.tsx b/app/client/src/pages/Editor/EditorHeader.tsx
index a410df8992..1af159f244 100644
--- a/app/client/src/pages/Editor/EditorHeader.tsx
+++ b/app/client/src/pages/Editor/EditorHeader.tsx
@@ -295,6 +295,7 @@ export const EditorHeader = (props: EditorHeaderProps) => {
             <OnboardingToolTip
               step={[OnboardingStep.DEPLOY]}
               position={Position.BOTTOM_RIGHT}
+              dismissOnOutsideClick={false}
             >
               <Indicator
                 step={OnboardingStep.SUCCESSFUL_BINDING}
diff --git a/app/client/src/sagas/OnboardingSagas.ts b/app/client/src/sagas/OnboardingSagas.ts
index a744b683e0..5aa76ec1c7 100644
--- a/app/client/src/sagas/OnboardingSagas.ts
+++ b/app/client/src/sagas/OnboardingSagas.ts
@@ -243,26 +243,6 @@ function* listenForCreateAction() {
   yield put(showIndicator(OnboardingStep.RUN_QUERY_SUCCESS));
 }
 
-function* listenForWidgetUnselection() {
-  while (true) {
-    yield take();
-
-    // After any of these events we show the deploy tooltip
-    yield take([
-      ReduxActionTypes.HIDE_PROPERTY_PANE,
-      ReduxActionTypes.SET_WIDGET_RESIZING,
-    ]);
-    const currentStep = yield select(getCurrentStep);
-    const isinOnboarding = yield select(inOnboarding);
-
-    if (!isinOnboarding || currentStep !== OnboardingStep.DEPLOY) return;
-
-    yield delay(1000);
-    yield put(showTooltip(OnboardingStep.DEPLOY));
-    return;
-  }
-}
-
 function* listenForDeploySaga() {
   while (true) {
     yield take();
@@ -338,10 +318,6 @@ export default function* onboardingSagas() {
       ReduxActionTypes.LISTEN_FOR_TABLE_WIDGET_BINDING,
       listenForSuccessfullBinding,
     ),
-    takeEvery(
-      ReduxActionTypes.LISTEN_FOR_WIDGET_UNSELECTION,
-      listenForWidgetUnselection,
-    ),
     takeEvery(ReduxActionTypes.SET_CURRENT_STEP, setupOnboardingStep),
     takeEvery(ReduxActionTypes.LISTEN_FOR_DEPLOY, listenForDeploySaga),
   ]);