{
+ if (intercomAppID && window.Intercom) {
+ // Close signposting modal when intercom modal is open
+ window.Intercom("onShow", () => {
+ dispatch(showSignpostingModal(false));
+ });
+ }
+
+ return () => {
+ dispatch(signpostingMarkAllRead());
+ dispatch(setSignpostingOverlay(false));
+ dispatch(showSignpostingTooltip(false));
+ };
+ }, []);
+
+ // End signposting for the application once signposting is complete and the
+ // signposting complete menu is closed
+ useEffect(() => {
+ return () => {
+ if (isFirstTimeUserOnboardingComplete) {
+ dispatch({
+ type: ReduxActionTypes.END_FIRST_TIME_USER_ONBOARDING,
+ });
+ }
+ };
+ }, [isFirstTimeUserOnboardingComplete]);
+
+ // Success UI
+ if (isFirstTimeUserOnboardingComplete) {
+ return (
+ <>
+
- {completedTasks} of 5
-
- {createMessage(ONBOARDING_CHECKLIST_COMPLETE_TEXT)}
-
-
-
-
-
-
-
-
-
- {createMessage(ONBOARDING_CHECKLIST_CONNECT_DATA_SOURCE.bold)}
-
-
- {createMessage(ONBOARDING_CHECKLIST_CONNECT_DATA_SOURCE.normal)}
-
-
- {!datasources.length && !actions.length && (
-
- )}
-
-
-
-
-
-
-
-
- {createMessage(ONBOARDING_CHECKLIST_CREATE_A_QUERY.bold)}
-
- {createMessage(ONBOARDING_CHECKLIST_CREATE_A_QUERY.normal)}
-
-
- {!actions.length && (
-
- )}
-
-
-
-
- 1
- ? "var(--ads-v2-color-fg-success)"
- : ""
- }
- data-testid="checklist-widget-complete-icon"
- name="oval-check"
- size="lg"
- />
-
- 1}>
-
- {createMessage(ONBOARDING_CHECKLIST_ADD_WIDGETS.bold)}
-
- {createMessage(ONBOARDING_CHECKLIST_ADD_WIDGETS.normal)}
-
-
- {Object.keys(widgets).length === 1 && (
-
- )}
-
-
-
-
-
-
-
-
- {createMessage(
- ONBOARDING_CHECKLIST_CONNECT_DATA_TO_WIDGET.bold,
- )}
-
-
- {createMessage(
- ONBOARDING_CHECKLIST_CONNECT_DATA_TO_WIDGET.normal,
- )}
-
-
- {!isConnectionPresent && (
-
- )}
-
-
-
-
-
-
-
-
- {createMessage(ONBOARDING_CHECKLIST_DEPLOY_APPLICATIONS.bold)}
-
-
- {createMessage(ONBOARDING_CHECKLIST_DEPLOY_APPLICATIONS.normal)}
-
-
- {!isDeployed && (
-
- )}
-
-
- {!isAirgappedInstance && (
- triggerWelcomeTour(dispatch, applicationId)}
- >
-
-
-
-
- {createMessage(ONBOARDING_CHECKLIST_FOOTER)}
+
+ {createMessage(SIGNPOSTING_SUCCESS_POPUP.title)}
-
-
- )}
-
+
+
+ {createMessage(SIGNPOSTING_SUCCESS_POPUP.subtitle)}
+
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+
+ {createMessage(ONBOARDING_CHECKLIST_HEADER)}
+
+
+
+ {createMessage(SIGNPOSTING_POPUP_SUBTITLE)}
+
+
+
+ {completedTasks} of 5{" "}
+
+ complete
+
+
+
+ {
+ AnalyticsUtil.logEvent(
+ "SIGNPOSTING_MODAL_CREATE_DATASOURCE_CLICK",
+ {
+ from: "CHECKLIST",
+ },
+ );
+ dispatch(showSignpostingModal(false));
+ history.push(
+ integrationEditorURL({
+ pageId,
+ selectedTab: INTEGRATION_TABS.NEW,
+ }),
+ );
+ }}
+ step={SIGNPOSTING_STEP.CONNECT_A_DATASOURCE}
+ testid={"checklist-datasource"}
+ />
+ {
+ AnalyticsUtil.logEvent("SIGNPOSTING_MODAL_CREATE_QUERY_CLICK", {
+ from: "CHECKLIST",
+ });
+ dispatch(showSignpostingModal(false));
+ history.push(
+ integrationEditorURL({
+ pageId,
+ selectedTab: INTEGRATION_TABS.ACTIVE,
+ }),
+ );
+ // Event for datasource creation click
+ const entryPoint = DatasourceCreateEntryPoints.NEW_APP_CHECKLIST;
+ AnalyticsUtil.logEvent("NAVIGATE_TO_CREATE_NEW_DATASOURCE_PAGE", {
+ entryPoint,
+ });
+ }}
+ step={SIGNPOSTING_STEP.CREATE_A_QUERY}
+ testid={"checklist-action"}
+ />
+ 1}
+ disabled={false}
+ docLink="https://docs.appsmith.com/reference/widgets"
+ normalText={createMessage(ONBOARDING_CHECKLIST_ADD_WIDGETS.normal)}
+ onClick={() => {
+ AnalyticsUtil.logEvent("SIGNPOSTING_MODAL_ADD_WIDGET_CLICK", {
+ from: "CHECKLIST",
+ });
+ dispatch(showSignpostingModal(false));
+ dispatch(toggleInOnboardingWidgetSelection(true));
+ dispatch(forceOpenWidgetPanel(true));
+ history.push(builderURL({ pageId }));
+ }}
+ step={SIGNPOSTING_STEP.ADD_WIDGETS}
+ testid={"checklist-widget"}
+ />
+
+ {
+ AnalyticsUtil.logEvent("SIGNPOSTING_MODAL_PUBLISH_CLICK", {
+ from: "CHECKLIST",
+ });
+ dispatch(showSignpostingModal(false));
+ dispatch({
+ type: ReduxActionTypes.PUBLISH_APPLICATION_INIT,
+ payload: {
+ applicationId,
+ },
+ });
+ }}
+ step={SIGNPOSTING_STEP.DEPLOY_APPLICATIONS}
+ testid={"checklist-deploy"}
+ />
+
+
);
}
diff --git a/app/client/src/pages/Editor/FirstTimeUserOnboarding/HelpMenu.tsx b/app/client/src/pages/Editor/FirstTimeUserOnboarding/HelpMenu.tsx
new file mode 100644
index 0000000000..cf77d597a4
--- /dev/null
+++ b/app/client/src/pages/Editor/FirstTimeUserOnboarding/HelpMenu.tsx
@@ -0,0 +1,140 @@
+import React from "react";
+import { Text, Button } from "design-system";
+import { getAppsmithConfigs } from "@appsmith/configs";
+import {
+ APPSMITH_DISPLAY_VERSION,
+ createMessage,
+} from "@appsmith/constants/messages";
+import moment from "moment";
+import styled from "styled-components";
+import { triggerWelcomeTour } from "./Utils";
+import { useDispatch, useSelector } from "react-redux";
+import { getCurrentUser } from "selectors/usersSelectors";
+import { IntercomConsent } from "../HelpButton";
+import classNames from "classnames";
+import AnalyticsUtil from "utils/AnalyticsUtil";
+const { appVersion, cloudHosting, intercomAppID } = getAppsmithConfigs();
+
+type HelpItem = {
+ label: string;
+ link?: string;
+ id?: string;
+ icon: string;
+};
+const HELP_MENU_ITEMS: HelpItem[] = [
+ {
+ icon: "book-line",
+ label: "Documentation",
+ link: "https://docs.appsmith.com/",
+ },
+ {
+ icon: "bug-line",
+ label: "Report a bug",
+ link: "https://github.com/appsmithorg/appsmith/issues/new/choose",
+ },
+];
+
+if (intercomAppID && window.Intercom) {
+ HELP_MENU_ITEMS.push({
+ icon: "chat-help",
+ label: "Chat with us",
+ id: "intercom-trigger",
+ });
+}
+
+const StyledText = styled(Text)`
+ font-size: 8px;
+ font-weight: normal;
+`;
+
+const HelpFooter = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+`;
+
+function HelpMenu(props: {
+ setShowIntercomConsent: (val: boolean) => void;
+ showIntercomConsent: boolean;
+}) {
+ const dispatch = useDispatch();
+ const user = useSelector(getCurrentUser);
+
+ return (
+
+ {props.showIntercomConsent ? (
+
+ ) : (
+ <>
+
+ Help & Resources
+
+
+
+ {HELP_MENU_ITEMS.map((item) => {
+ return (
+
+ );
+ })}
+
+
+ )}
+ {appVersion.id && (
+
+
+ {createMessage(
+ APPSMITH_DISPLAY_VERSION,
+ appVersion.edition,
+ appVersion.id,
+ cloudHosting,
+ )}
+
+
+ Released {moment(appVersion.releaseDate).fromNow()}
+
+
+ )}
+
- 1
-
-
-
- {createMessage(ONBOARDING_INTRO_CONNECT_YOUR_DATABASE)}
-
-
- {createMessage(QUERY_YOUR_DATABASE)}
-
-
-
-
-
-
-
-
-
-
- 2
-
-
-
- {createMessage(DRAG_AND_DROP)}
-
-
- {createMessage(CUSTOMIZE_WIDGET_STYLING)}
-
-
-
-
-
-
-
-
-
-
- 3
-
-
-
- {createMessage(ONBOARDING_INTRO_PUBLISH)}
-
-
- {createMessage(CHOOSE_ACCESS_CONTROL_ROLES)}
-
-
-
-
-
-
-
-
-
- {createMessage(ONBOARDING_INTRO_FOOTER)}
-
-
-
- {!isAirgappedInstance && (
-
- )}
-
-
-
-
- );
-}
diff --git a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Modal.tsx b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Modal.tsx
new file mode 100644
index 0000000000..0ec2858603
--- /dev/null
+++ b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Modal.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { MenuContent } from "design-system";
+import styled from "styled-components";
+import Checklist from "./Checklist";
+import HelpMenu from "./HelpMenu";
+import { useDispatch } from "react-redux";
+import { showSignpostingModal } from "actions/onboardingActions";
+
+const SIGNPOSTING_POPUP_WIDTH = "360px";
+
+const StyledMenuContent = styled(MenuContent)<{ animate: boolean }>`
+ max-width: ${SIGNPOSTING_POPUP_WIDTH};
+ overflow: hidden;
+ display: flex;
+ animation-name: slideUpAndFade;
+ @keyframes slideUpAndFade {
+ from {
+ opacity: 0;
+ transform: translateY(2px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+`;
+const Wrapper = styled.div`
+ padding: var(--ads-v2-spaces-4) var(--ads-v2-spaces-5);
+ display: flex;
+ flex-direction: column;
+`;
+
+function OnboardingModal(props: {
+ setOverlay: boolean;
+ showIntercomConsent: boolean;
+ setShowIntercomConsent: (val: boolean) => void;
+}) {
+ const dispatch = useDispatch();
+
+ return (
+ {
+ dispatch(showSignpostingModal(false));
+ }}
+ width={SIGNPOSTING_POPUP_WIDTH}
+ >
+
+ {!props.showIntercomConsent && }
+
+
+
+ );
+}
+
+export default OnboardingModal;
diff --git a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Overlay.tsx b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Overlay.tsx
new file mode 100644
index 0000000000..6f6ceced64
--- /dev/null
+++ b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Overlay.tsx
@@ -0,0 +1,46 @@
+import { showSignpostingModal } from "actions/onboardingActions";
+import { Layers } from "constants/Layers";
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import {
+ getIsFirstTimeUserOnboardingEnabled,
+ getSignpostingSetOverlay,
+} from "selectors/onboardingSelectors";
+import styled from "styled-components";
+
+const StyledOverlay = styled.div`
+ z-index: ${Layers.signpostingOverlay};
+ opacity: 0.6;
+ background-color: transparent;
+ animation: fade-in 1s forwards;
+ will-change: background-color;
+ @keyframes fade-in {
+ from {
+ background-color: transparent;
+ }
+ to {
+ background-color: var(--ads-v2-color-bg-emphasis-max);
+ }
+ }
+`;
+
+function Overlay() {
+ const signpostingEnabled = useSelector(getIsFirstTimeUserOnboardingEnabled);
+ const setOverlay = useSelector(getSignpostingSetOverlay);
+ const dispatch = useDispatch();
+
+ if (signpostingEnabled && setOverlay) {
+ return (
+ {
+ dispatch(showSignpostingModal(false));
+ }}
+ />
+ );
+ }
+
+ return null;
+}
+
+export default Overlay;
diff --git a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Statusbar.test.tsx b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Statusbar.test.tsx
index 3e7642e26b..c8351741e6 100644
--- a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Statusbar.test.tsx
+++ b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Statusbar.test.tsx
@@ -1,20 +1,25 @@
+const dispatch = jest.fn();
+
import React from "react";
import { Provider } from "react-redux";
-import { render, screen } from "test/testUtils";
+import { render } from "test/testUtils";
import OnboardingStatusbar from "./Statusbar";
import { getStore } from "./testUtils";
-import {
- ONBOARDING_STATUS_STEPS_FIRST,
- ONBOARDING_STATUS_STEPS_SECOND,
- ONBOARDING_STATUS_STEPS_THIRD,
- ONBOARDING_STATUS_STEPS_FOURTH,
- ONBOARDING_STATUS_STEPS_FIVETH,
- ONBOARDING_STATUS_STEPS_SIXTH,
-} from "@appsmith/constants/messages";
import { useIsWidgetActionConnectionPresent } from "pages/Editor/utils";
+import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
+import { SIGNPOSTING_STEP } from "./Utils";
+import { signpostingStepUpdateInit } from "actions/onboardingActions";
let container: any = null;
+jest.mock("react-redux", () => {
+ const originalModule = jest.requireActual("react-redux");
+ return {
+ ...originalModule,
+ useDispatch: () => dispatch,
+ };
+});
+
function renderComponent(store: any) {
render(
@@ -30,52 +35,77 @@ describe("Statusbar", () => {
document.body.appendChild(container);
});
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
it("is rendered", async () => {
renderComponent(getStore(0));
- const statusbar = screen.queryAllByTestId("statusbar-container");
- expect(statusbar).toHaveLength(1);
+ expect(dispatch).toHaveBeenCalledTimes(5);
+ expect(dispatch).toHaveBeenCalledWith(
+ expect.objectContaining({
+ payload: {
+ completed: false,
+ step: expect.any(String),
+ },
+ type: ReduxActionTypes.SIGNPOSTING_STEP_UPDATE_INIT,
+ }),
+ );
});
- it("is pro", async () => {
- renderComponent(getStore(0));
- const statusbar = screen.queryAllByTestId("statusbar-container");
- expect(statusbar).not.toBeNull();
- });
-
- it("is showing first step", async () => {
- renderComponent(getStore(0));
- const statusbarText = screen.queryAllByTestId("statusbar-text");
- expect(statusbarText[0].innerHTML).toBe(ONBOARDING_STATUS_STEPS_FIRST());
- });
-
- it("is showing second step", async () => {
+ it("on completing first step", async () => {
renderComponent(getStore(1));
- const statusbarText = screen.queryAllByTestId("statusbar-text");
- expect(statusbarText[0].innerHTML).toBe(ONBOARDING_STATUS_STEPS_SECOND());
+ expect(dispatch).toHaveBeenNthCalledWith(
+ 1,
+ signpostingStepUpdateInit({
+ step: SIGNPOSTING_STEP.CONNECT_A_DATASOURCE,
+ completed: true,
+ }),
+ );
});
- it("is showing third step", async () => {
+ it("on completing second step", async () => {
renderComponent(getStore(2));
- const statusbarText = screen.queryAllByTestId("statusbar-text");
- expect(statusbarText[0].innerHTML).toBe(ONBOARDING_STATUS_STEPS_THIRD());
+ expect(dispatch).toHaveBeenNthCalledWith(
+ 2,
+ signpostingStepUpdateInit({
+ step: SIGNPOSTING_STEP.CREATE_A_QUERY,
+ completed: true,
+ }),
+ );
});
- it("is showing fourth step", async () => {
+ it("on completing third step", async () => {
renderComponent(getStore(3));
- const statusbarText = screen.queryAllByTestId("statusbar-text");
- expect(statusbarText[0].innerHTML).toBe(ONBOARDING_STATUS_STEPS_FOURTH());
+ expect(dispatch).toHaveBeenNthCalledWith(
+ 3,
+ signpostingStepUpdateInit({
+ step: SIGNPOSTING_STEP.ADD_WIDGETS,
+ completed: true,
+ }),
+ );
});
- it("is showing fifth step", async () => {
+ it("on completing fourth step", async () => {
renderComponent(getStore(4));
- const statusbarText = screen.queryAllByTestId("statusbar-text");
- expect(statusbarText[0].innerHTML).toBe(ONBOARDING_STATUS_STEPS_FIVETH());
+ expect(dispatch).toHaveBeenNthCalledWith(
+ 4,
+ signpostingStepUpdateInit({
+ step: SIGNPOSTING_STEP.CONNECT_DATA_TO_WIDGET,
+ completed: true,
+ }),
+ );
});
- it("is showing sixth step", async () => {
+ it("on completing fifth step", async () => {
renderComponent(getStore(5));
- const statusbarText = screen.queryAllByTestId("statusbar-text");
- expect(statusbarText[0].innerHTML).toBe(ONBOARDING_STATUS_STEPS_SIXTH());
+ expect(dispatch).toHaveBeenNthCalledWith(
+ 5,
+ signpostingStepUpdateInit({
+ step: SIGNPOSTING_STEP.DEPLOY_APPLICATIONS,
+ completed: true,
+ }),
+ );
});
it("should test useIsWidgetActionConnectionPresent function", () => {
diff --git a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Statusbar.tsx b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Statusbar.tsx
index 9ff66b1ca5..b38aee91d4 100644
--- a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Statusbar.tsx
+++ b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Statusbar.tsx
@@ -1,10 +1,6 @@
-import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
import { useIsWidgetActionConnectionPresent } from "pages/Editor/utils";
-import type { SyntheticEvent } from "react";
-import React from "react";
+import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
import { getEvaluationInverseDependencyMap } from "selectors/dataTreeSelectors";
import {
getApplicationLastDeployedAt,
@@ -12,118 +8,16 @@ import {
} from "selectors/editorSelectors";
import {
getCanvasWidgets,
- getDatasources,
getPageActions,
+ getSavedDatasources,
} from "selectors/entitiesSelector";
-import {
- getFirstTimeUserOnboardingComplete,
- getInOnboardingWidgetSelection,
-} from "selectors/onboardingSelectors";
-import styled from "styled-components";
-import history from "utils/history";
-import {
- ONBOARDING_STATUS_STEPS_FIRST,
- ONBOARDING_STATUS_STEPS_FIRST_ALT,
- ONBOARDING_STATUS_STEPS_SECOND,
- ONBOARDING_STATUS_STEPS_THIRD,
- ONBOARDING_STATUS_STEPS_FOURTH,
- ONBOARDING_STATUS_STEPS_FIVETH,
- ONBOARDING_STATUS_STEPS_SIXTH,
- ONBOARDING_STATUS_GET_STARTED,
- createMessage,
- ONBOARDING_STATUS_STEPS_THIRD_ALT,
-} from "@appsmith/constants/messages";
-import { getTypographyByKey } from "design-system-old";
-import { onboardingCheckListUrl } from "RouteBuilder";
-import { Icon, Button } from "design-system";
+import { SIGNPOSTING_STEP } from "./Utils";
+import { getFirstTimeUserOnboardingComplete } from "selectors/onboardingSelectors";
+import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
+import { signpostingStepUpdateInit } from "actions/onboardingActions";
-const Wrapper = styled.div<{ active: boolean }>`
- width: 100%;
- background-color: ${(props) =>
- props.active ? "var(--ads-v2-color-bg-brand)" : ""};
- cursor: ${(props) => (props.active ? "default" : "pointer")};
- height: ${(props) => props.theme.onboarding.statusBarHeight}px;
- padding: 12px 16px;
- transition: background-color 0.3s ease;
- border-bottom: 1px solid var(--ads-v2-color-border);
-
- ${(props) =>
- props.active &&
- `
- p {
- color: var(--ads-v2-color-fg-on-brand);
- }
- svg, svg path {
- fill: var(--ads-v2-color-fg-on-brand) !important;
- }
- `}
-
- &:hover .hover-icons {
- opacity: 1;
- }
-`;
-
-const TitleWrapper = styled.p`
- ${getTypographyByKey("p4")}
- color: var(--ads-v2-color-fg);
-`;
-
-const StatusText = styled.p`
- font-size: 13px;
- display: flex;
- & .hover-icons {
- transform: translate(3px, 0px);
- opacity: 0;
- }
-`;
-
-const ProgressContainer = styled.div`
- background-color: ${(props) =>
- props.active
- ? "var(--ads-v2-color-bg-brand-emphasis-plus)"
- : "var(--ads-v2-color-bg-subtle)"};
- border-radius: var(--ads-v2-border-radius);
- overflow: hidden;
- margin-top: 12px;
-`;
-
-const Progressbar = styled.div`
- width: ${(props) => props.percentage}%;
- height: 6px;
- background: ${(props) =>
- props.active
- ? "var(--ads-v2-color-bg)"
- : "var(--ads-v2-color-bg-brand-emphasis-plus)"};
- transition: width 0.3s ease, background 0.3s ease;
- border-radius: var(--ads-v2-border-radius);
-`;
-
-const StyledClose = styled(Button)`
- position: absolute !important;
- top: 9px;
- right: 9px;
- opacity: 0;
- cursor: pointer;
-`;
-
-type StatusProgressbarType = {
- percentage: number;
- active: boolean;
-};
-type StatusProgressbarContainerType = {
- active: boolean;
-};
-
-export function StatusProgressbar(props: StatusProgressbarType) {
- return (
-
-
-
- );
-}
-
-const useStatus = (): { percentage: number; content: string } => {
- const datasources = useSelector(getDatasources);
+const useStatusListener = () => {
+ const datasources = useSelector(getSavedDatasources);
const pageId = useSelector(getCurrentPageId);
const actions = useSelector(getPageActions(pageId));
const widgets = useSelector(getCanvasWidgets);
@@ -137,38 +31,9 @@ const useStatus = (): { percentage: number; content: string } => {
const isFirstTimeUserOnboardingComplete = useSelector(
getFirstTimeUserOnboardingComplete,
);
- const inOnboardingWidgetSelection =
- useSelector(getInOnboardingWidgetSelection) &&
- Object.keys(widgets).length === 1;
+ const dispatch = useDispatch();
- if (isFirstTimeUserOnboardingComplete) {
- return {
- percentage: 100,
- content: createMessage(ONBOARDING_STATUS_STEPS_SIXTH),
- };
- }
-
- let content = "";
let percentage = 0;
- if (!datasources.length && !actions.length && !inOnboardingWidgetSelection) {
- content =
- Object.keys(widgets).length === 1
- ? createMessage(ONBOARDING_STATUS_STEPS_FIRST)
- : createMessage(ONBOARDING_STATUS_STEPS_FIRST_ALT);
- } else if (!actions.length && !inOnboardingWidgetSelection) {
- content = createMessage(ONBOARDING_STATUS_STEPS_SECOND);
- } else if (Object.keys(widgets).length === 1) {
- content =
- !datasources.length && !actions.length
- ? createMessage(ONBOARDING_STATUS_STEPS_THIRD_ALT)
- : createMessage(ONBOARDING_STATUS_STEPS_THIRD);
- } else if (!isConnectionPresent) {
- content = createMessage(ONBOARDING_STATUS_STEPS_FOURTH);
- } else if (!isDeployed) {
- content = createMessage(ONBOARDING_STATUS_STEPS_FIVETH);
- } else {
- content = createMessage(ONBOARDING_STATUS_STEPS_SIXTH);
- }
if (datasources.length || actions.length) {
percentage += 20;
@@ -190,72 +55,65 @@ const useStatus = (): { percentage: number; content: string } => {
percentage += 20;
}
- return {
- percentage,
- content,
- };
+ useEffect(() => {
+ dispatch(
+ signpostingStepUpdateInit({
+ step: SIGNPOSTING_STEP.CONNECT_A_DATASOURCE,
+ completed: !!(datasources.length || actions.length),
+ }),
+ );
+ }, [datasources.length, actions.length]);
+
+ useEffect(() => {
+ dispatch(
+ signpostingStepUpdateInit({
+ step: SIGNPOSTING_STEP.CREATE_A_QUERY,
+ completed: !!actions.length,
+ }),
+ );
+ }, [actions.length]);
+
+ useEffect(() => {
+ dispatch(
+ signpostingStepUpdateInit({
+ step: SIGNPOSTING_STEP.ADD_WIDGETS,
+ completed: Object.keys(widgets).length > 1,
+ }),
+ );
+ }, [Object.keys(widgets).length]);
+
+ useEffect(() => {
+ dispatch(
+ signpostingStepUpdateInit({
+ step: SIGNPOSTING_STEP.CONNECT_DATA_TO_WIDGET,
+ completed: isConnectionPresent,
+ }),
+ );
+ }, [isConnectionPresent]);
+
+ useEffect(() => {
+ dispatch(
+ signpostingStepUpdateInit({
+ step: SIGNPOSTING_STEP.DEPLOY_APPLICATIONS,
+ completed: isDeployed,
+ }),
+ );
+ }, [isDeployed]);
+
+ useEffect(() => {
+ if (percentage === 100 && !isFirstTimeUserOnboardingComplete) {
+ dispatch({
+ type: ReduxActionTypes.SET_FIRST_TIME_USER_ONBOARDING_COMPLETE,
+ payload: true,
+ });
+ }
+ }, [percentage, isFirstTimeUserOnboardingComplete]);
};
-export function OnboardingStatusbar(props: RouteComponentProps) {
- const dispatch = useDispatch();
- const pageId = useSelector(getCurrentPageId);
- const { content, percentage } = useStatus();
- const isChecklistPage = props.location.pathname.indexOf("/checklist") > -1;
- const isGenerateAppPage =
- props.location.pathname.indexOf("/generate-page/form") > -1;
- const isFirstTimeUserOnboardingComplete = useSelector(
- getFirstTimeUserOnboardingComplete,
- );
- if (isGenerateAppPage) {
- return null;
- }
- const endFirstTimeUserOnboarding = (event?: SyntheticEvent) => {
- event?.stopPropagation();
- dispatch({
- type: ReduxActionTypes.END_FIRST_TIME_USER_ONBOARDING,
- });
- };
- if (percentage === 100 && !isFirstTimeUserOnboardingComplete) {
- dispatch({
- type: ReduxActionTypes.SET_FIRST_TIME_USER_ONBOARDING_COMPLETE,
- payload: true,
- });
- }
+export function OnboardingStatusbar() {
+ useStatusListener();
- return (
- {
- history.push(onboardingCheckListUrl({ pageId }));
- }}
- >
-
-
- {createMessage(ONBOARDING_STATUS_GET_STARTED)}
-
-
- {content}
- {!isChecklistPage && (
-
- )}
-
-
-
- );
+ return null;
}
-export default withRouter(OnboardingStatusbar);
+export default OnboardingStatusbar;
diff --git a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Tasks.test.tsx b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Tasks.test.tsx
deleted file mode 100644
index d2346835c7..0000000000
--- a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Tasks.test.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-const dispatch = jest.fn();
-const history = jest.fn();
-
-import { integrationEditorURL } from "RouteBuilder";
-import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
-import { INTEGRATION_TABS } from "constants/routes";
-import React from "react";
-import { Provider } from "react-redux";
-import { fireEvent, render, screen } from "test/testUtils";
-import OnboardingTasks from "./Tasks";
-import { getStore, initialState } from "./testUtils";
-import urlBuilder from "entities/URLRedirect/URLAssembly";
-
-jest.mock("react-redux", () => {
- const originalModule = jest.requireActual("react-redux");
- return {
- ...originalModule,
- useDispatch: () => dispatch,
- };
-});
-
-jest.mock("utils/history", () => {
- return {
- push: history,
- listen: jest.fn(),
- };
-});
-
-let container: any;
-
-function renderComponent(store: any) {
- render(
-
-
- ,
- container,
- );
-}
-
-describe("Tasks", () => {
- beforeEach(() => {
- container = document.createElement("div");
- document.body.appendChild(container);
- urlBuilder.updateURLParams(
- {
- applicationSlug: initialState.ui.applications.currentApplication.slug,
- applicationId: initialState.entities.pageList.applicationId,
- applicationVersion: 2,
- },
- [
- {
- pageSlug: initialState.entities.pageList.pages[0].slug,
- pageId: initialState.entities.pageList.currentPageId,
- },
- ],
- );
- });
-
- afterEach(() => {
- jest.clearAllMocks();
- });
-
- it("is rendered", async () => {
- renderComponent(getStore(0));
- const wrapper = await screen.findAllByTestId("onboarding-tasks-wrapper");
- expect(wrapper.length).not.toBe(0);
- });
-
- it("is showing `Add a datasource` task", async () => {
- const store = getStore(0);
- renderComponent(store);
- const text = await screen.findAllByTestId(
- "onboarding-tasks-datasource-text",
- );
- expect(text.length).toBe(1);
- const button = await screen.findAllByTestId(
- "onboarding-tasks-datasource-button",
- );
- expect(button.length).toBe(1);
- fireEvent.click(button[0]);
- expect(history).toHaveBeenCalledWith(
- integrationEditorURL({
- pageId: initialState.entities.pageList.currentPageId,
- selectedTab: INTEGRATION_TABS.NEW,
- }),
- );
- const alt = await screen.findAllByTestId("onboarding-tasks-datasource-alt");
- expect(alt.length).toBe(1);
- fireEvent.click(alt[0]);
- expect(dispatch).toHaveBeenCalledWith({
- type: ReduxActionTypes.TOGGLE_ONBOARDING_WIDGET_SELECTION,
- payload: true,
- });
- expect(dispatch).toHaveBeenCalledWith({
- type: ReduxActionTypes.SET_FORCE_WIDGET_PANEL_OPEN,
- payload: true,
- });
- });
-
- it("is showing `Add a Query` task", async () => {
- const store = getStore(1);
- renderComponent(store);
- const text = await screen.findAllByTestId("onboarding-tasks-action-text");
- expect(text.length).toBe(1);
- const button = await screen.findAllByTestId(
- "onboarding-tasks-action-button",
- );
- expect(button.length).toBe(1);
- fireEvent.click(button[0]);
- expect(history).toHaveBeenCalledWith(
- integrationEditorURL({
- pageId: initialState.entities.pageList.currentPageId,
- selectedTab: INTEGRATION_TABS.ACTIVE,
- }),
- );
- const alt = await screen.findAllByTestId("onboarding-tasks-action-alt");
- expect(alt.length).toBe(1);
- fireEvent.click(alt[0]);
- expect(dispatch).toHaveBeenCalledWith({
- type: ReduxActionTypes.TOGGLE_ONBOARDING_WIDGET_SELECTION,
- payload: true,
- });
- expect(dispatch).toHaveBeenCalledWith({
- type: ReduxActionTypes.SET_FORCE_WIDGET_PANEL_OPEN,
- payload: true,
- });
- });
-
- it("is showing `Add a widget` task", async () => {
- const store = getStore(2);
- renderComponent(store);
- const text = await screen.findAllByTestId("onboarding-tasks-widget-text");
- expect(text.length).toBe(1);
- const button = await screen.findAllByTestId(
- "onboarding-tasks-widget-button",
- );
- expect(button.length).toBe(1);
- fireEvent.click(button[0]);
- expect(dispatch).toHaveBeenCalledWith({
- type: ReduxActionTypes.TOGGLE_ONBOARDING_WIDGET_SELECTION,
- payload: true,
- });
- expect(dispatch).toHaveBeenCalledWith({
- type: ReduxActionTypes.SET_FORCE_WIDGET_PANEL_OPEN,
- payload: true,
- });
- const alt = await screen.findAllByTestId("onboarding-tasks-widget-alt");
- expect(alt.length).toBe(1);
- fireEvent.click(alt[0]);
- expect(dispatch).toHaveBeenCalledWith({
- type: ReduxActionTypes.PUBLISH_APPLICATION_INIT,
- payload: {
- applicationId: initialState.entities.pageList.applicationId,
- },
- });
- });
-});
diff --git a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Tasks.tsx b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Tasks.tsx
deleted file mode 100644
index f615e03735..0000000000
--- a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Tasks.tsx
+++ /dev/null
@@ -1,344 +0,0 @@
-import { toggleInOnboardingWidgetSelection } from "actions/onboardingActions";
-import { forceOpenWidgetPanel } from "actions/widgetSidebarActions";
-import { Button, Link } from "design-system";
-import {
- ONBOARDING_TASK_DATASOURCE_BODY,
- ONBOARDING_TASK_DATASOURCE_HEADER,
- ONBOARDING_TASK_DATASOURCE_BUTTON,
- ONBOARDING_TASK_DATASOURCE_FOOTER_ACTION,
- ONBOARDING_TASK_DATASOURCE_FOOTER,
- ONBOARDING_TASK_QUERY_HEADER,
- ONBOARDING_TASK_QUERY_BODY,
- ONBOARDING_TASK_QUERY_BUTTON,
- ONBOARDING_TASK_QUERY_FOOTER_ACTION,
- ONBOARDING_TASK_WIDGET_HEADER,
- ONBOARDING_TASK_WIDGET_BODY,
- ONBOARDING_TASK_WIDGET_BUTTON,
- ONBOARDING_TASK_WIDGET_FOOTER_ACTION,
- ONBOARDING_TASK_FOOTER,
- createMessage,
-} from "@appsmith/constants/messages";
-import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
-import { INTEGRATION_TABS } from "constants/routes";
-import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
-import React, { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-
-import {
- getCurrentApplicationId,
- getCurrentPageId,
-} from "selectors/editorSelectors";
-import {
- getCanvasWidgets,
- getDatasources,
- getPageActions,
-} from "selectors/entitiesSelector";
-import styled from "styled-components";
-import AnalyticsUtil from "utils/AnalyticsUtil";
-import history from "utils/history";
-import { integrationEditorURL } from "RouteBuilder";
-import { getAssetUrl, isAirgapped } from "@appsmith/utils/airgapHelpers";
-import AnonymousDataPopup from "./AnonymousDataPopup";
-import {
- getFirstTimeUserOnboardingComplete,
- getFirstTimeUserOnboardingModal,
- getIsFirstTimeUserOnboardingEnabled,
-} from "selectors/onboardingSelectors";
-import { getCurrentUser } from "selectors/usersSelectors";
-import {
- getFirstTimeUserOnboardingTelemetryCalloutIsAlreadyShown,
- setFirstTimeUserOnboardingTelemetryCalloutVisibility,
-} from "utils/storage";
-import { ANONYMOUS_DATA_POPOP_TIMEOUT } from "./constants";
-import { DatasourceCreateEntryPoints } from "constants/Datasource";
-import IntroductionModal from "./IntroductionModal";
-
-const Wrapper = styled.div`
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- height: calc(100vh - 36px);
- margin: 0 auto;
- background-color: #fff;
-`;
-
-const CenteredContainer = styled.div`
- text-align: center;
- width: 529px;
-`;
-
-const TaskImageContainer = styled.div`
- width: 180px;
- margin: 0 auto;
-`;
-
-const TaskImage = styled.img`
- width: 100%;
-`;
-
-const TaskHeader = styled.h5`
- font-size: 20px;
- margin-top: 16px;
- margin-bottom: 16px;
-`;
-
-const TaskSubText = styled.p`
- width: 100%;
-`;
-
-const TaskButtonWrapper = styled.div`
- margin-top: 30px;
-`;
-
-const Taskfootnote = styled.p`
- margin-top: 30px;
- display: flex;
- justify-content: center;
-`;
-
-const getOnboardingDatasourceImg = () =>
- `${ASSETS_CDN_URL}/onboarding-datasource.svg`;
-const getOnboardingQueryImg = () => `${ASSETS_CDN_URL}/onboarding-query.svg`;
-const getOnboardingWidgetImg = () => `${ASSETS_CDN_URL}/onboarding-widget.svg`;
-
-export default function OnboardingTasks() {
- const [isAnonymousDataPopupOpen, setisAnonymousDataPopupOpen] =
- useState(false);
-
- const isFirstTimeUserOnboardingEnabled = useSelector(
- getIsFirstTimeUserOnboardingEnabled,
- );
- const applicationId = useSelector(getCurrentApplicationId);
- const pageId = useSelector(getCurrentPageId);
- let content;
- const datasources = useSelector(getDatasources);
- const actions = useSelector(getPageActions(pageId));
- const widgets = useSelector(getCanvasWidgets);
- const dispatch = useDispatch();
- const user = useSelector(getCurrentUser);
- const isAdmin = user?.isSuperUser || false;
- const isOnboardingCompleted = useSelector(getFirstTimeUserOnboardingComplete);
- const showModal = useSelector(getFirstTimeUserOnboardingModal);
-
- const hideAnonymousDataPopup = () => {
- setisAnonymousDataPopupOpen(false);
- setFirstTimeUserOnboardingTelemetryCalloutVisibility(true);
- };
-
- const showShowAnonymousDataPopup = async () => {
- const shouldPopupShow =
- !isAirgapped() &&
- isFirstTimeUserOnboardingEnabled &&
- isAdmin &&
- !isOnboardingCompleted;
- if (shouldPopupShow) {
- const isAnonymousDataPopupAlreadyOpen =
- await getFirstTimeUserOnboardingTelemetryCalloutIsAlreadyShown();
- //true if the modal was already shown else show the modal and set to already shown, also hide the modal after 10 secs
- if (isAnonymousDataPopupAlreadyOpen) {
- setisAnonymousDataPopupOpen(false);
- } else {
- setisAnonymousDataPopupOpen(true);
- setTimeout(() => {
- hideAnonymousDataPopup();
- }, ANONYMOUS_DATA_POPOP_TIMEOUT);
- await setFirstTimeUserOnboardingTelemetryCalloutVisibility(true);
- }
- } else {
- setisAnonymousDataPopupOpen(shouldPopupShow);
- }
- };
-
- useEffect(() => {
- showShowAnonymousDataPopup();
- }, []);
-
- if (!datasources.length && !actions.length) {
- content = (
-
-
-
-
-
- {createMessage(ONBOARDING_TASK_DATASOURCE_HEADER)}
-
-
- {createMessage(ONBOARDING_TASK_DATASOURCE_BODY)}
-
-
-
-
-
- {createMessage(ONBOARDING_TASK_FOOTER)}
- {
- AnalyticsUtil.logEvent("SIGNPOSTING_ADD_WIDGET_CLICK", {
- from: "CANVAS",
- });
- dispatch(toggleInOnboardingWidgetSelection(true));
- dispatch(forceOpenWidgetPanel(true));
- }}
- >
- {createMessage(ONBOARDING_TASK_DATASOURCE_FOOTER_ACTION)}
-
- {createMessage(ONBOARDING_TASK_DATASOURCE_FOOTER)}
-
-
- );
- } else if (!actions.length) {
- content = (
-
-
-
-
-
- {createMessage(ONBOARDING_TASK_QUERY_HEADER)}
-
- {createMessage(ONBOARDING_TASK_QUERY_BODY)}
-
-
-
-
- {createMessage(ONBOARDING_TASK_FOOTER)}
- {
- AnalyticsUtil.logEvent("SIGNPOSTING_ADD_WIDGET_CLICK", {
- from: "CANVAS",
- });
- dispatch(toggleInOnboardingWidgetSelection(true));
- dispatch(forceOpenWidgetPanel(true));
- }}
- >
- {createMessage(ONBOARDING_TASK_QUERY_FOOTER_ACTION)}
-
-
-
- );
- } else if (Object.keys(widgets).length === 1) {
- content = (
-
-
-
-
-
- {createMessage(ONBOARDING_TASK_WIDGET_HEADER)}
-
- {createMessage(ONBOARDING_TASK_WIDGET_BODY)}
-
-
-
-
- {createMessage(ONBOARDING_TASK_FOOTER)}
- {
- AnalyticsUtil.logEvent("SIGNPOSTING_PUBLISH_CLICK", {
- from: "CANVAS",
- });
- dispatch({
- type: ReduxActionTypes.PUBLISH_APPLICATION_INIT,
- payload: {
- applicationId,
- },
- });
- }}
- >
- {createMessage(ONBOARDING_TASK_WIDGET_FOOTER_ACTION)}
-
- .
-
-
- );
- }
- return (
-
- {content}
- {isAnonymousDataPopupOpen && (
-
- )}
- {!isAdmin && showModal && (
- {
- dispatch({
- type: ReduxActionTypes.SET_SHOW_FIRST_TIME_USER_ONBOARDING_MODAL,
- payload: false,
- });
- }}
- />
- )}
-
- );
-}
diff --git a/app/client/src/pages/Editor/FirstTimeUserOnboarding/TooltipContent.tsx b/app/client/src/pages/Editor/FirstTimeUserOnboarding/TooltipContent.tsx
new file mode 100644
index 0000000000..c16a1bd2b7
--- /dev/null
+++ b/app/client/src/pages/Editor/FirstTimeUserOnboarding/TooltipContent.tsx
@@ -0,0 +1,131 @@
+import {
+ createMessage,
+ ONBOARDING_CHECKLIST_HEADER,
+ SIGNPOSTING_TOOLTIP,
+ SIGNPOSTING_LAST_STEP_TOOLTIP,
+ SIGNPOSTING_SUCCESS_POPUP,
+} from "@appsmith/constants/messages";
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getEvaluationInverseDependencyMap } from "selectors/dataTreeSelectors";
+import {
+ getCurrentPageId,
+ getApplicationLastDeployedAt,
+} from "selectors/editorSelectors";
+import {
+ getPageActions,
+ getCanvasWidgets,
+ getSavedDatasources,
+} from "selectors/entitiesSelector";
+import { useIsWidgetActionConnectionPresent } from "../utils";
+import { showSignpostingTooltip } from "actions/onboardingActions";
+import { SIGNPOSTING_STEP } from "./Utils";
+
+const SIGNPOSTING_STEPS = [
+ SIGNPOSTING_STEP.CONNECT_A_DATASOURCE,
+ SIGNPOSTING_STEP.CREATE_A_QUERY,
+ SIGNPOSTING_STEP.ADD_WIDGETS,
+ SIGNPOSTING_STEP.CONNECT_DATA_TO_WIDGET,
+ SIGNPOSTING_STEP.DEPLOY_APPLICATIONS,
+];
+
+function TooltipContent(props: { showSignpostingTooltip: boolean }) {
+ const datasources = useSelector(getSavedDatasources);
+ const pageId = useSelector(getCurrentPageId);
+ const actions = useSelector(getPageActions(pageId));
+ const widgets = useSelector(getCanvasWidgets);
+ const deps = useSelector(getEvaluationInverseDependencyMap);
+ const isConnectionPresent = useIsWidgetActionConnectionPresent(
+ widgets,
+ actions,
+ deps,
+ );
+ const isDeployed = !!useSelector(getApplicationLastDeployedAt);
+ const dispatch = useDispatch();
+
+ let title = createMessage(ONBOARDING_CHECKLIST_HEADER);
+ let content = createMessage(SIGNPOSTING_TOOLTIP.DEFAULT.content);
+ const lastStepContent = createMessage(SIGNPOSTING_LAST_STEP_TOOLTIP);
+ let completedTasks = 0;
+
+ useEffect(() => {
+ const handleClickOutside = () => {
+ dispatch(showSignpostingTooltip(false));
+ };
+
+ document.addEventListener("click", handleClickOutside, true);
+ return () => {
+ document.removeEventListener("click", handleClickOutside, true);
+ };
+ }, []);
+
+ useEffect(() => {
+ if (!props.showSignpostingTooltip) return;
+
+ const timer = setTimeout(() => {
+ // After a step is completed we want to show the tooltip for 8 seconds and then hide it.
+ dispatch(showSignpostingTooltip(false));
+ }, 8000);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }, [props.showSignpostingTooltip]);
+
+ if (datasources.length) {
+ completedTasks++;
+ }
+ if (actions.length) {
+ completedTasks++;
+ }
+ if (Object.keys(widgets).length > 1) {
+ completedTasks++;
+ }
+ if (isConnectionPresent) {
+ completedTasks++;
+ }
+ if (isDeployed) {
+ completedTasks++;
+ }
+
+ if (completedTasks > 0) {
+ title = `🎉${completedTasks}/5 Steps completed`;
+ }
+
+ if (!datasources.length && !actions.length) {
+ content = createMessage(SIGNPOSTING_TOOLTIP.CONNECT_A_DATASOURCE.content);
+ } else if (!actions.length && datasources.length) {
+ content = createMessage(SIGNPOSTING_TOOLTIP.CREATE_QUERY.content);
+ } else if (Object.keys(widgets).length === 1 && actions.length) {
+ content = createMessage(SIGNPOSTING_TOOLTIP.ADD_WIDGET.content);
+ } else if (!isConnectionPresent) {
+ content = createMessage(SIGNPOSTING_TOOLTIP.CONNECT_DATA_TO_WIDGET.content);
+ } else if (!isDeployed) {
+ content = createMessage(SIGNPOSTING_TOOLTIP.DEPLOY_APPLICATION.content);
+ }
+
+ if (completedTasks === 0) {
+ title = createMessage(ONBOARDING_CHECKLIST_HEADER);
+ content = createMessage(SIGNPOSTING_TOOLTIP.DEFAULT.content);
+ }
+
+ if (completedTasks === SIGNPOSTING_STEPS.length)
+ return <>{createMessage(SIGNPOSTING_SUCCESS_POPUP.title)};
+
+ return (
+ <>
+ {title}
+
+
+ {completedTasks === SIGNPOSTING_STEPS.length - 1 && (
+ <>
+ {lastStepContent}
+
+
+ )}
+ {content}
+
+ );
+}
+
+export default TooltipContent;
diff --git a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Utils.ts b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Utils.ts
index bf6bf3f960..b9723d75bb 100644
--- a/app/client/src/pages/Editor/FirstTimeUserOnboarding/Utils.ts
+++ b/app/client/src/pages/Editor/FirstTimeUserOnboarding/Utils.ts
@@ -1,17 +1,18 @@
import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
-import { removeFirstTimeUserOnboardingApplicationId } from "actions/onboardingActions";
import { APPLICATIONS_URL } from "constants/routes";
import type { Dispatch } from "react";
-import AnalyticsUtil from "utils/AnalyticsUtil";
import history from "utils/history";
-export const triggerWelcomeTour = (
- dispatch: Dispatch,
- applicationId: string,
-) => {
- AnalyticsUtil.logEvent("SIGNPOSTING_WELCOME_TOUR_CLICK");
+export const triggerWelcomeTour = (dispatch: Dispatch) => {
history.push(APPLICATIONS_URL);
- dispatch(removeFirstTimeUserOnboardingApplicationId(applicationId));
dispatch({
type: ReduxActionTypes.ONBOARDING_CREATE_APPLICATION,
});
};
+
+export enum SIGNPOSTING_STEP {
+ CONNECT_A_DATASOURCE = "CONNECT_A_DATASOURCE",
+ CREATE_A_QUERY = "CREATE_A_QUERY",
+ ADD_WIDGETS = "ADD_WIDGETS",
+ CONNECT_DATA_TO_WIDGET = "CONNECT_DATA_TO_WIDGET",
+ DEPLOY_APPLICATIONS = "DEPLOY_APPLICATIONS",
+}
diff --git a/app/client/src/pages/Editor/FirstTimeUserOnboarding/testUtils.ts b/app/client/src/pages/Editor/FirstTimeUserOnboarding/testUtils.ts
index f0de37c5d9..7fb72ac448 100644
--- a/app/client/src/pages/Editor/FirstTimeUserOnboarding/testUtils.ts
+++ b/app/client/src/pages/Editor/FirstTimeUserOnboarding/testUtils.ts
@@ -38,6 +38,7 @@ export const initialState: any = {
firstTimeUserOnboardingComplete: false,
showFirstTimeUserOnboardingModal: true,
firstTimeUserOnboardingApplicationIds: ["1"],
+ stepState: [],
},
theme: {
theme: {
diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
index e09a5bd1e4..8d5b8f44e4 100644
--- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
+++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
@@ -54,16 +54,10 @@ import {
} from "../constants";
import { Bold, Label, SelectWrapper } from "./styles";
import type { GeneratePagePayload } from "./types";
-import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
import { getCurrentApplicationId } from "selectors/editorSelectors";
-import {
- getFirstTimeUserOnboardingComplete,
- getIsFirstTimeUserOnboardingEnabled,
-} from "selectors/onboardingSelectors";
import { datasourcesEditorIdURL, integrationEditorURL } from "RouteBuilder";
import { PluginPackageName } from "entities/Action";
-import { removeFirstTimeUserOnboardingApplicationId } from "actions/onboardingActions";
import { getCurrentAppWorkspace } from "@appsmith/selectors/workspaceSelectors";
import { hasCreateDatasourcePermission } from "@appsmith/utils/permissionHelpers";
import { getPluginImages } from "selectors/entitiesSelector";
@@ -293,13 +287,6 @@ function GeneratePageForm() {
const { bucketList, failedFetchingBucketList, isFetchingBucketList } =
useS3BucketList();
- const isFirstTimeUserOnboardingEnabled = useSelector(
- getIsFirstTimeUserOnboardingEnabled,
- );
- const isFirstTimeUserOnboardingComplete = useSelector(
- getFirstTimeUserOnboardingComplete,
- );
-
const onSelectDataSource = useCallback(
(
datasource: string | undefined,
@@ -568,15 +555,6 @@ function GeneratePageForm() {
AnalyticsUtil.logEvent("GEN_CRUD_PAGE_FORM_SUBMIT");
dispatch(generateTemplateToUpdatePage(payload));
- if (isFirstTimeUserOnboardingEnabled) {
- dispatch(removeFirstTimeUserOnboardingApplicationId(applicationId));
- }
- if (isFirstTimeUserOnboardingComplete) {
- dispatch({
- type: ReduxActionTypes.SET_FIRST_TIME_USER_ONBOARDING_COMPLETE,
- payload: false,
- });
- }
};
const handleFormSubmit = () => {
diff --git a/app/client/src/pages/Editor/HelpButton.tsx b/app/client/src/pages/Editor/HelpButton.tsx
index f19401fd4a..2700500469 100644
--- a/app/client/src/pages/Editor/HelpButton.tsx
+++ b/app/client/src/pages/Editor/HelpButton.tsx
@@ -25,6 +25,19 @@ import {
import { getAppsmithConfigs } from "@appsmith/configs";
import moment from "moment/moment";
import styled from "styled-components";
+import {
+ getFirstTimeUserOnboardingModal,
+ getIsFirstTimeUserOnboardingEnabled,
+ getSignpostingSetOverlay,
+ getSignpostingTooltipVisible,
+ getSignpostingUnreadSteps,
+ inGuidedTour,
+} from "selectors/onboardingSelectors";
+import SignpostingPopup from "pages/Editor/FirstTimeUserOnboarding/Modal";
+import { showSignpostingModal } from "actions/onboardingActions";
+import { triggerWelcomeTour } from "./FirstTimeUserOnboarding/Utils";
+import { isAirgapped } from "@appsmith/utils/airgapHelpers";
+import TooltipContent from "./FirstTimeUserOnboarding/TooltipContent";
import { getInstanceId } from "@appsmith/selectors/tenantSelectors";
import { updateIntercomConsent, updateUserDetails } from "actions/userActions";
@@ -36,6 +49,15 @@ const HelpFooter = styled.div`
justify-content: space-between;
font-size: 8px;
`;
+const UnreadSteps = styled.div`
+ position: absolute;
+ height: 6px;
+ width: 6px;
+ border-radius: 50%;
+ top: 10px;
+ left: 22px;
+ background-color: var(--ads-v2-color-fg-error);
+`;
const ConsentContainer = styled.div`
padding: 10px;
`;
@@ -45,6 +67,7 @@ const ActionsRow = styled.div`
align-items: center;
margin-bottom: 8px;
`;
+
type HelpItem = {
label: string;
link?: string;
@@ -54,7 +77,7 @@ type HelpItem = {
const HELP_MENU_ITEMS: HelpItem[] = [
{
- icon: "file-line",
+ icon: "book-line",
label: "Documentation",
link: "https://docs.appsmith.com/",
},
@@ -63,11 +86,6 @@ const HELP_MENU_ITEMS: HelpItem[] = [
label: "Report a bug",
link: "https://github.com/appsmithorg/appsmith/issues/new/choose",
},
- {
- icon: "discord",
- label: "Join our discord",
- link: "https://discord.gg/rBTTVJp",
- },
];
if (intercomAppID && window.Intercom) {
@@ -78,7 +96,7 @@ if (intercomAppID && window.Intercom) {
});
}
-function IntercomConsent({
+export function IntercomConsent({
showIntercomConsent,
}: {
showIntercomConsent: (val: boolean) => void;
@@ -121,9 +139,48 @@ function IntercomConsent({
);
}
+function HelpButtonTooltip(props: {
+ isFirstTimeUserOnboardingEnabled: boolean;
+ showSignpostingTooltip: boolean;
+}) {
+ if (props.isFirstTimeUserOnboardingEnabled) {
+ return (
+
+ );
+ }
+
+ return <>{createMessage(HELP_RESOURCE_TOOLTIP)};
+}
+
function HelpButton() {
- const user = useSelector(getCurrentUser);
const [showIntercomConsent, setShowIntercomConsent] = useState(false);
+ const [showTooltip, setShowTooltip] = useState(false);
+ const user = useSelector(getCurrentUser);
+ const dispatch = useDispatch();
+ const isFirstTimeUserOnboardingEnabled = useSelector(
+ getIsFirstTimeUserOnboardingEnabled,
+ );
+ const guidedTourEnabled = useSelector(inGuidedTour);
+ const showSignpostingTooltip = useSelector(getSignpostingTooltipVisible);
+ const onboardingModalOpen = useSelector(getFirstTimeUserOnboardingModal);
+ const unreadSteps = useSelector(getSignpostingUnreadSteps);
+ const setOverlay = useSelector(getSignpostingSetOverlay);
+ const isAirgappedInstance = isAirgapped();
+ const showUnreadSteps =
+ !!unreadSteps.length &&
+ isFirstTimeUserOnboardingEnabled &&
+ !onboardingModalOpen;
+ const menuProps = isFirstTimeUserOnboardingEnabled
+ ? {
+ open: onboardingModalOpen,
+ }
+ : {};
+ const tooltipProps = isFirstTimeUserOnboardingEnabled
+ ? {
+ visible: showTooltip || showSignpostingTooltip,
+ onVisibleChange: setShowTooltip,
+ }
+ : {};
useEffect(() => {
bootIntercom(user);
@@ -133,16 +190,38 @@ function HelpButton() {