Merge pull request #104819 from cockroachdb/blathers/backport-release…

…-23.1-104622

release-23.1: ui: hide tenant dropdown when unneeded

pkg/ui/workspaces/db-console/src/redux/cookies.ts

@@ -9,6 +9,7 @@
 // licenses/APL.txt.
 
 export const MULTITENANT_SESSION_COOKIE_NAME = "session";
+export const SYSTEM_TENANT_NAME = "system";
 
 export const getAllCookies = (): Map<string, string> => {
   const cookieMap: Map<string, string> = new Map();

pkg/ui/workspaces/db-console/src/redux/tenants.ts

@@ -0,0 +1,17 @@
+// Copyright 2023 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+// isSystemTenant checks whether the provided tenant name is the
+// system tenant.
+import { SYSTEM_TENANT_NAME } from "./cookies";
+
+export const isSystemTenant = (tenantName: string): boolean => {
+  return tenantName === SYSTEM_TENANT_NAME;
+};

pkg/ui/workspaces/db-console/src/views/app/components/tenantDropdown/tenantDropdown.spec.tsx

@@ -21,16 +21,32 @@ jest.mock("src/redux/cookies", () => ({
 }));
 
 describe("TenantDropdown", () => {
-  it("returns null if there are no tenants in the session cookie", () => {
+  it("returns null if there's no current tenant", () => {
     (
       selectTenantsFromMultitenantSessionCookie as jest.MockedFn<
         typeof selectTenantsFromMultitenantSessionCookie
       >
     ).mockReturnValueOnce([]);
+    (
+      getCookieValue as jest.MockedFn<typeof getCookieValue>
+    ).mockReturnValueOnce(null);
+    const wrapper = shallow(<TenantDropdown />);
+    expect(wrapper.isEmptyRender());
+  });
+  // Mutli-tenant scenarios
+  it("returns null if there are no tenants or less than 2 tenants in the session cookie", () => {
+    (
+      selectTenantsFromMultitenantSessionCookie as jest.MockedFn<
+        typeof selectTenantsFromMultitenantSessionCookie
+      >
+    ).mockReturnValueOnce(["system"]);
+    (
+      getCookieValue as jest.MockedFn<typeof getCookieValue>
+    ).mockReturnValueOnce("system");
     const wrapper = shallow(<TenantDropdown />);
     expect(wrapper.isEmptyRender());
   });
-  it("returns a dropdown list of tenant options if there are tenant in the session cookie", () => {
+  it("returns a dropdown list of tenant options if there are multiple tenant in the session cookie", () => {
     (
       selectTenantsFromMultitenantSessionCookie as jest.MockedFn<
         typeof selectTenantsFromMultitenantSessionCookie
@@ -40,6 +56,18 @@ describe("TenantDropdown", () => {
       getCookieValue as jest.MockedFn<typeof getCookieValue>
     ).mockReturnValueOnce("system");
     const wrapper = shallow(<TenantDropdown />);
-    expect(wrapper.find({ children: "Tenant system" }).length).toEqual(1);
+    expect(wrapper.find({ children: "Tenant: system" }).length).toEqual(1);
+  });
+  it("returns a dropdown if the there is a single tenant option but isn't system tenant", () => {
+    (
+      selectTenantsFromMultitenantSessionCookie as jest.MockedFn<
+        typeof selectTenantsFromMultitenantSessionCookie
+      >
+    ).mockReturnValueOnce(["app"]);
+    (
+      getCookieValue as jest.MockedFn<typeof getCookieValue>
+    ).mockReturnValueOnce("app");
+    const wrapper = shallow(<TenantDropdown />);
+    expect(wrapper.find({ children: "Tenant: app" }).length).toEqual(1);
   });
 });

pkg/ui/workspaces/db-console/src/views/app/components/tenantDropdown/tenantDropdown.tsx

@@ -16,6 +16,7 @@ import React from "react";
 import { Dropdown } from "@cockroachlabs/cluster-ui";
 import ErrorBoundary from "../errorMessage/errorBoundary";
 import "./tenantDropdown.styl";
+import { isSystemTenant } from "src/redux/tenants";
 
 const tenantIDKey = "tenant";
 
@@ -26,7 +27,7 @@ const TenantDropdown = () => {
   const createDropdownItems = () => {
     return (
       tenants?.map(tenantID => {
-        return { name: "Tenant " + tenantID, value: tenantID };
+        return { name: "Tenant: " + tenantID, value: tenantID };
       }) || []
     );
   };
@@ -38,17 +39,17 @@ const TenantDropdown = () => {
     }
   };
 
-  if (tenants.length == 0) {
+  if (!currentTenant || (tenants.length < 2 && isSystemTenant(currentTenant))) {
     return null;
   }
 
   return (
     <ErrorBoundary>
       <Dropdown
         items={createDropdownItems()}
-        onChange={tenantID => onTenantChange(tenantID)}
+        onChange={(tenantID: string) => onTenantChange(tenantID)}
       >
-        <div className="tenant-selected">{"Tenant " + currentTenant}</div>
+        <div className="tenant-selected">{"Tenant: " + currentTenant}</div>
       </Dropdown>
     </ErrorBoundary>
   );