From eef2c0487b105ffbb4b7bc97029bdd46ed061670 Mon Sep 17 00:00:00 2001
From: nixocio <nixocio@gmail.com>
Date: Wed, 11 May 2022 16:46:54 -0400
Subject: [PATCH] Add help text popovers to /#/applications details fields

Add help text popovers to /#/applications details fields

See: https://github.com/ansible/awx/issues/11873
---
 .../ApplicationAdd/ApplicationAdd.test.js            |  1 +
 .../ApplicationDetails/ApplicationDetails.js         |  6 +++++-
 .../ApplicationDetails/ApplicationDetails.test.js    |  2 +-
 .../Application/shared/Application.helptext.js       |  9 +++++++++
 .../screens/Application/shared/ApplicationForm.js    | 12 ++++--------
 5 files changed, 20 insertions(+), 10 deletions(-)
 create mode 100644 awx/ui/src/screens/Application/shared/Application.helptext.js

diff --git a/awx/ui/src/screens/Application/ApplicationAdd/ApplicationAdd.test.js b/awx/ui/src/screens/Application/ApplicationAdd/ApplicationAdd.test.js
index d9ff13a753cd..2e02fdda8167 100644
--- a/awx/ui/src/screens/Application/ApplicationAdd/ApplicationAdd.test.js
+++ b/awx/ui/src/screens/Application/ApplicationAdd/ApplicationAdd.test.js
@@ -50,6 +50,7 @@ describe('<ApplicationAdd/>', () => {
         <ApplicationAdd onSuccessfulAdd={onSuccessfulAdd} />
       );
     });
+
     expect(wrapper.find('ApplicationAdd').length).toBe(1);
     expect(wrapper.find('ApplicationForm').length).toBe(1);
     expect(ApplicationsAPI.readOptions).toBeCalled();
diff --git a/awx/ui/src/screens/Application/ApplicationDetails/ApplicationDetails.js b/awx/ui/src/screens/Application/ApplicationDetails/ApplicationDetails.js
index d5c94cd64a8e..a0dff28e3f41 100644
--- a/awx/ui/src/screens/Application/ApplicationDetails/ApplicationDetails.js
+++ b/awx/ui/src/screens/Application/ApplicationDetails/ApplicationDetails.js
@@ -11,6 +11,7 @@ import { Detail, DetailList, UserDateDetail } from 'components/DetailList';
 import { ApplicationsAPI } from 'api';
 import DeleteButton from 'components/DeleteButton';
 import ErrorDetail from 'components/ErrorDetail';
+import applicationHelpTextStrings from '../shared/Application.helptext';
 
 function ApplicationDetails({
   application,
@@ -81,6 +82,7 @@ function ApplicationDetails({
             application.authorization_grant_type
           )}
           dataCy="app-detail-authorization-grant-type"
+          helpText={applicationHelpTextStrings.authorizationGrantType}
         />
         <Detail
           label={t`Client ID`}
@@ -88,14 +90,16 @@ function ApplicationDetails({
           dataCy="app-detail-client-id"
         />
         <Detail
-          label={t`Redirect uris`}
+          label={t`Redirect URIs`}
           value={application.redirect_uris}
           dataCy="app-detail-redirect-uris"
+          helpText={applicationHelpTextStrings.redirectURIS}
         />
         <Detail
           label={t`Client type`}
           value={getClientType(application.client_type)}
           dataCy="app-detail-client-type"
+          helpText={applicationHelpTextStrings.clientType}
         />
         <UserDateDetail label={t`Created`} date={application.created} />
         <UserDateDetail label={t`Last Modified`} date={application.modified} />
diff --git a/awx/ui/src/screens/Application/ApplicationDetails/ApplicationDetails.test.js b/awx/ui/src/screens/Application/ApplicationDetails/ApplicationDetails.test.js
index afe6dfb623b8..da11536a7bdd 100644
--- a/awx/ui/src/screens/Application/ApplicationDetails/ApplicationDetails.test.js
+++ b/awx/ui/src/screens/Application/ApplicationDetails/ApplicationDetails.test.js
@@ -111,7 +111,7 @@ describe('<ApplicationDetails/>', () => {
     expect(
       wrapper.find('Detail[label="Authorization grant type"]').prop('value')
     ).toBe('Authorization code');
-    expect(wrapper.find('Detail[label="Redirect uris"]').prop('value')).toBe(
+    expect(wrapper.find('Detail[label="Redirect URIs"]').prop('value')).toBe(
       'http://www.google.com'
     );
     expect(wrapper.find('Detail[label="Client type"]').prop('value')).toBe(
diff --git a/awx/ui/src/screens/Application/shared/Application.helptext.js b/awx/ui/src/screens/Application/shared/Application.helptext.js
new file mode 100644
index 000000000000..b026259dc3b3
--- /dev/null
+++ b/awx/ui/src/screens/Application/shared/Application.helptext.js
@@ -0,0 +1,9 @@
+import { t } from '@lingui/macro';
+
+const applicationHelpTextStrings = {
+  authorizationGrantType: t`The Grant type the user must use to acquire tokens for this application`,
+  clientType: t`Set to Public or Confidential depending on how secure the client device is.`,
+  redirectURIS: t`Allowed URIs list, space separated`,
+};
+
+export default applicationHelpTextStrings;
diff --git a/awx/ui/src/screens/Application/shared/ApplicationForm.js b/awx/ui/src/screens/Application/shared/ApplicationForm.js
index a374bc65e2fe..26e4dac76711 100644
--- a/awx/ui/src/screens/Application/shared/ApplicationForm.js
+++ b/awx/ui/src/screens/Application/shared/ApplicationForm.js
@@ -13,6 +13,7 @@ import FormActionGroup from 'components/FormActionGroup/FormActionGroup';
 import OrganizationLookup from 'components/Lookup/OrganizationLookup';
 import AnsibleSelect from 'components/AnsibleSelect';
 import Popover from 'components/Popover';
+import applicationHelpTextStrings from './Application.helptext';
 
 function ApplicationFormFields({
   application,
@@ -83,7 +84,7 @@ function ApplicationFormFields({
         label={t`Authorization grant type`}
         labelIcon={
           <Popover
-            content={t`The Grant type the user must use to acquire tokens for this application`}
+            content={applicationHelpTextStrings.authorizationGrantType}
           />
         }
       >
@@ -113,7 +114,7 @@ function ApplicationFormFields({
             ? required(null)
             : null
         }
-        tooltip={t`Allowed URIs list, space separated`}
+        tooltip={applicationHelpTextStrings.redirectURIS}
       />
       <FormGroup
         fieldId="clientType"
@@ -123,11 +124,7 @@ function ApplicationFormFields({
         }
         isRequired
         label={t`Client type`}
-        labelIcon={
-          <Popover
-            content={t`Set to Public or Confidential depending on how secure the client device is.`}
-          />
-        }
+        labelIcon={<Popover content={applicationHelpTextStrings.clientType} />}
       >
         <AnsibleSelect
           {...clientTypeField}
@@ -145,7 +142,6 @@ function ApplicationFormFields({
 function ApplicationForm({
   onCancel,
   onSubmit,
-
   submitError,
   application,
   authorizationOptions,