From 014408947f35a50db34e347fcce099e7e9b1bf83 Mon Sep 17 00:00:00 2001
From: Tamas Kovacs <tamas.kovacs@instructure.com>
Date: Thu, 25 Sep 2025 14:17:13 +0200
Subject: [PATCH] build(ui-alerts,console): make documentation preview builds
 show console logs

INSTUI-4522
---
 .github/workflows/preview.yml          |  2 ++
 packages/__docs__/babel.config.js      | 25 +++++++++++++++++++++----
 packages/__docs__/webpack.config.mjs   |  6 ++++++
 packages/console/src/console.ts        |  6 +++++-
 packages/ui-alerts/src/Alert/README.md |  3 ++-
 packages/ui-alerts/src/Alert/index.tsx |  3 +++
 6 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
index 158607d8ea..522874d933 100644
--- a/.github/workflows/preview.yml
+++ b/.github/workflows/preview.yml
@@ -24,6 +24,8 @@ jobs:
       - name: Build docs-app
         run: npm run build:docs
         if: github.event.action != 'closed'
+        env:
+          GITHUB_PULL_REQUEST_PREVIEW: 'true'
       - uses: rossjrw/pr-preview-action@v1
         with:
           source-dir: ./packages/__docs__/__build__
diff --git a/packages/__docs__/babel.config.js b/packages/__docs__/babel.config.js
index 98e955d0c2..78798bd8d8 100644
--- a/packages/__docs__/babel.config.js
+++ b/packages/__docs__/babel.config.js
@@ -26,9 +26,26 @@ module.exports = {
   presets: [
     [
       require('@instructure/ui-babel-preset'),
-      {
-        transformImports: false // needed for webpack reload on change to work,
-      }
+      { transformImports: false } // use preset for dev builds
     ]
-  ]
+  ],
+  env: {
+    production: {
+      // In production, bypass the preset to preserve console logs
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: '>0.25%, not dead',
+            modules: false
+          }
+        ],
+        '@babel/preset-react',
+        '@babel/preset-typescript'
+      ],
+      plugins: [
+        // Add any additional plugins you need, but do NOT include transform-remove-console
+      ]
+    }
+  }
 }
diff --git a/packages/__docs__/webpack.config.mjs b/packages/__docs__/webpack.config.mjs
index c11c9ed67c..128df0ac62 100644
--- a/packages/__docs__/webpack.config.mjs
+++ b/packages/__docs__/webpack.config.mjs
@@ -30,9 +30,12 @@ import { globbySync } from 'globby'
 import { merge } from 'webpack-merge'
 import { processSingleFile } from './lib/build-docs.mjs'
 import resolve from './resolve.mjs'
+import webpack from 'webpack'
+import TerserPlugin from 'terser-webpack-plugin'
 
 const ENV = process.env.NODE_ENV || 'production'
 const DEBUG = process.env.DEBUG || ENV === 'development'
+const GITHUB_PULL_REQUEST_PREVIEW = process.env.GITHUB_PULL_REQUEST_PREVIEW || 'false'
 
 const outputPath = resolvePath(import.meta.dirname, '__build__')
 const resolveAliases = DEBUG ? { resolve } : {}
@@ -79,6 +82,9 @@ const config = merge(baseConfig, {
       template: './src/index.html',
       chunks: ['main'],
     }),
+    new webpack.DefinePlugin({
+      'process.env.GITHUB_PULL_REQUEST_PREVIEW': JSON.stringify(GITHUB_PULL_REQUEST_PREVIEW),
+    }),
   ],
   optimization: {
     usedExports: true,
diff --git a/packages/console/src/console.ts b/packages/console/src/console.ts
index b20b15cc96..07a4c73697 100644
--- a/packages/console/src/console.ts
+++ b/packages/console/src/console.ts
@@ -55,7 +55,11 @@ function logMessage(
   message: string,
   ...args: unknown[]
 ) {
-  if (process.env.NODE_ENV !== 'production' && !condition) {
+  if (
+    (process.env.GITHUB_PULL_REQUEST_PREVIEW ||
+      process.env.NODE_ENV !== 'production') &&
+    !condition
+  ) {
     if (typeof console[level] === 'function') {
       const renderStack = withRenderStack ? getRenderStack() : ''
       //@ts-expect-error level can be 'constructor' which is not callable
diff --git a/packages/ui-alerts/src/Alert/README.md b/packages/ui-alerts/src/Alert/README.md
index 2a068a9487..af18d9c241 100644
--- a/packages/ui-alerts/src/Alert/README.md
+++ b/packages/ui-alerts/src/Alert/README.md
@@ -134,10 +134,11 @@ For more information about live regions, see
             return (
               <View key={alert.key} display="block" margin="small 0">
                 <Alert
+                  screenReaderOnly
                   variant={alert.variant}
                   renderCloseButtonLabel="Close"
                   onDismiss={alert.onDismiss}
-                  liveRegion={() => document.getElementById('flash-messages')}
+                  //liveRegion={() => document.getElementById('flash-messages')}
                   liveRegionPoliteness={alert.politeness}
                   margin="small 0"
                   variantScreenReaderLabel={this.getScreenReaderLabel(
diff --git a/packages/ui-alerts/src/Alert/index.tsx b/packages/ui-alerts/src/Alert/index.tsx
index bd796545e3..2077634a10 100644
--- a/packages/ui-alerts/src/Alert/index.tsx
+++ b/packages/ui-alerts/src/Alert/index.tsx
@@ -308,6 +308,9 @@ class Alert extends Component<AlertProps, AlertState> {
   }
 
   render() {
+    // eslint-disable-next-line no-console
+    console.log('Hello from Alert')
+    console.warn('Warning from Alert')
     const liveRegion = this.getLiveRegion()
     const screenReaderContent = liveRegion
       ? this.createScreenReaderPortal(liveRegion)