Merge pull request #84 from peterbe/83-help-to-add-whatsdeployed-badge-lacks-things

Help to add Whatsdeployed badge lacks things

Author: Peter Bengtsson

package.json

@@ -7,6 +7,7 @@
     "classnames": "2.2.6",
     "ky": "0.9.0",
     "react": "16.8.6",
+    "react-copy-to-clipboard": "5.0.1",
     "react-dom": "16.8.6",
     "react-router-dom": "5.0.0",
     "react-scripts": "2.1.8",

src/DeployPage.js

@@ -4,6 +4,7 @@ import ky from 'ky/umd';
 import TimeAgo from 'react-timeago';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import AutoProgressBar from './AutoProgressBar';
 import shortUrls from './shortUrls';
@@ -358,7 +359,12 @@ class DeployTable extends React.Component {
               Use the links below to compare directly on GitHub.
             </div>
           )}
-          <BadgesAndUrls deployInfo={deployInfo} shortUrl={shortUrl} />
+          <BadgesAndUrls
+            deployInfo={deployInfo}
+            shortUrl={shortUrl}
+            owner={owner}
+            repo={repo}
+          />
         </div>
       </>
     );
@@ -679,19 +685,51 @@ class Culprits extends React.PureComponent {
 
 class BadgesAndUrls extends React.Component {
   state = {
-    showHelp: false
+    showHelp: false,
+    textCopied: ''
   };
 
+  componentWillUnmount() {
+    this.dismounted = true;
+  }
+
   toggleHelp = () => {
     this.setState(state => ({ showHelp: !state.showHelp }));
   };
 
+  copiedText = textCopied => {
+    this.setState({ textCopied }, () => {
+      window.setTimeout(() => {
+        if (!this.dismounted) {
+          this.setState({ textCopied: '' });
+        }
+      }, 4 * 1000);
+    });
+  };
+
+  showCopyToClipboard = text => {
+    return (
+      <CopyToClipboard text={text} onCopy={() => this.copiedText(text)}>
+        <small>
+          <button
+            className="btn btn-outline-secondary btn-sm"
+            disabled={text === this.state.textCopied}
+          >
+            {text === this.state.textCopied
+              ? 'Copied to clipboard'
+              : 'Copy to clipboard'}
+          </button>
+        </small>
+      </CopyToClipboard>
+    );
+  };
+
   render() {
-    const { deployInfo, shortUrl } = this.props;
+    const { deployInfo, shortUrl, owner, repo } = this.props;
     const { showHelp } = this.state;
 
     const { protocol, host } = window.location;
-    const fullUrl = `${protocol}//${host}${shortUrl}`;
+    const fullUrl = `${protocol}//${host}${shortUrl}/${owner}/${repo}`;
     const envs = deployInfo.map(deploy => deploy.name.toLowerCase()).join(',');
     const badgeUrl = `https://img.shields.io/badge/whatsdeployed-${envs}-green.svg`;
     const badgeAlt = `What's deployed on ${envs}?`;
@@ -720,21 +758,19 @@ class BadgesAndUrls extends React.Component {
           <div>
             <h3>Badge Help</h3>
             <dl>
-              <dt>Image URL</dt>
+              <dt>Image URL {this.showCopyToClipboard(badgeUrl)}</dt>
               <dd>
-                <code>{badgeUrl}</code>
+                <pre>{badgeUrl}</pre>
               </dd>
-              <dt>Markdown</dt>
+              <dt>Markdown {this.showCopyToClipboard(markdown)}</dt>
               <dd>
-                <pre>
-                  <code>{markdown}</code>
-                </pre>
+                <pre>{markdown}</pre>
               </dd>
-              <dt>ReStructuredText</dt>
+              <dt>
+                ReStructuredText {this.showCopyToClipboard(restructuredText)}
+              </dt>
               <dd>
-                <pre>
-                  <code>{restructuredText}</code>
-                </pre>
+                <pre>{restructuredText}</pre>
               </dd>
             </dl>
           </div>

yarn.lock

@@ -2485,6 +2485,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz#f4e82f4a8830dce4666b7eb8ded0c9bcc313aba9"
+  integrity sha512-c3GdeY8qxCHGezVb1EFQfHYK/8NZRemgcTIzPq7PuxjHAf/raKibn2QdhHPb/y6q74PMgH6yizaDZlRmw6QyKw==
+  dependencies:
+    toggle-selection "^1.0.3"
+
 [email protected]:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.4.tgz#b8897c062c4d769dd30a0ac5c73976c47f92ea0d"
@@ -7993,6 +8000,14 @@ react-app-polyfill@^0.2.2:
     raf "3.4.1"
     whatwg-fetch "3.0.0"
 
+[email protected]:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e"
+  integrity sha512-ELKq31/E3zjFs5rDWNCfFL4NvNFQvGRoJdAKReD/rUPA+xxiLPQmZBZBvy2vgH7V0GE9isIQpT9WXbwIVErYdA==
+  dependencies:
+    copy-to-clipboard "^3"
+    prop-types "^15.5.8"
+
 react-dev-utils@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-8.0.0.tgz#7c5b227a45a32ea8ff7fbc318f336cf9e2c6e34c"
@@ -9471,6 +9486,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.3:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 [email protected]:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/topo/-/topo-2.0.2.tgz#cd5615752539057c0dc0491a621c3bc6fbe1d182"