fix: signposting task page is shown when clicking on a page in the explorer (#14799)

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");
   });

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],

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 (
     <EditorContextProvider>
-      {enableFirstTimeUserOnboarding &&
-      showOnboardingTasks &&
-      !isOnboardingWidgetSelection ? (
+      {showOnboardingTasks ? (
         <OnboardingTasks />
       ) : (
         <>

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) => {

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;