From 5cb2446149b56dc5bd99973c5c0fb85135dc19a5 Mon Sep 17 00:00:00 2001
From: David Hartunian <davidh@cockroachlabs.com>
Date: Fri, 29 Mar 2024 18:10:29 +0000
Subject: [PATCH] ui: add static images to asset build step

During the `genassets` build + embed step, we were taking just the
output of the `db-console-ccl` or `db-console-oss` step which is just
a build.js file. This commit adds references to the image assets we
want bundled as well. This includes favicon.ico and everything in `./
assets` relative to the db-console build directory.

We disable content hashing in webpack in order to keep the filenames
static, which bazel requires. The impact should be minimal as we
rarely change these images so if they're cached forever, it's fine.

This change restores the favicon to the CRDB build and the nice image
that shows up in the background of the email signup bar.

The size of the final zipped bundle only differs by around 1MB and is
already 10MB in size.

Fixes: #117876
Epic: None

Release note (ui change): the favicon now renders properly for DB
Console along with other image files.
---
 pkg/ui/workspaces/db-console/BUILD.bazel      | 61 +++++++++++++++++++
 .../workspaces/db-console/webpack.config.js   |  3 +
 2 files changed, 64 insertions(+)

diff --git a/pkg/ui/workspaces/db-console/BUILD.bazel b/pkg/ui/workspaces/db-console/BUILD.bazel
index 686fc69e40fd..a865e4479b9e 100644
--- a/pkg/ui/workspaces/db-console/BUILD.bazel
+++ b/pkg/ui/workspaces/db-console/BUILD.bazel
@@ -58,7 +58,38 @@ webpack_bin.webpack_cli(
         ":node_modules",
     ],
     outs = [
+        "db-console-ccl/assets/Inconsolata-Regular.woff",
+        "db-console-ccl/assets/Inconsolata-Regular.woff2",
+        "db-console-ccl/assets/Lato-Bold.woff",
+        "db-console-ccl/assets/Lato-Bold.woff2",
+        "db-console-ccl/assets/Lato-Light.woff",
+        "db-console-ccl/assets/Lato-Light.woff2",
+        "db-console-ccl/assets/Lato-Medium.woff",
+        "db-console-ccl/assets/Lato-Medium.woff2",
+        "db-console-ccl/assets/Lato-Regular.woff",
+        "db-console-ccl/assets/Lato-Regular.woff2",
+        "db-console-ccl/assets/RobotoMono-Bold.woff",
+        "db-console-ccl/assets/RobotoMono-Bold.woff2",
+        "db-console-ccl/assets/RobotoMono-Medium.woff",
+        "db-console-ccl/assets/RobotoMono-Medium.woff2",
+        "db-console-ccl/assets/RobotoMono-Regular.woff",
+        "db-console-ccl/assets/RobotoMono-Regular.woff2",
+        "db-console-ccl/assets/SFMono-Semibold.woff",
+        "db-console-ccl/assets/SFMono-Semibold.woff2",
+        "db-console-ccl/assets/SourceSansPro-Bold.woff",
+        "db-console-ccl/assets/SourceSansPro-Bold.woff2",
+        "db-console-ccl/assets/SourceSansPro-Regular.woff",
+        "db-console-ccl/assets/SourceSansPro-Regular.woff2",
+        "db-console-ccl/assets/SourceSansPro-SemiBold.woff",
+        "db-console-ccl/assets/SourceSansPro-SemiBold.woff2",
         "db-console-ccl/assets/bundle.js",
+        "db-console-ccl/assets/email_signup_bg.png",
+        "db-console-ccl/assets/favicon.ico",
+        "db-console-ccl/assets/heroBannerLp.png",
+        "db-console-ccl/assets/login-background.png",
+        "db-console-ccl/assets/not-found.svg",
+        "db-console-ccl/assets/questionMap.svg",
+        "db-console-ccl/assets/spinner.gif",
     ],
     args = [
         "--config webpack.config.js",
@@ -79,7 +110,37 @@ webpack_bin.webpack_cli(
         ":node_modules",
     ],
     outs = [
+        "db-console-oss/assets/Inconsolata-Regular.woff",
+        "db-console-oss/assets/Inconsolata-Regular.woff2",
+        "db-console-oss/assets/Lato-Bold.woff",
+        "db-console-oss/assets/Lato-Bold.woff2",
+        "db-console-oss/assets/Lato-Light.woff",
+        "db-console-oss/assets/Lato-Light.woff2",
+        "db-console-oss/assets/Lato-Medium.woff",
+        "db-console-oss/assets/Lato-Medium.woff2",
+        "db-console-oss/assets/Lato-Regular.woff",
+        "db-console-oss/assets/Lato-Regular.woff2",
+        "db-console-oss/assets/RobotoMono-Bold.woff",
+        "db-console-oss/assets/RobotoMono-Bold.woff2",
+        "db-console-oss/assets/RobotoMono-Medium.woff",
+        "db-console-oss/assets/RobotoMono-Medium.woff2",
+        "db-console-oss/assets/RobotoMono-Regular.woff",
+        "db-console-oss/assets/RobotoMono-Regular.woff2",
+        "db-console-oss/assets/SFMono-Semibold.woff",
+        "db-console-oss/assets/SFMono-Semibold.woff2",
+        "db-console-oss/assets/SourceSansPro-Bold.woff",
+        "db-console-oss/assets/SourceSansPro-Bold.woff2",
+        "db-console-oss/assets/SourceSansPro-Regular.woff",
+        "db-console-oss/assets/SourceSansPro-Regular.woff2",
+        "db-console-oss/assets/SourceSansPro-SemiBold.woff",
+        "db-console-oss/assets/SourceSansPro-SemiBold.woff2",
         "db-console-oss/assets/bundle.js",
+        "db-console-oss/assets/email_signup_bg.png",
+        "db-console-oss/assets/favicon.ico",
+        "db-console-oss/assets/heroBannerLp.png",
+        "db-console-oss/assets/login-background.png",
+        "db-console-oss/assets/not-found.svg",
+        "db-console-oss/assets/spinner.gif",
     ],
     args = [
         "--config webpack.config.js",
diff --git a/pkg/ui/workspaces/db-console/webpack.config.js b/pkg/ui/workspaces/db-console/webpack.config.js
index 7489805dca9f..40f1e670d779 100644
--- a/pkg/ui/workspaces/db-console/webpack.config.js
+++ b/pkg/ui/workspaces/db-console/webpack.config.js
@@ -165,6 +165,9 @@ module.exports = (env, argv) => {
           loader: "url-loader",
           options: {
             limit: 10000,
+            // Preserve the original filename instead of using hash
+            // in order to play nice with bazel.
+            name: "[name].[ext]",
           },
         },
         { test: /\.html$/, loader: "file-loader" },