From fb91c8fba1d25ec28f6599be6ec55eaff9925125 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Tue, 13 Jul 2021 14:43:57 -0400
Subject: [PATCH] updates product name in About modal

---
 awx/ui_next/public/static/media/default.strings.json  |  1 +
 awx/ui_next/src/components/About/About.js             | 11 ++++++++---
 awx/ui_next/src/components/About/About.test.js        |  2 +-
 .../src/components/AppContainer/AppContainer.test.js  |  2 ++
 awx/ui_next/src/hooks/useBrandName.js                 | 10 +++++-----
 5 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/awx/ui_next/public/static/media/default.strings.json b/awx/ui_next/public/static/media/default.strings.json
index bc66952ff2..34b5c9ed22 100644
--- a/awx/ui_next/public/static/media/default.strings.json
+++ b/awx/ui_next/public/static/media/default.strings.json
@@ -1,4 +1,5 @@
 {
     "BRAND_NAME": "Ansible AWX",
+    "COMPONENT_NAME": "",
     "PENDO_API_KEY": ""
 }
diff --git a/awx/ui_next/src/components/About/About.js b/awx/ui_next/src/components/About/About.js
index 39842f0623..dbea47cc17 100644
--- a/awx/ui_next/src/components/About/About.js
+++ b/awx/ui_next/src/components/About/About.js
@@ -5,9 +5,14 @@ import { AboutModal } from '@patternfly/react-core';
 import useBrandName from 'hooks/useBrandName';
 
 function About({ version, isOpen, onClose }) {
-  const brandName = useBrandName();
+  const {
+    current: { brandName, componentName },
+  } = useBrandName();
   const createSpeechBubble = () => {
-    let text = `${brandName.current} ${version}`;
+    let text =
+      componentName !== ''
+        ? `${brandName} ${componentName} ${version}`
+        : `${brandName} ${version}`;
     let top = '';
     let bottom = '';
 
@@ -31,7 +36,7 @@ function About({ version, isOpen, onClose }) {
     <AboutModal
       isOpen={isOpen}
       onClose={onClose}
-      productName={brandName.current}
+      productName={brandName}
       trademark={`${copyright} ${new Date().getFullYear()} ${redHatInc}`}
       brandImageSrc="/static/media/logo-header.svg"
       brandImageAlt={t`Brand Image`}
diff --git a/awx/ui_next/src/components/About/About.test.js b/awx/ui_next/src/components/About/About.test.js
index baf7392948..2b9f5749a1 100644
--- a/awx/ui_next/src/components/About/About.test.js
+++ b/awx/ui_next/src/components/About/About.test.js
@@ -5,7 +5,7 @@ import About from './About';
 jest.mock('../../hooks/useBrandName', () => ({
   __esModule: true,
   default: () => ({
-    current: 'AWX',
+    current: { brandName: 'AWX', componentName: '' },
   }),
 }));
 
diff --git a/awx/ui_next/src/components/AppContainer/AppContainer.test.js b/awx/ui_next/src/components/AppContainer/AppContainer.test.js
index 577ee1ba74..5e72bbac16 100644
--- a/awx/ui_next/src/components/AppContainer/AppContainer.test.js
+++ b/awx/ui_next/src/components/AppContainer/AppContainer.test.js
@@ -22,6 +22,7 @@ describe('<AppContainer />', () => {
     RootAPI.readAssetVariables.mockResolvedValue({
       data: {
         BRAND_NAME: 'AWX',
+        COMPONENT_NAME: '',
         PENDO_API_KEY: 'some-pendo-key',
       },
     });
@@ -99,6 +100,7 @@ describe('<AppContainer />', () => {
     RootAPI.readAssetVariables.mockResolvedValue({
       data: {
         BRAND_NAME: 'AWX',
+        COMPONENT_NAME: '',
         PENDO_API_KEY: '',
       },
     });
diff --git a/awx/ui_next/src/hooks/useBrandName.js b/awx/ui_next/src/hooks/useBrandName.js
index 11556e9fe1..db9f2a4f6f 100644
--- a/awx/ui_next/src/hooks/useBrandName.js
+++ b/awx/ui_next/src/hooks/useBrandName.js
@@ -2,18 +2,18 @@ import { useEffect, useRef } from 'react';
 import { RootAPI } from 'api';
 
 export default function useBrandName() {
-  const brandName = useRef('');
+  const platform = useRef({});
 
   useEffect(() => {
     async function fetchBrandName() {
       const {
-        data: { BRAND_NAME },
+        data: { BRAND_NAME, COMPONENT_NAME },
       } = await RootAPI.readAssetVariables();
-
-      brandName.current = BRAND_NAME;
+      platform.current.brandName = BRAND_NAME;
+      platform.current.componentName = COMPONENT_NAME || '';
     }
     fetchBrandName();
   }, []);
 
-  return brandName;
+  return platform;
 }