🐛 DOP-4363 fixes bug for submitting a feedback with a screenshot (#1043)

Co-authored-by: Caesar Bell <[email protected]>

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,17 @@ const FeedbackCard = ({ isOpen, children }) => {
   const { topSmall } = useStickyTopValues();
   useNoScroll(isMobile);
 
+  const onClose = () => {
+    abandon();
+    // reset the z-index set by the screenshot button in ScreenshotButton.js
+    elementZIndex.resetZIndex('.widgets');
+  };
+
   return (
     isOpen && (
       <FloatingContainer top={topSmall} id={feedbackId} hasOpenLabDrawer={isLabOpen}>
         <Card top={topSmall}>
-          <CloseButton onClick={() => abandon()} />
+          <CloseButton onClick={onClose} />
           <ProgressBar />
           <div>{children}</div>
         </Card>

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

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;
 
@@ -182,6 +183,7 @@ const ScreenshotButton = ({ size = 'default', ...props }) => {
     setIsScreenshotButtonClicked(true);
     domElementClickedRef.current = 'dashed';
     setSelectedElementBorderStyle('dashed');
+    elementZIndex.resetZIndex('.widgets');
   }, []);
 
   // close out the instructions panel
@@ -197,11 +199,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);

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

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 = 0;
+  },
+};