diff --git a/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx b/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx index 8fcac00468..f2f8b855d6 100644 --- a/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx +++ b/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx @@ -40,7 +40,13 @@ class ClipboardCopyButton extends React.Component { }; render() { - const { clickTip, entryDelay, exitDelay, hoverTip } = this.props; + const { + copyTip, + entryDelay, + exitDelay, + copiedSuccessTip, + isDisabled, + } = this.props; const { copied } = this.state; return ( @@ -48,12 +54,13 @@ class ClipboardCopyButton extends React.Component { entryDelay={entryDelay} exitDelay={exitDelay} trigger="mouseenter focus click" - content={copied ? clickTip : hoverTip} + content={copied ? copiedSuccessTip : copyTip} > @@ -63,12 +70,13 @@ class ClipboardCopyButton extends React.Component { } ClipboardCopyButton.propTypes = { - clickTip: PropTypes.string.isRequired, + copyTip: PropTypes.string.isRequired, entryDelay: PropTypes.number, exitDelay: PropTypes.number, - hoverTip: PropTypes.string.isRequired, + copiedSuccessTip: PropTypes.string.isRequired, stringToCopy: PropTypes.string.isRequired, switchDelay: PropTypes.number, + isDisabled: PropTypes.bool.isRequired, }; ClipboardCopyButton.defaultProps = { diff --git a/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.test.jsx b/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.test.jsx index 4ba32fb51d..35836c0634 100644 --- a/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.test.jsx +++ b/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.test.jsx @@ -13,6 +13,7 @@ describe('ClipboardCopyButton', () => { clickTip="foo" hoverTip="bar" stringToCopy="foobar!" + isDisabled={false} /> ); expect(wrapper).toHaveLength(1); @@ -23,6 +24,7 @@ describe('ClipboardCopyButton', () => { clickTip="foo" hoverTip="bar" stringToCopy="foobar!" + isDisabled={false} /> ).find('ClipboardCopyButton'); expect(wrapper.state('copied')).toBe(false); @@ -33,4 +35,15 @@ describe('ClipboardCopyButton', () => { wrapper.update(); expect(wrapper.state('copied')).toBe(false); }); + test('should render disabled button', () => { + const wrapper = mountWithContexts( + + ); + expect(wrapper.find('Button').prop('isDisabled')).toBe(true); + }); }); diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx index 614062109f..d5651a130e 100644 --- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx +++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx @@ -32,6 +32,11 @@ const DataListAction = styled(_DataListAction)` grid-gap: 16px; grid-template-columns: repeat(3, 40px); `; + +const Label = styled.span` + color: var(--pf-global--disabled-color--100); +`; + function ProjectListItem({ project, isSelected, @@ -121,13 +126,17 @@ function ProjectListItem({ , {project.scm_revision.substring(0, 7)} - {project.scm_revision ? ( - - ) : null} + {!project.scm_revision && ( + + )} + , ]} /> diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.test.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.test.jsx index 9dfa8e8f1b..7866015703 100644 --- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.test.jsx +++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.test.jsx @@ -218,4 +218,34 @@ describe('', () => { ); expect(wrapper.find('CopyButton').length).toBe(0); }); + test('should render disabled copy to clipboard button', () => { + const wrapper = mountWithContexts( + {}} + project={{ + id: 1, + name: 'Project 1', + url: '/api/v2/projects/1', + type: 'project', + scm_type: 'git', + scm_revision: '', + summary_fields: { + last_job: { + id: 9000, + status: 'successful', + }, + user_capabilities: { + edit: true, + }, + }, + }} + /> + ); + expect( + wrapper.find('span[aria-label="copy to clipboard disabled"]').text() + ).toBe('Sync for revision'); + expect(wrapper.find('ClipboardCopyButton').prop('isDisabled')).toBe(true); + }); });