From 3cedd0e0bd08e069d8d63035a578f7a03d2d80be Mon Sep 17 00:00:00 2001
From: "Keith J. Grant" <barkeep@keithjgrant.com>
Date: Wed, 4 May 2022 13:23:28 -0700
Subject: [PATCH] add help text to user token detail

---
 .../src/screens/User/UserTokenDetail/UserTokenDetail.js  | 3 +++
 awx/ui/src/screens/User/shared/User.helptext.js          | 8 ++++++++
 awx/ui/src/screens/User/shared/UserTokenForm.js          | 9 +++------
 3 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 awx/ui/src/screens/User/shared/User.helptext.js

diff --git a/awx/ui/src/screens/User/UserTokenDetail/UserTokenDetail.js b/awx/ui/src/screens/User/UserTokenDetail/UserTokenDetail.js
index f9b7753992..3e885bc984 100644
--- a/awx/ui/src/screens/User/UserTokenDetail/UserTokenDetail.js
+++ b/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`}
diff --git a/awx/ui/src/screens/User/shared/User.helptext.js b/awx/ui/src/screens/User/shared/User.helptext.js
new file mode 100644
index 0000000000..c833bc68b8
--- /dev/null
+++ b/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;
diff --git a/awx/ui/src/screens/User/shared/UserTokenForm.js b/awx/ui/src/screens/User/shared/UserTokenForm.js
index b801f2cdc6..109352934b 100644
--- a/awx/ui/src/screens/User/shared/UserTokenForm.js
+++ b/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
-                content={t`Select the application that this token will belong to, or leave this field empty to create a Personal Access Token.`}
-              />
+              <Popover content={helptext.application} />
             </span>
           }
           touched={applicationMeta.touched}
@@ -67,9 +66,7 @@ function UserTokenFormFields() {
         isRequired
         validated={!scopeMeta.touched || !scopeMeta.error ? 'default' : 'error'}
         label={t`Scope`}
-        labelIcon={
-          <Popover content={t`Specify a scope for the token's access`} />
-        }
+        labelIcon={<Popover content={helptext.scope} />}
       >
         <AnsibleSelect
           {...scopeField}