Merge #133895

133895: ui: reroute v2 db page to legacy page when cluster is unfinalized r=xinhaoz a=xinhaoz

The migrations that support the v2 db page runs on finalization. Rather than show a non-functional page in an unfinalized cluster state let's reroute to the legacy page.

Epic: CRDB-37558
Fixes: #133843

Release note (ui change): The v2 db pages will only be available post ugprade finalization to 24.3. Prior to that we'll continue to show the legacy page when the cluster is in its unfinalized state.

Co-authored-by: Xin Hao Zhang <[email protected]>

pkg/ui/workspaces/cluster-ui/src/databasesV2/index.spec.tsx

@@ -0,0 +1,88 @@
+// Copyright 2024 The Cockroach Authors.
+//
+// Use of this software is governed by the CockroachDB Software License
+// included in the /LICENSE file.
+
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { MemoryRouter, Route, Switch } from "react-router-dom";
+
+import * as dbApi from "src/api/databases/getDatabaseMetadataApi";
+import { CockroachCloudContext } from "src/contexts";
+
+import { DatabasesPageV2 } from "./";
+
+jest.mock("src/api/fetchData", () => ({
+  fetchDataJSON: jest.fn().mockResolvedValue(null),
+  fetchData: jest.fn().mockResolvedValue(null),
+}));
+
+const mockDatabaseMetadata = (errorStatus: number | null, data?: null | []) => {
+  jest.spyOn(dbApi, "useDatabaseMetadata").mockReturnValue({
+    error: errorStatus ? { status: errorStatus } : null,
+    refreshDatabases: jest.fn(),
+    data: data
+      ? {
+          results: data,
+          pagination: {
+            pageSize: 1,
+            pageNum: 1,
+            totalResults: 0,
+          },
+        }
+      : null,
+    isLoading: false,
+  });
+};
+
+describe("DatabasesPageV2 redirect", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderWithRouter = (initialEntries: string[], isCloud = false) =>
+    render(
+      <CockroachCloudContext.Provider value={isCloud}>
+        <MemoryRouter initialEntries={initialEntries}>
+          <Switch>
+            <Route path="/databases">
+              <DatabasesPageV2 />
+            </Route>
+            <Route path="/legacy/databases">
+              <div>Legacy Databases Page</div>
+            </Route>
+          </Switch>
+        </MemoryRouter>
+      </CockroachCloudContext.Provider>,
+    );
+
+  it("redirects to /legacy/databases on 409 error", () => {
+    mockDatabaseMetadata(409);
+
+    renderWithRouter(["/databases"]);
+
+    expect(screen.getByText("Legacy Databases Page")).toBeInTheDocument();
+  });
+
+  it.each([
+    { error: 400, data: null },
+    { error: 500, data: null },
+    { error: null, data: [] },
+  ])("does not redirect on other responses", ({ error, data }) => {
+    mockDatabaseMetadata(error, data);
+
+    renderWithRouter(["/databases"]);
+
+    jest.clearAllMocks();
+    expect(screen.queryByText("Legacy Databases Page")).not.toBeInTheDocument();
+  });
+
+  it("does not redirect on 409 if on cloud", () => {
+    mockDatabaseMetadata(409);
+
+    renderWithRouter(["/databases"], true);
+
+    expect(screen.queryByText("Legacy Databases Page")).not.toBeInTheDocument();
+  });
+});

pkg/ui/workspaces/cluster-ui/src/databasesV2/index.tsx

@@ -5,6 +5,7 @@
 
 import { Row } from "antd";
 import React, { useContext, useMemo } from "react";
+import { Redirect } from "react-router";
 import { Link } from "react-router-dom";
 
 import { useNodeStatuses } from "src/api";
@@ -19,7 +20,7 @@ import { RegionNodesLabel } from "src/components/regionNodesLabel";
 import { TableMetadataJobControl } from "src/components/tableMetadataLastUpdated/tableMetadataJobControl";
 import { Tooltip } from "src/components/tooltip";
 import { AUTO_STATS_COLLECTION_HELP } from "src/components/tooltipMessages";
-import { ClusterDetailsContext } from "src/contexts";
+import { ClusterDetailsContext, CockroachCloudContext } from "src/contexts";
 import { PageLayout, PageSection } from "src/layouts";
 import { PageConfig, PageConfigItem } from "src/pageConfig";
 import { BooleanSetting } from "src/settings";
@@ -140,6 +141,7 @@ const createDatabaseMetadataRequestFromParams = (
 export const DatabasesPageV2 = () => {
   const clusterDetails = useContext(ClusterDetailsContext);
   const isTenant = clusterDetails.isTenant;
+  const isCloud = useContext(CockroachCloudContext);
   const { params, setFilters, setSort, setSearch, setPagination } = useTable({
     initial: initialParams,
   });
@@ -201,6 +203,14 @@ export const DatabasesPageV2 = () => {
     sid => parseInt(sid, 10) as StoreID,
   );
 
+  // 409 conflict - this error code arises when the CRDB version
+  // is not compatible with the APIs used by this page.
+  // v2 Databases page is only supported for finalized CRDB versions >= 24.3.
+  // We can remove this check when the cluster-ui version moves past the 24.3 release.
+  if (!isCloud && error?.status === 409) {
+    return <Redirect to="/legacy/databases" />;
+  }
+
   return (
     <PageLayout>
       <PageHeader
@@ -209,7 +219,7 @@ export const DatabasesPageV2 = () => {
           !settingsLoading && (
             <BooleanSetting
               text={"Auto stats collection"}
-              enabled={settingValues[AUTO_STATS_ENABLED_CS].value === "true"}
+              enabled={settingValues[AUTO_STATS_ENABLED_CS]?.value === "true"}
               tooltipText={AUTO_STATS_COLLECTION_HELP}
             />
           )