New onboarding flow (#2686)

Co-authored-by: a <rishabh.robben@gmail.com>

app/client/cypress/integration/Smoke_TestSuite/Binding/InputWidgets_NavigateTo_validation_spec.js

@@ -1,12 +1,9 @@
 const commonlocators = require("../../../locators/commonlocators.json");
-const formWidgetsPage = require("../../../locators/FormWidgets.json");
 const dsl = require("../../../fixtures/tableInputDsl.json");
-const pages = require("../../../locators/Pages.json");
 const widgetsPage = require("../../../locators/Widgets.json");
 const publish = require("../../../locators/publishWidgetspage.json");
 const testdata = require("../../../fixtures/testdata.json");
 const dsl2 = require("../../../fixtures/displayWidgetDsl.json");
-const explorer = require("../../../locators/explorerlocators.json");
 const pageid = "MyPage";
 
 describe("Binding the multiple Widgets and validating NavigateTo Page", function() {
@@ -17,7 +14,7 @@ describe("Binding the multiple Widgets and validating NavigateTo Page", function
   it("Input widget test with default value from table widget", function() {
     cy.openPropertyPane("inputwidget");
     cy.get(widgetsPage.defaultInput).type(testdata.defaultInputWidget);
-    cy.get(widgetsPage.actionSelect)
+    cy.get(widgetsPage.inputOnTextChange)
       .first()
       .click();
     cy.get(commonlocators.chooseAction)

app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Input_spec.js

@@ -71,7 +71,10 @@ describe("Input Widget Functionality", function() {
     /**
      * @param{Show Alert} Css for InputChange
      */
-    cy.getAlert(commonlocators.optionchangetextInput);
+    cy.getAlert(
+      commonlocators.optionchangetextInput,
+      widgetsPage.inputOnTextChange,
+    );
     cy.PublishtheApp();
   });
   it("Input Widget Functionality To Validate Default Text and Placeholder", function() {

app/client/cypress/integration/Smoke_TestSuite/Onboarding/Onboarding_spec.js

@@ -1,31 +1,20 @@
-const onboarding = require("../../../locators/Onboarding.json");
 const explorer = require("../../../locators/explorerlocators.json");
 const homePage = require("../../../locators/HomePage.json");
-const loginPage = require("../../../locators/LoginPage.json");
 
 describe("Onboarding", function() {
   it("Onboarding flow", function() {
-    cy.LogOut();
+    const appname = localStorage.getItem("AppName");
+    cy.DeleteApp(appname);
 
-    cy.visit("/user/signup");
-    cy.get("input[name='email']").type(Cypress.env("USERNAME"));
-    cy.get(loginPage.password).type(Cypress.env("PASSWORD"));
-    cy.get(loginPage.submitBtn).click();
+    cy.get(".t--welcome-tour").click();
+    cy.get(".t--onboarding-action").click();
 
-    cy.LogintoApp(Cypress.env("USERNAME"), Cypress.env("PASSWORD"));
-
-    cy.get(homePage.createNew)
-      .first()
-      .click({ force: true });
     cy.wait("@createNewApplication").should(
       "have.nested.property",
       "response.body.responseMeta.status",
       201,
     );
-    cy.get("#loading").should("not.exist");
-
-    //Onboarding
-    cy.contains(".t--create-database", "Explore Appsmith").click();
+    cy.get(".t--start-building").click();
 
     // Create and run query
     cy.get(".t--onboarding-indicator").should("be.visible");
@@ -36,7 +25,9 @@ describe("Onboarding", function() {
     cy.get(".t--add-widget").click();
     cy.dragAndDropToCanvas("tablewidget", { x: 30, y: -30 });
 
-    cy.get(onboarding.tooltipSnippet).click({ force: true });
+    // Click on "Show me how" and then copy hint
+    cy.get(".t--onboarding-action").click();
+    cy.get(".t--onboarding-snippet").click({ force: true });
 
     cy.get(".t--property-control-tabledata" + " .CodeMirror textarea")
       .first()
@@ -47,16 +38,19 @@ describe("Onboarding", function() {
       cy.get(".t--property-control-tabledata" + " .CodeMirror")
         .first()
         .then((editor) => {
-          editor[0].CodeMirror.setValue("{{ExampleQuery.data}}");
+          editor[0].CodeMirror.setValue("{{fetch_standup_updates.data}}");
         });
     });
     cy.closePropertyPane();
     cy.get(explorer.closeWidgets).click();
 
     cy.openPropertyPane("tablewidget");
     cy.closePropertyPane();
-
     cy.get(".t--application-feedback-btn").should("not.exist");
+
+    cy.contains(".t--onboarding-helper-title", "Capture Hero Updates");
+    cy.get(".t--onboarding-cheat-action").click();
+    cy.contains(".t--onboarding-helper-title", "Deploy the Standup Dashboard");
   });
 
   // Similar to PublishtheApp command with little changes
@@ -79,9 +73,6 @@ describe("Onboarding", function() {
     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();
+    cy.get(".t--onboarding-secondary-action").click();
   });
 });

app/client/cypress/locators/Widgets.json

@@ -45,6 +45,7 @@
     "defaultSingleSelectValue": ".bp3-popover-target > div > .bp3-button > .bp3-button-text",
     "widgetBtn": ".t--widget-buttonwidget button",
     "actionSelect": ".t--open-dropdown-Select-Action",
+    "inputOnTextChange": ".t--property-control-ontextchanged .t--open-dropdown-Select-Action",
     "tableActionSelect": ".t--property-control-onsearchtextchanged .t--open-dropdown-Select-Action",
     "chartWidget": ".t--widget-chartwidget",
     "tableOnRowSelect": ".t--property-control-onrowselected .t--open-dropdown-Select-Action"

app/client/cypress/support/commands.js

@@ -1277,25 +1277,28 @@ Cypress.Commands.add("togglebarDisable", (value) => {
     .should("not.checked");
 });
 
-Cypress.Commands.add("getAlert", (alertcss) => {
-  cy.get(commonlocators.dropdownSelectButton)
-    .first()
-    .click({ force: true });
-  cy.get(widgetsPage.menubar)
-    .contains("Show Message")
-    .click({ force: true })
-    .should("have.text", "Show Message");
+Cypress.Commands.add(
+  "getAlert",
+  (alertcss, propertyControl = commonlocators.dropdownSelectButton) => {
+    cy.get(propertyControl)
+      .first()
+      .click({ force: true });
+    cy.get(widgetsPage.menubar)
+      .contains("Show Message")
+      .click({ force: true })
+      .should("have.text", "Show Message");
 
-  cy.get(alertcss)
-    .click({ force: true })
-    .type("{command}{A}{del}")
-    .type("hello")
-    .should("not.to.be.empty");
-  cy.get(".t--open-dropdown-Select-type").click({ force: true });
-  cy.get(".bp3-popover-content .bp3-menu li")
-    .contains("Success")
-    .click({ force: true });
-});
+    cy.get(alertcss)
+      .click({ force: true })
+      .type("{command}{A}{del}")
+      .type("hello")
+      .should("not.to.be.empty");
+    cy.get(".t--open-dropdown-Select-type").click({ force: true });
+    cy.get(".bp3-popover-content .bp3-menu li")
+      .contains("Success")
+      .click({ force: true });
+  },
+);
 
 Cypress.Commands.add("addAPIFromLightningMenu", (ApiName) => {
   cy.get(commonlocators.dropdownSelectButton)

app/client/src/actions/onboardingActions.ts

@@ -1,13 +1,9 @@
-import { OnboardingStep } from "constants/OnboardingConstants";
+import {
+  OnboardingHelperConfig,
+  OnboardingStep,
+} from "constants/OnboardingConstants";
 import { ReduxActionTypes } from "constants/ReduxActionConstants";
 
-export const showTooltip = (payload: OnboardingStep) => {
-  return {
-    type: ReduxActionTypes.SHOW_ONBOARDING_TOOLTIP,
-    payload,
-  };
-};
-
 export const showIndicator = (payload: OnboardingStep) => {
   return {
     type: ReduxActionTypes.SHOW_ONBOARDING_INDICATOR,
@@ -34,3 +30,44 @@ export const setOnboardingState = (payload: boolean) => {
     payload,
   };
 };
+
+export const showOnboardingHelper = (payload: boolean) => {
+  return {
+    type: ReduxActionTypes.SHOW_ONBOARDING_HELPER,
+    payload,
+  };
+};
+
+export const setHelperConfig = (payload: OnboardingHelperConfig) => {
+  return {
+    type: ReduxActionTypes.SET_HELPER_CONFIG,
+    payload,
+  };
+};
+
+export const setCurrentSubstep = (payload: number) => {
+  return {
+    type: ReduxActionTypes.SET_ONBOARDING_SUBSTEP,
+    payload,
+  };
+};
+
+export const showWelcomeHelper = (payload: boolean) => {
+  return {
+    type: ReduxActionTypes.SHOW_ONBOARDING_WELCOME_HELPER,
+    payload,
+  };
+};
+
+export const showOnboardingLoader = (payload: boolean) => {
+  return {
+    type: ReduxActionTypes.SHOW_ONBOARDING_LOADER,
+    payload,
+  };
+};
+
+export const showEndOnboardingHelper = () => {
+  return {
+    type: ReduxActionTypes.SHOW_END_ONBOARDING_HELPER,
+  };
+};