jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): some design fixes; add report header/bottom

Browse source
This commit is contained in:
sylenien 2022-11-04 15:22:09 +01:00
parent b35633a4bf
commit 8d2292320c
6 changed files with 61 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
frontend/app/assets/img/report-head.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5 KiB

14
frontend/app/components/Session_/BugReport/BugReportModal.tsx
View file

@ -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);

79
frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
View file

@ -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>
);
})}

2
frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx
View file

@ -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}
>

2
frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx
View file

@ -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();

19
frontend/app/mstore/bugReportStore.ts
View file

@ -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