Add help text popovers to /#/applications details fields (#12222)

Add help text popovers to /#/applications details fields

See: https://github.com/ansible/awx/issues/11873

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();

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} />

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(

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;

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={
+        labelIcon={<Popover content={applicationHelpTextStrings.clientType} />}
-          <Popover
-            content={t`Set to Public or Confidential depending on how secure the client device is.`}
-          />
-        }
       >
         <AnsibleSelect
           {...clientTypeField}
@@ -145,7 +142,6 @@ function ApplicationFormFields({
 function ApplicationForm({
   onCancel,
   onSubmit,
-
   submitError,
   application,
   authorizationOptions,