[AAH-2539] about modals (hub, awx, eda upstream)

frontend/awx/main/AwxMasthead.tsx

@@ -20,9 +20,11 @@ import { useAwxWebSocketSubscription } from '../common/useAwxWebSocket';
 import { getDocsBaseUrl } from '../common/util/getDocsBaseUrl';
 import { WorkflowApproval } from '../interfaces/WorkflowApproval';
 import { AwxRoute } from './AwxRoutes';
+import { useAwxProductVersionInfo } from './useAwxProductVersionInfo';
 
 export function AwxMasthead() {
   const { t } = useTranslation();
+  const versionInfo = useAwxProductVersionInfo();
   const openAnsibleAboutModal = useAnsibleAboutModal();
   const config = useAwxConfig();
   const pageNavigate = usePageNavigate();
@@ -58,7 +60,13 @@ export function AwxMasthead() {
             </DropdownItem>
             <DropdownItem
               id="about"
-              onClick={() => openAnsibleAboutModal({ brandImageSrc: '/assets/awx-logo.svg' })}
+              onClick={() =>
+                openAnsibleAboutModal({
+                  brandImageSrc: '/assets/awx-logo.svg',
+                  versionInfo,
+                  userInfo: activeAwxUser?.username,
+                })
+              }
               data-cy="masthead-about"
             >
               {t('About')}

frontend/awx/main/useAwxProductVersionInfo.tsx

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import { awxAPI } from '../common/api/awx-utils';
+
+type ProductVersionInfo = Record<string, string | Record<string, string>>;
+
+export function useAwxProductVersionInfo() {
+  const [, setError] = useState<Error>();
+  const [productVersionInfo, setProductVersionInfo] = useState<ProductVersionInfo>();
+  useEffect(() => {
+    fetch(awxAPI`/ping/`)
+      .then((response) => response.json())
+      .then((data) => setProductVersionInfo(data as ProductVersionInfo))
+      .catch((err) => {
+        setError(err as Error);
+      });
+  }, []);
+  return productVersionInfo;
+}