Merge pull request #388 from concord-consortium/188398397-fix-submit-…

…button-showing-under-draw-tool fix: Hide submit button when draw tool dialog showing [PT-188398397]
concord-consortium · Oct 17, 2024 · 1f14e4e · 1f14e4e
2 parents 32bb9c0 + 86ee331
commit 1f14e4e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/packages/image-question/src/components/app.tsx b/packages/image-question/src/components/app.tsx
@@ -5,6 +5,7 @@ import { Runtime } from "./runtime";
 import { IAuthoredState, IInteractiveState } from "./types";
 import { baseAuthoringProps as drawingToolBaseAuthoringProps, exportToMediaLibrary } from "drawing-tool-interactive/src/components/app";
 import deepmerge from "deepmerge";
+import { hasDrawingToolDialogUrlParam } from "../utils/url-param";
 
 const baseAuthoringProps = deepmerge(drawingToolBaseAuthoringProps, {
   schema: {
@@ -64,5 +65,6 @@ export const App = () => (
     baseAuthoringProps={baseAuthoringProps}
     isAnswered={isAnswered}
     linkedInteractiveProps={[{ label: "snapshotTarget", supportsSnapshots: true }]}
+    disableSubmitBtnRendering={hasDrawingToolDialogUrlParam()}
   />
 );
diff --git a/packages/image-question/src/components/runtime.tsx b/packages/image-question/src/components/runtime.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { IRuntimeQuestionComponentProps } from "@concord-consortium/question-interactives-helpers/src/components/base-question-app";
 import { IMediaLibrary, closeModal, showModal, useInitMessage } from "@concord-consortium/lara-interactive-api";
-import { getURLParam } from "@concord-consortium/question-interactives-helpers/src/utilities/get-url-param";
 import { drawingToolCanvasSelector } from "drawing-tool-interactive/src/components/drawing-tool";
 import { UpdateFunc } from "@concord-consortium/question-interactives-helpers/src/components/base-app";
 import Shutterbug from "shutterbug";
@@ -10,11 +9,10 @@ import { UploadFromMediaLibraryDialog } from "../../../helpers/src/components/me
 import { DrawingToolDialog } from "./drawing-tool-dialog";
 import { InlineContent } from "./inline-content";
 import { IAuthoredState, IInteractiveState } from "./types";
+import { hasDrawingToolDialogUrlParam, urlWithDrawingToolDialogUrlParam } from "../utils/url-param";
 
 interface IProps extends IRuntimeQuestionComponentProps<IAuthoredState, IInteractiveState> {}
 
-const drawingToolDialogUrlParam = "drawingToolDialog";
-
 export const Runtime: React.FC<IProps> = ({ authoredState, interactiveState, setInteractiveState, report }) => {
   const {required, backgroundSource, backgroundImageUrl, allowUploadFromMediaLibrary} = authoredState;
   const readOnly = report || (required && interactiveState?.submitted);
@@ -33,7 +31,6 @@ export const Runtime: React.FC<IProps> = ({ authoredState, interactiveState, set
     }
   }, [initMessage]);
 
-  const drawingToolDialog = getURLParam(drawingToolDialogUrlParam);
   const authoredBgCorsError = useCorsImageErrorCheck({
     performTest: backgroundSource === "url" && !!backgroundImageUrl,
     imgSrc: backgroundImageUrl
@@ -50,9 +47,8 @@ export const Runtime: React.FC<IProps> = ({ authoredState, interactiveState, set
   const openDrawingToolDialog = () => {
     // notCloseable: true disabled click-to-close backdrop and X icon in the corner.
     // Dialog can be closed only via closeModal API.
-    const url = new URL(window.location.href);
-    url.searchParams.append(drawingToolDialogUrlParam, "true");
-    showModal({ type: "dialog", url: url.toString(), notCloseable: true });
+    const url = urlWithDrawingToolDialogUrlParam();
+    showModal({ type: "dialog", url, notCloseable: true });
   };
 
   const handleDrawingToolSetIntState = (updateFunc: UpdateFunc<IInteractiveState>) => {
@@ -135,7 +131,7 @@ export const Runtime: React.FC<IProps> = ({ authoredState, interactiveState, set
             handleCloseModal={() => setShowUploadModal(false)}
           />
         </> :
-        drawingToolDialog ?
+        hasDrawingToolDialogUrlParam() ?
           <DrawingToolDialog
             authoredState={authoredState}
             interactiveState={interactiveState}

diff --git a/packages/image-question/src/utils/url-param.ts b/packages/image-question/src/utils/url-param.ts
@@ -0,0 +1,12 @@
+import { getURLParam } from "@concord-consortium/question-interactives-helpers/src/utilities/get-url-param";
+
+const drawingToolDialogUrlParam = "drawingToolDialog";
+
+export const hasDrawingToolDialogUrlParam = () => !!getURLParam(drawingToolDialogUrlParam);
+
+export const urlWithDrawingToolDialogUrlParam = () => {
+  const url = new URL(window.location.href);
+  url.searchParams.append(drawingToolDialogUrlParam, "true");
+  return url.toString();
+};
+