Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
May 17, 2022
+20 −10
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions awx/ui/src/screens/Application/ApplicationAdd/ApplicationAdd.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
6 changes: 5 additions & 1 deletion awx/ui/src/screens/Application/ApplicationDetails/ApplicationDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -81,21 +82,24 @@ function ApplicationDetails({
application.authorization_grant_type
)}
dataCy="app-detail-authorization-grant-type"
helpText={applicationHelpTextStrings.authorizationGrantType}
/>
<Detail
label={t`Client ID`}
value={application.client_id}
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} />
Expand Down
2 changes: 1 addition & 1 deletion awx/ui/src/screens/Application/ApplicationDetails/ApplicationDetails.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
9 changes: 9 additions & 0 deletions awx/ui/src/screens/Application/shared/Application.helptext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
12 changes: 4 additions & 8 deletions awx/ui/src/screens/Application/shared/ApplicationForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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}
/>
}
>
Expand Down Expand Up @@ -113,7 +114,7 @@ function ApplicationFormFields({
? required(null)
: null
}
tooltip={t`Allowed URIs list, space separated`}
tooltip={applicationHelpTextStrings.redirectURIS}
/>
<FormGroup
fieldId="clientType"
Expand All @@ -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}
Expand All @@ -145,7 +142,6 @@ function ApplicationFormFields({
function ApplicationForm({
onCancel,
onSubmit,

submitError,
application,
authorizationOptions,
Expand Down