Merge pull request #10849 from nixocio/ui_issue_10775_again

Update useBrandName

awx/ui/public/static/media/default.strings.json

@@ -1,5 +1,4 @@
 {
     "BRAND_NAME": "Ansible AWX",
-    "COMPONENT_NAME": "",
     "PENDO_API_KEY": ""
 }

awx/ui/src/components/About/About.js

@@ -5,14 +5,17 @@ import { AboutModal } from '@patternfly/react-core';
 import useBrandName from 'hooks/useBrandName';
 
 function About({ version, isOpen, onClose }) {
-  const {
-    current: { brandName, componentName },
-  } = useBrandName();
+  const brandName = useBrandName();
+
   const createSpeechBubble = () => {
-    let text =
-      componentName !== ''
-        ? `${brandName} ${componentName} ${version}`
-        : `${brandName} ${version}`;
+    let text = '';
+    if (typeof brandName === 'string' && brandName.length > 0) {
+      text =
+        brandName.indexOf('AWX') === -1
+          ? `${brandName} Controller ${version}`
+          : `${brandName} ${version}`;
+    }
+
     let top = '';
     let bottom = '';
 

awx/ui/src/components/About/About.test.js

@@ -5,7 +5,7 @@ import About from './About';
 jest.mock('../../hooks/useBrandName', () => ({
   __esModule: true,
   default: () => ({
-    current: { brandName: 'AWX', componentName: '' },
+    current: 'AWX',
   }),
 }));
 
@@ -17,7 +17,7 @@ describe('<About />', () => {
     const modal = wrapper.find('AboutModal');
     expect(modal).toHaveLength(1);
     expect(modal.prop('onClose')).toEqual(onClose);
-    expect(modal.prop('productName')).toEqual('AWX');
+    expect(modal.prop('productName')).toEqual({ current: 'AWX' });
     expect(modal.prop('isOpen')).toEqual(true);
   });
 });

awx/ui/src/components/AdHocCommands/AdHocDetailsStep.js

@@ -22,9 +22,7 @@ const TooltipWrapper = styled.div`
 `;
 
 function AdHocDetailsStep({ verbosityOptions, moduleOptions }) {
-  const {
-    current: { brandName },
-  } = useBrandName();
+  const brandName = useBrandName();
   const [moduleNameField, moduleNameMeta, moduleNameHelpers] = useField({
     name: 'module_name',
     validate: required(null),

awx/ui/src/components/AppContainer/AppContainer.test.js

@@ -22,7 +22,6 @@ describe('<AppContainer />', () => {
     RootAPI.readAssetVariables.mockResolvedValue({
       data: {
         BRAND_NAME: 'AWX',
-        COMPONENT_NAME: '',
         PENDO_API_KEY: 'some-pendo-key',
       },
     });
@@ -100,7 +99,6 @@ describe('<AppContainer />', () => {
     RootAPI.readAssetVariables.mockResolvedValue({
       data: {
         BRAND_NAME: 'AWX',
-        COMPONENT_NAME: '',
         PENDO_API_KEY: '',
       },
     });

awx/ui/src/hooks/useBrandName.js

@@ -1,19 +1,18 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import { RootAPI } from 'api';
 
 export default function useBrandName() {
-  const platform = useRef({});
+  const [brandName, setBrandName] = useState('');
 
   useEffect(() => {
     async function fetchBrandName() {
       const {
-        data: { BRAND_NAME, COMPONENT_NAME },
+        data: { BRAND_NAME },
       } = await RootAPI.readAssetVariables();
-      platform.current.brandName = BRAND_NAME;
-      platform.current.componentName = COMPONENT_NAME || '';
+      setBrandName(BRAND_NAME);
     }
     fetchBrandName();
   }, []);
 
-  return platform;
+  return brandName;
 }

awx/ui/src/screens/Project/shared/ProjectSubForms/ManualSubForm.js

@@ -14,9 +14,8 @@ const ManualSubForm = ({
   project_base_dir,
   project_local_paths,
 }) => {
-  const {
-    current: { brandName },
-  } = useBrandName();
+  const brandName = useBrandName();
+
   const localPaths = [...new Set([...project_local_paths, localPath])];
   const options = [
     {

awx/ui/src/screens/Setting/SettingList.js

@@ -45,9 +45,8 @@ const CardDescription = styled.div`
 
 function SettingList() {
   const config = useConfig();
-  const {
-    current: { brandName },
-  } = useBrandName();
+  const brandName = useBrandName();
+
   const settingRoutes = [
     {
       header: t`Authentication`,

awx/ui/src/screens/Template/shared/JobTemplateForm.js

@@ -66,9 +66,7 @@ function JobTemplateForm({
     Boolean(template.webhook_service)
   );
   const isMounted = useIsMounted();
-  const {
-    current: { brandName },
-  } = useBrandName();
+  const brandName = useBrandName();
 
   const [askInventoryOnLaunchField] = useField('ask_inventory_on_launch');
   const [jobTypeField, jobTypeMeta, jobTypeHelpers] = useField({