change(ui): working on submodal

frontend/app/components/Session_/BugReport/BugReportModal.tsx

@@ -76,6 +76,8 @@ function BugReportModal({ hideModal, session, width, height, account, xrayProps
     },
   };
 
+  console.log(bugReportStore)
+
   React.useEffect(() => {
     bugReportStore.updateReportDefaults(defaults);
     bugReportStore.setDefaultSteps(mapEvents(events));

frontend/app/components/Session_/BugReport/components/Steps.tsx

@@ -6,6 +6,7 @@ import SectionTitle from './SectionTitle';
 import XRay from './StepsComponents/XRay';
 import StepRenderer from './StepsComponents/StepRenderer';
 import StepRadius from './StepsComponents/StepRadius'
+import SubModal from './StepsComponents/SubModal'
 
 interface Props {
   xrayProps: {
@@ -75,6 +76,9 @@ function Steps({ xrayProps }: Props) {
             : bugReportStore.chosenEventSteps
         }
       />
+      {bugReportStore.isSubStepModalOpen ? (
+        <SubModal type={bugReportStore.subModalType} xrayProps={xrayProps}/>
+      ) : null}
     </div>
   );
 }

frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx

@@ -11,9 +11,9 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?:
   const [menuOpen, setMenu] = React.useState(false);
 
   const menuItems = [
-    { icon: 'quotes', text: 'Add Note', onClick: () => console.log('note') },
-    { icon: 'info-circle', text: `Add Error`, onClick: () => console.log('note') },
-    { icon: 'network', text: 'Add Fetch/XHR', onClick: () => console.log('note') },
+    { icon: 'quotes', text: 'Add Note', onClick: () => bugReportStore.toggleSubStepModal(true, 'note') },
+    { icon: 'info-circle', text: `Add Error`, onClick: () => bugReportStore.toggleSubStepModal(true, 'error') },
+    { icon: 'network', text: 'Add Fetch/XHR', onClick: () => bugReportStore.toggleSubStepModal(true, 'network') },
   ];
 
   return (

frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Icon, Button } from 'UI';
+import cn from 'classnames';
+
+const Titles = {
+  note: 'Note',
+  network: 'Fetch/XHR',
+  error: 'Console Error',
+};
+
+interface Props {
+  type: 'note' | 'network' | 'error';
+}
+
+function ModalContent(props: Props) {
+  const [selected, setSelected] = React.useState([]);
+  return (
+    <div className="flex flex-col p-4 bg-white gap-4 w-full">
+      <div className="flex items-center gap-2">
+        <div className="p-2 rounded-full bg-light-blue-bg">
+          <Icon name="quotes" size={18} />
+        </div>
+        <div className="text-2xl font-semibold">{`Select ${Titles[props.type]}`}</div>
+      </div>
+      <div
+        className="flex flex-col border rounded w-full"
+        style={{ background: props.type === 'note' ? '#FFFEF5' : 'white' }}
+      >
+        <div className="p-2 border-b last:border-b-none w-full">item1</div>
+        <div className="p-2 border-b last:border-b-none w-full">item2</div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Button disabled={selected.length === 0} variant="primary">
+          Add Selected
+        </Button>
+        <Button variant="text-primary">Cancel</Button>
+      </div>
+    </div>
+  );
+}
+
+interface ModalProps {
+  xrayProps: {
+    currentLocation: Record<string, any>[];
+    resourceList: Record<string, any>[];
+    exceptionsList: Record<string, any>[];
+    eventsList: Record<string, any>[];
+    endTime: number;
+  };
+  type: 'note' | 'network' | 'error';
+}
+
+function SubModal(props: ModalProps) {
+  return (
+    <div
+      className="bg-white overflow-y-scroll absolute"
+      style={{ maxWidth: '70vw', width: 620, height: '100vh', top: 0, right: 0, zIndex: 999 }}
+    >
+      <ModalContent type={props.type} />
+    </div>
+  );
+}
+
+export default SubModal;

frontend/app/mstore/bugReportStore.ts

@@ -1,84 +1,97 @@
-import { makeAutoObservable } from "mobx"
-import { BugReportPdf, ReportDefaults, Step } from 'Components/Session_/BugReport/types'
+import { makeAutoObservable } from 'mobx';
+import { BugReportPdf, ReportDefaults, Step } from 'Components/Session_/BugReport/types';
 
 export enum SeverityLevels {
   Low,
   Medium,
-  High
+  High,
 }
 
 export default class BugReportStore {
-  reportTitle = 'Untitled Report'
-  comment = ''
-  severity = SeverityLevels.High
+  reportTitle = 'Untitled Report';
+  comment = '';
+  severity = SeverityLevels.High;
 
-  isCommentEdit = false
-  isTitleEdit = false
+  isCommentEdit = false;
+  isTitleEdit = false;
+  isSubStepModalOpen = false;
 
-  bugReport: Partial<BugReportPdf>
-  sessionEventSteps: Step[] = []
-  chosenEventSteps: Step[] = []
+  bugReport: Partial<BugReportPdf>;
+  sessionEventSteps: Step[] = [];
+  chosenEventSteps: Step[] = [];
+  subModalType: 'note' | 'network' | 'error';
 
   constructor() {
-    makeAutoObservable(this)
+    makeAutoObservable(this);
   }
 
   clearStore() {
-    this.reportTitle = 'Untitled Report'
-    this.comment = ''
-    this.severity = SeverityLevels.High
+    this.reportTitle = 'Untitled Report';
+    this.comment = '';
+    this.severity = SeverityLevels.High;
 
-    this.isCommentEdit = false
-    this.isTitleEdit = false
+    this.isCommentEdit = false;
+    this.isTitleEdit = false;
 
-    this.bugReport = undefined
-    this.sessionEventSteps = []
-    this.chosenEventSteps = []
+    this.bugReport = undefined;
+    this.sessionEventSteps = [];
+    this.chosenEventSteps = [];
+    this.subModalType = undefined;
+    this.isSubStepModalOpen = false;
   }
 
   toggleTitleEdit(isEdit: boolean) {
-    this.isTitleEdit = isEdit
+    this.isTitleEdit = isEdit;
   }
 
   setTitle(title: string) {
-    this.reportTitle = title
+    this.reportTitle = title;
 
-    this.bugReport = Object.assign(this.bugReport, { title: this.reportTitle })
+    this.bugReport = Object.assign(this.bugReport, { title: this.reportTitle });
   }
 
   setSeverity(severity: SeverityLevels) {
-    this.severity = severity
+    this.severity = severity;
 
-    this.bugReport = Object.assign(this.bugReport, { severity: this.severity })
+    this.bugReport = Object.assign(this.bugReport, { severity: this.severity });
   }
 
   toggleCommentEditing(isEdit: boolean) {
-    this.isCommentEdit = isEdit
+    this.isCommentEdit = isEdit;
   }
 
   setComment(comment: string) {
-    this.comment = comment
+    this.comment = comment;
 
-    this.bugReport = Object.assign(this.bugReport, { comment: this.comment.length > 0 ? this.comment : undefined })
+    this.bugReport = Object.assign(this.bugReport, {
+      comment: this.comment.length > 0 ? this.comment : undefined,
+    });
   }
 
   updateReportDefaults(defaults: ReportDefaults) {
-    this.bugReport = Object.assign(this.bugReport || {}, defaults)
+    this.bugReport = Object.assign(this.bugReport || {}, defaults);
   }
 
   setDefaultSteps(steps: Step[]) {
-    this.sessionEventSteps = steps
+    this.sessionEventSteps = steps;
   }
 
   setSteps(steps: Step[]) {
-    this.chosenEventSteps = steps
+    this.chosenEventSteps = steps;
   }
 
   removeStep(step: Step) {
-    this.chosenEventSteps = this.chosenEventSteps.filter(chosenStep => chosenStep.key !== step.key)
+    this.chosenEventSteps = this.chosenEventSteps.filter(
+      (chosenStep) => chosenStep.key !== step.key
+    );
+  }
+
+  toggleSubStepModal(isOpen: boolean, type: 'note' | 'network' | 'error') {
+    this.isSubStepModalOpen = isOpen;
+    this.subModalType = type;
   }
 
   resetSteps() {
-    this.chosenEventSteps = []
+    this.chosenEventSteps = [];
   }
 }