console: let self-managed instances set a display name

console/src/config/AppConfig.ts

@@ -28,6 +28,7 @@ import {
   getEnvironmentdWebsocketScheme,
   getFronteggUrl,
 } from "./apiUrls";
+import { type ConsoleAppearance } from "./appearance";
 import { buildConstants } from "./buildConstants";
 import { getCloudRegions } from "./cloudRegions";
 import { getConsoleEnvironment } from "./consoleEnvironment";
@@ -95,6 +96,10 @@ interface IBaseAppConfig {
   environmentdWebsocketScheme: WebsocketScheme;
   // Whether query retries in react-query are enabled
   reactQueryRetriesEnabled: boolean;
+  // How this instance's console distinguishes itself from the consoles of
+  // other instances. Never set in cloud mode, which serves one console for all
+  // of an organization's regions.
+  appearance: ConsoleAppearance | undefined;
 }
 
 export class CloudAppConfig implements IBaseAppConfig {
@@ -200,6 +205,8 @@ export class CloudAppConfig implements IBaseAppConfig {
   // Whether the current environment requires user registration outside of the Console. This occurs in production
   // when the Console's 'sign up' button links to the Marketing site.
   requiresExternalRegistration = this.#consoleEnvironment === "production";
+
+  appearance = undefined;
 }
 
 export class SelfManagedAppConfig implements IBaseAppConfig {
@@ -209,6 +216,8 @@ export class SelfManagedAppConfig implements IBaseAppConfig {
 
   balancerdDnsNames: string[] | undefined = appConfigJson.balancerdDnsNames;
 
+  appearance: ConsoleAppearance | undefined = appConfigJson.appearance;
+
   environmentdScheme = getEnvironmentdScheme({
     buildConstants,
     isLocalImpersonation: false,

console/src/config/appearance.test.ts

@@ -0,0 +1,42 @@
+// Copyright Materialize, Inc. and contributors. All rights reserved.
+//
+// Use of this software is governed by the Business Source License
+// included in the LICENSE file.
+//
+// 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.
+
+import { documentTitle, parseConsoleAppearance } from "./appearance";
+
+describe("documentTitle", () => {
+  it("names the instance when it has a display name", () => {
+    expect(documentTitle({ displayName: "prod" })).toEqual(
+      "Materialize Console · prod",
+    );
+  });
+
+  it("falls back to the plain title", () => {
+    expect(documentTitle(undefined)).toEqual("Materialize Console");
+    expect(documentTitle({})).toEqual("Materialize Console");
+  });
+});
+
+describe("parseConsoleAppearance", () => {
+  it("returns undefined when unconfigured", () => {
+    expect(parseConsoleAppearance(undefined)).toBeUndefined();
+    expect(parseConsoleAppearance(null)).toBeUndefined();
+  });
+
+  it("keeps a display name", () => {
+    expect(parseConsoleAppearance({ displayName: "prod" })).toEqual({
+      displayName: "prod",
+    });
+  });
+
+  it("treats an empty display name as unset", () => {
+    expect(parseConsoleAppearance({ displayName: "" })).toEqual({
+      displayName: undefined,
+    });
+  });
+});

console/src/config/appearance.ts

@@ -0,0 +1,38 @@
+// Copyright Materialize, Inc. and contributors. All rights reserved.
+//
+// Use of this software is governed by the Business Source License
+// included in the LICENSE file.
+//
+// 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.
+
+/**
+ * @module
+ * Per-instance appearance, set on the Materialize resource and delivered to
+ * the browser in app-config.json. Self-managed only, since Cloud serves one
+ * console for all of a user's regions.
+ */
+
+export interface ConsoleAppearance {
+  /** A short name for the instance, such as "dev" or "prod". */
+  displayName?: string;
+}
+
+const BASE_DOCUMENT_TITLE = "Materialize Console";
+
+/** Builds the browser tab title, which names the instance when configured. */
+export const documentTitle = (appearance: ConsoleAppearance | undefined) =>
+  appearance?.displayName
+    ? `${BASE_DOCUMENT_TITLE} · ${appearance.displayName}`
+    : BASE_DOCUMENT_TITLE;
+
+/** Reads the appearance out of app-config.json. */
+export const parseConsoleAppearance = (
+  appearance: { displayName?: string } | null | undefined,
+): ConsoleAppearance | undefined => {
+  if (!appearance) {
+    return undefined;
+  }
+  return { displayName: appearance.displayName || undefined };
+};

console/src/config/importAppConfig.ts

@@ -8,6 +8,7 @@
 // by the Apache License, Version 2.0.
 
 import { type SelfManagedAuthMode } from "./AppConfig";
+import { type ConsoleAppearance, parseConsoleAppearance } from "./appearance";
 
 const DEFAULT_APP_CONFIG = {
   auth: {
@@ -35,6 +36,7 @@ export function importAppConfig(): {
     mode: SelfManagedAuthMode;
   };
   balancerdDnsNames?: string[];
+  appearance?: ConsoleAppearance;
 } {
   if (process.env.NODE_ENV === "test") {
     return DEFAULT_APP_CONFIG;
@@ -45,9 +47,11 @@ export function importAppConfig(): {
       mode: SelfManagedAuthMode;
     };
     balancerd_dns_names?: string[];
+    appearance?: { displayName?: string };
   };
   return {
     auth: json.auth,
     balancerdDnsNames: json.balancerd_dns_names,
+    appearance: parseConsoleAppearance(json.appearance),
   };
 }

console/src/index.tsx

@@ -22,10 +22,14 @@ import "~/sentry";
 import React from "react";
 import { createRoot } from "react-dom/client";
 
+import { appConfig } from "~/config/AppConfig";
+import { documentTitle } from "~/config/appearance";
 import { App } from "~/platform/App";
 
 import { addChunkLoadErrorListener } from "./utils/chunkLoadErrorHandler";
 
+document.title = documentTitle(appConfig.appearance);
+
 const rootEl = document.createElement("div");
 document.body.appendChild(rootEl);
 const root = createRoot(rootEl);

doc/user/data/self_managed/materialize_crd_descriptions_v1.json

@@ -50,6 +50,14 @@
         "required": false,
         "deprecated": false
       },
+      {
+        "name": "consoleAppearance",
+        "type": "ConsoleAppearance",
+        "description": "Appearance overrides for this instance's console.\n\nThis field is excluded from the rollout hash and changes will not trigger a rollout.",
+        "default": null,
+        "required": false,
+        "deprecated": false
+      },
       {
         "name": "consoleExternalCertificateSpec",
         "type": "MaterializeCertSpec",
@@ -331,6 +339,19 @@
       }
     ]
   ],
+  [
+    "ConsoleAppearance",
+    [
+      {
+        "name": "displayName",
+        "type": "String",
+        "description": "A short name for this instance, such as `dev` or `prod`. The console\nappends it to its browser tab title.",
+        "default": null,
+        "required": false,
+        "deprecated": false
+      }
+    ]
+  ],
   [
     "io.k8s.api.core.v1.ResourceRequirements",
     [

doc/user/data/self_managed/materialize_crd_descriptions_v1alpha1.json

@@ -50,6 +50,14 @@
         "required": false,
         "deprecated": false
       },
+      {
+        "name": "consoleAppearance",
+        "type": "ConsoleAppearance",
+        "description": "Appearance overrides for this instance's console.",
+        "default": null,
+        "required": false,
+        "deprecated": false
+      },
       {
         "name": "consoleExternalCertificateSpec",
         "type": "MaterializeCertSpec",
@@ -355,6 +363,19 @@
       }
     ]
   ],
+  [
+    "ConsoleAppearance",
+    [
+      {
+        "name": "displayName",
+        "type": "String",
+        "description": "A short name for this instance, such as `dev` or `prod`. The console\nappends it to its browser tab title.",
+        "default": null,
+        "required": false,
+        "deprecated": false
+      }
+    ]
+  ],
   [
     "io.k8s.api.core.v1.ResourceRequirements",
     [

src/cloud-resources/src/crd.rs

@@ -68,6 +68,20 @@ pub struct MaterializeCertSpec {
     pub private_key_size: Option<i64>,
 }
 
+/// Appearance overrides for an instance's console.
+///
+/// Consoles are otherwise identical, so an operator running several
+/// Materialize instances cannot tell from a browser tab which instance a
+/// console is pointed at.
+#[derive(Clone, Debug, Default, PartialEq, Deserialize, Serialize, JsonSchema)]
+#[serde(rename_all = "camelCase")]
+pub struct ConsoleAppearance {
+    /// A short name for this instance, such as `dev` or `prod`. The console
+    /// appends it to its browser tab title.
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub display_name: Option<String>,
+}
+
 pub trait ManagedResource: Resource<DynamicType = ()> + Sized {
     fn default_labels(&self) -> BTreeMap<String, String> {
         BTreeMap::new()

src/cloud-resources/src/crd/console.rs

@@ -16,7 +16,7 @@ use kube::{CustomResource, Resource, ResourceExt};
 use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};
 
-use crate::crd::{ManagedResource, MaterializeCertSpec, new_resource_id};
+use crate::crd::{ConsoleAppearance, ManagedResource, MaterializeCertSpec, new_resource_id};
 use mz_server_core::listeners::AuthenticatorKind;
 
 pub mod v1alpha1 {
@@ -88,6 +88,10 @@ pub mod v1alpha1 {
         #[serde(default)]
         pub authenticator_kind: AuthenticatorKind,
 
+        /// Appearance overrides for this console.
+        #[serde(default, skip_serializing_if = "Option::is_none")]
+        pub appearance: Option<ConsoleAppearance>,
+
         // This can be set to override the randomly chosen resource id
         pub resource_id: Option<String>,
     }