fix: end guided tour on exiting editor (#11084)

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/CreateNewApp_spec.js

@@ -0,0 +1,20 @@
+const explorerLocators = require("../../../../locators/explorerlocators.json");
+const guidedTourLocators = require("../../../../locators/GuidedTour.json");
+const commonlocators = require("../../../../locators/commonlocators.json");
+const homePage = require("../../../../locators/HomePage");
+
+describe("Creating new app after discontinuing guided tour should not start the same", function() {
+  it("Creating new app after discontinuing guided tour should not start the same", function() {
+    // Start guided tour
+    cy.get(commonlocators.homeIcon).click({ force: true });
+    cy.get(guidedTourLocators.welcomeTour).click();
+    cy.get(guidedTourLocators.startBuilding).should("be.visible");
+    // Go back to applications page
+    cy.get(commonlocators.homeIcon).click({ force: true });
+    cy.get(homePage.createNewAppButton)
+      .first()
+      .click();
+    // Check if explorer is visible, explorer is collapsed initialy in guided tour
+    cy.get(explorerLocators.entityExplorer).should("be.visible");
+  });
+});

app/client/cypress/locators/HomePage.js

@@ -17,6 +17,7 @@ export default {
   forkAppOrgButton: "[data-cy=t--fork-app-to-org-button]",
   selectAction: "#Base",
   deleteApp: "[data-cy=t--delete]",
+  createNewAppButton: ".t--new-button",
   deleteAppConfirm: "[data-cy=t--delete-confirm]",
   homeIcon: ".t--appsmith-logo",
   inputAppName: "input[name=applicationName]",

app/client/cypress/locators/explorerlocators.json

@@ -5,10 +5,10 @@
     "AddPage": ".pages .t--entity-add-btn",
     "addEntityAPI": ".datasources .t--entity-add-btn",
     "addEntityJSEditor": ".js_actions .t--entity-add-btn",
+    "entityExplorer": ".t--entity-explorer",
     "entityWidget": ".t--entity-name:contains('WIDGETS')",
     "entityTable": ".t--entity-name:contains('Table1')",
     "entityText": ".t--entity-name:contains('Text1')",
-    "entityExplorer": ".t--nav-link-entity-explorer",
     "popover": "//div[contains(@class,'t--entity page')]//*[local-name()='g' and @id='Icon/Outline/more-vertical']",
     "datsourceEntityPopover": "//div[contains(@class,'t--entity datasource')]//*[local-name()='g' and @id='Icon/Outline/more-vertical']",
     "editName": ".single-select >div:contains('Edit Name')",

app/client/cypress/support/commands.js

@@ -649,13 +649,6 @@ Cypress.Commands.add("NavigateToAPI_Panel", () => {
   cy.get("#loading").should("not.exist");
 });
 
-Cypress.Commands.add("NavigateToEntityExplorer", () => {
-  cy.get(explorer.entityExplorer)
-    .should("be.visible")
-    .click({ force: true });
-  cy.get("#loading").should("not.exist");
-});
-
 Cypress.Commands.add("CreateAPI", (apiname) => {
   cy.get(explorer.createNew).click({ force: true });
   cy.get(explorer.blankAPI).click({ force: true });

app/client/src/sagas/InitSagas.ts

@@ -65,6 +65,8 @@ import {
   updateBranchLocally,
 } from "actions/gitSyncActions";
 import { getCurrentGitBranch } from "selectors/gitSyncSelectors";
+import { enableGuidedTour } from "actions/onboardingActions";
+import { setPreviewModeAction } from "actions/editorActions";
 
 function* failFastApiCalls(
   triggerActions: Array<ReduxAction<unknown> | ReduxActionWithoutPayload>,
@@ -392,6 +394,13 @@ export function* initializeAppViewerSaga(
 function* resetEditorSaga() {
   yield put(resetEditorSuccess());
   yield put(resetRecentEntities());
+  // End guided tour once user exits editor
+  yield put(enableGuidedTour(false));
+  // Reset to edit mode once user exits editor
+  // Without doing this if the user creates a new app they
+  // might end up in preview mode if they were in preview mode
+  // previously
+  yield put(setPreviewModeAction(false));
 }
 
 export function* waitForInit() {