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 1/2] 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);
+  });
 });

From edb0df788b0934b38f885e9610618072b13bf2e7 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Fri, 5 Jun 2020 10:46:45 -0400
Subject: [PATCH 2/2] Improves copy clipaboard message and some prop names

---
 .../ClipboardCopyButton/ClipboardCopyButton.jsx      | 12 ++++++------
 .../screens/Project/ProjectList/ProjectListItem.jsx  |  6 +++---
 .../Project/ProjectList/ProjectListItem.test.jsx     |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx b/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx
index 30367bff79..f2f8b855d6 100644
--- a/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx
+++ b/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx
@@ -41,10 +41,10 @@ class ClipboardCopyButton extends React.Component {
 
   render() {
     const {
-      clickTip,
+      copyTip,
       entryDelay,
       exitDelay,
-      hoverTip,
+      copiedSuccessTip,
       isDisabled,
     } = this.props;
     const { copied } = this.state;
@@ -54,13 +54,13 @@ class ClipboardCopyButton extends React.Component {
         entryDelay={entryDelay}
         exitDelay={exitDelay}
         trigger="mouseenter focus click"
-        content={copied ? clickTip : hoverTip}
+        content={copied ? copiedSuccessTip : copyTip}
       >
         <Button
           isDisabled={isDisabled}
           variant="plain"
           onClick={this.handleCopyClick}
-          aria-label={hoverTip}
+          aria-label={copyTip}
         >
           <CopyIcon />
         </Button>
@@ -70,10 +70,10 @@ 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,
diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
index c5090dfa30..d5651a130e 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
@@ -128,14 +128,14 @@ function ProjectListItem({
               {project.scm_revision.substring(0, 7)}
               {!project.scm_revision && (
                 <Label aria-label={i18n._(t`copy to clipboard disabled`)}>
-                  {i18n._(t`Sync to activate`)}
+                  {i18n._(t`Sync for revision`)}
                 </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!`)}
+                copyTip={i18n._(t`Copy full revision to clipboard.`)}
+                copiedSuccessTip={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 d833d58c27..7866015703 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.test.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.test.jsx
@@ -245,7 +245,7 @@ describe('<ProjectsListItem />', () => {
     );
     expect(
       wrapper.find('span[aria-label="copy to clipboard disabled"]').text()
-    ).toBe('Sync to activate');
+    ).toBe('Sync for revision');
     expect(wrapper.find('ClipboardCopyButton').prop('isDisabled')).toBe(true);
   });
 });