fix: remove the image binding step in guided tour (#15161)

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

@@ -44,9 +44,6 @@ describe("Guided Tour", function() {
     cy.get(".t--entity-name")
       .contains("DisplayImage")
       .click({ force: true });
-    // cy.SearchEntityandOpen("ImageWidget");
-    // cy.get(commonlocators.editWidgetName).contains("CountryInput");
-    cy.testJsontext("image", "{{CustomersTable.selectedRow.image}}");
     cy.get(guidedTourLocators.successButton).click();
     // Step 6: Drag and drop a widget
     cy.dragAndDropToCanvas("buttonwidget", {

app/client/src/pages/Editor/GuidedTour/Guide.tsx

@@ -12,6 +12,7 @@ import lottie, { AnimationItem } from "lottie-web";
 import indicator from "assets/lottie/guided-tour-tick-mark.json";
 import {
   getCurrentStep,
+  getQueryAction,
   isExploringSelector,
   loading,
   showInfoMessageSelector,
@@ -241,6 +242,7 @@ const SuccessMessageWrapper = styled.div`
 function InitialContent() {
   const dispatch = useDispatch();
   const isLoading = useSelector(loading);
+  const queryAction = useSelector(getQueryAction);
 
   const setupFirstStep = () => {
     dispatch(toggleLoader(true));
@@ -257,6 +259,7 @@ function InitialContent() {
         <GuideButton
           className="t--start-building"
           isLoading={isLoading}
+          isVisible={!queryAction?.isLoading && !!queryAction?.data}
           onClick={setupFirstStep}
           tag="button"
           text={createMessage(BUTTON_TEXT)}

app/client/src/pages/Editor/GuidedTour/app.json

@@ -910,6 +910,7 @@
 					"parentRowSpace": 10.0,
 					"isSortable": true,
 					"type": "TABLE_WIDGET",
+					"animateLoading": true,
 					"defaultSelectedRow": "0",
 					"hideCard": false,
 					"parentColumnSpace": 17.28125,

app/client/src/pages/Editor/GuidedTour/constants.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { ReactNode } from "react";
 import { Dispatch } from "redux";
-import styled from "styled-components";
 import TableData from "assets/gifs/table_data.gif";
 import DefaultText from "assets/gifs/default_text.gif";
 import {
@@ -39,7 +38,6 @@ import {
   STEP_THREE_TITLE,
   STEP_TWO_TITLE,
 } from "@appsmith/constants/messages";
-import { getTypographyByKey } from "constants/DefaultTheme";
 
 export const Classes = {
   GUIDED_TOUR_BORDER: "guided-tour-border",
@@ -115,6 +113,8 @@ export const onboardingContainerBlueprint = {
                 imageShape: "RECTANGLE",
                 defaultImage: "https://assets.appsmith.com/widgets/default.png",
                 objectFit: "contain",
+                image: "{{CustomersTable.selectedRow.image}}",
+                dynamicBindingPathList: [{ key: "image" }],
               },
             },
             {
@@ -254,15 +254,6 @@ type Step = {
 };
 type StepsType = Record<number, Step>;
 
-const RunButton = styled.div`
-  background-color: ${(props) => props.theme.colors.guidedTour.runButton};
-  padding: ${(props) => props.theme.spaces[1] + 1}px
-    ${(props) => props.theme.spaces[6] + 1}px;
-  color: white;
-  ${(props) => getTypographyByKey(props, "btnMedium")}
-  display: inline-block;
-`;
-
 export const Steps: StepsType = {
   [GUIDED_TOUR_STEPS.RUN_QUERY]: {
     title: createMessage(STEP_ONE_TITLE),
@@ -271,8 +262,8 @@ export const Steps: StepsType = {
       {
         text: (
           <>
-            This command will fetch the first 10 items in the user_data
+            This command will fetch the first 20 items in the user_data
-            database. Hit <RunButton>RUN</RunButton> to see the response.
+            database. Hit <b>RUN</b> to see the response.
           </>
         ),
       },
@@ -444,13 +435,6 @@ export const Steps: StepsType = {
               &#123;&#123;CustomersTable.selectedRow.country&#125;&#125;
             </code>
           </>,
-          <>
-            Connect <b>{GuidedTourEntityNames.DISPLAY_IMAGE}</b>
-            {"'"}s Image Property to{" "}
-            <code>
-              &#123;&#123;CustomersTable.selectedRow.image&#125;&#125;
-            </code>
-          </>,
         ],
       },
     ],

app/client/src/pages/Editor/GuidedTour/useComputeCurrentStep.ts

@@ -21,12 +21,10 @@ import {
   isNameInputBoundSelector,
   isCountryInputBound,
   isEmailInputBound,
-  isImageWidgetBound,
   isButtonWidgetPresent,
   buttonWidgetHasOnClickBinding,
   buttonWidgetHasOnSuccessBinding,
   countryInputSelector,
-  imageWidgetSelector,
 } from "selectors/onboardingSelectors";
 import { getBaseWidgetClassName } from "constants/componentClassNameConstants";
 import { GUIDED_TOUR_STEPS, Steps } from "./constants";
@@ -56,9 +54,7 @@ function useComputeCurrentStep(showInfoMessage: boolean) {
   // 5
   const countryInputBound = useSelector(isCountryInputBound);
   const isCountryInputSelected = useSelector(countryInputSelector);
-  const isImageWidgetSelected = useSelector(imageWidgetSelector);
   const emailInputBound = useSelector(isEmailInputBound);
-  const imageWidgetBound = useSelector(isImageWidgetBound);
   // 6
   const buttonWidgetPresent = useSelector(isButtonWidgetPresent);
   // 7
@@ -117,12 +113,9 @@ function useComputeCurrentStep(showInfoMessage: boolean) {
     if (countryInputBound) {
       meta.completedSubSteps.push(1);
     }
-    if (imageWidgetBound) {
-      meta.completedSubSteps.push(2);
-    }
     // Once all three widgets are bound this step is complete
     if (
-      meta.completedSubSteps.length === 3 &&
+      meta.completedSubSteps.length === 2 &&
       hadReachedStep > GUIDED_TOUR_STEPS.BIND_OTHER_FORM_WIDGETS
     ) {
       step = GUIDED_TOUR_STEPS.ADD_BUTTON_WIDGET;
@@ -274,24 +267,7 @@ function useComputeCurrentStep(showInfoMessage: boolean) {
       }
     }
   }, [step, hadReachedStep, countryInputBound, isCountryInputSelected]);
-  // Show indicator alongside the image property in property pane
+
-  useEffect(() => {
-    if (
-      step === GUIDED_TOUR_STEPS.BIND_OTHER_FORM_WIDGETS &&
-      hadReachedStep <= GUIDED_TOUR_STEPS.BIND_OTHER_FORM_WIDGETS
-    ) {
-      if (isImageWidgetSelected) {
-        if (!imageWidgetBound) {
-          showIndicator(`[data-guided-tour-iid='image']`, "top", {
-            top: 20,
-            left: 0,
-          });
-        } else {
-          hideIndicator();
-        }
-      }
-    }
-  }, [step, hadReachedStep, imageWidgetBound, isImageWidgetSelected]);
   // Show success message
   useEffect(() => {
     if (
@@ -301,7 +277,7 @@ function useComputeCurrentStep(showInfoMessage: boolean) {
       if (meta.completedSubSteps.length === 1) {
         hideIndicator();
       }
-      if (meta.completedSubSteps.length === 3) {
+      if (meta.completedSubSteps.length === 2) {
         dispatch(markStepComplete());
       }
     }

app/client/src/selectors/onboardingSelectors.tsx

@@ -209,19 +209,6 @@ export const countryInputSelector = createSelector(
     return countryInput ? countryInput.widgetId === selectedWidgetId : false;
   },
 );
-// Check if ImageWidget is selected
-export const imageWidgetSelector = createSelector(
-  getWidgets,
-  getSelectedWidget,
-  (widgets, selectedWidgetId) => {
-    const widgetValues = Object.values(widgets);
-    const imageWidget = widgetValues.find((widget) => {
-      return widget.widgetName === GuidedTourEntityNames.DISPLAY_IMAGE;
-    });
-
-    return imageWidget ? imageWidget.widgetId === selectedWidgetId : false;
-  },
-);
 
 export const isCountryInputBound = createSelector(
   getTableWidget,
@@ -270,28 +257,6 @@ export const isEmailInputBound = createSelector(
   },
 );
 
-export const isImageWidgetBound = createSelector(
-  getTableWidget,
-  getWidgets,
-  (tableWidget, widgets) => {
-    if (tableWidget) {
-      const widgetValues = Object.values(widgets);
-      const imageWidget = widgetValues.find((widget) => {
-        if (widget.widgetName === GuidedTourEntityNames.DISPLAY_IMAGE) {
-          return (
-            widget.image === `{{${tableWidget.widgetName}.selectedRow.image}}`
-          );
-        }
-
-        return false;
-      });
-
-      if (imageWidget) return true;
-    }
-
-    return false;
-  },
-);
 export const isButtonWidgetPresent = createSelector(getWidgets, (widgets) => {
   const widgetValues = Object.values(widgets);
   const buttonWidget = widgetValues.find((widget) => {