Merge pull request #12172 from keithjgrant/11869-users-help-text

Add help text to user token detail

awx/ui/src/screens/User/UserTokenDetail/UserTokenDetail.js

@@ -12,6 +12,7 @@ import { TokensAPI } from 'api';
 import { formatDateString } from 'util/dates';
 import useRequest, { useDismissableError } from 'hooks/useRequest';
 import { toTitleCase } from 'util/strings';
+import helptext from '../shared/User.helptext';
 
 function UserTokenDetail({ token }) {
   const { scope, description, created, modified, expires, summary_fields } =
@@ -37,6 +38,7 @@ function UserTokenDetail({ token }) {
           label={t`Application`}
           value={summary_fields?.application?.name}
           dataCy="application-token-detail-name"
+          helpText={helptext.application}
         />
         <Detail
           label={t`Description`}
@@ -47,6 +49,7 @@ function UserTokenDetail({ token }) {
           label={t`Scope`}
           value={toTitleCase(scope)}
           dataCy="application-token-detail-scope"
+          helpText={helptext.scope}
         />
         <Detail
           label={t`Expires`}

awx/ui/src/screens/User/shared/User.helptext.js

@@ -0,0 +1,8 @@
+import { t } from '@lingui/macro';
+
+const userHelpTextStrings = {
+  application: t`The application that this token belongs to, or leave this field empty to create a Personal Access Token.`,
+  scope: t`Scope for the token's access`,
+};
+
+export default userHelpTextStrings;

awx/ui/src/screens/User/shared/UserTokenForm.js

@@ -9,6 +9,7 @@ import ApplicationLookup from 'components/Lookup/ApplicationLookup';
 import Popover from 'components/Popover';
 import { required } from 'util/validators';
 import { FormColumnLayout } from 'components/FormLayout';
+import helptext from './User.helptext';
 
 function UserTokenFormFields() {
   const { setFieldValue, setFieldTouched } = useFormikContext();
@@ -45,9 +46,7 @@ function UserTokenFormFields() {
           label={
             <span>
               {t`Application`}
-              <Popover
+              <Popover content={helptext.application} />
-                content={t`Select the application that this token will belong to, or leave this field empty to create a Personal Access Token.`}
-              />
             </span>
           }
           touched={applicationMeta.touched}
@@ -67,9 +66,7 @@ function UserTokenFormFields() {
         isRequired
         validated={!scopeMeta.touched || !scopeMeta.error ? 'default' : 'error'}
         label={t`Scope`}
-        labelIcon={
+        labelIcon={<Popover content={helptext.scope} />}
-          <Popover content={t`Specify a scope for the token's access`} />
-        }
       >
         <AnsibleSelect
           {...scopeField}