app: fix asset resolution for builds outside of bazel (#51549)

We recently changed how assets are resolved in the backend. If the
backend is built with Bazel it just works, as well as when you run in
Dev mode.

But if the backend is built the normal go way, the assets are not where
the backend expects it to be. This fixes the frontend code to resolve
the assets directory depending on the environment
## Test plan
Check assets gets rendered with the following commands
* `sg start`
* `bazel build //enterprise/cmd/sourcegraph:sourcegraph`
* `./enterprise/dev/app/build-release.sh`
<!-- All pull requests REQUIRE a test plan:
https://docs.sourcegraph.com/dev/background-information/testing_principles
-->

client/build-config/src/paths.ts

@@ -2,6 +2,8 @@
 import fs from 'fs'
 import path from 'path'
 
+import { getEnvironmentBoolean } from './utils/environment-config'
+
 // TODO(bazel): drop when non-bazel removed.
 const IS_BAZEL = !!(process.env.JS_BINARY__TARGET || process.env.BAZEL_BINDIR || process.env.BAZEL_TEST)
 
@@ -19,15 +21,31 @@ export function resolveWithSymlink(...args: string[]): string {
     }
 }
 
+export function resolveAssetsPath(root: string): string {
+    if (IS_BAZEL && process.env.WEB_BUNDLE_PATH) {
+        return resolveWithSymlink(root, process.env.WEB_BUNDLE_PATH)
+    }
+
+    if (process.env.NODE_ENV && process.env.NODE_ENV === 'development') {
+        return resolveWithSymlink(root, 'ui/assets')
+    }
+
+    // With Bazel we changed how assets gets bundled. Previsouly, we would just put the assets at /ui/assets/.assets
+    // and be done with it. With Bazel, we have different loaders on the backend where the assets gets embedded. So
+    // what we do here is "simulate" what happens in bazel, by putting the assets in the correct relative directory
+    // so that when the backend is compiled the assets gets embedded properly
+    const isEnterprise: boolean = getEnvironmentBoolean('ENTERPRISE')
+    const relativeAssetPath: string = isEnterprise ? 'enterprise' : 'oss'
+    const path: string = resolveWithSymlink(root, 'ui/assets', relativeAssetPath)
+
+    return path
+}
+
 export const ROOT_PATH = IS_BAZEL ? process.cwd() : resolveWithSymlink(__dirname, '../../../')
 export const WORKSPACES_PATH = resolveWithSymlink(ROOT_PATH, 'client')
 export const NODE_MODULES_PATH = resolveWithSymlink(ROOT_PATH, 'node_modules')
 export const MONACO_EDITOR_PATH = resolveWithSymlink(NODE_MODULES_PATH, 'monaco-editor')
-export const STATIC_ASSETS_PATH = resolveWithSymlink(
-    ROOT_PATH,
-    IS_BAZEL && process.env.WEB_BUNDLE_PATH ? process.env.WEB_BUNDLE_PATH : 'ui/assets'
-)
-
+export const STATIC_ASSETS_PATH = resolveAssetsPath(ROOT_PATH)
 function getWorkspaceNodeModulesPaths(): string[] {
     const workspaces = fs.readdirSync(WORKSPACES_PATH)
     const nodeModulesPaths = workspaces.map(workspace => resolveWithSymlink(WORKSPACES_PATH, workspace, 'node_modules'))

client/web/bundlesize.config.js

@@ -1,6 +1,16 @@
 const path = require('path')
 
-const STATIC_ASSETS_PATH = process.env.WEB_BUNDLE_PATH || path.join(__dirname, '../../ui/assets')
+function relativeAssets(base) {
+  if (process.env.NODE_ENV !== undefined && process.env.NODE_ENV === 'development') {
+    return path.join(base, '../../ui/assets')
+  }
+  if (process.env.ENTERPRISE !== undefined && process.env.ENTERPRISE === '1') {
+    return path.join(base, '../../ui/assets/enterprise')
+  }
+  return path.join(base, '../../ui/assets/oss')
+}
+
+const STATIC_ASSETS_PATH = process.env.WEB_BUNDLE_PATH || relativeAssets(__dirname)
 
 const config = {
   files: [

client/web/scripts/report-bundle-diff.ts

@@ -25,6 +25,35 @@ const STATOSCOPE_BIN = path.join(ROOT_PATH, 'node_modules/@statoscope/cli/bin/cl
 const MERGE_BASE = exec('git merge-base HEAD origin/main').toString().trim()
 let COMPARE_REV = ''
 
+async function findFile(root: string, filename: string): Promise<string> {
+    // file can be in one of 3 base paths
+    const parts: string[] = ['oss', 'enterprise', '']
+    const files = await Promise.all(
+        parts.flatMap(async (dir: string) => {
+            const filePath = path.join(root, dir, filename)
+            try {
+                await fs.access(filePath)
+                return filePath
+            } catch {
+                return ''
+            }
+        })
+    )
+
+    const foundFile = files.reduce((accumulator: string, possibleFile: string): string => {
+        if (possibleFile) {
+            return possibleFile
+        }
+        return accumulator
+    })
+
+    if (!foundFile) {
+        throw new Error(`"${filename} not found under root ${root}`)
+    }
+
+    return foundFile
+}
+
 /**
  * We may not have a stats.json file for the merge base commit as these are only
  * created for commits that touch frontend files. Instead, we scan for 20 commits
@@ -65,13 +94,10 @@ async function prepareStats(): Promise<{ commitFile: string; compareFile: string
         exec(`tar -xf ${tarPath} --strip-components=2 -C ${STATIC_ASSETS_PATH}`)
         exec(`ls -la ${STATIC_ASSETS_PATH}`)
 
-        const commitFile = path.join(STATIC_ASSETS_PATH, `stats-${BUILDKITE_COMMIT}.json`)
-        const compareFile = path.join(STATIC_ASSETS_PATH, `stats-${COMPARE_REV}.json`)
-        console.log({ commitFile, compareFile })
-
         try {
-            await fs.access(commitFile)
-            await fs.access(compareFile)
+            const commitFile = await findFile(STATIC_ASSETS_PATH, `stats-${BUILDKITE_COMMIT}.json`)
+            const compareFile = await findFile(STATIC_ASSETS_PATH, `stats-${COMPARE_REV}.json`)
+            console.log({ commitFile, compareFile })
 
             const compareReportPath = path.join(STATIC_ASSETS_PATH, 'compare-report.html')