From c76c052d360cae362d0f949098dae25aefd85ed8 Mon Sep 17 00:00:00 2001 From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com> Date: Thu, 14 Jul 2022 16:21:24 +0530 Subject: [PATCH] fix: remove the image binding step in guided tour (#15161) --- .../Onboarding/GuidedTour_spec.js | 3 -- .../src/pages/Editor/GuidedTour/Guide.tsx | 3 ++ .../src/pages/Editor/GuidedTour/app.json | 1 + .../src/pages/Editor/GuidedTour/constants.tsx | 24 +++---------- .../GuidedTour/useComputeCurrentStep.ts | 30 ++-------------- .../src/selectors/onboardingSelectors.tsx | 35 ------------------- 6 files changed, 11 insertions(+), 85 deletions(-) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/GuidedTour_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/GuidedTour_spec.js index 480c67de7b..9f9154e9ed 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/GuidedTour_spec.js +++ b/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", { diff --git a/app/client/src/pages/Editor/GuidedTour/Guide.tsx b/app/client/src/pages/Editor/GuidedTour/Guide.tsx index 80c7ca33b5..762b1300ce 100644 --- a/app/client/src/pages/Editor/GuidedTour/Guide.tsx +++ b/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() { ; -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 - database. Hit RUN to see the response. + This command will fetch the first 20 items in the user_data + database. Hit RUN to see the response. ), }, @@ -444,13 +435,6 @@ export const Steps: StepsType = { {{CustomersTable.selectedRow.country}} , - <> - Connect {GuidedTourEntityNames.DISPLAY_IMAGE} - {"'"}s Image Property to{" "} - - {{CustomersTable.selectedRow.image}} - - , ], }, ], diff --git a/app/client/src/pages/Editor/GuidedTour/useComputeCurrentStep.ts b/app/client/src/pages/Editor/GuidedTour/useComputeCurrentStep.ts index 8cf03e0b15..13c0531c62 100644 --- a/app/client/src/pages/Editor/GuidedTour/useComputeCurrentStep.ts +++ b/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()); } } diff --git a/app/client/src/selectors/onboardingSelectors.tsx b/app/client/src/selectors/onboardingSelectors.tsx index 05c50e4f39..c6c9bcc8eb 100644 --- a/app/client/src/selectors/onboardingSelectors.tsx +++ b/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) => {