From 306b02ec6fdd136f9272c21a07f2622e5c2840c5 Mon Sep 17 00:00:00 2001 From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com> Date: Wed, 29 Jun 2022 17:47:52 +0530 Subject: [PATCH] fix: signposting task page is shown when clicking on a page in the explorer (#14799) --- .../FirstTimeUserOnboarding_spec.js | 8 +++++ .../src/pages/Editor/Explorer/Pages/index.tsx | 2 ++ .../src/pages/Editor/WidgetsEditor/index.tsx | 16 ++------- app/client/src/selectors/entitiesSelector.ts | 10 ------ .../src/selectors/onboardingSelectors.tsx | 34 ++++++++++++++++++- 5 files changed, 45 insertions(+), 25 deletions(-) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/FirstTimeUserOnboarding_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/FirstTimeUserOnboarding_spec.js index f3fb8a129b..bc7073837b 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/FirstTimeUserOnboarding_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/FirstTimeUserOnboarding_spec.js @@ -8,6 +8,14 @@ describe("FirstTimeUserOnboarding", function() { }); }); + it("onboarding flow - should check page entitiy selection in explorer", function() { + cy.get(OnboardingLocator.introModalBuild).click(); + cy.get(".t--entity-name:contains(Page1)") + .trigger("mouseover") + .click({ force: true }); + cy.get(OnboardingLocator.dropTarget).should("be.visible"); + }); + it("onboarding flow - should check check the redirection post signup", function() { cy.get(OnboardingLocator.introModal).should("be.visible"); }); diff --git a/app/client/src/pages/Editor/Explorer/Pages/index.tsx b/app/client/src/pages/Editor/Explorer/Pages/index.tsx index 739b025302..684f5f8b4f 100644 --- a/app/client/src/pages/Editor/Explorer/Pages/index.tsx +++ b/app/client/src/pages/Editor/Explorer/Pages/index.tsx @@ -39,6 +39,7 @@ import useResize, { } from "utils/hooks/useResize"; import AnalyticsUtil from "utils/AnalyticsUtil"; import { useLocation } from "react-router"; +import { toggleInOnboardingWidgetSelection } from "actions/onboardingActions"; const ENTITY_HEIGHT = 36; const MIN_PAGES_HEIGHT = 60; @@ -115,6 +116,7 @@ function Pages() { type: "PAGES", toUrl: navigateToUrl, }); + dispatch(toggleInOnboardingWidgetSelection(true)); history.push(navigateToUrl); }, [location.pathname], diff --git a/app/client/src/pages/Editor/WidgetsEditor/index.tsx b/app/client/src/pages/Editor/WidgetsEditor/index.tsx index 4fa0710fd8..fc9ffc4e81 100644 --- a/app/client/src/pages/Editor/WidgetsEditor/index.tsx +++ b/app/client/src/pages/Editor/WidgetsEditor/index.tsx @@ -20,13 +20,9 @@ import { useWidgetSelection } from "utils/hooks/useWidgetSelection"; import { getCurrentApplication } from "selectors/applicationSelectors"; import { setCanvasSelectionFromEditor } from "actions/canvasSelectionActions"; import { closePropertyPane, closeTableFilterPane } from "actions/widgetActions"; -import { - getIsOnboardingTasksView, - getIsOnboardingWidgetSelection, -} from "selectors/entitiesSelector"; import { useAllowEditorDragToSelect } from "utils/hooks/useAllowEditorDragToSelect"; import { - getIsFirstTimeUserOnboardingEnabled, + getIsOnboardingTasksView, inGuidedTour, } from "selectors/onboardingSelectors"; import EditorContextProvider from "components/editorComponents/EditorContextProvider"; @@ -42,12 +38,6 @@ function WidgetsEditor() { const currentApp = useSelector(getCurrentApplication); const isFetchingPage = useSelector(getIsFetchingPage); const showOnboardingTasks = useSelector(getIsOnboardingTasksView); - const enableFirstTimeUserOnboarding = useSelector( - getIsFirstTimeUserOnboardingEnabled, - ); - const isOnboardingWidgetSelection = useSelector( - getIsOnboardingWidgetSelection, - ); const guidedTourEnabled = useSelector(inGuidedTour); useEffect(() => { PerformanceTracker.stopTracking(PerformanceTransactionName.CLOSE_SIDE_PANE); @@ -112,9 +102,7 @@ function WidgetsEditor() { PerformanceTracker.stopTracking(); return ( - {enableFirstTimeUserOnboarding && - showOnboardingTasks && - !isOnboardingWidgetSelection ? ( + {showOnboardingTasks ? ( ) : ( <> diff --git a/app/client/src/selectors/entitiesSelector.ts b/app/client/src/selectors/entitiesSelector.ts index 2b60432f6d..b64f11588b 100644 --- a/app/client/src/selectors/entitiesSelector.ts +++ b/app/client/src/selectors/entitiesSelector.ts @@ -627,19 +627,9 @@ export const widgetsMapWithParentModalId = (state: AppState) => { : getCanvasWidgetsWithParentId(state); }; -export const getIsOnboardingTasksView = createSelector( - getCanvasWidgets, - (widgets) => { - return Object.keys(widgets).length == 1; - }, -); - export const getIsReconnectingDatasourcesModalOpen = (state: AppState) => state.entities.datasources.isReconnectingModalOpen; -export const getIsOnboardingWidgetSelection = (state: AppState) => - state.ui.onBoarding.inOnboardingWidgetSelection; - export const getPageActions = (pageId = "") => { return (state: AppState) => { return state.entities.actions.filter((action) => { diff --git a/app/client/src/selectors/onboardingSelectors.tsx b/app/client/src/selectors/onboardingSelectors.tsx index 05383c8b29..05c50e4f39 100644 --- a/app/client/src/selectors/onboardingSelectors.tsx +++ b/app/client/src/selectors/onboardingSelectors.tsx @@ -6,9 +6,15 @@ import { AppState } from "reducers"; import { createSelector } from "reselect"; import { getUserApplicationsWorkspaces } from "./applicationSelectors"; import { getWidgets } from "sagas/selectors"; -import { getActionResponses, getActions } from "./entitiesSelector"; +import { + getActionResponses, + getActions, + getCanvasWidgets, +} from "./entitiesSelector"; import { getSelectedWidget } from "./ui"; import { GuidedTourEntityNames } from "pages/Editor/GuidedTour/constants"; +import { previewModeSelector } from "./editorSelectors"; +import { commentModeSelector } from "./commentsSelectors"; // Signposting selectors export const getEnableFirstTimeUserOnboarding = (state: AppState) => { @@ -38,6 +44,32 @@ export const getIsFirstTimeUserOnboardingEnabled = createSelector( export const getInOnboardingWidgetSelection = (state: AppState) => state.ui.onBoarding.inOnboardingWidgetSelection; +export const getIsOnboardingWidgetSelection = (state: AppState) => + state.ui.onBoarding.inOnboardingWidgetSelection; + +export const getIsOnboardingTasksView = createSelector( + getCanvasWidgets, + getIsFirstTimeUserOnboardingEnabled, + getIsOnboardingWidgetSelection, + previewModeSelector, + commentModeSelector, + ( + widgets, + enableFirstTimeUserOnboarding, + isOnboardingWidgetSelection, + inPreviewMode, + inCommentMode, + ) => { + return ( + Object.keys(widgets).length == 1 && + enableFirstTimeUserOnboarding && + !isOnboardingWidgetSelection && + !inPreviewMode && + !inCommentMode + ); + }, +); + // Guided Tour selectors export const isExploringSelector = (state: AppState) => state.ui.onBoarding.exploring;