Merge pull request #1293 from ethereum/fixGists

Fix gists

package.json

@@ -24,6 +24,7 @@
     "exorcist": "^0.4.0",
     "fast-async": "6.3.1",
     "fast-levenshtein": "^2.0.6",
+    "gists": "^1.0.1",
     "javascript-serialize": "^1.6.1",
     "jquery": "^3.3.1",
     "js-base64": "^2.1.9",

src/app.js

@@ -556,7 +556,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   })
 
   // Add files received from remote instance (i.e. another remix-ide)
-  function loadFiles (filesSet, fileProvider) {
+  function loadFiles (filesSet, fileProvider, callback) {
     if (!fileProvider) fileProvider = 'browser'
 
     async.each(Object.keys(filesSet), (file, callback) => {
@@ -573,6 +573,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
       })
     }, (error) => {
       if (!error) fileManager.switchFile()
+      if (callback) callback(error)
     })
   }
 
@@ -597,7 +598,9 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
           modalDialogCustom.alert(`Gist load error: ${error || data.message}`)
           return
         }
-        loadFiles(data.files, 'gist')
+        loadFiles(data.files, 'gist', (errorLoadingFile) => {
+          if (!errorLoadingFile) filesProviders['gist'].id = gistId
+        })
       })
     })
   }

src/app/panels/file-panel.js

@@ -2,12 +2,13 @@
 var async = require('async')
 var $ = require('jquery')
 var yo = require('yo-yo')
-var minixhr = require('minixhr')  // simple and small cross-browser XMLHttpRequest (XHR)
 var remixLib = require('remix-lib')
+var Gists = require('gists')
 var EventManager = remixLib.EventManager
 var FileExplorer = require('../files/file-explorer')
 var modalDialog = require('../ui/modaldialog')
 var modalDialogCustom = require('../ui/modal-dialog-custom')
+var tooltip = require('../ui/tooltip')
 var QueryParams = require('../../lib/query-params')
 var queryParams = new QueryParams()
 var helper = require('../../lib/helper')
@@ -80,10 +81,10 @@ function filepanel (appAPI, filesProvider) {
                 </label>
               </span>
             ` : ''}
-            <span class="${css.gist}" title="Publish all [browser] explorer open files to an anonymous github gist" onclick=${() => publishToGist('browser')}>
+            <span class="${css.gist}" title="Publish all [browser] explorer files to a github gist" onclick=${() => publishToGist('browser')}>
               <i class="fa fa-github"></i>
             </span>
-            <span class="${css.gist}" title="Publish all [gist] explorer open files to an anonymous github gist" onclick=${() => publishToGist('gist')}>
+            <span class="${css.gist}" title="Update the current [gist] explorer" onclick=${() => updateGist()}>
               <i class="fa fa-github"></i>
             </span>
             <span class="${css.copyFiles}" title="Copy all files to another instance of Remix IDE" onclick=${copyFiles}>
@@ -273,46 +274,72 @@ function filepanel (appAPI, filesProvider) {
 
   // ------------------ gist publish --------------
 
-  function publishToGist (fileProviderName) {
-    function cb (data) {
-      if (data instanceof Error) {
-        console.log('fail', data.message)
-        modalDialogCustom.alert('Failed to create gist: ' + (data || 'Unknown transport error'))
+  function updateGist () {
+    var gistId = filesProvider['gist'].id
+    if (!gistId) {
+      tooltip('no gist content is currently loaded.')
     } else {
-        data = JSON.parse(data)
-        if (data.html_url) {
-          modalDialogCustom.confirm(null, `Created a gist at ${data.html_url}. Would you like to open it in a new window?`, () => {
-            window.open(data.html_url, '_blank')
-          })
-        } else {
-          modalDialogCustom.alert(data.message + ' ' + data.documentation_url)
+      toGist('gist', gistId)
     }
   }
+
+  function publishToGist (fileProviderName) {
+    modalDialogCustom.confirm(null, 'Are you very sure you want to publish all your files anonymously as a public gist on github.com?', () => {
+      toGist(fileProviderName)
+    })
   }
 
-    function toGist () {
+  function toGist (fileProviderName, id) {
     packageFiles(filesProvider[fileProviderName], (error, packaged) => {
       if (error) {
         console.log(error)
         modalDialogCustom.alert('Failed to create gist: ' + error)
+      } else {
+        var tokenAccess = appAPI.config.get('settings/gist-access-token')
+        if (!tokenAccess) {
+          modalDialogCustom.alert('Remix requires an access token (which includes gists creation permission). Please go to the settings tab for more information.')
         } else {
           var description = 'Created using remix-ide: Realtime Ethereum Contract Compiler and Runtime. \n Load this file by pasting this gists URL or ID at https://remix.ethereum.org/#version=' + queryParams.get().version + '&optimize=' + queryParams.get().optimize + '&gist='
-          console.log(packaged)
-          minixhr({
-            url: 'https://api.github.com/gists',
-            method: 'POST',
-            data: JSON.stringify({
+          var gists = new Gists({
+            token: tokenAccess
+          })
+          if (id) {
+            tooltip('Saving gist (' + id + ') ...')
+            gists.edit({
+              description: description,
+              public: true,
+              files: packaged,
+              id: id
+            }, (error, result) => {
+              cb(error, result)
+            })
+          } else {
+            tooltip('Creating a new gist ...')
+            gists.create({
               description: description,
               public: true,
               files: packaged
+            }, (error, result) => {
+              cb(error, result)
             })
-          }, cb)
+          }
+        }
       }
     })
   }
-    modalDialogCustom.confirm(null, 'Are you very sure you want to publish all your files anonymously as a public gist on github.com?', () => {
-      toGist()
+
+  function cb (error, data) {
+    if (error) {
+      modalDialogCustom.alert('Failed to manage gist: ' + error)
+    } else {
+      if (data.html_url) {
+        modalDialogCustom.confirm(null, `The gist is at ${data.html_url}. Would you like to open it in a new window?`, () => {
+          window.open(data.html_url, '_blank')
         })
+      } else {
+        modalDialogCustom.alert(data.message + ' ' + data.documentation_url + ' ' + JSON.stringify(data.errors, null, '\t'))
+      }
+    }
   }
 
   // ------------------ copy files --------------

src/app/tabs/settings-tab.js

@@ -9,6 +9,7 @@ var styleGuide = require('../ui/styles-guide/theme-chooser')
 var helper = require('../../lib/helper')
 var modal = require('../ui/modal-dialog-custom')
 var tooltip = require('../ui/tooltip')
+var copyToClipboard = require('../ui/copy-to-clipboard')
 
 var css = require('./styles/settings-tab-styles')
 
@@ -24,6 +25,13 @@ function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
   Remix never persist any passphrase.`
   var warnPersonalMode = yo`<i title=${warnText} class="${css.icon} fa fa-exclamation-triangle" aria-hidden="true"></i>`
 
+   // Gist settings
+  var gistAccessToken = yo`<input id="gistaccesstoken" type="password">`
+  var token = appAPI.config.get('settings/gist-access-token')
+  if (token) gistAccessToken.value = token
+  var gistAddToken = yo`<input class="${css.savegisttoken}" id="savegisttoken" onclick=${() => { appAPI.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`
+  var gistRemoveToken = yo`<input id="removegisttoken" onclick=${() => { gistAccessToken.value = ''; appAPI.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" type="button">`
+
   var el = yo`
     <div class="${css.settingsTabView} "id="settingsView">
       <div class="${css.info}">
@@ -48,8 +56,17 @@ function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
           <span class="${css.checkboxText}">Enable Optimization</span>
         </div>
         <div class="${css.crow}">
-          <div>${personal}></div>
-          <span class="${css.checkboxText}">Enable Personal Mode ${warnPersonalMode}></span>
+          <div>${personal}</div>
+          <span class="${css.checkboxText}">Enable Personal Mode ${warnPersonalMode}</span>
+        </div>
+      </div>
+      <div class="${css.info}">
+        <div class=${css.title}>Gist Access Token</div>
+        <div class="${css.crowNoFlex}">Manage the access token used to publish to Gist.</div>
+        <div class="${css.crowNoFlex}">Go to github token page (link below) to create a new token and save it in Remix. Make sure this token has only 'create gist' permission.</div>
+        <div class="${css.crowNoFlex}"><a target="_blank" href="https://github.com/settings/tokens">https://github.com/settings/tokens</a></div>
+        <div class="${css.crowNoFlex}">
+          <div class="${css.checkboxText}">${gistAccessToken}${copyToClipboard(() => appAPI.config.get('settings/gist-access-token'))}${gistAddToken}${gistRemoveToken}</div>
         </div>
       </div>
       <div class="${css.info}">

src/app/tabs/styles/settings-tab-styles.js

@@ -74,6 +74,9 @@ var css = csjs`
     border-radius: 2px;
     margin-left: 5px;
   }
+  .savegisttoken {
+    margin-left: 5px;
+  }
 }
 `