[docs] adds feedback component (#8507)

* [docs] add feedback component * Update dr-ui * eslint * update dr-ui, fixes mapbox/dr-ui#157
mapbox · Jul 22, 2019 · 81d72a7 · 81d72a7
1 parent 783ae48
commit 81d72a7
Show file tree

Hide file tree

Showing 8 changed files with 210 additions and 65 deletions.
diff --git a/docs/components/api-item.js b/docs/components/api-item.js
@@ -6,7 +6,8 @@ import {highlightJavascript} from '../components/prism_highlight.js';
 import docs from '../components/api.json'; // eslint-disable-line import/no-unresolved
 import ApiItemMember from './api-item-member';
 import IconText from '@mapbox/mr-ui/icon-text';
-
+import Feedback from '@mapbox/dr-ui/feedback';
+import constants from '../constants';
 
 const linkerStack = new LinkerStack({})
     .namespaceResolver(docs, (namespace) => {
@@ -18,6 +19,21 @@ const formatters = createFormatters(linkerStack.link);
 
 class ApiItem extends React.Component {
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            userName: undefined
+        };
+    }
+
+    componentDidMount() {
+        MapboxPageShell.afterUserCheck(() => {
+            this.setState({ userName: MapboxPageShell.getUser() ?
+                MapboxPageShell.getUser().id :
+                undefined});
+        });
+    }
+
     md = (ast, inline) => {
         if (inline && ast && ast.children.length && ast.children[0].type === 'paragraph') {
             ast = {
@@ -161,6 +177,17 @@ class ApiItem extends React.Component {
                         <div className='py6 mt12 txt-m txt-bold'>Related</div>
                         <ul>{section.sees.map((see, i) => <li key={i}>{this.md(see, true)}</li>)}</ul>
                     </div>}
+
+                <div className="mt18">
+                    <Feedback
+                        site="Mapbox GL JS"
+                        section={section.name}
+                        type={`section on ${section.name}`}
+                        location={this.props.location}
+                        userName={this.state.userName}
+                        webhook={constants.FORWARD_EVENT_WEBHOOK}
+                    />
+                </div>
             </section>
         );
     }

diff --git a/docs/components/example.js b/docs/components/example.js
@@ -6,6 +6,8 @@ import Prism from 'prismjs';
 import supported from '@mapbox/mapbox-gl-supported';
 import Icon from '@mapbox/mr-ui/icon';
 import CodeSnippet from '@mapbox/mr-ui/code-snippet';
+import Feedback from '@mapbox/dr-ui/feedback';
+import constants from '../constants';
 
 const highlightTheme = require('raw-loader!@mapbox/dr-ui/css/prism.css'); // eslint-disable-line import/no-commonjs
 
@@ -15,7 +17,8 @@ export default function (html) {
             super(props);
             this.state = {
                 filter: '',
-                token: undefined
+                token: undefined,
+                userName: undefined
             };
         }
 
@@ -101,6 +104,15 @@ ${html}
                             </div>
                         </div>
                     </div>
+                    <div className="mt18">
+                        <Feedback
+                            site="Mapbox GL JS"
+                            type="example"
+                            location={this.props.location}
+                            userName={this.state.userName}
+                            webhook={constants.FORWARD_EVENT_WEBHOOK}
+                        />
+                    </div>
                 </PageShell>
             );
         }
@@ -113,7 +125,9 @@ ${html}
             doc.close();
 
             MapboxPageShell.afterUserCheck(() => {
-                this.setState({token: MapboxPageShell.getUserPublicAccessToken()});
+                this.setState({token: MapboxPageShell.getUserPublicAccessToken(), userName: MapboxPageShell.getUser() ?
+                    MapboxPageShell.getUser().id :
+                    undefined});
             });
         }
 

diff --git a/docs/components/markdown-page-shell.js b/docs/components/markdown-page-shell.js
@@ -1,7 +1,26 @@
 import React from 'react';
 import PageShell from './page_shell';
+import Feedback from '@mapbox/dr-ui/feedback';
+import constants from '../constants';
 
 class MarkdownPageshell extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            userName: undefined
+        };
+    }
+
+    componentDidMount() {
+        MapboxPageShell.afterUserCheck(() => {
+            // fetches username so we can identify them in segment
+            this.setState({
+                userName: MapboxPageShell.getUser() ?
+                    MapboxPageShell.getUser().id :
+                    undefined
+            });
+        });
+    }
     render() {
         const { frontMatter, location } = this.props;
         const meta = this.props.meta || {};
@@ -22,6 +41,14 @@ class MarkdownPageshell extends React.Component {
                 <div className="prose">
                     {this.props.children}
                 </div>
+                <div className="mt18">
+                    <Feedback
+                        site="Mapbox GL JS"
+                        location={this.props.location}
+                        userName={this.state.userName}
+                        webhook={constants.FORWARD_EVENT_WEBHOOK}
+                    />
+                </div>
             </PageShell>
         );
     }

diff --git a/docs/constants.json b/docs/constants.json
@@ -0,0 +1,6 @@
+{
+  "FORWARD_EVENT_WEBHOOK": {
+    "staging": "https://fbtme2z025.execute-api.us-east-1.amazonaws.com/hookshot/webhook",
+    "production": "https://2n40g6lyc9.execute-api.us-east-1.amazonaws.com/hookshot/webhook"
+  }
+}
diff --git a/docs/pages/api.js b/docs/pages/api.js
@@ -66,7 +66,7 @@ export default class extends React.Component {
                     <div className='api-section'>
                         {docs.map((doc, i) => doc.kind === 'note' ?
                             <Note key={i} {...doc}/> :
-                            <ApiItem key={i} {...doc}/>)}
+                            <ApiItem location={this.props.location} key={i} {...doc}/>)}
                     </div>
                 </div>
             </PageShell>

diff --git a/docs/pages/style-spec.js b/docs/pages/style-spec.js
@@ -8,6 +8,8 @@ import {highlightJavascript, highlightJSON} from '../components/prism_highlight'
 import entries from 'object.entries';
 import ref from '../../src/style-spec/reference/latest';
 import Icon from '@mapbox/mr-ui/icon';
+import Feedback from '@mapbox/dr-ui/feedback';
+import constants from '../constants';
 
 const meta = {
     title: 'Style Specification',
@@ -68,19 +70,44 @@ function renderParams(params, maxLength) {
 }
 
 class SectionH2 extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            userName: undefined
+        };
+    }
+
+    componentDidMount() {
+        MapboxPageShell.afterUserCheck(() => {
+            this.setState({ userName: MapboxPageShell.getUser() ?
+                MapboxPageShell.getUser().id :
+                undefined});
+        });
+    }
     render() {
         const {props} = this;
         return (
             <div className='style-spec-section-h2'>
                 <a id={props.id} className='anchor'/>
                 <h2><a className='unprose' href={`#${props.id}`} title={`link to ${props.title}`}>{props.title}</a></h2>
                 {this.props.children}
+                <div className="mt18">
+                    <Feedback
+                        site="Style Specification"
+                        section={props.title}
+                        type={`section on ${props.title}`}
+                        location={this.props.location}
+                        userName={this.state.userName}
+                        webhook={constants.FORWARD_EVENT_WEBHOOK}
+                    />
+                </div>
             </div>
         );
     }
 }
 
 class SectionH3 extends React.Component {
+
     render() {
         const {props} = this;
         return (
@@ -233,6 +260,7 @@ class Item extends React.Component {
 }
 
 export default class extends React.Component {
+
     render() {
         return (
             <PageShell meta={meta}>
@@ -255,7 +283,7 @@ export default class extends React.Component {
                         <p>For platform-appropriate documentation of style-related features, developers using the Mapbox Maps SDK for iOS should consult the <a href='https://docs.mapbox.com/ios/maps/overview/'>iOS SDK API reference</a>, and developers using the Mapbox Maps SDK for macOS should consult the <a href='https://mapbox.github.io/mapbox-gl-native/macos/'>macOS SDK API reference</a>.</p>
                     </div>
 
-                    <SectionH2 id='root' title='Root Properties'>
+                    <SectionH2 location={this.props.location} id='root' title='Root Properties'>
                         <p>Root level properties of a Mapbox style specify the map's layers, tile sources and other
                             resources, and default values for the initial camera position when not specified
                             elsewhere.</p>
@@ -276,7 +304,7 @@ export default class extends React.Component {
                         </InnerSection>
                     </SectionH2>
 
-                    <SectionH2 id='light' title='Light'>
+                    <SectionH2 location={this.props.location} id='light' title='Light'>
                         <p>
                             A style's <code>light</code> property provides global light source for that style.
                         </p>
@@ -288,7 +316,7 @@ export default class extends React.Component {
                         </InnerSection>
                     </SectionH2>
 
-                    <SectionH2 id='sources' title='Sources'>
+                    <SectionH2 location={this.props.location} id='sources' title='Sources'>
                         <p>
                             Sources supply data to be shown on the map. The type of source is specified by the
                             <code>"type"</code> property, and must be one of {sourceTypes.map((t, i) => <var key={i}>{t}</var>).reduce((prev, curr) => [prev, ', ', curr])}.
@@ -562,7 +590,7 @@ export default class extends React.Component {
                         </InnerSection>
                     </SectionH2>
 
-                    <SectionH2 id='sprite' title='Sprite'>
+                    <SectionH2 location={this.props.location} id='sprite' title='Sprite'>
                         <p>
                             A style's <code>sprite</code> property supplies a URL template for loading small images to use in
                             rendering <code>background-pattern</code>, <code>fill-pattern</code>, <code>line-pattern</code>,
@@ -619,7 +647,7 @@ export default class extends React.Component {
                         </p>
                     </SectionH2>
 
-                    <SectionH2 id='glyphs' title='Glyphs'>
+                    <SectionH2 location={this.props.location} id='glyphs' title='Glyphs'>
                         <p>
                             A style's <code>glyphs</code> property provides a URL template for loading signed-distance-field glyph sets in PBF format.
                         </p>
@@ -644,7 +672,7 @@ export default class extends React.Component {
                         </ul>
                     </SectionH2>
 
-                    <SectionH2 id='transition' title='Transition'>
+                    <SectionH2 location={this.props.location} id='transition' title='Transition'>
                         <p>
                             A <code>transition</code> property controls timing for the interpolation between a transitionable style
                             property's previous value and new value. A style's <a href='#root-transition' title='link to root-transition'>
@@ -660,7 +688,7 @@ export default class extends React.Component {
                         </InnerSection>
                     </SectionH2>
 
-                    <SectionH2 id='layers' title='Layers'>
+                    <SectionH2 location={this.props.location} id='layers' title='Layers'>
                         <p>
                             A style's <code>layers</code> property lists all of the layers available in that style. The type of
                             layer is specified by the <code>"type"</code> property, and must be one of {layerTypes.map((t, i) => <var key={i}>{t}</var>).reduce((prev, curr) => [prev, ', ', curr])}.
@@ -701,7 +729,7 @@ export default class extends React.Component {
                         </InnerSection>
                     </SectionH2>
 
-                    <SectionH2 id='types' title='Types'>
+                    <SectionH2 location={this.props.location} id='types' title='Types'>
                         <p>A Mapbox style contains values of various types, most commonly as values for the style properties of a layer.</p>
                         <SectionH3 id='types-color' title='Color'>
                             <p>
@@ -765,7 +793,7 @@ export default class extends React.Component {
                         </SectionH3>
                     </SectionH2>
 
-                    <SectionH2 id='expressions' title='Expressions'>
+                    <SectionH2 location={this.props.location} id='expressions' title='Expressions'>
                         <p>The value for any <a href="#layout-property">layout property</a>, <a
                             href="#paint-property">paint property</a>, or <a href="#layer-filter">filter</a> may be
                             specified as an <em>expression</em>. An expression defines a formula for computing the
@@ -1039,7 +1067,7 @@ export default class extends React.Component {
                         </SectionH3>
                     </SectionH2>
 
-                    <SectionH2 id='other' title='Other'>
+                    <SectionH2 location={this.props.location} id='other' title='Other'>
                         <SectionH3 id='other-function' title='Function'>
                             <p>The value for any layout or paint property may be specified as
                               a <em>function</em>. Functions allow you to make the appearance of a map feature
@@ -1276,7 +1304,7 @@ export default class extends React.Component {
                         </SectionH3>
                     </SectionH2>
 
-                    <SectionH2 id='other-filter' title='Other filter'>
+                    <SectionH2 location={this.props.location} id='other-filter' title='Other filter'>
                         <p>In previous versions of the style specification, <a href="#layer-filter">filters</a> were defined using the deprecated syntax documented below. Though filters defined with this syntax will continue to work, we recommend using the more flexible <a href="#expressions">expression</a> syntax instead. Expression syntax and the deprecated syntax below cannot be mixed in a single filter definition.</p>
 
 

diff --git a/package.json b/package.json
@@ -42,13 +42,13 @@
     "@mapbox/appropriate-images": "^2.0.0",
     "@mapbox/appropriate-images-react": "^1.0.0",
     "@mapbox/batfish": "1.9.8",
-    "@mapbox/dr-ui": "0.16.2",
+    "@mapbox/dr-ui": "0.19.0",
     "@mapbox/flow-remove-types": "^1.3.0-await.upstream.2",
     "@mapbox/gazetteer": "^3.1.2",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.1",
     "@mapbox/mapbox-gl-test-suite": "file:test/integration",
     "@mapbox/mbx-assembly": "^0.28.2",
-    "@mapbox/mr-ui": "0.7.1",
+    "@mapbox/mr-ui": "0.7.2",
     "@octokit/rest": "^15.15.1",
     "babel-eslint": "^10.0.1",
     "benchmark": "^2.1.4",