ui: Update runtime variable workaround

This change updates the workaround used to access runtime variables in
the React frontend, in order to improve the ergonimics when using the
development mode of CRA (Create React App).

7 files changed, 59 insertions, 11 deletions

diff --git a/opendc-web/opendc-web-ui/Dockerfile b/opendc-web/opendc-web-ui/Dockerfile
index 7aa3a7bf..86a18a03 100644
--- a/opendc-web/opendc-web-ui/Dockerfile
+++ b/opendc-web/opendc-web-ui/Dockerfile
@@ -11,6 +11,7 @@ FROM node:15 AS build
 COPY ./ /opendc
 COPY --from=staging /opendc/node_modules /opendc/node_modules
 RUN cd /opendc/ \
+    && export REACT_APP_OAUTH_CLIENT_ID="\\\$REACT_APP_OAUTH_CLIENT_ID" \
     && yarn build \
     && mv build/index.html build/index.html.template
 
diff --git a/opendc-web/opendc-web-ui/public/index.html b/opendc-web/opendc-web-ui/public/index.html
index da734797..19b80e29 100644
--- a/opendc-web/opendc-web-ui/public/index.html
+++ b/opendc-web/opendc-web-ui/public/index.html
@@ -33,7 +33,7 @@
     <meta property="og:locale" content="en_US">
 
     <!-- Google meta tags -->
-    <meta name="google-signin-client_id" content="$OAUTH_CLIENT_ID">
+    <meta name="google-signin-client_id" content="%REACT_APP_OAUTH_CLIENT_ID%">
     <meta name="google-site-verification" content="YIR4LkQTv6WmOdWv8MkeiUKni-0Yu3WHylLp4VvUMig"/>
 
     <!-- CDN dependencies -->
@@ -53,10 +53,11 @@
         gtag('config', 'UA-84285092-3')
     </script>
     <script>
-        window.$$env = {
-            API_BASE_URL: "$API_BASE_URL",
-            OAUTH_CLIENT_ID: "$OAUTH_CLIENT_ID",
-            SENTRY_DSN: "$SENTRY_DSN",
+        /* Dynamic app variables */
+        window.config_overrides = {
+            REACT_APP_API_BASE_URL: "$REACT_APP_API_BASE_URL",
+            REACT_APP_OAUTH_CLIENT_ID: "$REACT_APP_OAUTH_CLIENT_ID",
+            REACT_APP_SENTRY_DSN: "$REACT_APP_SENTRY_DSN",
         };
     </script>
 </head>
diff --git a/opendc-web/opendc-web-ui/src/api/routes/token-signin.js b/opendc-web/opendc-web-ui/src/api/routes/token-signin.js
index e40127f2..ced5d2e0 100644
--- a/opendc-web/opendc-web-ui/src/api/routes/token-signin.js
+++ b/opendc-web/opendc-web-ui/src/api/routes/token-signin.js
@@ -1,5 +1,7 @@
+import config from '../../config'
+
 export function performTokenSignIn(token) {
-    const apiUrl = window.$$env['API_BASE_URL'] || ''
+    const apiUrl = config['API_BASE_URL']
 
     return fetch(`${apiUrl}/tokensignin`, {
         method: 'POST',
diff --git a/opendc-web/opendc-web-ui/src/api/socket.js b/opendc-web/opendc-web-ui/src/api/socket.js
index 884c4152..87facda8 100644
--- a/opendc-web/opendc-web-ui/src/api/socket.js
+++ b/opendc-web/opendc-web-ui/src/api/socket.js
@@ -1,5 +1,6 @@
 import io from 'socket.io-client'
 import { getAuthToken } from '../auth/index'
+import config from '../config'
 
 let socket
 let requestIdCounter = 0
@@ -7,8 +8,7 @@ const callbacks = {}
 
 export function setupSocketConnection(onConnect) {
     const apiUrl =
-        window.$$env['API_BASE_URL'] ||
-        `${window.location.protocol}//${window.location.hostname}:${window.location.port}`
+        config['API_BASE_URL'] || `${window.location.protocol}//${window.location.hostname}:${window.location.port}`
 
     socket = io.connect(apiUrl)
     socket.on('connect', onConnect)
diff --git a/opendc-web/opendc-web-ui/src/config.js b/opendc-web/opendc-web-ui/src/config.js
new file mode 100644
index 00000000..13f4abf2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/config.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+function getConfig(name) {
+    if (process.env.NODE_ENV === 'production' && window.config_overrides) {
+        const value = window.config_overrides[name]
+        if (value !== `$${name}`) {
+            return value
+        }
+    }
+
+    return process.env[name]
+}
+
+const config = {
+    API_BASE_URL: getConfig('REACT_APP_API_BASE_URL'),
+    OAUTH_CLIENT_ID: getConfig('REACT_APP_OAUTH_CLIENT_ID'),
+    SENTRY_DSN: getConfig('REACT_APP_SENTRY_DSN'),
+}
+
+export default config
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Login.js b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
index 9201c09a..bebe015c 100644
--- a/opendc-web/opendc-web-ui/src/containers/auth/Login.js
+++ b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
@@ -3,6 +3,7 @@ import React from 'react'
 import GoogleLogin from 'react-google-login'
 import { connect } from 'react-redux'
 import { logIn } from '../../actions/auth'
+import config from '../../config'
 
 class LoginContainer extends React.Component {
     static propTypes = {
@@ -32,12 +33,12 @@ class LoginContainer extends React.Component {
 
         return (
             <GoogleLogin
-                clientId={window.$$env['OAUTH_CLIENT_ID']}
+                clientId={config['OAUTH_CLIENT_ID']}
                 onSuccess={this.onAuthResponse.bind(this)}
                 onFailure={this.onAuthFailure.bind(this)}
                 render={(renderProps) => (
                     <span onClick={renderProps.onClick} className="login btn btn-primary">
-                        <span className="fa fa-google"/> Login with Google
+                        <span className="fa fa-google" /> Login with Google
                     </span>
                 )}
             />
diff --git a/opendc-web/opendc-web-ui/src/index.js b/opendc-web/opendc-web-ui/src/index.js
index bddf0b0e..7f60098d 100644
--- a/opendc-web/opendc-web-ui/src/index.js
+++ b/opendc-web/opendc-web-ui/src/index.js
@@ -6,13 +6,16 @@ import { Provider } from 'react-redux'
 import { setupSocketConnection } from './api/socket'
 import './index.sass'
 import Routes from './routes'
+import config from './config'
 import configureStore from './store/configure-store'
 
 setupSocketConnection(() => {
     const store = configureStore()
 
+    console.log('test', config)
+
     // Initialize Sentry if the user has configured a DSN
-    const dsn = window.$$env['SENTRY_DSN']
+    const dsn = config['SENTRY_DSN']
     if (dsn) {
         Sentry.init({
             environment: process.env.NODE_ENV,