docs: remove duplicate search results, search style fixes (#1693)

This fixes an issue where each search entry from the
docs/api/**.md files would show up twice in search results.

This is because we're including versions from v17 and v16, but the
search doesn't specify between them. This adds support to filter based
on the currently selected version.

This also includes style fixes to not stretch the version select
dropdown and a table style fix for endpoint methods to not have the
table extend past its container into the snippet example portion of the
page.

docs/gatsby-config.js

@@ -78,7 +78,8 @@ module.exports = {
             slug: node => `#${node.frontmatter.scope ? node.frontmatter.scope + '-' :  ''}${node.fields.idName}`,
             route: node => `${node.frontmatter.route}`,
             method: node => `${node.frontmatter.example}`,
-            type: node => node.frontmatter.type || "API"
+            type: node => node.frontmatter.type || "API",
+            version: node => node.fields.version
           }
         }
       }

docs/src/components/index-page.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from "react";
+import React, { Component } from "react";
 
 import { graphql, StaticQuery, navigate } from "gatsby";
 
@@ -63,25 +63,27 @@ export default class IndexPage extends Component {
             render={data => {
               const { currentVersion } = data.sitePlugin.pluginOptions;
               return (
-                <Fragment>
-                  <select
-                    value={this.props.version}
-                    onChange={this.onVersionChange}
-                  >
-                    {/* render the current version and map over the others */}
-                    <option value={currentVersion}>
-                      Current ({currentVersion})
-                    </option>
-                    {data.allGitRemote.nodes.map(
-                      ({ id, sourceInstanceName }) => (
-                        <option key={id} value={sourceInstanceName}>
-                          {sourceInstanceName}
-                        </option>
-                      )
-                    )}
-                  </select>
-                  <Search searchIndex={data.siteSearchIndex.index} />
-                </Fragment>
+                <>
+                  <div className={layoutStyles.dropdownSelect}>
+                    <select
+                      value={this.props.version}
+                      onChange={this.onVersionChange}
+                    >
+                      {/* render the current version and map over the others */}
+                      <option value={currentVersion}>
+                        Current ({currentVersion})
+                      </option>
+                      {data.allGitRemote.nodes.map(
+                        ({ id, sourceInstanceName }) => (
+                          <option key={id} value={sourceInstanceName}>
+                            {sourceInstanceName}
+                          </option>
+                        )
+                      )}
+                    </select>
+                  </div>
+                  <Search searchIndex={data.siteSearchIndex.index} version={this.props.version} />
+                </>
               );
             }}
           />

docs/src/components/layout.css

@@ -136,12 +136,6 @@ table {
   table-layout: fixed;
 }
 
-@media (min-width: 55em) {
-  table {
-    table-layout: auto;
-  }
-}
-
 /* Hide the navigation toggle button on big screens, since it’s not needed */
 @media (min-width: 55em) {
   /* --wide-enough-for-two-columns */

docs/src/components/layout.module.css

@@ -22,3 +22,8 @@
     grid-column: 2/3;
   }
 }
+
+.versionDropdown {
+  display: flex;
+  align-items: flex-start;
+}

docs/src/components/search.js

@@ -126,7 +126,15 @@ export default class Search extends Component {
     const results = this.index
       .search(query, searchOptions)
       // Map over each ID and return the full document
-      .map(({ ref }) => this.index.documentStore.getDoc(ref));
+      .map(({ ref }) => this.index.documentStore.getDoc(ref))
+      .filter(result => {
+        // Only show results for the current API version.
+        if (result.type === "API") {
+          return result.version === this.props.version
+        }
+
+        return true
+      })
 
     let height = 0;
     let visibleResultsCount;