From 63e0b927bdbfd0bbcfb5f6b3539f368bdf5deceb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A1bor=20Farkas?= <gabor.farkas@gmail.com>
Date: Tue, 25 Jul 2023 14:34:02 +0200
Subject: [PATCH] logs: context: various scrolling-fixes (#72271)

* logs: context: correctly append to the above&below arrays

* logs: context: on initial load always scroll to center

* logs: context: reset counts when context-query-ui changes
---
 .../log-context/LogRowContextModal.tsx        | 45 ++++++++++++++-----
 1 file changed, 35 insertions(+), 10 deletions(-)

diff --git a/public/app/features/logs/components/log-context/LogRowContextModal.tsx b/public/app/features/logs/components/log-context/LogRowContextModal.tsx
index 286b493593e..44ffbb2c050 100644
--- a/public/app/features/logs/components/log-context/LogRowContextModal.tsx
+++ b/public/app/features/logs/components/log-context/LogRowContextModal.tsx
@@ -279,6 +279,7 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
   const updateResults = async () => {
     await updateContextQuery();
     setContext(makeEmptyContext());
+    loadCountRef.current = { above: 0, below: 0 };
     generationRef.current += 1; // results from currently running loadMore calls will be ignored
   };
 
@@ -363,16 +364,33 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
       const newBelow = logsSortOrder === LogsSortOrder.Ascending ? older : newer;
 
       if (currentGen === generationRef.current) {
-        setContext((c) => ({
-          above: {
-            rows: sortLogRows([...newAbove, ...c.above.rows], logsSortOrder),
-            loadingState: newRows.length === 0 ? LoadingState.Done : LoadingState.NotStarted,
-          },
-          below: {
-            rows: sortLogRows([...c.below.rows, ...newBelow], logsSortOrder),
-            loadingState: newRows.length === 0 ? LoadingState.Done : LoadingState.NotStarted,
-          },
-        }));
+        setContext((c) => {
+          // we should only modify the row-arrays if necessary
+          const sortedNewAbove =
+            newAbove.length > 0 ? sortLogRows([...newAbove, ...c.above.rows], logsSortOrder) : c.above.rows;
+          const sortedNewBelow =
+            newBelow.length > 0 ? sortLogRows([...c.below.rows, ...newBelow], logsSortOrder) : c.below.rows;
+          return {
+            above: {
+              rows: sortedNewAbove,
+              loadingState:
+                place === 'above'
+                  ? newRows.length === 0
+                    ? LoadingState.Done
+                    : LoadingState.NotStarted
+                  : c.above.loadingState,
+            },
+            below: {
+              rows: sortedNewBelow,
+              loadingState:
+                place === 'below'
+                  ? newRows.length === 0
+                    ? LoadingState.Done
+                    : LoadingState.NotStarted
+                  : c.below.loadingState,
+            },
+          };
+        });
       }
     } catch {
       setSection(place, (section) => ({
@@ -444,6 +462,13 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
       return;
     }
 
+    // if the newly loaded content is part of the initial load of `above` and `below`,
+    // we scroll to center, to keep the chosen log-row centered
+    if (loadCountRef.current.above <= 1 && loadCountRef.current.below <= 1) {
+      scrollToCenter();
+      return;
+    }
+
     const prevScrollHeight = prevScrollHeightRef.current;
     const currentHeight = scrollE.scrollHeight;
     prevScrollHeightRef.current = currentHeight;