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

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")} />

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