From 8d2292320c1ef1033e00c3eed92845d5c9a41647 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 4 Nov 2022 15:22:09 +0100
Subject: [PATCH] fix(ui): some design fixes; add report  header/bottom

---
 frontend/app/assets/img/report-head.png       | Bin 0 -> 5158 bytes
 .../Session_/BugReport/BugReportModal.tsx     |  14 +++-
 .../components/StepsComponents/EventStep.tsx  |  79 +++++++++---------
 .../components/StepsComponents/SubModal.tsx   |   2 +-
 .../components/StepsComponents/XRay.tsx       |   2 -
 frontend/app/mstore/bugReportStore.ts         |  19 +++--
 6 files changed, 61 insertions(+), 55 deletions(-)
 create mode 100644 frontend/app/assets/img/report-head.png

diff --git a/frontend/app/assets/img/report-head.png b/frontend/app/assets/img/report-head.png
new file mode 100644
index 0000000000000000000000000000000000000000..2164cadbae5928f19f45a808e63bb52adaabaea8
GIT binary patch
literal 5158
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
UFAEfbS^xk507*qoM6N<$f|T1P-v9sr

literal 0
HcmV?d00001

diff --git a/frontend/app/components/Session_/BugReport/BugReportModal.tsx b/frontend/app/components/Session_/BugReport/BugReportModal.tsx
index d898eb0f5..34f264d96 100644
--- a/frontend/app/components/Session_/BugReport/BugReportModal.tsx
+++ b/frontend/app/components/Session_/BugReport/BugReportModal.tsx
@@ -115,23 +115,29 @@ function BugReportModal({ hideModal, session, width, height, account, xrayProps,
           }).then((canvas) => {
             const imgData = canvas.toDataURL('img/png');
 
-            var imgWidth = 210;
+            var imgWidth = 200;
             var pageHeight = 295;
             var imgHeight = (canvas.height * imgWidth) / canvas.width;
             var heightLeft = imgHeight;
             var position = 0;
 
-            doc.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
-            heightLeft -= pageHeight;
+
+            doc.addImage(imgData, 'PNG', 5, 5, imgWidth, imgHeight);
+
+            doc.addImage('/assets/img/report-head.png', 'png', 210/2 - 40/2, 2, 45, 5);
+
+            heightLeft -= pageHeight - 7;
 
             while (heightLeft >= 0) {
               position = heightLeft - imgHeight + 10;
               doc.addPage();
-              doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+              doc.addImage(imgData, 'PNG', 5, position, imgWidth, imgHeight);
+              doc.addImage('/assets/img/report-head.png', 'png', 210/2 - 40/2, pageHeight - 5, 45, 5);
               heightLeft -= pageHeight;
             }
 
             doc.link(5, 295 - Math.abs(heightLeft) - 25, 200, 30, { url: sessionUrl });
+            if (position === 0) doc.addImage('/assets/img/report-head.png', 'png', 210/2 - 40/2, pageHeight - 5, 45, 5);
 
             doc.save('Bug Report: ' + sessionId + '.pdf');
             setRendering(false);
diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
index da0b79fde..65bccd397 100644
--- a/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
+++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
@@ -6,8 +6,8 @@ const STEP_NAMES = { CLICKRAGE: 'Multiple click', CLICK: 'Clicked', LOCATION: 'V
 import { useStore } from 'App/mstore';
 import cn from 'classnames';
 import { ErrorComp, NetworkComp, NoteComp } from './SubModalItems';
-import { durationFromMs } from 'App/date'
-import { Tooltip } from 'react-tippy'
+import { durationFromMs } from 'App/date';
+import { Tooltip } from 'react-tippy';
 
 const SUBSTEP = {
   network: NetworkComp,
@@ -52,11 +52,9 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?:
         <div className="rounded-3xl px-4 bg-gray-lightest relative z-10">{ind + 1}</div>
         <div className="w-full">
           <div className="flex items-center w-full gap-2">
-            <div className="px-1 text-disabled-text">
-              {durationFromMs(step.time)}
-            </div>
+            <div className="px-1 text-disabled-text">{durationFromMs(step.time)}</div>
             {/* @ts-ignore */}
-            <Icon name={step.icon} size={16} color="gray-darkest" className="relative z-10"/>
+            <Icon name={step.icon} size={16} color="gray-darkest" className="relative z-10" />
             {/* @ts-ignore */}
             <div className="font-semibold">{STEP_NAMES[step.type]}</div>
             <div className="text-gray-medium">{step.details}</div>
@@ -68,20 +66,24 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?:
             >
               {/* @ts-ignore */}
               <Tooltip title="Add Note, Error or Network Request" className="!flex items-center">
-              <ItemMenu
-                label={
-                    <Icon name="plus" size={16} className="cursor-pointer hover:fill-gray-darkest" />
-                }
-                items={menuItems}
-                flat
-                onToggle={(isOpen) => setMenu(isOpen)}
-              />
+                <ItemMenu
+                  label={
+                    <Icon
+                      name="plus"
+                      size={16}
+                      className="cursor-pointer hover:fill-gray-darkest"
+                    />
+                  }
+                  items={menuItems}
+                  flat
+                  onToggle={(isOpen) => setMenu(isOpen)}
+                />
               </Tooltip>
               {/* @ts-ignore */}
               <Tooltip title="Delete Step">
-              <div onClick={() => bugReportStore.removeStep(step)}>
-                <Icon name="trash" size={16} className="cursor-pointer hover:fill-gray-darkest" />
-              </div>
+                <div onClick={() => bugReportStore.removeStep(step)}>
+                  <Icon name="trash" size={16} className="cursor-pointer hover:fill-gray-darkest" />
+                </div>
               </Tooltip>
             </div>
           </div>
@@ -90,28 +92,27 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?:
               {step.substeps.map((subStep) => {
                 const Component = SUBSTEP[subStep.type];
                 return (
-                  <div className="relative">
-                  <div
-                    key={subStep.key}
-                    className="rounded border py-1 px-2 w-full flex flex-col relative z-10"
-                    style={{ background: subStep.type === 'note' ? '#FFFEF5' : 'white' }}
-                  >
-                    {/* @ts-ignore */}
-                    <Component item={subStep} />
-                  </div>
-                  <div
-                    style={{
-                      borderBottom: '1px solid #DDDDDD',
-                      borderLeft: '1px solid #DDDDDD',
-                      borderBottomLeftRadius: 6,
-                      position: 'absolute',
-                      zIndex: 1,
-                      left: -25,
-                      bottom: 10,
-                      height: '120%',
-                      width: 50,
-                    }}
-                  />
+                  <div className="relative" key={subStep.key}>
+                    <div
+                      className="rounded border py-1 px-2 w-full flex flex-col relative z-10"
+                      style={{ background: subStep.type === 'note' ? '#FFFEF5' : 'white' }}
+                    >
+                      {/* @ts-ignore */}
+                      <Component item={subStep} />
+                    </div>
+                    <div
+                      style={{
+                        borderBottom: '1px solid #DDDDDD',
+                        borderLeft: '1px solid #DDDDDD',
+                        borderBottomLeftRadius: 6,
+                        position: 'absolute',
+                        zIndex: 1,
+                        left: -25,
+                        bottom: 10,
+                        height: '120%',
+                        width: 50,
+                      }}
+                    />
                   </div>
                 );
               })}
diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx
index afbc25e6d..e70f19150 100644
--- a/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx
+++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx
@@ -98,7 +98,7 @@ function ModalActions() {
   return (
     <div className="flex items-center gap-2">
       <Button
-        disabled={bugReportStore.pickedSubItems.size === 0}
+        disabled={bugReportStore.pickedSubItems[bugReportStore.targetStep].size === 0}
         variant="primary"
         onClick={saveChoice}
       >
diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx
index 843007dd5..06c1f8061 100644
--- a/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx
+++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx
@@ -35,8 +35,6 @@ function XRay({ xrayProps, timePointer, stepPickRadius, clearEventSelection, set
     CLICKRAGE: eventsList.filter((item: any) => item.type === 'CLICKRAGE'),
   };
 
-  console.log(JSON.stringify(resources.CLICKRAGE, undefined, 2));
-
   const pickEventRadius = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
 
diff --git a/frontend/app/mstore/bugReportStore.ts b/frontend/app/mstore/bugReportStore.ts
index 3feb927ff..abb3f5e84 100644
--- a/frontend/app/mstore/bugReportStore.ts
+++ b/frontend/app/mstore/bugReportStore.ts
@@ -22,7 +22,7 @@ export default class BugReportStore {
   chosenEventSteps: Step[] = [];
   subModalType: 'note' | 'network' | 'error';
   targetStep: string
-  pickedSubItems: Map<string, SubItem> = new Map()
+  pickedSubItems: Record<string, Map<string, SubItem>> = {}
 
   constructor() {
     makeAutoObservable(this);
@@ -42,7 +42,7 @@ export default class BugReportStore {
     this.subModalType = undefined;
     this.isSubStepModalOpen = false;
     this.targetStep = undefined;
-    this.pickedSubItems = new Map();
+    this.pickedSubItems = {};
   }
 
   toggleTitleEdit(isEdit: boolean) {
@@ -88,7 +88,6 @@ export default class BugReportStore {
     }
     this.bugReport = Object.assign(this.bugReport, reportObj)
 
-    console.log(JSON.stringify(this.bugReport, undefined, 2))
     return this.bugReport
   }
 
@@ -98,39 +97,41 @@ export default class BugReportStore {
 
   setSteps(steps: Step[]) {
     this.chosenEventSteps = steps.map(step => ({ ...step, substeps: undefined }));
-    this.pickedSubItems = new Map();
+    this.pickedSubItems = {};
   }
 
   removeStep(step: Step) {
     this.chosenEventSteps = this.chosenEventSteps.filter(
       (chosenStep) => chosenStep.key !== step.key
     );
+    if (this.pickedSubItems[step.key]) this.pickedSubItems[step.key] = new Map()
   }
 
   toggleSubStepModal(isOpen: boolean, type: 'note' | 'network' | 'error', stepKey?: string) {
     this.isSubStepModalOpen = isOpen;
     this.subModalType = type;
     this.targetStep = stepKey
+    if (!this.pickedSubItems[this.targetStep]) this.pickedSubItems[this.targetStep] = new Map()
   }
 
   toggleSubItem(isAdded: boolean, item: SubItem) {
     if (isAdded) {
-      this.pickedSubItems.set(item.key, item)
+      this.pickedSubItems[this.targetStep].set(item.key, item)
     } else {
-      this.pickedSubItems.delete(item.key)
+      this.pickedSubItems[this.targetStep].delete(item.key)
     }
   }
 
   isSubItemChecked(item: SubItem) {
-    return this.pickedSubItems?.get(item.key) !== undefined
+    return this.pickedSubItems[this.targetStep]?.get(item.key) !== undefined
   }
 
   saveSubItems() {
     const targetIndex = this.chosenEventSteps.findIndex(step => step.key === this.targetStep)
     const eventStepsCopy = this.chosenEventSteps
     const step = this.chosenEventSteps[targetIndex]
-    if (this.pickedSubItems.size > 0) {
-      step.substeps = Array.from(this.pickedSubItems, ([name, value]) => ({ ...value }));
+    if (this.pickedSubItems[this.targetStep].size > 0) {
+      step.substeps = Array.from(this.pickedSubItems[this.targetStep], ([name, value]) => ({ ...value }));
     }
     eventStepsCopy[targetIndex] = step