From d162bb6ae79cf51a3f9cb86a5701ae7a49600a19 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 28 Oct 2022 15:07:52 +0200
Subject: [PATCH] change(ui): fix modal closing

---
 .../app/components/Session_/BugReport/components/Steps.tsx  | 2 +-
 .../BugReport/components/StepsComponents/SubModal.tsx       | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Session_/BugReport/components/Steps.tsx b/frontend/app/components/Session_/BugReport/components/Steps.tsx
index d44435300..d1b173e47 100644
--- a/frontend/app/components/Session_/BugReport/components/Steps.tsx
+++ b/frontend/app/components/Session_/BugReport/components/Steps.tsx
@@ -77,7 +77,7 @@ function Steps({ xrayProps }: Props) {
         }
       />
       {bugReportStore.isSubStepModalOpen ? (
-        <SubModal type={bugReportStore.subModalType} xrayProps={xrayProps}/>
+        <SubModal type={bugReportStore.subModalType} toggleModal={bugReportStore.toggleSubStepModal} xrayProps={xrayProps}/>
       ) : null}
     </div>
   );
diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx
index 728fc9b9a..43a5620fe 100644
--- a/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx
+++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx
@@ -10,6 +10,7 @@ const Titles = {
 
 interface Props {
   type: 'note' | 'network' | 'error';
+  toggleModal: (isOpen: boolean) => void;
 }
 
 function ModalContent(props: Props) {
@@ -34,7 +35,7 @@ function ModalContent(props: Props) {
         <Button disabled={selected.length === 0} variant="primary">
           Add Selected
         </Button>
-        <Button variant="text-primary">Cancel</Button>
+        <Button variant="text-primary" onClick={() => props.toggleModal(false)}>Cancel</Button>
       </div>
     </div>
   );
@@ -49,6 +50,7 @@ interface ModalProps {
     endTime: number;
   };
   type: 'note' | 'network' | 'error';
+  toggleModal: (isOpen: boolean) => void;
 }
 
 function SubModal(props: ModalProps) {
@@ -57,7 +59,7 @@ function SubModal(props: ModalProps) {
       className="bg-white overflow-y-scroll absolute"
       style={{ maxWidth: '70vw', width: 620, height: '100vh', top: 0, right: 0, zIndex: 999 }}
     >
-      <ModalContent type={props.type} />
+      <ModalContent type={props.type} toggleModal={props.toggleModal} />
     </div>
   );
 }