Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
akash-codemonk 2022-07-14 16:21:24 +05:30 committed by GitHub
parent 41c3446f5b
commit c76c052d36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 11 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/GuidedTour_spec.js
View File

@ -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", {

3
app/client/src/pages/Editor/GuidedTour/Guide.tsx
View File

@ -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)}

1
app/client/src/pages/Editor/GuidedTour/app.json
View File

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

24
app/client/src/pages/Editor/GuidedTour/constants.tsx
View File

@ -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
database. Hit <RunButton>RUN</RunButton> to see the response.
This command will fetch the first 20 items in the user_data
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>
</>,
],
},
],

30
app/client/src/pages/Editor/GuidedTour/useComputeCurrentStep.ts
View File

@ -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());
}
}

35
app/client/src/selectors/onboardingSelectors.tsx
View File

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