feat: Improve Product Guides structure (#2399)

- Expose dropdown for Product navigation
- Move all product pages into /product/
- Re-order sidebar to push relevant (vs marketing/discovery) docs to the top

Author: dcramer

src/api/permissions.mdx

@@ -7,7 +7,7 @@ If you're building on top of Sentry's API (i.e using [Auth Tokens](/api/auth/)),
 different API endpoints.
 
 If you're looking for information on membership roles please visit the
-[membership](/accounts/membership/) documentation.
+[membership](/product/accounts/membership/) documentation.
 
 ### Organizations
 
@@ -72,6 +72,6 @@ Events in sentry are immutable and can only be deleted by deleting the whole iss
 
 <Alert level="warning" title="Note"><markdown>
 
-Be aware that if you're using `sentry-cli` to [manage your releases](/cli/releases/), you'll need a token which also has `org:read` scope.
+Be aware that if you're using `sentry-cli` to [manage your releases](/product/cli/releases/), you'll need a token which also has `org:read` scope.
 
 </markdown></Alert>

src/components/navbar.tsx

@@ -7,6 +7,8 @@ import Search from "./search";
 import SmartLink from "./smartLink";
 import usePlatform, { usePlatformList } from "./hooks/usePlatform";
 
+import NavbarProductDropdown from "./navbarProductDropdown";
+
 type Props = {
   platforms?: string[];
 };
@@ -21,11 +23,7 @@ export default ({ platforms }: Props): JSX.Element => {
       <div className="collapse navbar-collapse content-max" id="navbar-menu">
         <Search path={location.pathname} platforms={platforms} />
         <Nav className="justify-content-end" style={{ flex: 1 }}>
-          <Nav.Item>
-            <SmartLink className="nav-link" to="/product/">
-              Product
-            </SmartLink>
-          </Nav.Item>
+          <NavbarProductDropdown />
           <NavDropdown
             title={
               currentPlatform ? (
@@ -42,7 +40,7 @@ export default ({ platforms }: Props): JSX.Element => {
                 "Platforms"
               )
             }
-            id="platforms"
+            id="nd-platforms"
           >
             {platformList.map(platform => (
               <SmartLink

src/components/navbarProductDropdown.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { NavDropdown } from "react-bootstrap";
+import { graphql, useStaticQuery } from "gatsby";
+
+import SmartLink from "./smartLink";
+import { sortPages } from "~src/utils";
+
+const productNavQuery = graphql`
+  query ProductNavQuery {
+    allSitePage(
+      filter: {
+        path: { regex: "/^/product//" }
+        context: { draft: { ne: false } }
+      }
+    ) {
+      nodes {
+        path
+        context {
+          title
+          sidebar_order
+        }
+      }
+    }
+  }
+`;
+
+export default (): JSX.Element => {
+  const data = useStaticQuery(productNavQuery);
+
+  const matches = sortPages(
+    data.allSitePage.nodes.filter(
+      n => n.context && n.context.title && n.path.match(/\//g).length === 3
+    )
+  );
+
+  return (
+    <NavDropdown title="Product" id="nd-product">
+      {matches.map(node => (
+        <SmartLink to={node.path} key={node.path} className="dropdown-item">
+          {node.context.title}
+        </SmartLink>
+      ))}
+    </NavDropdown>
+  );
+};

src/components/sidebar.tsx

@@ -44,16 +44,31 @@ export const Sidebar = ({ data }: ChildProps): JSX.Element => {
         root="product"
         title="Product"
         tree={tree}
-        exclude={["/product/integrations/"]}
+        exclude={[
+          "/product/integrations/",
+          "/product/cli/",
+          "/product/security/",
+          "/product/accounts/",
+          "/product/relay/",
+        ]}
+      />
+      <DynamicNav
+        root="product/accounts"
+        title="Account Management"
+        tree={tree}
+      />
+      <DynamicNav root="product/relay" title="Relay" tree={tree} />
+      <DynamicNav root="product/cli" title="sentry-cli" tree={tree} />
+      <DynamicNav
+        root="product/security"
+        title="Security and Legal"
+        tree={tree}
       />
       <DynamicNav
         root="product/integrations"
         title="Integrations"
         tree={tree}
       />
-      <DynamicNav root="accounts" title="Account Management" tree={tree} />
-      <DynamicNav root="cli" title="sentry-cli" tree={tree} />
-      <DynamicNav root="meta" title="Security and Legal" tree={tree} />
       <li className="mb-3" data-sidebar-branch>
         <div
           className="sidebar-title d-flex align-items-center mb-0"

src/docs/cli/index.mdx

@@ -14,7 +14,7 @@ Most of the process is the same whether you're using this SDK or the [new unifie
 
 ## Specify the release in Raven.js {#specify-the-release-in-raven-js}
 
-If you are uploading source map artifacts yourself, you must specify the release in your Raven.js client configuration. Sentry will use the release name to associate digested event data with the files you’ve uploaded via the [releases API](/api/releases/), [sentry-cli](/cli/) or [sentry-webpack-plugin](https://github.com/getsentry/sentry-webpack-plugin). This step is optional if you are hosting source maps on the remote server, but still recommended.
+If you are uploading source map artifacts yourself, you must specify the release in your Raven.js client configuration. Sentry will use the release name to associate digested event data with the files you’ve uploaded via the [releases API](/api/releases/), [sentry-cli](/product/cli/) or [sentry-webpack-plugin](https://github.com/getsentry/sentry-webpack-plugin). This step is optional if you are hosting source maps on the remote server, but still recommended.
 
 ```javascript
 Raven.config("your-dsn", {

src/docs/clients/javascript/sourcemaps.mdx

@@ -35,4 +35,4 @@ $ export SENTRY_PROPERTIES=./ios/sentry.properties
 $ sentry-cli react-native appcenter YourApp ios ./build/codePush
 ```
 
-Exporting the `SENTRY_PROPERTIES` will tell sentry-cli to use the properties in your project. Alternatively, you can either pass it via parameters or a global settings file. To find more about this refer to [Working with Projects](/cli/configuration/#sentry-cli-working-with-projects).
+Exporting the `SENTRY_PROPERTIES` will tell sentry-cli to use the properties in your project. Alternatively, you can either pass it via parameters or a global settings file. To find more about this refer to [Working with Projects](/product/cli/configuration/#sentry-cli-working-with-projects).

src/docs/clients/react-native/codepush.mdx

@@ -0,0 +1,6 @@
+---
+title: Account Management
+sidebar_order: 2000
+---
+
+<PageGrid />