From 6c597f698f419416fc3059faa7fadec3ab1df6f5 Mon Sep 17 00:00:00 2001
From: Andrii Vorobiov <and.vorobiov@gmail.com>
Date: Tue, 24 Oct 2023 13:51:15 +0300
Subject: [PATCH] ui: enable Forward button to set timewindow for latest NOW
 value

Before, "Forward" button on Time selector component allowed to select
next time window if there's enough space for full increment (ie with
10 min time window, it wasn't possible to move forward if current
end time is less that Now() - 10min). It caused misalignment where
Forward button became disabled even if there's some more data to display.

This change handles this case and updates current time window to current
time (executes the same logic as Now button).

Resolves: #112847

Release note (ui change): Forward button on time selector allows to select
latest available timewindow (the same as with "Now" button)

Release justification: low risk, high benefit changes to existing functionality
---
 .../src/timeScaleDropdown/timeFrameControls.tsx          | 9 +++++----
 .../src/timeScaleDropdown/timeScaleDropdown.spec.tsx     | 2 --
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeFrameControls.tsx b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeFrameControls.tsx
index 390926710de9..a6b335bd69a0 100644
--- a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeFrameControls.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeFrameControls.tsx
@@ -38,7 +38,7 @@ export const TimeFrameControls = ({
     onArrowClick(direction);
 
   const left = disabledArrows.includes(ArrowDirection.LEFT);
-  const right = disabledArrows.includes(ArrowDirection.RIGHT);
+  const canForward = !disabledArrows.includes(ArrowDirection.RIGHT);
   const delay = 0.3;
 
   return (
@@ -66,9 +66,10 @@ export const TimeFrameControls = ({
           mouseLeaveDelay={delay}
         >
           <Button
-            onClick={handleChangeArrow(ArrowDirection.RIGHT)}
-            disabled={right}
-            className={cx("_action", right ? "disabled" : "active")}
+            onClick={handleChangeArrow(
+              canForward ? ArrowDirection.RIGHT : ArrowDirection.CENTER,
+            )}
+            className={cx("_action", "active")}
             aria-label={"next time interval"}
           >
             <CaretRight className={cx("icon")} />
diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.spec.tsx b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.spec.tsx
index 5d47a89b9054..7099f06b8981 100644
--- a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.spec.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.spec.tsx
@@ -365,8 +365,6 @@ describe("TimeScaleDropdown functions", function () {
 
   it("generateDisabledArrows must return array with disabled buttons", () => {
     const arrows = generateDisabledArrows(currentWindow);
-    const wrapper = makeTimeScaleDropdown(state);
-    expect(wrapper.find(".controls-content ._action.disabled").length).toBe(1);
     expect(arrows).toEqual([ArrowDirection.CENTER, ArrowDirection.RIGHT]);
   });