diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index f3205f3be9..12c2a988dd 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -1135,7 +1135,7 @@ export const END_TUTORIAL = () => "END TUTORIAL"; export const TITLE = () => "In this tutorial we’ll build a tool to display customer information"; export const DESCRIPTION = () => - "This tool has a table that displays customer data and a form to update a particular customer record. Try out the tool below before you start building this."; + "This tool has a table that displays customer data and a form to update a particular customer record. Try out the tool below before you start building."; export const BUTTON_TEXT = () => "Start Building"; // -- Rating -- export const RATING_TITLE = () => diff --git a/app/client/src/pages/Editor/GuidedTour/constants.tsx b/app/client/src/pages/Editor/GuidedTour/constants.tsx index 32d7dffbb0..3fb158cab1 100644 --- a/app/client/src/pages/Editor/GuidedTour/constants.tsx +++ b/app/client/src/pages/Editor/GuidedTour/constants.tsx @@ -392,7 +392,7 @@ export const Steps: StepsType = { { text: ( <> - In the property pane of Name input, add the{" "} + In the property pane of {GuidedTourEntityNames.NAME_INPUT}, add the{" "} {{CustomersTable.selectedRow.name}} diff --git a/app/client/src/pages/Editor/GuidedTour/utils.ts b/app/client/src/pages/Editor/GuidedTour/utils.ts index 0ed70f80f1..4ff7cec0e2 100644 --- a/app/client/src/pages/Editor/GuidedTour/utils.ts +++ b/app/client/src/pages/Editor/GuidedTour/utils.ts @@ -33,6 +33,12 @@ class IndicatorHelper { } const coordinates = getCoordinates(primaryReference); + if (coordinates.hidden) { + this.indicatorWrapper.style.display = "none"; + } else { + this.indicatorWrapper.style.display = "initial"; + } + // Remove previous indicator if it is unable to find the // correct position if (coordinates.width === 0) { @@ -117,8 +123,21 @@ class IndicatorHelper { } const indicatorHelperInstance = new IndicatorHelper(); -function getCoordinates(elem: Element) { - const box = elem.getBoundingClientRect(); +// To check if the element is behind another element for e.g when it is scrolled +// out of view +function isBehindOtherElement(element: Element, boundingRect: DOMRect) { + const { bottom, left, right, top } = boundingRect; + + if (element.contains(document.elementFromPoint(left, top))) return false; + if (element.contains(document.elementFromPoint(right, top))) return false; + if (element.contains(document.elementFromPoint(left, bottom))) return false; + if (element.contains(document.elementFromPoint(right, bottom))) return false; + + return true; +} + +function getCoordinates(element: Element) { + const box = element.getBoundingClientRect(); return { top: box.top + window.pageYOffset, @@ -127,6 +146,9 @@ function getCoordinates(elem: Element) { left: box.left + window.pageXOffset, width: box.width, height: box.height, + // If the element present is not the same as the one we are interested in + // we set the hidden flag to true to hide it using `display: none`. + hidden: isBehindOtherElement(element, box), }; }