From 223721a65d25797cd40dcf887a316b91bfa76096 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 27 Jan 2020 08:49:44 +0000
Subject: [PATCH] Code review fixes

 - Added docs to export modal
 - Fixed 'source type' doc in data sources modal
---
 src/components/modals/ExportModal.jsx   | 17 ++++++++++++++---
 src/components/modals/SettingsModal.jsx | 16 +++++++++++++---
 src/components/modals/SourcesModal.jsx  | 13 ++++++++++++-
 src/libs/field-spec-additional.js       | 18 ++++++++++++++++++
 src/styles/_modal.scss                  |  5 +++++
 5 files changed, 62 insertions(+), 7 deletions(-)
 create mode 100644 src/libs/field-spec-additional.js

diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx
index 27ee0699..37ad09fb 100644
--- a/src/components/modals/ExportModal.jsx
+++ b/src/components/modals/ExportModal.jsx
@@ -11,6 +11,7 @@ import Button from '../Button'
 import Modal from './Modal'
 import {MdFileDownload} from 'react-icons/md'
 import style from '../../libs/style'
+import fieldSpecAdditional from '../../libs/field-spec-additional'
 
 
 
@@ -70,6 +71,7 @@ class ExportModal extends React.Component {
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Export Style'}
+      className="maputnik-export-modal"
     >
 
       <div className="maputnik-modal-section">
@@ -79,19 +81,28 @@ class ExportModal extends React.Component {
         </p>
 
         <p>
-          <InputBlock label={"MapTiler Access Token: "}>
+          <InputBlock
+            label={fieldSpecAdditional.maputnik.mapbox_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
+          >
             <StringInput
               value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
               onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
             />
           </InputBlock>
-          <InputBlock label={"Mapbox Access Token: "}>
+          <InputBlock
+            label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
+          >
             <StringInput
               value={(this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token']}
               onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
             />
           </InputBlock>
-          <InputBlock label={"Thunderforest Access Token: "}>
+          <InputBlock
+            label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
+            fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
+          >
             <StringInput
               value={(this.props.mapStyle.metadata || {})['maputnik:thunderforest_access_token']}
               onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx
index 3655ad7b..dbc95c38 100644
--- a/src/components/modals/SettingsModal.jsx
+++ b/src/components/modals/SettingsModal.jsx
@@ -11,6 +11,7 @@ import SelectInput from '../inputs/SelectInput'
 import EnumInput from '../inputs/EnumInput'
 import ColorField from '../fields/ColorField'
 import Modal from './Modal'
+import fieldSpecAdditional from '../../libs/field-spec-additional'
 
 class SettingsModal extends React.Component {
   static propTypes = {
@@ -116,7 +117,10 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Mapbox Access Token"} fieldSpec={{doc: "Public access token for Mapbox services."}}>
+      <InputBlock
+        label={fieldSpecAdditional.maputnik.mapbox_access_token.label} 
+        fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
+      >
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:mapbox_access_token" 
           value={metadata['maputnik:mapbox_access_token']}
@@ -124,7 +128,10 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"MapTiler Access Token"} fieldSpec={{doc: "Public access token for MapTiler Cloud."}}>
+      <InputBlock
+        label={fieldSpecAdditional.maputnik.maptiler_access_token.label} 
+        fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
+      >
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:openmaptiles_access_token" 
           value={metadata['maputnik:openmaptiles_access_token']}
@@ -132,7 +139,10 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Thunderforest Access Token"} fieldSpec={{doc: "Public access token for Thunderforest services."}}>
+      <InputBlock
+        label={fieldSpecAdditional.maputnik.thunderforest_access_token.label} 
+        fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
+      >
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:thunderforest_access_token" 
           value={metadata['maputnik:thunderforest_access_token']}
diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx
index 1f6371ee..64eef728 100644
--- a/src/components/modals/SourcesModal.jsx
+++ b/src/components/modals/SourcesModal.jsx
@@ -167,6 +167,17 @@ class AddSource extends React.Component {
   }
 
   render() {
+    // Kind of a hack because the type changes, however maputnik has 1..n
+    // options per type, for example 
+    //
+    //  - 'geojson' - 'GeoJSON (URL)' and 'GeoJSON (JSON)'
+    //  - 'raster' - 'Raster (TileJSON URL)' and 'Raster (XYZ URL)'
+    //
+    // So we just ignore the values entirely as they are self explanatory
+    const sourceTypeFieldSpec = {
+      doc: latest.source_vector.type.doc
+    };
+
     return <div className="maputnik-add-source">
       <InputBlock label={"Source ID"} fieldSpec={{doc: "Unique ID that identifies the source and is used in the layer to reference the source."}}>
         <StringInput
@@ -174,7 +185,7 @@ class AddSource extends React.Component {
           onChange={v => this.setState({ sourceId: v})}
         />
       </InputBlock>
-      <InputBlock label={"Source Type"} fieldSpec={latest.source_vector.type}>
+      <InputBlock label={"Source Type"} fieldSpec={sourceTypeFieldSpec}>
         <SelectInput
           options={[
             ['geojson_json', 'GeoJSON (JSON)'],
diff --git a/src/libs/field-spec-additional.js b/src/libs/field-spec-additional.js
new file mode 100644
index 00000000..580ff609
--- /dev/null
+++ b/src/libs/field-spec-additional.js
@@ -0,0 +1,18 @@
+const spec = {
+  maputnik: {
+    mapbox_access_token: {
+      label: "Mapbox Access Token",
+      doc: "Public access token for Mapbox services."
+    },
+    maptiler_access_token: {
+      label: "MapTiler Access Token",
+      doc: "Public access token for MapTiler Cloud."
+    },
+    thunderforest_access_token: {
+      label: "Thunderforest Access Token",
+      doc: "Public access token for Thunderforest services."
+    },
+  }
+}
+
+export default spec;
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index a0519798..87a57cd0 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -113,6 +113,11 @@
   max-width: 100%;
 }
 
+.maputnik-export-modal {
+  width: 400px;
+  max-width: 100%;
+}
+
 .maputnik-add-layer {
   @extend .clearfix;
 }