From aae5f366c2fbd292e5a01e5761cca402b60ee33a Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 30 Jan 2023 15:12:34 +0100
Subject: [PATCH] fix(ui): fix bug report steps radius

---
 .../components/Session_/BugReport/components/Steps.tsx    | 8 +++++++-
 .../BugReport/components/StepsComponents/StepRadius.tsx   | 5 +++--
 frontend/app/components/Session_/BugReport/utils.ts       | 2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/Session_/BugReport/components/Steps.tsx b/frontend/app/components/Session_/BugReport/components/Steps.tsx
index 8307eea47..2f1517d24 100644
--- a/frontend/app/components/Session_/BugReport/components/Steps.tsx
+++ b/frontend/app/components/Session_/BugReport/components/Steps.tsx
@@ -46,6 +46,12 @@ function Steps({ xrayProps, notes, members }: Props) {
     bugReportStore.resetSteps();
   };
 
+  React.useEffect(() => {
+    if (bugReportStore.sessionEventSteps.length < RADIUS && bugReportStore.sessionEventSteps.length > 0) {
+      setRadius(bugReportStore.sessionEventSteps.length);
+    }
+  }, [bugReportStore.sessionEventSteps])
+
   return (
     <div>
       <SectionTitle>Steps to reproduce</SectionTitle>
@@ -63,7 +69,7 @@ function Steps({ xrayProps, notes, members }: Props) {
           STEPS
           <div id="pdf-ignore">
             {timePointer > 0 ? (
-              <StepRadius pickRadius={stepPickRadius} setRadius={setRadius} />
+              <StepRadius pickRadius={stepPickRadius} setRadius={setRadius} stepsNum={bugReportStore.sessionEventSteps.length}/>
             ) : null}
           </div>
         </div>
diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/StepRadius.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/StepRadius.tsx
index 543d2c803..afa8b15c7 100644
--- a/frontend/app/components/Session_/BugReport/components/StepsComponents/StepRadius.tsx
+++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/StepRadius.tsx
@@ -4,9 +4,10 @@ import { Tooltip } from 'UI'
 interface Props {
   pickRadius: number;
   setRadius: (v: number) => void;
+  stepsNum: number;
 }
 
-function StepRadius({ pickRadius, setRadius }: Props) {
+function StepRadius({ pickRadius, setRadius, stepsNum }: Props) {
   return (
     <div className="w-full flex items-center gap-4">
       <div className="border-b border-dotted border-gray-medium cursor-help">
@@ -18,7 +19,7 @@ function StepRadius({ pickRadius, setRadius }: Props) {
       <div className="flex items-center gap-1">
         <div
           className="rounded px-2 bg-light-blue-bg cursor-pointer hover:bg-teal-light"
-          onClick={() => setRadius(pickRadius + 1)}
+          onClick={() => pickRadius < Math.floor(stepsNum/2) ? setRadius(pickRadius + 1) : null}
         >
           +1
         </div>
diff --git a/frontend/app/components/Session_/BugReport/utils.ts b/frontend/app/components/Session_/BugReport/utils.ts
index a97e275d7..053ece364 100644
--- a/frontend/app/components/Session_/BugReport/utils.ts
+++ b/frontend/app/components/Session_/BugReport/utils.ts
@@ -62,7 +62,7 @@ export function getClosestEventStep(time: number, arr: Step[]) {
 export const selectEventSteps = (steps: Step[], targetTime: number, radius: number) => {
   const { targetStep, index } = getClosestEventStep(targetTime, steps)
 
-  const stepsBeforeEvent = steps.slice(index - radius, index)
+  const stepsBeforeEvent = steps.slice(Math.max(index - radius, 0), index)
   const stepsAfterEvent = steps.slice(index + 1, index + 1 + radius)
 
   return [...stepsBeforeEvent, targetStep, ...stepsAfterEvent]