From 4736a8ad17322b7c36d782240808d26c5f8003a9 Mon Sep 17 00:00:00 2001
From: gtr <gerardo@cockroachlabs.com>
Date: Fri, 9 Jun 2023 18:47:16 +0000
Subject: [PATCH] ui: Redirect Range Report page to Hot Ranges page

Fixes: #102377.

Previously, when a user selected a range ID from the Hot Ranges page,
the left side menu would switch to Advanced Debug and the back button
would also redirect to the Advanced Dedug page. This commit ensures that
when a range ID is selected, the left side menu will stay on the Hot
Ranges page and also changes the back button to redirect back to the
Hot Ranges page.

Release note (ui change): The Range Report page (route
`/reports/range/:rangeID`) shows the "Hot Ranges" menu item as
highlighted in the left side menu. The back button in the Range Report
page redirects back to the Hot Ranges page.
---
 .../app/components/layoutSidebar/index.tsx     |  4 ++--
 .../views/reports/containers/range/index.tsx   | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/pkg/ui/workspaces/db-console/src/views/app/components/layoutSidebar/index.tsx b/pkg/ui/workspaces/db-console/src/views/app/components/layoutSidebar/index.tsx
index b27e310242dc..f145992a9048 100644
--- a/pkg/ui/workspaces/db-console/src/views/app/components/layoutSidebar/index.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/app/components/layoutSidebar/index.tsx
@@ -59,7 +59,7 @@ export class Sidebar extends React.Component<SidebarProps> {
     {
       path: "/hotranges",
       text: "Hot Ranges",
-      activeFor: ["/hotranges"],
+      activeFor: ["/hotranges", "/reports/range"],
     },
     { path: "/jobs", text: "Jobs", activeFor: [] },
     { path: "/schedules", text: "Schedules", activeFor: [] },
@@ -67,7 +67,7 @@ export class Sidebar extends React.Component<SidebarProps> {
       path: "/debug",
       text: "Advanced Debug",
       activeFor: ["/reports", "/data-distribution", "/raft", "/keyvisualizer"],
-      ignoreFor: ["/reports/network"],
+      ignoreFor: ["/reports/network", "/reports/range"],
     },
   ];
 
diff --git a/pkg/ui/workspaces/db-console/src/views/reports/containers/range/index.tsx b/pkg/ui/workspaces/db-console/src/views/reports/containers/range/index.tsx
index f1c3355adf11..5a5a6b80e15c 100644
--- a/pkg/ui/workspaces/db-console/src/views/reports/containers/range/index.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/reports/containers/range/index.tsx
@@ -35,7 +35,8 @@ import AllocatorOutput from "src/views/reports/containers/range/allocator";
 import RangeInfo from "src/views/reports/containers/range/rangeInfo";
 import LeaseTable from "src/views/reports/containers/range/leaseTable";
 import { getMatchParamByName } from "src/util/query";
-import { BackToAdvanceDebug } from "../util";
+import { Button, commonStyles } from "@cockroachlabs/cluster-ui";
+import { ArrowLeft } from "@cockroachlabs/icons";
 
 interface RangeDispatchProps {
   refreshRange: typeof refreshRange;
@@ -111,6 +112,10 @@ export class Range extends React.Component<RangeProps, {}> {
     }
   }
 
+  backToHotRanges = (): void => {
+    this.props.history.push("/hotranges");
+  };
+
   render() {
     const { range, match } = this.props;
     const rangeID = getMatchParamByName(match, rangeIDAttr);
@@ -188,7 +193,16 @@ export class Range extends React.Component<RangeProps, {}> {
     return (
       <div className="section">
         <Helmet title={`r${responseRangeID.toString()} Range | Debug`} />
-        <BackToAdvanceDebug history={this.props.history} />
+        <Button
+          onClick={this.backToHotRanges}
+          type="unstyled-link"
+          size="small"
+          icon={<ArrowLeft fontSize={"10px"} />}
+          iconPosition="left"
+          className={commonStyles("small-margin")}
+        >
+          Hot Ranges
+        </Button>
         <h1 className="base-heading">
           Range Report for r{responseRangeID.toString()}
         </h1>