Merge pull request #6107 from gyandeeps/issue5790

Update: Add copy to clipboard for about brave page (fixes #5790)

Author: bbondy

.gitignore

@@ -64,3 +64,6 @@ httpse.leveldb
 
 # vim swap files
 *.swp
+
+# webstrom
+.idea

js/about/brave.js

@@ -6,12 +6,17 @@ const React = require('react')
 const Immutable = require('immutable')
 const messages = require('../constants/messages')
 const SortableTable = require('../components/sortableTable')
+const aboutActions = require('./aboutActions')
 
 const ipc = window.chrome.ipc
 
 require('../../less/about/history.less')
 require('../../node_modules/font-awesome/css/font-awesome.css')
 
+const tranformVersionInfoToString = (versionInformation) =>
+  versionInformation
+    .reduce((coll, entry) => `${coll} \n${entry.get('name')}: ${entry.get('version')}`, '')
+
 class AboutBrave extends React.Component {
   constructor () {
     super()
@@ -21,6 +26,11 @@ class AboutBrave extends React.Component {
         this.setState({versionInformation: Immutable.fromJS(versionInformation)})
       }
     })
+    this.onCopy = this.onCopy.bind(this)
+  }
+
+  onCopy () {
+    aboutActions.setClipboard(tranformVersionInfoToString(this.state.versionInformation))
   }
 
   render () {
@@ -30,7 +40,10 @@ class AboutBrave extends React.Component {
       </div>
 
       <div className='siteDetailsPageContent aboutAbout'>
-        <div className='sectionTitle' data-l10n-id='versionInformation' />
+        <div className='title'>
+          <span className='sectionTitle' data-l10n-id='versionInformation' />
+          <span className='fa fa-clipboard' title='Copy password to clipboard' onClick={this.onCopy} />
+        </div>
         <SortableTable
           headings={['Name', 'Version']}
           rows={this.state.versionInformation.map((entry) => [

less/about/siteDetails.less

@@ -78,10 +78,16 @@ body {
     display: block;
     clear: both;
 
+    .title {
+      width: 400px;
+      display: flex;
+      justify-content: space-between;
+      margin-left: @aboutPageSectionPadding;
+    }
+
     .sectionTitle {
       font-size: 16px;
       margin-bottom: 12px;
-      padding-left: @aboutPageSectionPadding;
     }
   }
 }