From 02021fe2c901706b7e11a0ebd0ed982b8faa0e9a Mon Sep 17 00:00:00 2001
From: Jake McDermott <yo@jakemcdermott.me>
Date: Mon, 23 Nov 2020 15:14:55 -0500
Subject: [PATCH] Source variables provided at build time

---
 .../public/static/media/default.strings.json  |  4 +++
 awx/ui_next/src/api/models/Root.js            |  8 +++++
 awx/ui_next/src/screens/Login/Login.jsx       | 33 ++++++++++++-------
 awx/ui_next/src/screens/Login/Login.test.jsx  |  5 +++
 4 files changed, 38 insertions(+), 12 deletions(-)
 create mode 100644 awx/ui_next/public/static/media/default.strings.json

diff --git a/awx/ui_next/public/static/media/default.strings.json b/awx/ui_next/public/static/media/default.strings.json
new file mode 100644
index 0000000000..f5f3d5d399
--- /dev/null
+++ b/awx/ui_next/public/static/media/default.strings.json
@@ -0,0 +1,4 @@
+{
+    "BRAND_NAME": "AWX",
+    "PENDO_API_KEY": ""
+}
diff --git a/awx/ui_next/src/api/models/Root.js b/awx/ui_next/src/api/models/Root.js
index ffba170c41..e930d3cc59 100644
--- a/awx/ui_next/src/api/models/Root.js
+++ b/awx/ui_next/src/api/models/Root.js
@@ -25,6 +25,14 @@ class Root extends Base {
   logout() {
     return this.http.get(`${this.baseUrl}logout/`);
   }
+
+  readAssetVariables() {
+    // TODO: There's better ways of doing this. Build tools, scripts,
+    // automation etc. should relocate this variable file to an importable
+    // location in src prior to building. That said, a raw http call
+    // works for now.
+    return this.http.get('/static/media/default.strings.json');
+  }
 }
 
 export default Root;
diff --git a/awx/ui_next/src/screens/Login/Login.jsx b/awx/ui_next/src/screens/Login/Login.jsx
index b6d3fe991c..f08c8e68a7 100644
--- a/awx/ui_next/src/screens/Login/Login.jsx
+++ b/awx/ui_next/src/screens/Login/Login.jsx
@@ -5,7 +5,6 @@ import { t } from '@lingui/macro';
 import styled from 'styled-components';
 import { LoginForm, LoginPage as PFLoginPage } from '@patternfly/react-core';
 import { RootAPI } from '../../api';
-import { BrandName } from '../../variables';
 
 const loginLogoSrc = '/static/media/logo-login.svg';
 
@@ -28,6 +27,7 @@ class AWXLogin extends Component {
       isLoading: true,
       logo: null,
       loginInfo: null,
+      brandName: null,
     };
 
     this.handleChangeUsername = this.handleChangeUsername.bind(this);
@@ -43,16 +43,24 @@ class AWXLogin extends Component {
   async loadCustomLoginInfo() {
     this.setState({ isLoading: true });
     try {
-      const {
-        data: { custom_logo, custom_login_info },
-      } = await RootAPI.read();
+      const [
+        {
+          data: { custom_logo, custom_login_info },
+        },
+        {
+          data: { BRAND_NAME },
+        },
+      ] = await Promise.all([RootAPI.read(), RootAPI.readAssetVariables()]);
       const logo = custom_logo
         ? `data:image/jpeg;${custom_logo}`
         : loginLogoSrc;
-
-      this.setState({ logo, loginInfo: custom_login_info });
+      this.setState({
+        brandName: BRAND_NAME,
+        logo,
+        loginInfo: custom_login_info,
+      });
     } catch (err) {
-      this.setState({ logo: loginLogoSrc });
+      this.setState({ brandName: 'AWX', logo: loginLogoSrc });
     } finally {
       this.setState({ isLoading: false });
     }
@@ -93,6 +101,7 @@ class AWXLogin extends Component {
 
   render() {
     const {
+      brandName,
       hasAuthError,
       hasValidationError,
       username,
@@ -102,10 +111,6 @@ class AWXLogin extends Component {
       loginInfo,
     } = this.state;
     const { alt, i18n, isAuthenticated } = this.props;
-    // Setting BrandName to a variable here is necessary to get the jest tests
-    // passing.  Attempting to use BrandName in the template literal results
-    // in failing tests.
-    const brandName = BrandName;
 
     if (isLoading) {
       return null;
@@ -126,7 +131,11 @@ class AWXLogin extends Component {
       <LoginPage
         brandImgSrc={logo}
         brandImgAlt={alt || brandName}
-        loginTitle={i18n._(t`Welcome to Ansible ${brandName}! Please Sign In.`)}
+        loginTitle={
+          brandName
+            ? i18n._(t`Welcome to Ansible ${brandName}! Please Sign In.`)
+            : ''
+        }
         textContent={loginInfo}
       >
         <LoginForm
diff --git a/awx/ui_next/src/screens/Login/Login.test.jsx b/awx/ui_next/src/screens/Login/Login.test.jsx
index 9f2245741e..62948ffc1d 100644
--- a/awx/ui_next/src/screens/Login/Login.test.jsx
+++ b/awx/ui_next/src/screens/Login/Login.test.jsx
@@ -55,6 +55,11 @@ describe('<Login />', () => {
         custom_logo: 'images/foo.jpg',
       },
     });
+    RootAPI.readAssetVariables.mockResolvedValue({
+      data: {
+        BRAND_NAME: 'AWX',
+      },
+    });
   });
 
   afterEach(() => {