Address event propagation issue from modal within table

Signed-off-by: ibolton336 <[email protected]>
konveyor · Oct 25, 2023 · 21788c3 · 21788c3
1 parent 0a37fd3
commit 21788c3
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 21 deletions.
diff --git a/...es/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx b/...es/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx
@@ -12,7 +12,7 @@ import {
   useDeleteAssessmentMutation,
 } from "@app/queries/assessments";
 import { Button, Spinner } from "@patternfly/react-core";
-import React, { FunctionComponent, useState } from "react";
+import React, { FunctionComponent } from "react";
 import { useHistory } from "react-router-dom";
 import "./dynamic-assessment-actions-row.css";
 import { AxiosError } from "axios";
@@ -27,7 +27,6 @@ import {
 } from "@tanstack/react-query";
 import { TrashIcon } from "@patternfly/react-icons";
 import useIsArchetype from "@app/hooks/useIsArchetype";
-import AssessmentModal from "../../assessment-wizard/assessment-wizard-modal";
 
 enum AssessmentAction {
   Take = "Take",
@@ -41,21 +40,24 @@ interface DynamicAssessmentActionsRowProps {
   archetype?: Archetype;
   assessment?: Assessment;
   isReadonly?: boolean;
+  onOpenModal: (assessmentId: number) => void;
 }
 
 const DynamicAssessmentActionsRow: FunctionComponent<
   DynamicAssessmentActionsRowProps
-> = ({ questionnaire, application, archetype, assessment, isReadonly }) => {
+> = ({
+  questionnaire,
+  application,
+  archetype,
+  assessment,
+  isReadonly,
+  onOpenModal,
+}) => {
   const isArchetype = useIsArchetype();
   const history = useHistory();
   const { t } = useTranslation();
   const queryClient = useQueryClient();
 
-  const [isWizardOpen, setIsWizardOpen] = useState(false);
-  const [createdAssessmentId, setCreatedAssessmentId] = useState<number | null>(
-    null
-  );
-
   const { pushNotification } = React.useContext(NotificationsContext);
 
   const onSuccessHandler = () => {};
@@ -132,8 +134,7 @@ const DynamicAssessmentActionsRow: FunctionComponent<
 
     try {
       const result = await createAssessmentAsync(newAssessment);
-      setCreatedAssessmentId(result.id);
-      setIsWizardOpen(true);
+      onOpenModal(result.id);
     } catch (error) {
       console.error("Error while creating assessment:", error);
       pushNotification({
@@ -170,8 +171,7 @@ const DynamicAssessmentActionsRow: FunctionComponent<
     if (action === AssessmentAction.Take) {
       takeAssessment();
     } else if (action === AssessmentAction.Continue && assessment?.id) {
-      setCreatedAssessmentId(assessment.id);
-      setIsWizardOpen(true);
+      onOpenModal(assessment.id);
     } else if (action === AssessmentAction.Retake) {
       if (assessment) {
         try {
@@ -260,14 +260,6 @@ const DynamicAssessmentActionsRow: FunctionComponent<
           </Button>
         </Td>
       ) : null}
-      <AssessmentModal
-        isOpen={isWizardOpen}
-        onRequestClose={() => {
-          setCreatedAssessmentId(null);
-          setIsWizardOpen(false);
-        }}
-        assessmentId={createdAssessmentId!}
-      />
     </>
   );
 };

diff --git a/...rc/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx b/...rc/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 
 import { useLocalTableControls } from "@app/hooks/table-controls";
@@ -15,6 +15,7 @@ import {
   Questionnaire,
 } from "@app/api/models";
 import DynamicAssessmentActionsRow from "./dynamic-assessment-actions-row";
+import AssessmentModal from "../../assessment-wizard/assessment-wizard-modal";
 
 interface QuestionnairesTableProps {
   tableName: string;
@@ -48,6 +49,21 @@ const QuestionnairesTable: React.FC<QuestionnairesTableProps> = ({
     numRenderedColumns,
     propHelpers: { tableProps, getThProps, getTrProps, getTdProps },
   } = tableControls;
+
+  const [isWizardOpen, setIsWizardOpen] = useState(false);
+  const [createdAssessmentId, setCreatedAssessmentId] = useState<number | null>(
+    null
+  );
+  const handleModalOpen = (assessmentId: number) => {
+    setCreatedAssessmentId(assessmentId);
+    setIsWizardOpen(true);
+  };
+
+  const handleModalClose = () => {
+    setCreatedAssessmentId(null);
+    setIsWizardOpen(false);
+  };
+
   return (
     <>
       <Table
@@ -112,6 +128,7 @@ const QuestionnairesTable: React.FC<QuestionnairesTableProps> = ({
                         application={application}
                         archetype={archetype}
                         isReadonly={isReadonly}
+                        onOpenModal={handleModalOpen}
                       />
                     ) : null}
                   </TableRowContentWithControls>
@@ -121,6 +138,11 @@ const QuestionnairesTable: React.FC<QuestionnairesTableProps> = ({
           </Tbody>
         </ConditionalTableBody>
       </Table>
+      <AssessmentModal
+        isOpen={isWizardOpen}
+        onRequestClose={handleModalClose}
+        assessmentId={createdAssessmentId!}
+      />
     </>
   );
 };