diff --git a/awx/ui/src/components/DetailList/Detail.js b/awx/ui/src/components/DetailList/Detail.js index 10ce9f20ed45..f539f6f9086f 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 2a7c4983235b..bbde5e329795 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 08459da2d824..f1ef78e1aeba 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 a2444cf509de..01be85969082 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 000000000000..4488c15dfd46 --- /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 930cd0644a62..a07fed32f946 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 3475b7657823..7fe1b52d84ec 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 aab7a6345e7f..09f7ad369ce7 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(); + + return ( + + + + + + {values.scm_type === 'git' ? ( + + ) : null} - )} - - + {!hideAllowOverride && ( + + )} + + - {scmUpdateOnLaunch && ( - <> - - {t`Option Details`} - - - - )} - -); + {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 b19e943dffe8..c64357515b6e 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 68306b97d6a9..c3cb8479c7f9 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 ? ( - +