From 20582407a6e549fcb5f9027ee772cf2319bb2c5d Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Tue, 19 Mar 2024 12:50:58 -0400 Subject: [PATCH 1/4] :bug: DOP-4363 fixes bug for submitting a feedback with a screenshot --- .../Widgets/FeedbackWidget/FeedbackCard.js | 10 ++++++- .../Widgets/FeedbackWidget/FeedbackForm.js | 2 -- .../components/ScreenshotButton.js | 3 +++ .../FeedbackWidget/views/CommentView.js | 3 +++ src/utils/dynamically-set-z-index.js | 27 +++++++++++++++++++ 5 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 src/utils/dynamically-set-z-index.js diff --git a/src/components/Widgets/FeedbackWidget/FeedbackCard.js b/src/components/Widgets/FeedbackWidget/FeedbackCard.js index 854d95b3d..2a32bfe8d 100644 --- a/src/components/Widgets/FeedbackWidget/FeedbackCard.js +++ b/src/components/Widgets/FeedbackWidget/FeedbackCard.js @@ -6,6 +6,7 @@ import { theme } from '../../../../src/theme/docsTheme'; import useScreenSize from '../../../hooks/useScreenSize'; import useStickyTopValues from '../../../hooks/useStickyTopValues'; import { InstruqtContext } from '../../Instruqt/instruqt-context'; +import { elementZIndex } from '../../../utils/dynamically-set-z-index'; import ProgressBar from './components/PageIndicators'; import CloseButton from './components/CloseButton'; import { useFeedbackContext } from './context'; @@ -52,11 +53,18 @@ const FeedbackCard = ({ isOpen, children }) => { const { topSmall } = useStickyTopValues(); useNoScroll(isMobile); + const onClose = () => { + abandon(); + // reset the z-index set by the screenshot button on line + // 185 in ScreenshotButton.js + elementZIndex.resetZIndex('.widgets'); + }; + return ( isOpen && ( - abandon()} /> +
{children}
 diff --git a/src/components/Widgets/FeedbackWidget/FeedbackForm.js b/src/components/Widgets/FeedbackWidget/FeedbackForm.js index f9be6c9e3..a61123936 100644 --- a/src/components/Widgets/FeedbackWidget/FeedbackForm.js +++ b/src/components/Widgets/FeedbackWidget/FeedbackForm.js @@ -3,7 +3,6 @@ import { css, cx } from '@leafygreen-ui/emotion'; import Loadable from '@loadable/component'; import { createPortal } from 'react-dom'; import useScreenSize from '../../../hooks/useScreenSize'; -import { theme } from '../../../theme/docsTheme'; import { useFeedbackContext } from './context'; import FeedbackCard from './FeedbackCard'; import RatingView from './views/RatingView'; @@ -21,7 +20,6 @@ export const FeedbackContent = ({ view }) => { const formStyle = css` position: relative; - z-index: ${theme.zIndexes.widgets}; `; const FeedbackForm = () => { diff --git a/src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js b/src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js index 537aef061..c7be464a9 100644 --- a/src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js +++ b/src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js @@ -11,6 +11,7 @@ import { isBrowser } from '../../../../utils/is-browser'; import useNoScroll from '../hooks/useNoScroll'; import { theme } from '../../../../theme/docsTheme'; import { SCREENSHOT_BUTTON_TEXT, SCREENSHOT_OVERLAY_ALT_TEXT } from '../constants'; +import { elementZIndex } from '../../../../utils/dynamically-set-z-index'; const HIGHLIGHT_BORDER_SIZE = 5; @@ -181,6 +182,8 @@ const ScreenshotButton = ({ size = 'default', ...props }) => { const takeNewScreenshot = useCallback(() => { setIsScreenshotButtonClicked(true); domElementClickedRef.current = 'dashed'; + //conditionally set the z-index on the widget card when the screenshot is clicked + elementZIndex.setZIndex('.widgets', 14); setSelectedElementBorderStyle('dashed'); }, []); diff --git a/src/components/Widgets/FeedbackWidget/views/CommentView.js b/src/components/Widgets/FeedbackWidget/views/CommentView.js index bd67f155e..5ac4dd511 100644 --- a/src/components/Widgets/FeedbackWidget/views/CommentView.js +++ b/src/components/Widgets/FeedbackWidget/views/CommentView.js @@ -20,6 +20,7 @@ import { EMAIL_PLACEHOLDER_TEXT, FEEDBACK_SUBMIT_BUTTON_TEXT, } from '../constants'; +import { elementZIndex } from '../../../../utils/dynamically-set-z-index'; const ScreenshotButton = Loadable(() => import('../components/ScreenshotButton')); const SubmitButton = styled(Button)` @@ -106,6 +107,8 @@ const CommentView = () => { const { isMobile } = useScreenSize(); const handleSubmit = async () => { + elementZIndex.resetZIndex('.widgets'); + if (isValidEmail) { if (screenshotTaken) { const dataUri = await retrieveDataUri(); diff --git a/src/utils/dynamically-set-z-index.js b/src/utils/dynamically-set-z-index.js new file mode 100644 index 000000000..83b9f4253 --- /dev/null +++ b/src/utils/dynamically-set-z-index.js @@ -0,0 +1,27 @@ +export const elementZIndex = { + setZIndex: (selector, zIndex) => { + const ele = document.querySelector(selector); + + if (!ele) { + console.error('selector not found'); + return; + } + + if (typeof zIndex !== 'number') { + console.error('z-index value has to be a number'); + return; + } + + document.querySelector(selector).style.zIndex = zIndex; + }, + resetZIndex: (selector) => { + const ele = document.querySelector(selector); + + if (!ele) { + console.error('selector not found'); + return; + } + + ele.style.zIndex = 1; + }, +}; From 95098bb7cfbf54779ae43740fde0089f45953d80 Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Wed, 20 Mar 2024 12:16:46 -0400 Subject: [PATCH 2/4] :bug: DOP-4363 z-index is applied when the handleDOMElementClick is clicked --- src/components/Widgets/FeedbackWidget/FeedbackCard.js | 3 +-- .../Widgets/FeedbackWidget/components/ScreenshotButton.js | 6 ++++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Widgets/FeedbackWidget/FeedbackCard.js b/src/components/Widgets/FeedbackWidget/FeedbackCard.js index 2a32bfe8d..a216be1b5 100644 --- a/src/components/Widgets/FeedbackWidget/FeedbackCard.js +++ b/src/components/Widgets/FeedbackWidget/FeedbackCard.js @@ -55,8 +55,7 @@ const FeedbackCard = ({ isOpen, children }) => { const onClose = () => { abandon(); - // reset the z-index set by the screenshot button on line - // 185 in ScreenshotButton.js + // reset the z-index set by the screenshot button in ScreenshotButton.js elementZIndex.resetZIndex('.widgets'); }; diff --git a/src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js b/src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js index c7be464a9..827a09041 100644 --- a/src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js +++ b/src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js @@ -182,8 +182,6 @@ const ScreenshotButton = ({ size = 'default', ...props }) => { const takeNewScreenshot = useCallback(() => { setIsScreenshotButtonClicked(true); domElementClickedRef.current = 'dashed'; - //conditionally set the z-index on the widget card when the screenshot is clicked - elementZIndex.setZIndex('.widgets', 14); setSelectedElementBorderStyle('dashed'); }, []); @@ -200,11 +198,15 @@ const ScreenshotButton = ({ size = 'default', ...props }) => { setIsScreenshotButtonClicked(false); setCurrElemState(null); setScreenshotTaken(false); + elementZIndex.resetZIndex('.widgets'); }; const handleDOMElementClick = (e) => { e.preventDefault(); + //conditionally set the z-index on the widget card when the screenshot is clicked + elementZIndex.setZIndex('.widgets', 14); + domElementClickedRef.current = 'solid'; setSelectedElementBorderStyle(domElementClickedRef.current); setScreenshotTaken(true); From cde32946437c2e9376274d8e34a0f1eec36c70bc Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Wed, 20 Mar 2024 12:29:48 -0400 Subject: [PATCH 3/4] :bug: DOP-4363 reset z-index resets the index to 0 --- src/utils/dynamically-set-z-index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/dynamically-set-z-index.js b/src/utils/dynamically-set-z-index.js index 83b9f4253..6cd80ea8f 100644 --- a/src/utils/dynamically-set-z-index.js +++ b/src/utils/dynamically-set-z-index.js @@ -22,6 +22,6 @@ export const elementZIndex = { return; } - ele.style.zIndex = 1; + ele.style.zIndex = 0; }, }; From 260c33fea31807930b73a0375bded1e908a79879 Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Wed, 20 Mar 2024 14:07:43 -0400 Subject: [PATCH 4/4] :bug: DOP-4363 reset z-index resets the index to 0 --- .../Widgets/FeedbackWidget/components/ScreenshotButton.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js b/src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js index 827a09041..4b8c604b2 100644 --- a/src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js +++ b/src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js @@ -183,6 +183,7 @@ const ScreenshotButton = ({ size = 'default', ...props }) => { setIsScreenshotButtonClicked(true); domElementClickedRef.current = 'dashed'; setSelectedElementBorderStyle('dashed'); + elementZIndex.resetZIndex('.widgets'); }, []); // close out the instructions panel