diff --git a/app/client/cypress/integration/Smoke_TestSuite/Onboarding/Onboarding_spec.js b/app/client/cypress/integration/Smoke_TestSuite/Onboarding/Onboarding_spec.js index 7fdb5af7a7..0def9905fc 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/Onboarding/Onboarding_spec.js +++ b/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(); }); }); diff --git a/app/client/src/components/editorComponents/Onboarding/CompletionDialog.tsx b/app/client/src/components/editorComponents/Onboarding/CompletionDialog.tsx index 18cdfb2ca5..41ad231ace 100644 --- a/app/client/src/components/editorComponents/Onboarding/CompletionDialog.tsx +++ b/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()); }; diff --git a/app/client/src/components/editorComponents/Onboarding/Tooltip.tsx b/app/client/src/components/editorComponents/Onboarding/Tooltip.tsx index 6116055786..d914f3ac2b 100644 --- a/app/client/src/components/editorComponents/Onboarding/Tooltip.tsx +++ b/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 = ( offset: props.offset, }} onInteraction={(nextOpenState: boolean) => { - if (!nextOpenState) { + if (!nextOpenState && props.dismissOnOutsideClick) { dispatch(showTooltip(OnboardingStep.NONE)); } }} @@ -181,6 +183,7 @@ const OnboardingToolTip: React.FC = ( 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) => { )} - Done? Click here to End + Done? Click here to End {action && ( diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx index 4c93e8e4a1..3c0c72441b 100644 --- a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx +++ b/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, diff --git a/app/client/src/pages/Editor/Welcome.tsx b/app/client/src/pages/Editor/Welcome.tsx index e472993668..44afb0ef94 100644 --- a/app/client/src/pages/Editor/Welcome.tsx +++ b/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 = () => { Not your first time with Appsmith?{" "} - dispatch(endOnboarding())}> + { + AnalyticsUtil.logEvent("SKIP_ONBOARDING"); + dispatch(endOnboarding()); + }} + > Skip this tutorial diff --git a/app/client/src/sagas/OnboardingSagas.ts b/app/client/src/sagas/OnboardingSagas.ts index 3aae3689ce..5a4680555a 100644 --- a/app/client/src/sagas/OnboardingSagas.ts +++ b/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) { diff --git a/app/client/src/utils/AnalyticsUtil.tsx b/app/client/src/utils/AnalyticsUtil.tsx index 6706f42d5c..1a927e6653 100644 --- a/app/client/src/utils/AnalyticsUtil.tsx +++ b/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) {