Onboarding fixes (#2458)

app/client/cypress/integration/Smoke_TestSuite/Onboarding/Onboarding_spec.js

@@ -57,8 +57,16 @@ describe("Onboarding", function() {
     cy.closePropertyPane();
 
     cy.get(".t--application-feedback-btn").should("not.be.visible");
+  });
+
+  // Similar to PublishtheApp command with little changes
+  it("Publish app", function() {
+    cy.server();
+    cy.route("POST", "/api/v1/applications/publish/*").as("publishApp");
+
+    // Wait before publish
+    cy.wait(2000);
 
-    // Publish
     cy.window().then((window) => {
       cy.stub(window, "open").callsFake((url) => {
         window.location.href = Cypress.config().baseUrl + url.substring(1);
@@ -68,6 +76,12 @@ describe("Onboarding", function() {
     cy.get(homePage.publishButton).click();
     cy.wait("@publishApp");
 
+    cy.url().should("include", "/pages");
+    cy.log("pagename: " + localStorage.getItem("PageName"));
+
+    // The button appears after 3 seconds
+    cy.wait(3000);
+    cy.get(".t--continue-on-my-own").should("be.visible");
     cy.get(".t--continue-on-my-own").click();
   });
 });

app/client/src/components/editorComponents/Onboarding/CompletionDialog.tsx

@@ -15,6 +15,7 @@ import { getCurrentPageId } from "selectors/editorSelectors";
 import { endOnboarding } from "actions/onboardingActions";
 import { getQueryParams } from "utils/AppsmithUtils";
 import { getOnboardingState } from "utils/storage";
+import AnalyticsUtil from "utils/AnalyticsUtil";
 
 const StyledDialog = styled(Dialog)`
   && {
@@ -111,6 +112,7 @@ const CompletionDialog = () => {
   }, []);
 
   const onClose = () => {
+    AnalyticsUtil.logEvent("END_ONBOARDING");
     setIsOpen(false);
     dispatch(endOnboarding());
   };

app/client/src/components/editorComponents/Onboarding/Tooltip.tsx

@@ -19,6 +19,7 @@ import {
   OnboardingTooltip,
 } from "constants/OnboardingConstants";
 import { BaseModifier } from "popper.js";
+import AnalyticsUtil from "utils/AnalyticsUtil";
 
 enum TooltipClassNames {
   TITLE = "tooltip-title",
@@ -116,6 +117,7 @@ type OnboardingToolTipProps = {
   children: ReactNode;
   show?: boolean;
   position?: Position;
+  dismissOnOutsideClick?: boolean;
   offset?: BaseModifier & {
     offset?: number | string;
   };
@@ -164,7 +166,7 @@ const OnboardingToolTip: React.FC<OnboardingToolTipProps> = (
             offset: props.offset,
           }}
           onInteraction={(nextOpenState: boolean) => {
-            if (!nextOpenState) {
+            if (!nextOpenState && props.dismissOnOutsideClick) {
               dispatch(showTooltip(OnboardingStep.NONE));
             }
           }}
@@ -181,6 +183,7 @@ const OnboardingToolTip: React.FC<OnboardingToolTipProps> = (
 
 OnboardingToolTip.defaultProps = {
   show: true,
+  dismissOnOutsideClick: true,
 };
 
 type ToolTipContentProps = {
@@ -203,7 +206,8 @@ const ToolTipContent = (props: ToolTipContentProps) => {
     snippet && write(snippet);
   };
 
-  const finishOnboarding = () => {
+  const skipOnboarding = () => {
+    AnalyticsUtil.logEvent("SKIP_ONBOARDING");
     dispatch(endOnboarding());
   };
 
@@ -224,7 +228,7 @@ const ToolTipContent = (props: ToolTipContentProps) => {
       )}
       <ActionWrapper>
         <span className={TooltipClassNames.SKIP}>
-          Done? <span onClick={finishOnboarding}>Click here to End</span>
+          Done? <span onClick={skipOnboarding}>Click here to End</span>
         </span>
 
         {action && (

app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx

@@ -123,6 +123,7 @@ const PropertyControl = (props: Props) => {
             ]}
             show={propertyName === "tableData"}
             position={Position.LEFT_TOP}
+            dismissOnOutsideClick={false}
           >
             {PropertyControlFactory.createControl(
               config,

app/client/src/pages/Editor/Welcome.tsx

@@ -5,6 +5,7 @@ import Spinner from "components/ads/Spinner";
 import { Classes } from "components/ads/common";
 import { AppState } from "reducers";
 import { endOnboarding, setCurrentStep } from "actions/onboardingActions";
+import AnalyticsUtil from "utils/AnalyticsUtil";
 
 const Wrapper = styled.div`
   height: 100%;
@@ -129,7 +130,12 @@ const Welcome = () => {
 
         <NotNewUserText>
           Not your first time with Appsmith?{" "}
-          <span onClick={() => dispatch(endOnboarding())}>
+          <span
+            onClick={() => {
+              AnalyticsUtil.logEvent("SKIP_ONBOARDING");
+              dispatch(endOnboarding());
+            }}
+          >
             Skip this tutorial
           </span>
         </NotNewUserText>

app/client/src/sagas/OnboardingSagas.ts

@@ -94,6 +94,7 @@ function* listenForWidgetAdditions() {
         });
       }
 
+      AnalyticsUtil.logEvent("ONBOARDING_ADD_WIDGET");
       yield put(setCurrentStep(OnboardingStep.ADD_WIDGET));
       yield put({
         type: ReduxActionTypes.ADD_WIDGET_COMPLETE,
@@ -137,6 +138,7 @@ function* listenForSuccessfullBinding() {
         }
 
         if (bindSuccessfull) {
+          AnalyticsUtil.logEvent("ONBOARDING_SUCCESSFUL_BINDING");
           yield put(setCurrentStep(OnboardingStep.SUCCESSFUL_BINDING));
 
           // Show tooltip now
@@ -154,6 +156,8 @@ function* listenForSuccessfullBinding() {
 }
 
 function* createOnboardingDatasource() {
+  AnalyticsUtil.logEvent("ONBOARDING_EXAMPLE_DATABASE");
+
   try {
     const organizationId = yield select(getCurrentOrgId);
     const plugins = yield select(getPlugins);
@@ -212,10 +216,6 @@ function* createOnboardingDatasource() {
     yield put(changeDatasource(onboardingDatasource));
     yield put(showTooltip(OnboardingStep.EXAMPLE_DATABASE));
     yield put(showIndicator(OnboardingStep.EXAMPLE_DATABASE));
-
-    // Need to hide this tooltip based on some events
-    yield take([ReduxActionTypes.QUERY_PANE_CHANGE]);
-    yield put(showTooltip(OnboardingStep.NONE));
   } catch (error) {
     yield put({
       type: ReduxActionErrorTypes.CREATE_ONBOARDING_DBQUERY_ERROR,
@@ -226,6 +226,7 @@ function* createOnboardingDatasource() {
 
 function* listenForCreateAction() {
   yield take([ReduxActionTypes.CREATE_ACTION_SUCCESS]);
+  AnalyticsUtil.logEvent("ONBOARDING_ADD_QUERY");
   yield put(setCurrentStep(OnboardingStep.RUN_QUERY));
 
   yield put(showTooltip(OnboardingStep.RUN_QUERY));
@@ -239,6 +240,8 @@ function* listenForCreateAction() {
   yield put(showTooltip(OnboardingStep.NONE));
 
   yield take([ReduxActionTypes.RUN_ACTION_SUCCESS]);
+  AnalyticsUtil.logEvent("ONBOARDING_RUN_QUERY");
+
   yield put(setCurrentStep(OnboardingStep.RUN_QUERY_SUCCESS));
   yield put(showTooltip(OnboardingStep.RUN_QUERY_SUCCESS));
   yield put(showIndicator(OnboardingStep.RUN_QUERY_SUCCESS));
@@ -248,7 +251,11 @@ function* listenForWidgetUnselection() {
   while (true) {
     yield take();
 
-    yield take(ReduxActionTypes.HIDE_PROPERTY_PANE);
+    // 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);
 
@@ -265,6 +272,7 @@ function* listenForDeploySaga() {
     yield take();
 
     yield take(ReduxActionTypes.PUBLISH_APPLICATION_SUCCESS);
+    AnalyticsUtil.logEvent("ONBOARDING_DEPLOY");
     yield put(showTooltip(OnboardingStep.NONE));
 
     yield put(setCurrentStep(OnboardingStep.FINISH));
@@ -304,9 +312,6 @@ function* proceedOnboardingSaga() {
 function* setupOnboardingStep() {
   const currentStep: OnboardingStep = yield select(getCurrentStep);
   const currentConfig = OnboardingConfig[currentStep];
-  if (currentConfig.eventName) {
-    AnalyticsUtil.logEvent(currentConfig.eventName);
-  }
   let actions = currentConfig.setup();
 
   if (actions.length) {
@@ -316,7 +321,6 @@ function* setupOnboardingStep() {
 }
 
 function* skipOnboardingSaga() {
-  AnalyticsUtil.logEvent("END_ONBOARDING");
   const set = yield setOnboardingState(false);
 
   if (set) {

app/client/src/utils/AnalyticsUtil.tsx

@@ -90,10 +90,12 @@ export type EventName =
   | "EXECUTE_ACTION"
   | "ONBOARDING_WELCOME"
   | "ONBOARDING_EXAMPLE_DATABASE"
+  | "ONBOARDING_ADD_QUERY"
   | "ONBOARDING_RUN_QUERY"
   | "ONBOARDING_ADD_WIDGET"
   | "ONBOARDING_SUCCESSFUL_BINDING"
   | "ONBOARDING_DEPLOY"
+  | "SKIP_ONBOARDING"
   | "END_ONBOARDING";
 
 function getApplicationId(location: Location) {