Update web-standalone success banner to be informative and green (#29443)

* Update web-standalone success banner to be informative and green

client/web/dev/server/development.server.ts

@@ -1,4 +1,3 @@
-import chalk from 'chalk'
 import compression from 'compression'
 import { createProxyMiddleware, Options as HTTPProxyMiddlewareOptions } from 'http-proxy-middleware'
 import { once } from 'lodash'
@@ -23,6 +22,10 @@ import { getHTMLPage } from '../webpack/get-html-webpack-plugins'
 // TODO: migrate webpack.config.js to TS to use `import` in this file.
 // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports
 const webpackConfig = require('../../webpack.config') as Configuration
+// TODO: migrate webpack.config.js to TS to use `import` in this file.
+// eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports
+const printSuccessBanner = require('../utils/success-banner') as (lines: string[], log: () => void) => void
+
 const {
     SOURCEGRAPH_API_URL,
     SOURCEGRAPH_HTTPS_PORT,
@@ -106,17 +109,21 @@ async function startWebpackDevelopmentServer({
     const compiler = createWebpackCompiler(webpackConfig)
     const server = new WebpackDevServer(developmentServerConfig, compiler)
 
-    compiler.hooks.afterEmit.tap(
+    compiler.hooks.done.tap(
         'development-server-logger',
         once(() => {
-            signale.success('Webpack build is ready!')
+            printSuccessBanner(
+                [
+                    'Webpack build is ready!',
+                    `Development HTTP server is ready at ${HTTP_WEB_SERVER_URL}`,
+                    `Development HTTPS server is ready at ${HTTPS_WEB_SERVER_URL}`,
+                ],
+                signale.log.bind(signale)
+            )
         })
     )
 
     await server.start()
-    signale.info(`Development HTTP server is ready at ${chalk.blue.bold(HTTP_WEB_SERVER_URL)}`)
-    signale.success(`Development HTTPS server is ready at ${chalk.blue.bold(HTTPS_WEB_SERVER_URL)}`)
-    signale.await('Waiting for Webpack to compile assets')
 }
 
 async function startEsbuildDevelopmentServer({

client/web/dev/utils/success-banner.js

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return, @typescript-eslint/restrict-plus-operands, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
+const chalk = require('chalk')
+
+module.exports = function printSuccessBanner(lines, log = console.log.bind(console)) {
+  const lineLength = getLineLength(lines)
+  const banner = '='.repeat(lineLength)
+  const emptyLine = ' '.repeat(lineLength)
+
+  log(chalk.bgGreenBright.black(banner))
+  log(chalk.bgGreenBright.black(emptyLine))
+  for (const line of lines) {
+    log(chalk.bgGreenBright.black(padLine(line, lineLength)))
+    log(chalk.bgGreenBright.black(emptyLine))
+  }
+  log(chalk.bgGreenBright.black(banner))
+}
+
+function padLine(content, length) {
+  const spaceRequired = length - content.length
+  const half = spaceRequired / 2
+  let line = `${' '.repeat(half)}${content}${' '.repeat(half)}`
+  if (line.length < length) {
+    line += ' '
+  }
+  return line
+}
+
+function getLineLength(lines) {
+  const longestLine = lines.reduce((accumulator, current) => {
+    if (accumulator < current.length) {
+      return current.length
+    }
+    return accumulator
+  }, 0)
+
+  return Math.max(40, longestLine + 10)
+}

client/web/gulpfile.js

@@ -6,7 +6,6 @@ require('ts-node').register({
   project: path.resolve(__dirname, './dev/tsconfig.json'),
 })
 
-const chalk = require('chalk')
 const compression = require('compression')
 const log = require('fancy-log')
 const gulp = require('gulp')
@@ -33,6 +32,7 @@ const { build: buildEsbuild } = require('./dev/esbuild/build')
 const { esbuildDevelopmentServer } = require('./dev/esbuild/server')
 const { DEV_SERVER_LISTEN_ADDR, DEV_SERVER_PROXY_TARGET_ADDR, shouldCompressResponse } = require('./dev/utils')
 const { DEV_WEB_BUILDER } = require('./dev/utils/environment-config').environmentConfig
+const printSuccessBanner = require('./dev/utils/success-banner')
 const webpackConfig = require('./webpack.config')
 
 const WEBPACK_STATS_OPTIONS = {
@@ -151,29 +151,7 @@ async function webpackDevelopmentServer() {
     }
     compilationDoneOnce = true
 
-    const url = `https://${sockHost}:${sockPort}`
-    const banner = '==============================================='
-    const emptyLine = ' '.repeat(banner.length)
-    const lineLength = banner.length
-    /**
-     * @param {string} content
-     */
-    const paddedLine = content => {
-      const spaceRequired = lineLength - content.length
-      const half = spaceRequired / 2
-      let line = `${' '.repeat(half)}${content}${' '.repeat(half)}`
-      if (line.length < lineLength) {
-        line += ' '
-      }
-      return line
-    }
-    console.log(chalk.bgYellowBright.black(banner))
-    console.log(chalk.bgYellowBright.black(emptyLine))
-    console.log(chalk.bgYellowBright.black(paddedLine('✱ Sourcegraph is really ready now!')))
-    console.log(chalk.bgYellowBright.black(emptyLine))
-    console.log(chalk.bgYellowBright.black(paddedLine(`Click here: ${url}`)))
-    console.log(chalk.bgYellowBright.black(emptyLine))
-    console.log(chalk.bgYellowBright.black(banner))
+    printSuccessBanner(['✱ Sourcegraph is really ready now!', `Click here: https://${sockHost}:${sockPort}`])
   })
 
   const server = new WebpackDevServer(options, compiler)

sg.config.yaml

@@ -6,7 +6,7 @@ env:
   PGDATABASE: sourcegraph
   PGSSLMODE: disable
   SG_DEV_MIGRATE_ON_APPLICATION_STARTUP: 'true'
-  
+
   SRC_REPOS_DIR: $HOME/.sourcegraph/repos
   SRC_LOG_LEVEL: info
   SRC_LOG_FORMAT: condensed
@@ -313,7 +313,7 @@ commands:
       ENTERPRISE: 1
 
   web-standalone-http:
-    cmd: yarn workspace @sourcegraph/web serve:dev
+    cmd: yarn workspace @sourcegraph/web serve:dev --color
     install: yarn --no-progress
     env:
       WEBPACK_SERVE_INDEX: true