From 40cd87f25352993259208d487af75e008a09b2c4 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Wed, 3 Jun 2020 14:38:05 -0400
Subject: [PATCH] Adds message for unsynced projects for copy to clipboard
 button

---
 .../ClipboardCopyButton.jsx                   | 10 ++++++-
 .../ClipboardCopyButton.test.jsx              | 13 ++++++++
 .../Project/ProjectList/ProjectListItem.jsx   | 23 +++++++++-----
 .../ProjectList/ProjectListItem.test.jsx      | 30 +++++++++++++++++++
 4 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx b/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx
index 8fcac00468..30367bff79 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 {
+      clickTip,
+      entryDelay,
+      exitDelay,
+      hoverTip,
+      isDisabled,
+    } = this.props;
     const { copied } = this.state;
 
     return (
@@ -51,6 +57,7 @@ class ClipboardCopyButton extends React.Component {
         content={copied ? clickTip : hoverTip}
       >
         <Button
+          isDisabled={isDisabled}
           variant="plain"
           onClick={this.handleCopyClick}
           aria-label={hoverTip}
@@ -69,6 +76,7 @@ ClipboardCopyButton.propTypes = {
   hoverTip: 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(
+      <ClipboardCopyButton
+        clickTip="foo"
+        hoverTip="bar"
+        stringToCopy="foobar!"
+        isDisabled
+      />
+    );
+    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..c5090dfa30 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({
             </DataListCell>,
             <DataListCell key="revision">
               {project.scm_revision.substring(0, 7)}
-              {project.scm_revision ? (
-                <ClipboardCopyButton
-                  stringToCopy={project.scm_revision}
-                  hoverTip={i18n._(t`Copy full revision to clipboard.`)}
-                  clickTip={i18n._(t`Successfully copied to clipboard!`)}
-                />
-              ) : null}
+              {!project.scm_revision && (
+                <Label aria-label={i18n._(t`copy to clipboard disabled`)}>
+                  {i18n._(t`Sync to activate`)}
+                </Label>
+              )}
+              <ClipboardCopyButton
+                isDisabled={!project.scm_revision}
+                stringToCopy={project.scm_revision}
+                hoverTip={i18n._(t`Copy full revision to clipboard.`)}
+                clickTip={i18n._(t`Successfully copied to clipboard!`)}
+              />
             </DataListCell>,
           ]}
         />
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..d833d58c27 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('<ProjectsListItem />', () => {
     );
     expect(wrapper.find('CopyButton').length).toBe(0);
   });
+  test('should render disabled copy to clipboard button', () => {
+    const wrapper = mountWithContexts(
+      <ProjectsListItem
+        isSelected={false}
+        detailUrl="/project/1"
+        onSelect={() => {}}
+        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 to activate');
+    expect(wrapper.find('ClipboardCopyButton').prop('isDisabled')).toBe(true);
+  });
 });