feat: add a flag to disable API key readback (#11460)

Context:
https://buildbuddy-corp.slack.com/archives/C01H6DW5UFL/p1772211902400119?thread_ts=1772199877.792549&cid=C01H6DW5UFL

A customer requested to be able to disable readback of API keys in the
UI (i.e. make them accessible via the UI / API only once, when they are
created). This seemed like a nice/reasonable security feature to add,
and we might want to enable this in our cloud UI as well at some point
(making it an org-level preference to start with, maybe).

Author: bduffany

app/auth/BUILD

@@ -21,6 +21,18 @@ ts_library(
     ],
 )
 
+ts_library(
+    name = "certificate_download_link",
+    srcs = ["certificate_download_link.tsx"],
+    deps = [
+        "//:node_modules/@types/react",
+        "//:node_modules/react",
+        "//:node_modules/tslib",
+        "//app/components/button:link_button",
+        "//app/components/link:blob",
+    ],
+)
+
 ts_library(
     name = "user",
     srcs = ["user.ts"],

app/auth/certificate_download_link.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import LinkButton, { LinkButtonProps } from "../components/button/link_button";
+import WithBlobObjectURL from "../components/link/blob";
+
+export type CertificateDownloadLinkProps = Omit<LinkButtonProps, "href" | "download"> & {
+  filename: string;
+  contents: string;
+};
+
+export default function CertificateDownloadLink(props: CertificateDownloadLinkProps) {
+  const { filename, contents, ...rest } = props;
+  return (
+    <WithBlobObjectURL blobParts={[contents]} options={{ type: "text/plain" }}>
+      {(href) => <LinkButton {...rest} download={filename} href={href} />}
+    </WithBlobObjectURL>
+  );
+}

app/components/banner/BUILD

@@ -12,5 +12,6 @@ ts_library(
         "//:node_modules/lucide-react",
         "//:node_modules/react",
         "//:node_modules/tslib",
+        "//app/components/button",
     ],
 )

app/components/banner/banner.css

@@ -5,6 +5,14 @@
   align-items: start;
 }
 
+.banner .banner-content {
+  flex-grow: 1;
+}
+
+.banner .banner-dismiss-button {
+  align-self: flex-start;
+}
+
 .banner.banner-info {
   background: var(--color-banner-info-bg);
   color: var(--color-banner-info-text);

app/components/banner/banner.tsx

@@ -1,5 +1,6 @@
-import { AlertCircle, CheckCircle, Info, XCircle } from "lucide-react";
+import { AlertCircle, CheckCircle, Info, X, XCircle } from "lucide-react";
 import React from "react";
+import { OutlinedButton } from "../button/button";
 
 const ICONS = {
   info: <Info className="icon blue" />,
@@ -13,18 +14,25 @@ type BannerType = keyof typeof ICONS;
 export type BannerProps = JSX.IntrinsicElements["div"] & {
   /** The banner type. */
   type: BannerType;
+  /** Called when the dismiss button is clicked. If null/undefined, no dismiss button is shown. */
+  onDismiss?: (() => void) | null;
 };
 
 /**
  * A banner shows a message that draws the attention of the user, using a
  * colorful icon and background.
  */
 export const Banner = React.forwardRef((props: BannerProps, ref: React.Ref<HTMLDivElement>) => {
-  const { type = "info", className, children, ...rest } = props;
+  const { type = "info", className, children, onDismiss, ...rest } = props;
   return (
     <div className={`banner banner-${type} ${className || ""}`} {...rest} ref={ref}>
       {ICONS[type]}
       <div className="banner-content">{children}</div>
+      {onDismiss && (
+        <OutlinedButton className="icon-button banner-dismiss-button" onClick={onDismiss} title="Dismiss" type="button">
+          <X className="icon" />
+        </OutlinedButton>
+      )}
     </div>
   );
 });

app/components/link/BUILD

@@ -2,6 +2,15 @@ load("//rules/typescript:index.bzl", "ts_library")
 
 package(default_visibility = ["//visibility:public"])
 
+ts_library(
+    name = "blob",
+    srcs = ["blob.tsx"],
+    deps = [
+        "//:node_modules/@types/react",
+        "//:node_modules/react",
+    ],
+)
+
 ts_library(
     name = "link",
     srcs = ["link.tsx"],

app/components/link/blob.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+export type WithBlobObjectURLProps = {
+  /** Blob parts used to create an object URL. */
+  blobParts: BlobPart[];
+  /** Optional Blob options such as MIME type. */
+  options?: BlobPropertyBag;
+  /** Render prop that receives the generated object URL. */
+  children: (href: string) => React.ReactNode;
+};
+
+interface State {
+  href: string;
+}
+
+/**
+ * Generates a blob-backed object URL and passes it to children via render props.
+ *
+ * The object URL is revoked whenever inputs change and when the component unmounts.
+ */
+export default class WithBlobObjectURL extends React.Component<WithBlobObjectURLProps, State> {
+  state: State = {
+    href: this.createHref(this.props),
+  };
+
+  componentDidUpdate(prevProps: WithBlobObjectURLProps) {
+    if (prevProps.blobParts === this.props.blobParts && prevProps.options === this.props.options) {
+      return;
+    }
+    window.URL.revokeObjectURL(this.state.href);
+    this.setState({ href: this.createHref(this.props) });
+  }
+
+  componentWillUnmount() {
+    window.URL.revokeObjectURL(this.state.href);
+  }
+
+  private createHref(props: WithBlobObjectURLProps): string {
+    return window.URL.createObjectURL(new Blob(props.blobParts, props.options));
+  }
+
+  render() {
+    return this.props.children(this.state.href);
+  }
+}

app/docs/BUILD

@@ -23,9 +23,11 @@ ts_library(
         "//:node_modules/react",
         "//:node_modules/tslib",
         "//app/auth:auth_service",
+        "//app/auth:certificate_download_link",
         "//app/capabilities",
         "//app/components/banner",
         "//app/components/button:link_button",
+        "//app/components/link",
         "//app/components/select",
         "//app/components/spinner",
         "//app/errors:error_service",

app/docs/setup_code.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import { api_key } from "../../proto/api_key_ts_proto";
 import { bazel_config } from "../../proto/bazel_config_ts_proto";
 import authService, { User } from "../auth/auth_service";
+import CertificateDownloadLink from "../auth/certificate_download_link";
 import capabilities from "../capabilities/capabilities";
 import Banner from "../components/banner/banner";
 import LinkButton from "../components/button/link_button";
+import { TextLink } from "../components/link/link";
 import Select, { Option } from "../components/select/select";
 import Spinner from "../components/spinner/spinner";
 import error_service from "../errors/error_service";
@@ -56,12 +58,18 @@ export default class SetupCodeComponent extends React.Component<Props, State> {
     rpcService.service
       .getBazelConfig(request)
       .then((response) => {
-        this.fetchAPIKeyValue(response, 0);
+        if (!this.isAPIKeyValueReadbackExplicitlyDisabled()) {
+          this.fetchAPIKeyValue(response, 0);
+        }
         this.setState({ bazelConfigResponse: response, selectedCredentialIndex: 0 });
       })
       .catch((e) => error_service.handleError(e));
   }
 
+  private isAPIKeyValueReadbackExplicitlyDisabled() {
+    return capabilities.config.apiKeyValueReadbackEnabled === false;
+  }
+
   getSelectedCredential(): bazel_config.Credentials | null {
     const { bazelConfigResponse: response, selectedCredentialIndex: index } = this.state;
     if (!response?.credential) return null;
@@ -144,10 +152,13 @@ export default class SetupCodeComponent extends React.Component<Props, State> {
     if (this.state.auth == "key") {
       const selectedCredential = this.getSelectedCredential();
       if (!selectedCredential?.apiKey) return null;
+      const value = this.isAPIKeyValueReadbackExplicitlyDisabled()
+        ? "YOUR_API_KEY_HERE"
+        : selectedCredential.apiKey.value;
 
       return (
         <div>
-          <div>common --remote_header=x-buildbuddy-api-key={selectedCredential.apiKey.value}</div>
+          <div>common --remote_header=x-buildbuddy-api-key={value}</div>
         </div>
       );
     }
@@ -199,6 +210,9 @@ export default class SetupCodeComponent extends React.Component<Props, State> {
   }
 
   async fetchAPIKeyValue(bazelConfigResponse: bazel_config.IGetBazelConfigResponse, selectedIndex: number) {
+    if (this.isAPIKeyValueReadbackExplicitlyDisabled()) {
+      return;
+    }
     this.setState({ apiKeyLoading: true });
     try {
       const creds = bazelConfigResponse.credential;
@@ -223,7 +237,9 @@ export default class SetupCodeComponent extends React.Component<Props, State> {
 
   onChangeCredential(e: React.ChangeEvent<HTMLSelectElement>) {
     const selectedIndex = Number(e.target.value);
-    this.fetchAPIKeyValue(this.state.bazelConfigResponse!, selectedIndex);
+    if (!this.isAPIKeyValueReadbackExplicitlyDisabled()) {
+      this.fetchAPIKeyValue(this.state.bazelConfigResponse!, selectedIndex);
+    }
     this.setState({ selectedCredentialIndex: selectedIndex });
   }
 
@@ -330,7 +346,8 @@ export default class SetupCodeComponent extends React.Component<Props, State> {
             </span>
           )}
 
-          {(this.state.auth === "cert" || this.state.auth === "key") &&
+          {!this.isAPIKeyValueReadbackExplicitlyDisabled() &&
+            (this.state.auth === "cert" || this.state.auth === "key") &&
             (this.state.bazelConfigResponse?.credential?.length || 0) > 1 && (
               <span>
                 <Select
@@ -435,6 +452,10 @@ export default class SetupCodeComponent extends React.Component<Props, State> {
             </span>
           )}
         </div>
+        <div className="setup-api-key-settings-note">
+          To create a new API key{this.isCertEnabled() ? " or certificate" : ""}, see{" "}
+          <TextLink href="/settings/org/api-keys">Settings</TextLink>.
+        </div>
         {this.state.executionChecked && (
           <div className="setup-notice">
             <b>Note:</b> You've enabled remote execution. In addition to these .bazelrc flags, you'll also need to
@@ -478,39 +499,31 @@ export default class SetupCodeComponent extends React.Component<Props, State> {
             )}
             {this.state.auth == "cert" && (
               <div>
-                <div className="downloads">
-                  {selectedCredential?.certificate?.cert && (
-                    <div>
-                      <a
-                        download="buildbuddy-cert.pem"
-                        href={window.URL.createObjectURL(
-                          new Blob([selectedCredential.certificate.cert], {
-                            type: "text/plain",
-                          })
-                        )}>
-                        Download buildbuddy-cert.pem
-                      </a>
-                    </div>
-                  )}
-                  {selectedCredential?.certificate?.key && (
-                    <div>
-                      <a
-                        download="buildbuddy-key.pem"
-                        href={window.URL.createObjectURL(
-                          new Blob([selectedCredential.certificate.key], {
-                            type: "text/plain",
-                          })
-                        )}>
-                        Download buildbuddy-key.pem
-                      </a>
+                {!this.isAPIKeyValueReadbackExplicitlyDisabled() && (
+                  <>
+                    <div className="downloads">
+                      {selectedCredential?.certificate?.cert && (
+                        <CertificateDownloadLink
+                          filename="buildbuddy-cert.pem"
+                          contents={selectedCredential.certificate.cert}>
+                          Download buildbuddy-cert.pem
+                        </CertificateDownloadLink>
+                      )}
+                      {selectedCredential?.certificate?.key && (
+                        <CertificateDownloadLink
+                          filename="buildbuddy-key.pem"
+                          contents={selectedCredential.certificate.key}>
+                          Download buildbuddy-key.pem
+                        </CertificateDownloadLink>
+                      )}
                     </div>
-                  )}
-                </div>
-                To use certificate based auth, download the two files above and place them in your workspace directory.
-                If you place them outside of your workspace, update the paths in your{" "}
-                <span className="code">.bazelrc</span> file to point to the correct location.
-                <br />
-                <br />
+                    To use certificate based auth, download the two files above and place them in your workspace
+                    directory. If you place them outside of your workspace, update the paths in your{" "}
+                    <span className="code">.bazelrc</span> file to point to the correct location.
+                    <br />
+                    <br />
+                  </>
+                )}
                 Note: Certificate based auth is only compatible with Bazel version 3.1 and above.
               </div>
             )}

app/root/root.css

@@ -810,11 +810,16 @@ code .comment {
   font-weight: 600;
 }
 
+.setup .setup-api-key-settings-note {
+  margin-bottom: 16px;
+  color: var(--color-text-secondary);
+}
+
 .setup-controls {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  margin-bottom: 32px;
+  margin-bottom: 16px;
   /* negate 8px margin-top on children, to prevent the first row from having a top margin */
   margin-top: -8px;
 }
@@ -886,19 +891,11 @@ code .comment {
 
 .setup .downloads {
   display: flex;
+  gap: 8px;
   margin-top: 16px;
   margin-bottom: 16px;
 }
 
-.setup .downloads a {
-  background-color: var(--color-bg-inverted);
-  color: var(--color-text-inverted);
-  padding: 7px 16px;
-  margin-right: 8px;
-  border-radius: 8px;
-  text-decoration: none;
-}
-
 .setup-notice {
   padding: 16px 24px;
   border-radius: 8px;