[GitHub] couchdb-fauxton pull request #825: 3192 - Rip and replace zeroclipboard with...

[millayr]

Github user millayr closed the pull request at:

https://github.com/apache/couchdb-fauxton/pull/825


---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastruct...@apache.org or file a JIRA ticket
with INFRA.
---

[GitHub] couchdb-fauxton pull request #825: 3192 - Rip and replace zeroclipboard with...

[millayr]

GitHub user millayr reopened a pull request:

https://github.com/apache/couchdb-fauxton/pull/825

3192 - Rip and replace zeroclipboard with clipboardjs

Removing flash-based zeroclipboard.
Created generic React Copy component using clipboard.js.

Relevant JIRA ticket:  https://issues.apache.org/jira/browse/COUCHDB-3192
Relevant Cloudant ticket:  https://cloudant.fogbugz.com/f/cases/76320/

You can merge this pull request into a Git repository by running:

$ git pull https://github.com/millayr/couchdb-fauxton switch-to-clipboardjs

Alternatively you can review and apply these changes as the patch at:

https://github.com/apache/couchdb-fauxton/pull/825.patch

To close this pull request, make a commit to your master/trunk branch
with (at least) the following in the commit message:

This closes #825


commit 85f13e56e7d2956533a8af3438963e2d0e4406f2
Author: Ryan Millay 
Date:   2016-12-19T20:38:11Z

rip and replace zeroclipboard with clipboardjs

commit f43521a95e8e39f98ae324b9d36fe425dade3461
Author: Ryan Millay 
Date:   2016-12-21T18:23:00Z

Adding jest unit test

commit b807a681ab68280d89c819c20844c45e26830748
Author: Ryan Millay 
Date:   2016-12-22T15:41:05Z

adding nightwatch tests

commit 55a71842385df426963eaf6f773fd540ad9f2147
Author: Ryan Millay 
Date:   2016-12-22T15:54:50Z

removing trailing space and stale css

commit 329a34bf470a7eb8b505910abb5902845dea59a4
Author: Ryan Millay 
Date:   2016-12-22T17:00:25Z

fixing git discrepancies with components.react.jsx and addressing Robert's 
comments

commit 999011de3e65e517955ffd1fd0e6b9225338703d
Author: Ryan Millay 
Date:   2016-12-22T17:48:18Z

Removing invalid exports

commit f88c5d48b9d947837532ef7ad60d9fcb6d97ca4b
Author: Ryan Millay 
Date:   2016-12-22T17:50:22Z

Switching var's to const's

commit 931298838b1fed77dcc2d4660e03ebe63017cc0e
Author: Ryan Millay 
Date:   2016-12-22T19:47:01Z

Adding waitForElementVisible check to robustify the test

commit 6f9e081000121018dbf05aa83a71d53b80fe7ecb
Author: Ryan Millay 
Date:   2016-12-22T20:24:21Z

Robustifying some more tests




---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastruct...@apache.org or file a JIRA ticket
with INFRA.
---

[GitHub] couchdb-fauxton pull request #825: 3192 - Rip and replace zeroclipboard with...

[millayr]

Github user millayr closed the pull request at:

https://github.com/apache/couchdb-fauxton/pull/825


---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastruct...@apache.org or file a JIRA ticket
with INFRA.
---

[GitHub] couchdb-fauxton pull request #825: 3192 - Rip and replace zeroclipboard with...

[millayr]

GitHub user millayr reopened a pull request:

https://github.com/apache/couchdb-fauxton/pull/825

3192 - Rip and replace zeroclipboard with clipboardjs

Removing flash-based zeroclipboard.
Created generic React Copy component using clipboard.js.

Relevant JIRA ticket:  https://issues.apache.org/jira/browse/COUCHDB-3192
Relevant Cloudant ticket:  https://cloudant.fogbugz.com/f/cases/76320/

You can merge this pull request into a Git repository by running:

$ git pull https://github.com/millayr/couchdb-fauxton switch-to-clipboardjs

Alternatively you can review and apply these changes as the patch at:

https://github.com/apache/couchdb-fauxton/pull/825.patch

To close this pull request, make a commit to your master/trunk branch
with (at least) the following in the commit message:

This closes #825


commit 85f13e56e7d2956533a8af3438963e2d0e4406f2
Author: Ryan Millay 
Date:   2016-12-19T20:38:11Z

rip and replace zeroclipboard with clipboardjs

commit f43521a95e8e39f98ae324b9d36fe425dade3461
Author: Ryan Millay 
Date:   2016-12-21T18:23:00Z

Adding jest unit test

commit b807a681ab68280d89c819c20844c45e26830748
Author: Ryan Millay 
Date:   2016-12-22T15:41:05Z

adding nightwatch tests

commit 55a71842385df426963eaf6f773fd540ad9f2147
Author: Ryan Millay 
Date:   2016-12-22T15:54:50Z

removing trailing space and stale css

commit 329a34bf470a7eb8b505910abb5902845dea59a4
Author: Ryan Millay 
Date:   2016-12-22T17:00:25Z

fixing git discrepancies with components.react.jsx and addressing Robert's 
comments

commit 999011de3e65e517955ffd1fd0e6b9225338703d
Author: Ryan Millay 
Date:   2016-12-22T17:48:18Z

Removing invalid exports

commit f88c5d48b9d947837532ef7ad60d9fcb6d97ca4b
Author: Ryan Millay 
Date:   2016-12-22T17:50:22Z

Switching var's to const's

commit 931298838b1fed77dcc2d4660e03ebe63017cc0e
Author: Ryan Millay 
Date:   2016-12-22T19:47:01Z

Adding waitForElementVisible check to robustify the test




---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastruct...@apache.org or file a JIRA ticket
with INFRA.
---

[GitHub] couchdb-fauxton pull request #825: 3192 - Rip and replace zeroclipboard with...

[millayr]

Github user millayr closed the pull request at:

https://github.com/apache/couchdb-fauxton/pull/825


---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastruct...@apache.org or file a JIRA ticket
with INFRA.
---

[GitHub] couchdb-fauxton pull request #825: 3192 - Rip and replace zeroclipboard with...

[robertkowalski]

Github user robertkowalski commented on a diff in the pull request:

https://github.com/apache/couchdb-fauxton/pull/825#discussion_r93653925
  
--- Diff: app/addons/fauxton/components.react.jsx ---
@@ -14,180 +14,126 @@ import app from "../../app";
 import FauxtonAPI from "../../core/api";
 import React from "react";
 import ReactDOM from "react-dom";
-import ZeroClipboard from "zeroclipboard";
 import { Modal } from "react-bootstrap";
 import "velocity-animate/velocity";
 import "velocity-animate/velocity.ui";
-import "zeroclipboard/dist/ZeroClipboard.swf";
-
-function getZeroClipboardSwfPath () {
-  return './dashboard.assets/ZeroClipboard.swf';
-}
-
-// super basic right now, but can be expanded later to handle all the 
varieties of copy-to-clipboards
-// (target content element, custom label, classes, notifications, etc.)
-var Clipboard = React.createClass({
-  propTypes: function () {
-return {
-  text: React.PropTypes.string.isRequired,
-  displayType: React.PropTypes.string.oneOf(['icon', 'text'])
-};
-  },
 
+// formats a block of code and pretty-prints it in the page. Currently 
uses the prettyPrint plugin
+var CodeFormat = React.createClass({
   getDefaultProps: function () {
 return {
-  displayType: 'icon',
-  textDisplay: 'Copy',
-  onClipboardClick: function () { },
-  title: 'Copy to clipboard'
+  lang: "js"
 };
   },
 
-  componentWillMount: function () {
-ZeroClipboard.config({ swfPath: getZeroClipboardSwfPath() });
-  },
+  getClasses: function () {
+// added for forward compatibility. This component defines an api via 
it's props so you can pass lang="N" and
+// not the class that prettyprint requires for that lang. If (when, 
hopefully!) we drop prettyprint we won't
+// have any change this component's props API and break things
+var classMap = {
+  js: 'lang-js'
+};
 
-  getClipboardElement: function () {
-if (this.props.displayType === 'icon') {
-  return ();
+var classNames = 'prettyprint';
+if (_.has(classMap, this.props.lang)) {
+  classNames += ' ' + classMap[this.props.lang];
 }
-return this.props.textDisplay;
+return classNames;
   },
 
   componentDidMount: function () {
-var el = ReactDOM.findDOMNode(this);
-  this.clipboard = new ZeroClipboard(el);
-  this.clipboard.on('ready', function () {
-this.clipboard.on('copy', function () {
-  this.props.onClipboardClick();
-}.bind(this));
-  }.bind(this));
-
-  this.clipboard.on('error', function (event) {
-console.log('ZeroClipboard error of type "' + event.name + '": ' + 
event.message);
-  });
-  },
-
-  onClick: function (event) {
-event.preventDefault();
+// this one function is all the lib offers. It parses the entire page 
and pretty-prints anything with
+// a .prettyprint class; only executes on an element once
+prettyPrint();
   },
 
   render: function () {
+var code = JSON.stringify(this.props.code, null, " ");
 return (
-  
-{this.getClipboardElement()}
-  
+  {code}
 );
   }
 });
 
-// use like this:
-//  
-//  
-// pass in the text and a unique key, the key has to be unique or you'll 
get a warning
-var ClipboardWithTextField = React.createClass({
+var _NextTrayInternalId = 0;
+var Tray = React.createClass({
+
   propTypes: {
-onClipBoardClick: React.PropTypes.func.isRequired,
-textToCopy: React.PropTypes.string.isRequired,
-uniqueKey: React.PropTypes.string.isRequired,
-showCopyIcon: React.PropTypes.bool
+onAutoHide: React.PropTypes.func
   },
 
   getDefaultProps: function () {
 return {
-  showCopyIcon: true,
-  text: 'Copy'
+  onAutoHide: function () { }
 };
   },
 
-  componentWillMount: function () {
-ZeroClipboard.config({ swfPath: getZeroClipboardSwfPath() });
+  getInitialState: function () {
+return {
+  show: false,
+  internalid: (_NextTrayInternalId++)
+};
   },
 
-  componentDidMount: function () {
-var el = ReactDOM.findDOMNode(this.refs["copy-text-" + 
this.props.uniqueKey]);
-this.clipboard = new ZeroClipboard(el);
-this.clipboard.on('ready', function () {
-  this.clipboard.on('copy', function () {
-this.props.onClipBoardClick();
-  }.bind(this));
-}.bind(this));
+  toggle: function (done) {
+if (this.state.show) {
+  this.hide(done);
+} else {
+  

[GitHub] couchdb-fauxton pull request #825: 3192 - Rip and replace zeroclipboard with...

[robertkowalski]

Github user robertkowalski commented on a diff in the pull request:

https://github.com/apache/couchdb-fauxton/pull/825#discussion_r93653979
  
--- Diff: app/addons/fauxton/components.react.jsx ---
@@ -14,180 +14,126 @@ import app from "../../app";
 import FauxtonAPI from "../../core/api";
 import React from "react";
 import ReactDOM from "react-dom";
-import ZeroClipboard from "zeroclipboard";
 import { Modal } from "react-bootstrap";
 import "velocity-animate/velocity";
 import "velocity-animate/velocity.ui";
-import "zeroclipboard/dist/ZeroClipboard.swf";
-
-function getZeroClipboardSwfPath () {
-  return './dashboard.assets/ZeroClipboard.swf';
-}
-
-// super basic right now, but can be expanded later to handle all the 
varieties of copy-to-clipboards
-// (target content element, custom label, classes, notifications, etc.)
-var Clipboard = React.createClass({
-  propTypes: function () {
-return {
-  text: React.PropTypes.string.isRequired,
-  displayType: React.PropTypes.string.oneOf(['icon', 'text'])
-};
-  },
 
+// formats a block of code and pretty-prints it in the page. Currently 
uses the prettyPrint plugin
+var CodeFormat = React.createClass({
   getDefaultProps: function () {
 return {
-  displayType: 'icon',
-  textDisplay: 'Copy',
-  onClipboardClick: function () { },
-  title: 'Copy to clipboard'
+  lang: "js"
 };
   },
 
-  componentWillMount: function () {
-ZeroClipboard.config({ swfPath: getZeroClipboardSwfPath() });
-  },
+  getClasses: function () {
+// added for forward compatibility. This component defines an api via 
it's props so you can pass lang="N" and
+// not the class that prettyprint requires for that lang. If (when, 
hopefully!) we drop prettyprint we won't
+// have any change this component's props API and break things
+var classMap = {
+  js: 'lang-js'
+};
 
-  getClipboardElement: function () {
-if (this.props.displayType === 'icon') {
-  return ();
+var classNames = 'prettyprint';
+if (_.has(classMap, this.props.lang)) {
+  classNames += ' ' + classMap[this.props.lang];
 }
-return this.props.textDisplay;
+return classNames;
   },
 
   componentDidMount: function () {
-var el = ReactDOM.findDOMNode(this);
-  this.clipboard = new ZeroClipboard(el);
-  this.clipboard.on('ready', function () {
-this.clipboard.on('copy', function () {
-  this.props.onClipboardClick();
-}.bind(this));
-  }.bind(this));
-
-  this.clipboard.on('error', function (event) {
-console.log('ZeroClipboard error of type "' + event.name + '": ' + 
event.message);
-  });
-  },
-
-  onClick: function (event) {
-event.preventDefault();
+// this one function is all the lib offers. It parses the entire page 
and pretty-prints anything with
+// a .prettyprint class; only executes on an element once
+prettyPrint();
   },
 
   render: function () {
+var code = JSON.stringify(this.props.code, null, " ");
 return (
-  
-{this.getClipboardElement()}
-  
+  {code}
 );
   }
 });
 
-// use like this:
-//  
-//  
-// pass in the text and a unique key, the key has to be unique or you'll 
get a warning
-var ClipboardWithTextField = React.createClass({
+var _NextTrayInternalId = 0;
+var Tray = React.createClass({
+
   propTypes: {
-onClipBoardClick: React.PropTypes.func.isRequired,
-textToCopy: React.PropTypes.string.isRequired,
-uniqueKey: React.PropTypes.string.isRequired,
-showCopyIcon: React.PropTypes.bool
+onAutoHide: React.PropTypes.func
   },
 
   getDefaultProps: function () {
 return {
-  showCopyIcon: true,
-  text: 'Copy'
+  onAutoHide: function () { }
 };
   },
 
-  componentWillMount: function () {
-ZeroClipboard.config({ swfPath: getZeroClipboardSwfPath() });
+  getInitialState: function () {
+return {
+  show: false,
+  internalid: (_NextTrayInternalId++)
+};
   },
 
-  componentDidMount: function () {
-var el = ReactDOM.findDOMNode(this.refs["copy-text-" + 
this.props.uniqueKey]);
-this.clipboard = new ZeroClipboard(el);
-this.clipboard.on('ready', function () {
-  this.clipboard.on('copy', function () {
-this.props.onClipBoardClick();
-  }.bind(this));
-}.bind(this));
+  toggle: function (done) {
+if (this.state.show) {
+  this.hide(done);
+} else {
+  

[GitHub] couchdb-fauxton pull request #825: 3192 - Rip and replace zeroclipboard with...

[robertkowalski]

Github user robertkowalski commented on a diff in the pull request:

https://github.com/apache/couchdb-fauxton/pull/825#discussion_r93653495
  
--- Diff: app/addons/fauxton/components.react.jsx ---
@@ -14,180 +14,126 @@ import app from "../../app";
 import FauxtonAPI from "../../core/api";
 import React from "react";
 import ReactDOM from "react-dom";
-import ZeroClipboard from "zeroclipboard";
 import { Modal } from "react-bootstrap";
 import "velocity-animate/velocity";
 import "velocity-animate/velocity.ui";
-import "zeroclipboard/dist/ZeroClipboard.swf";
-
-function getZeroClipboardSwfPath () {
-  return './dashboard.assets/ZeroClipboard.swf';
-}
-
-// super basic right now, but can be expanded later to handle all the 
varieties of copy-to-clipboards
-// (target content element, custom label, classes, notifications, etc.)
-var Clipboard = React.createClass({
-  propTypes: function () {
-return {
-  text: React.PropTypes.string.isRequired,
-  displayType: React.PropTypes.string.oneOf(['icon', 'text'])
-};
-  },
 
+// formats a block of code and pretty-prints it in the page. Currently 
uses the prettyPrint plugin
+var CodeFormat = React.createClass({
   getDefaultProps: function () {
 return {
-  displayType: 'icon',
-  textDisplay: 'Copy',
-  onClipboardClick: function () { },
-  title: 'Copy to clipboard'
+  lang: "js"
 };
   },
 
-  componentWillMount: function () {
-ZeroClipboard.config({ swfPath: getZeroClipboardSwfPath() });
-  },
+  getClasses: function () {
+// added for forward compatibility. This component defines an api via 
it's props so you can pass lang="N" and
+// not the class that prettyprint requires for that lang. If (when, 
hopefully!) we drop prettyprint we won't
+// have any change this component's props API and break things
+var classMap = {
+  js: 'lang-js'
+};
 
-  getClipboardElement: function () {
-if (this.props.displayType === 'icon') {
-  return ();
+var classNames = 'prettyprint';
+if (_.has(classMap, this.props.lang)) {
+  classNames += ' ' + classMap[this.props.lang];
 }
-return this.props.textDisplay;
+return classNames;
   },
 
   componentDidMount: function () {
-var el = ReactDOM.findDOMNode(this);
-  this.clipboard = new ZeroClipboard(el);
-  this.clipboard.on('ready', function () {
-this.clipboard.on('copy', function () {
-  this.props.onClipboardClick();
-}.bind(this));
-  }.bind(this));
-
-  this.clipboard.on('error', function (event) {
-console.log('ZeroClipboard error of type "' + event.name + '": ' + 
event.message);
-  });
-  },
-
-  onClick: function (event) {
-event.preventDefault();
+// this one function is all the lib offers. It parses the entire page 
and pretty-prints anything with
+// a .prettyprint class; only executes on an element once
+prettyPrint();
   },
 
   render: function () {
+var code = JSON.stringify(this.props.code, null, " ");
--- End diff --

const


---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastruct...@apache.org or file a JIRA ticket
with INFRA.
---

[GitHub] couchdb-fauxton pull request #825: 3192 - Rip and replace zeroclipboard with...

[robertkowalski]

Github user robertkowalski commented on a diff in the pull request:

https://github.com/apache/couchdb-fauxton/pull/825#discussion_r93653242
  
--- Diff: app/addons/fauxton/assets/less/components.less ---
@@ -44,6 +40,7 @@
 
 }
 
-a.clipboard-copy-element:hover {
-  text-decoration: none;
-}
+button.clipboard-copy-element {
+  background: transparent;
+  border: 0;
+}
--- End diff --

trailing whitespace at EOF missing

you can set your editor to automatically add them


---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastruct...@apache.org or file a JIRA ticket
with INFRA.
---

[GitHub] couchdb-fauxton pull request #825: 3192 - Rip and replace zeroclipboard with...

[robertkowalski]

Github user robertkowalski commented on a diff in the pull request:

https://github.com/apache/couchdb-fauxton/pull/825#discussion_r93654957
  
--- Diff: app/addons/fauxton/components.react.jsx ---
@@ -14,180 +14,126 @@ import app from "../../app";
 import FauxtonAPI from "../../core/api";
 import React from "react";
 import ReactDOM from "react-dom";
-import ZeroClipboard from "zeroclipboard";
 import { Modal } from "react-bootstrap";
 import "velocity-animate/velocity";
 import "velocity-animate/velocity.ui";
-import "zeroclipboard/dist/ZeroClipboard.swf";
-
-function getZeroClipboardSwfPath () {
-  return './dashboard.assets/ZeroClipboard.swf';
-}
-
-// super basic right now, but can be expanded later to handle all the 
varieties of copy-to-clipboards
-// (target content element, custom label, classes, notifications, etc.)
-var Clipboard = React.createClass({
-  propTypes: function () {
-return {
-  text: React.PropTypes.string.isRequired,
-  displayType: React.PropTypes.string.oneOf(['icon', 'text'])
-};
-  },
 
+// formats a block of code and pretty-prints it in the page. Currently 
uses the prettyPrint plugin
+var CodeFormat = React.createClass({
   getDefaultProps: function () {
 return {
-  displayType: 'icon',
-  textDisplay: 'Copy',
-  onClipboardClick: function () { },
-  title: 'Copy to clipboard'
+  lang: "js"
 };
   },
 
-  componentWillMount: function () {
-ZeroClipboard.config({ swfPath: getZeroClipboardSwfPath() });
-  },
+  getClasses: function () {
+// added for forward compatibility. This component defines an api via 
it's props so you can pass lang="N" and
+// not the class that prettyprint requires for that lang. If (when, 
hopefully!) we drop prettyprint we won't
+// have any change this component's props API and break things
+var classMap = {
+  js: 'lang-js'
+};
 
-  getClipboardElement: function () {
-if (this.props.displayType === 'icon') {
-  return ();
+var classNames = 'prettyprint';
+if (_.has(classMap, this.props.lang)) {
+  classNames += ' ' + classMap[this.props.lang];
 }
-return this.props.textDisplay;
+return classNames;
   },
 
   componentDidMount: function () {
-var el = ReactDOM.findDOMNode(this);
-  this.clipboard = new ZeroClipboard(el);
-  this.clipboard.on('ready', function () {
-this.clipboard.on('copy', function () {
-  this.props.onClipboardClick();
-}.bind(this));
-  }.bind(this));
-
-  this.clipboard.on('error', function (event) {
-console.log('ZeroClipboard error of type "' + event.name + '": ' + 
event.message);
-  });
-  },
-
-  onClick: function (event) {
-event.preventDefault();
+// this one function is all the lib offers. It parses the entire page 
and pretty-prints anything with
+// a .prettyprint class; only executes on an element once
+prettyPrint();
   },
 
   render: function () {
+var code = JSON.stringify(this.props.code, null, " ");
 return (
-  
-{this.getClipboardElement()}
-  
+  {code}
 );
   }
 });
 
-// use like this:
-//  
-//  
-// pass in the text and a unique key, the key has to be unique or you'll 
get a warning
-var ClipboardWithTextField = React.createClass({
+var _NextTrayInternalId = 0;
+var Tray = React.createClass({
--- End diff --

tray? i think this is deleted code? maybe from a wrongly resolved conflict?


---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastruct...@apache.org or file a JIRA ticket
with INFRA.
---