Fix style download and strip metadata

src/components/App.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { saveAs } from 'file-saver'
 import Mousetrap from 'mousetrap'
 
 import MapboxGlMap from './map/MapboxGlMap'
@@ -90,12 +89,6 @@ export default class App extends React.Component {
     loadDefaultStyle(mapStyle => this.onStyleOpen(mapStyle))
   }
 
-  onStyleDownload() {
-    const mapStyle = this.state.mapStyle
-    const blob = new Blob([formatStyle(mapStyle)], {type: "application/json;charset=utf-8"});
-    saveAs(blob, mapStyle.id + ".json");
-  }
-
   saveStyle(snapshotStyle) {
     this.styleStore.save(snapshotStyle)
   }
@@ -228,7 +221,6 @@ export default class App extends React.Component {
       sources={this.state.sources}
       onStyleChanged={this.onStyleChanged.bind(this)}
       onStyleOpen={this.onStyleChanged.bind(this)}
-      onStyleDownload={this.onStyleDownload.bind(this)}
       onInspectModeToggle={this.changeInspectMode.bind(this)}
     />
 

src/components/Toolbar.jsx

@@ -54,8 +54,6 @@ export default class Toolbar extends React.Component {
     onStyleChanged: React.PropTypes.func.isRequired,
     // A new style has been uploaded
     onStyleOpen: React.PropTypes.func.isRequired,
-    // Current style is requested for download
-    onStyleDownload: React.PropTypes.func.isRequired,
     // A dict of source id's and the available source layers
     sources: React.PropTypes.object.isRequired,
     onInspectModeToggle: React.PropTypes.func.isRequired
@@ -74,13 +72,6 @@ export default class Toolbar extends React.Component {
     }
   }
 
-  downloadButton() {
-    return <ToolbarAction onClick={this.props.onStyleDownload}>
-      <MdFileDownload />
-      <IconText>Download</IconText>
-    </ToolbarAction>
-  }
-
   toggleModal(modalName) {
     this.setState({
       isOpen: {
@@ -100,7 +91,6 @@ export default class Toolbar extends React.Component {
       />
       <ExportModal
         mapStyle={this.props.mapStyle}
-        onStyleDownload={this.props.onStyleDownload}
         isOpen={this.state.isOpen.export}
         onOpenToggle={this.toggleModal.bind(this, 'export')}
       />

src/components/modals/ExportModal.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { saveAs } from 'file-saver'
 
 import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import InputBlock from '../inputs/InputBlock'
@@ -103,24 +104,30 @@ class Gist extends React.Component {
   }
 }
 
-
+function stripAccessTokens(mapStyle) {
+  const changedMetadata = { ...mapStyle.metadata }
+  delete changedMetadata['maputnik:mapbox_access_token']
+  delete changedMetadata['maputnik:openmaptiles_access_token']
+  return {
+    ...mapStyle,
+    metadata: changedMetadata
+  }
+}
 
 class ExportModal extends React.Component {
   static propTypes = {
     mapStyle: React.PropTypes.object.isRequired,
     isOpen: React.PropTypes.bool.isRequired,
     onOpenToggle: React.PropTypes.func.isRequired,
-    // Current style is requested for download
-    onStyleDownload: React.PropTypes.func.isRequired,
   }
 
   constructor(props) {
     super(props);
   }
 
-  onStyleDownload() {
+  downloadStyle() {
-    const blob = new Blob([formatStyle(mapStyle)], {type: "application/json;charset=utf-8"});
+    const blob = new Blob([formatStyle(stripAccessTokens(this.props.mapStyle))], {type: "application/json;charset=utf-8"});
-    saveAs(blob, mapStyle.id + ".json");
+    saveAs(blob, this.props.mapStyle.id + ".json");
   }
 
   render() {
@@ -135,7 +142,7 @@ class ExportModal extends React.Component {
         <p>
           Download a JSON style to your computer.
         </p>
-        <Button onClick={this.props.onStyleDownload}>
+        <Button onClick={this.downloadStyle.bind(this)}>
           <MdFileDownload />
           Download
         </Button>