From ae7960e9d7b091902b388942d6dc555033b3b6ea Mon Sep 17 00:00:00 2001 From: Alex Corey Date: Tue, 19 Apr 2022 14:35:51 -0400 Subject: [PATCH] Adds popover help text to project details, and unifies those strings (used in the form and the details view) into 1 file (#12039) --- awx/ui/src/components/DetailList/Detail.js | 5 +- awx/ui/src/components/Popover/Popover.js | 2 + .../Project/ProjectDetail/ProjectDetail.js | 82 ++++++--- .../ProjectDetail/ProjectDetail.test.js | 30 ++-- .../ProjectList/ProjectListItem.test.js | 7 +- .../Project/shared/Project.helptext.js | 142 ++++++++++++++++ .../src/screens/Project/shared/ProjectForm.js | 3 +- .../shared/ProjectSubForms/ArchiveSubForm.js | 43 ++--- .../shared/ProjectSubForms/GitSubForm.js | 70 +------- .../shared/ProjectSubForms/ManualSubForm.js | 23 +-- .../shared/ProjectSubForms/SharedFields.js | 157 +++++++++--------- .../shared/ProjectSubForms/SvnSubForm.js | 45 ++--- .../Project/shared/ProjectSyncButton.js | 8 +- .../Project/shared/ProjectSyncButton.test.js | 7 +- 14 files changed, 358 insertions(+), 266 deletions(-) create mode 100644 awx/ui/src/screens/Project/shared/Project.helptext.js diff --git a/awx/ui/src/components/DetailList/Detail.js b/awx/ui/src/components/DetailList/Detail.js index 10ce9f20ed..f539f6f908 100644 --- a/awx/ui/src/components/DetailList/Detail.js +++ b/awx/ui/src/components/DetailList/Detail.js @@ -1,5 +1,6 @@ import React from 'react'; -import { node, bool, string } from 'prop-types'; + +import { oneOfType, node, bool, string } from 'prop-types'; import { TextListItem, TextListItemVariants } from '@patternfly/react-core'; import styled from 'styled-components'; import Popover from '../Popover'; @@ -81,7 +82,7 @@ Detail.propTypes = { value: node, fullWidth: bool, alwaysVisible: bool, - helpText: string, + helpText: oneOfType([string, node]), }; Detail.defaultProps = { value: null, diff --git a/awx/ui/src/components/Popover/Popover.js b/awx/ui/src/components/Popover/Popover.js index 2a7c498323..bbde5e3297 100644 --- a/awx/ui/src/components/Popover/Popover.js +++ b/awx/ui/src/components/Popover/Popover.js @@ -10,6 +10,8 @@ const PopoverButton = styled.button` padding: var(--pf-global--spacer--xs); margin: -(var(--pf-global--spacer--xs)); font-size: var(--pf-global--FontSize--sm); + --pf-c-form__group-label-help--Color: var(--pf-global--Color--200); + --pf-c-form__group-label-help--hover--Color: var(--pf-global--Color--100); `; function Popover({ ariaLabel, content, header, id, maxWidth, ...rest }) { diff --git a/awx/ui/src/screens/Project/ProjectDetail/ProjectDetail.js b/awx/ui/src/screens/Project/ProjectDetail/ProjectDetail.js index 08459da2d8..f1ef78e1ae 100644 --- a/awx/ui/src/screens/Project/ProjectDetail/ProjectDetail.js +++ b/awx/ui/src/screens/Project/ProjectDetail/ProjectDetail.js @@ -27,7 +27,9 @@ import useRequest, { useDismissableError } from 'hooks/useRequest'; import { relatedResourceDeleteRequests } from 'util/getRelatedResourceDeleteDetails'; import StatusLabel from 'components/StatusLabel'; import { formatDateString } from 'util/dates'; +import Popover from 'components/Popover'; import ProjectSyncButton from '../shared/ProjectSyncButton'; +import ProjectHelpTextStrings from '../shared/Project.helptext'; import useWsProject from './useWsProject'; const Label = styled.span` @@ -57,7 +59,7 @@ function ProjectDetail({ project }) { summary_fields, } = useWsProject(project); const history = useHistory(); - + const projectHelpText = ProjectHelpTextStrings(); const { request: deleteProject, isLoading, @@ -82,29 +84,37 @@ function ProjectDetail({ project }) { optionsList = ( {scm_clean && ( - {t`Discard local changes before syncing`} + + {t`Discard local changes before syncing`} + + )} {scm_delete_on_update && ( - {t`Delete the project before syncing`} + + {t`Delete the project before syncing`}{' '} + + )} {scm_track_submodules && ( - {t`Track submodules latest commit on branch`} + + {t`Track submodules latest commit on branch`}{' '} + + )} {scm_update_on_launch && ( - {t`Update revision on job launch`} + + {t`Update revision on job launch`}{' '} + + )} {allow_override && ( - {t`Allow branch override`} + + {t`Allow branch override`}{' '} + + )} ); @@ -134,7 +144,10 @@ function ProjectDetail({ project }) { } else if (summary_fields?.last_job) { job = summary_fields.last_job; } - + const getSourceControlUrlHelpText = () => + scm_type === 'git' + ? projectHelpText.githubSourceControlUrl + : projectHelpText.svnSourceControlUrl; return ( @@ -197,9 +210,25 @@ function ProjectDetail({ project }) { } alwaysVisible /> - - - + + + {summary_fields.credential && ( {({ project_base_dir }) => ( - + )} - + ({ url: '/projects/1/details', }), })); +jest.mock('hooks/useBrandName', () => ({ + __esModule: true, + default: () => ({ + current: 'AWX', + }), +})); describe('', () => { const mockProject = { id: 1, @@ -126,16 +132,18 @@ describe('', () => { '2019-10-10T01:15:06.780490Z' ); expect( - wrapper - .find('Detail[label="Enabled Options"]') - .containsAllMatchingElements([ -
  • Discard local changes before syncing
    • , -
  • Delete the project before syncing
    • , -
  • Track submodules latest commit on branch
    • , -
  • Update revision on job launch
    • , -
  • Allow branch override
    • , - ]) - ).toEqual(true); + wrapper.find('Detail[label="Enabled Options"]').find('li') + ).toHaveLength(5); + const options = [ + 'Discard local changes before syncing', + 'Delete the project before syncing', + 'Track submodules latest commit on branch', + 'Update revision on job launch', + 'Allow branch override', + ]; + wrapper.find('li').map((item, index) => { + expect(item.text().includes(options[index])); + }); }); test('should hide options label when all project options return false', () => { @@ -237,7 +245,7 @@ describe('', () => { expect(history.location.pathname).toEqual('/projects/1/edit'); }); - test('sync button should call api to syn project', async () => { + test('sync button should call api to sync project', async () => { ProjectsAPI.readSync.mockResolvedValue({ data: { can_update: true } }); const wrapper = mountWithContexts(); await act(() => diff --git a/awx/ui/src/screens/Project/ProjectList/ProjectListItem.test.js b/awx/ui/src/screens/Project/ProjectList/ProjectListItem.test.js index a2444cf509..01be859690 100644 --- a/awx/ui/src/screens/Project/ProjectList/ProjectListItem.test.js +++ b/awx/ui/src/screens/Project/ProjectList/ProjectListItem.test.js @@ -6,7 +6,12 @@ import { mountWithContexts } from '../../../../testUtils/enzymeHelpers'; import ProjectsListItem from './ProjectListItem'; jest.mock('../../../api/models/Projects'); - +jest.mock('hooks/useBrandName', () => ({ + __esModule: true, + default: () => ({ + current: 'AWX', + }), +})); describe('', () => { test('launch button shown to users with start capabilities', () => { const wrapper = mountWithContexts( diff --git a/awx/ui/src/screens/Project/shared/Project.helptext.js b/awx/ui/src/screens/Project/shared/Project.helptext.js new file mode 100644 index 0000000000..4488c15dfd --- /dev/null +++ b/awx/ui/src/screens/Project/shared/Project.helptext.js @@ -0,0 +1,142 @@ +import React from 'react'; +import { t } from '@lingui/macro'; +import getDocsBaseUrl from 'util/getDocsBaseUrl'; +import { useConfig } from 'contexts/Config'; +import useBrandName from 'hooks/useBrandName'; + +const ProjectHelpTextStrings = () => ({ + executionEnvironment: t`The execution environment that will be used for jobs that use this project. This will be used as fallback when an execution environment has not been explicitly assigned at the job template or workflow level.`, + projectBasePath: ( + + {t`Base path used for locating playbooks. Directories + found inside this path will be listed in the playbook directory drop-down. + Together the base path and selected playbook directory provide the full + path used to locate playbooks.`} +
    +
    + {t`Change PROJECTS_ROOT when deploying + ${useBrandName()} to change this location.`} +     + ), + projectLocalPath: t`Select from the list of directories found in + the Project Base Path. Together the base path and the playbook + directory provide the full path used to locate playbooks.`, + githubSourceControlUrl: ( + + {t`Example URLs for GIT Source Control include:`} +
      +
    • + https://github.com/ansible/ansible.git +
      • +
    • + git@github.com:ansible/ansible.git +
      • +
    • + git://servername.example.com/ansible.git +
      • +
    + {t`Note: When using SSH protocol for GitHub or + Bitbucket, enter an SSH key only, do not enter a username + (other than git). Additionally, GitHub and Bitbucket do + not support password authentication when using SSH. GIT + read only protocol (git://) does not use username or + password information.`} +     + ), + svnSourceControlUrl: ( + + {t`Example URLs for Subversion Source Control include:`} +
      +
    • + https://github.com/ansible/ansible +
      • +
    • + svn://servername.example.com/path +
      • +
    • + svn+ssh://servername.example.com/path +
      • +
    +     + ), + syncButtonDisabled: t`This project is currently on sync and cannot be clicked until sync process completed`, + archiveUrl: ( + + {t`Example URLs for Remote Archive Source Control include:`} +
      +
    • + https://github.com/username/project/archive/v0.0.1.tar.gz +
      • +
    • + https://github.com/username/project/archive/v0.0.2.zip +
      • +
    +     + ), + + sourceControlRefspec: ( + + {t`A refspec to fetch (passed to the Ansible git + module). This parameter allows access to references via + the branch field not otherwise available.`} +
    +
    + {t`Note: This field assumes the remote name is "origin".`} +
    +
    + {t`Examples include:`} +
      +
    • + refs/*:refs/remotes/origin/* +
      • +
    • + refs/pull/62/head:refs/remotes/origin/pull/62/head +
      • +
    + {t`The first fetches all references. The second + fetches the Github pull request number 62, in this example + the branch needs to be "pull/62/head".`} +
    +
    + {t`For more information, refer to the`}{' '} + + {t`Documentation.`} + +     + ), + branchFormField: t`Branch to checkout. In addition to branches, + you can input tags, commit hashes, and arbitrary refs. Some + commit hashes and refs may not be available unless you also + provide a custom refspec.`, + options: { + clean: t`Remove any local modifications prior to performing an update.`, + delete: t`Delete the local repository in its entirety prior to + performing an update. Depending on the size of the + repository this may significantly increase the amount + of time required to complete an update.`, + trackSubModules: t`Submodules will track the latest commit on + their master branch (or other branch specified in + .gitmodules). If no, submodules will be kept at + the revision specified by the main project. + This is equivalent to specifying the --remote + flag to git submodule update.`, + updateOnLaunch: t`Each time a job runs using this project, update the + revision of the project prior to starting the job.`, + allowBranchOverride: t`Allow changing the Source Control branch or revision in a job + template that uses this project.`, + cacheTimeout: t`Time in seconds to consider a project + to be current. During job runs and callbacks the task + system will evaluate the timestamp of the latest project + update. If it is older than Cache Timeout, it is not + considered current, and a new project update will be + performed.`, + }, +}); + +export default ProjectHelpTextStrings; diff --git a/awx/ui/src/screens/Project/shared/ProjectForm.js b/awx/ui/src/screens/Project/shared/ProjectForm.js index 930cd0644a..a07fed32f9 100644 --- a/awx/ui/src/screens/Project/shared/ProjectForm.js +++ b/awx/ui/src/screens/Project/shared/ProjectForm.js @@ -16,6 +16,7 @@ import ExecutionEnvironmentLookup from 'components/Lookup/ExecutionEnvironmentLo import { CredentialTypesAPI, ProjectsAPI } from 'api'; import { required } from 'util/validators'; import { FormColumnLayout, SubFormLayout } from 'components/FormLayout'; +import ProjectHelpTextStrings from './Project.helptext'; import { GitSubForm, SvnSubForm, @@ -195,7 +196,7 @@ function ProjectFormFields({ } onBlur={() => executionEnvironmentHelpers.setTouched()} value={executionEnvironmentField.value} - popoverContent={t`The execution environment that will be used for jobs that use this project. This will be used as fallback when an execution environment has not been explicitly assigned at the job template or workflow level.`} + popoverContent={ProjectHelpTextStrings.execution_environment} onChange={handleExecutionEnvironmentUpdate} tooltip={t`Select an organization before editing the default execution environment.`} globallyAvailable diff --git a/awx/ui/src/screens/Project/shared/ProjectSubForms/ArchiveSubForm.js b/awx/ui/src/screens/Project/shared/ProjectSubForms/ArchiveSubForm.js index 3475b76578..7fe1b52d84 100644 --- a/awx/ui/src/screens/Project/shared/ProjectSubForms/ArchiveSubForm.js +++ b/awx/ui/src/screens/Project/shared/ProjectSubForms/ArchiveSubForm.js @@ -1,7 +1,7 @@ import 'styled-components/macro'; import React from 'react'; +import ProjectHelpTextStrings from '../Project.helptext'; -import { t } from '@lingui/macro'; import { UrlFormField, ScmCredentialFormField, @@ -12,33 +12,18 @@ const ArchiveSubForm = ({ credential, onCredentialSelection, scmUpdateOnLaunch, -}) => ( - <> - - {t`Example URLs for Remote Archive Source Control include:`} -
      -
    • - - https://github.com/username/project/archive/v0.0.1.tar.gz - -
      • -
    • - - https://github.com/username/project/archive/v0.0.2.zip - -
      • -
    - - } - /> - - - -); +}) => { + const projectHelpText = ProjectHelpTextStrings(); + return ( + <> + + + + + ); +}; export default ArchiveSubForm; diff --git a/awx/ui/src/screens/Project/shared/ProjectSubForms/GitSubForm.js b/awx/ui/src/screens/Project/shared/ProjectSubForms/GitSubForm.js index aab7a6345e..09f7ad369c 100644 --- a/awx/ui/src/screens/Project/shared/ProjectSubForms/GitSubForm.js +++ b/awx/ui/src/screens/Project/shared/ProjectSubForms/GitSubForm.js @@ -1,10 +1,8 @@ import 'styled-components/macro'; import React from 'react'; - import { t } from '@lingui/macro'; import FormField from 'components/FormField'; -import { useConfig } from 'contexts/Config'; -import getDocsBaseUrl from 'util/getDocsBaseUrl'; + import { UrlFormField, BranchFormField, @@ -12,38 +10,17 @@ import { ScmTypeOptions, } from './SharedFields'; +import ProjectHelpTextStrings from '../Project.helptext'; + const GitSubForm = ({ credential, onCredentialSelection, scmUpdateOnLaunch, }) => { - const config = useConfig(); + const projectHelpStrings = ProjectHelpTextStrings(); return ( <> - - {t`Example URLs for GIT Source Control include:`} -
      -
    • - https://github.com/ansible/ansible.git -
      • -
    • - git@github.com:ansible/ansible.git -
      • -
    • - git://servername.example.com/ansible.git -
      • -
    - {t`Note: When using SSH protocol for GitHub or - Bitbucket, enter an SSH key only, do not enter a username - (other than git). Additionally, GitHub and Bitbucket do - not support password authentication when using SSH. GIT - read only protocol (git://) does not use username or - password information.`} - - } - /> + - {t`A refspec to fetch (passed to the Ansible git - module). This parameter allows access to references via - the branch field not otherwise available.`} -
    -
    - {t`Note: This field assumes the remote name is "origin".`} -
    -
    - {t`Examples include:`} -
      -
    • - refs/*:refs/remotes/origin/* -
      • -
    • - refs/pull/62/head:refs/remotes/origin/pull/62/head -
      • -
    - {t`The first fetches all references. The second - fetches the Github pull request number 62, in this example - the branch needs to be "pull/62/head".`} -
    -
    - {t`For more information, refer to the`}{' '} - - {t`Documentation.`} - - - } + tooltip={projectHelpStrings.sourceControlRefspec} /> { const brandName = useBrandName(); + const projectHelpStrings = ProjectHelpStrings(); const localPaths = [...new Set([...project_local_paths, localPath])]; const options = [ @@ -61,18 +63,7 @@ const ManualSubForm = ({ name="base_dir" type="text" isReadOnly - tooltip={ - - {t`Base path used for locating playbooks. Directories - found inside this path will be listed in the playbook directory drop-down. - Together the base path and selected playbook directory provide the full - path used to locate playbooks.`} -
    -
    - {t`Change PROJECTS_ROOT when deploying - ${brandName} to change this location.`} -     - } + tooltip={projectHelpStrings.projectBasePath} /> - } + labelIcon={} > ( ( /> ); -export const BranchFormField = ({ label }) => ( - -); +export const BranchFormField = ({ label }) => { + const projectHelpStrings = ProjectHelpTextStrings(); + return ( + + ); +}; export const ScmCredentialFormField = ({ credential, @@ -59,74 +60,66 @@ export const ScmCredentialFormField = ({ ); }; -export const ScmTypeOptions = ({ scmUpdateOnLaunch, hideAllowOverride }) => ( - - - - - - - - {!hideAllowOverride && ( - - )} - - +export const ScmTypeOptions = ({ scmUpdateOnLaunch, hideAllowOverride }) => { + const projectHelpStrings = ProjectHelpTextStrings(); + const { values } = useFormikContext(); - {scmUpdateOnLaunch && ( - <> - - {t`Option Details`} - - - - )} - -); + return ( + + + + + + {values.scm_type === 'git' ? ( + + ) : null} + + {!hideAllowOverride && ( + + )} + + + + {scmUpdateOnLaunch && ( + <> + + {t`Option Details`} + + + + )} + + ); +}; diff --git a/awx/ui/src/screens/Project/shared/ProjectSubForms/SvnSubForm.js b/awx/ui/src/screens/Project/shared/ProjectSubForms/SvnSubForm.js index b19e943dff..c64357515b 100644 --- a/awx/ui/src/screens/Project/shared/ProjectSubForms/SvnSubForm.js +++ b/awx/ui/src/screens/Project/shared/ProjectSubForms/SvnSubForm.js @@ -1,7 +1,8 @@ import 'styled-components/macro'; import React from 'react'; - import { t } from '@lingui/macro'; +import ProjectHelpTextStrings from '../Project.helptext'; + import { UrlFormField, BranchFormField, @@ -13,33 +14,19 @@ const SvnSubForm = ({ credential, onCredentialSelection, scmUpdateOnLaunch, -}) => ( - <> - - {t`Example URLs for Subversion Source Control include:`} -
      -
    • - https://github.com/ansible/ansible -
      • -
    • - svn://servername.example.com/path -
      • -
    • - svn+ssh://servername.example.com/path -
      • -
    - - } - /> - - - - -); +}) => { + const projectHelpStrings = ProjectHelpTextStrings(); + return ( + <> + + + + + + ); +}; export default SvnSubForm; diff --git a/awx/ui/src/screens/Project/shared/ProjectSyncButton.js b/awx/ui/src/screens/Project/shared/ProjectSyncButton.js index 68306b97d6..c3cb8479c7 100644 --- a/awx/ui/src/screens/Project/shared/ProjectSyncButton.js +++ b/awx/ui/src/screens/Project/shared/ProjectSyncButton.js @@ -11,6 +11,7 @@ import useRequest, { useDismissableError } from 'hooks/useRequest'; import AlertModal from 'components/AlertModal'; import ErrorDetail from 'components/ErrorDetail'; import { ProjectsAPI } from 'api'; +import ProjectHelpTextStrings from './Project.helptext'; function ProjectSyncButton({ projectId, lastJobStatus = null }) { const match = useRouteMatch(); @@ -21,7 +22,7 @@ function ProjectSyncButton({ projectId, lastJobStatus = null }) { }, [projectId]), null ); - + const projectHelpStrings = ProjectHelpTextStrings(); const { error, dismissError } = useDismissableError(syncError); const isDetailsView = match.url.endsWith('/details'); const isDisabled = ['pending', 'waiting', 'running'].includes(lastJobStatus); @@ -29,10 +30,7 @@ function ProjectSyncButton({ projectId, lastJobStatus = null }) { return ( <> {isDisabled ? ( - +