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 />

src/docs/enriching-error-data/breadcrumbs.mdx

@@ -49,7 +49,7 @@ Business plans have the option to configure rate limits for each project that le
 
 ## Managing your event volume
 
-If your projects have a high volume of events, you can control how many errors Sentry receives by reviewing Sentry's guide to [Manage Your Event Stream](/accounts/quotas/manage-event-stream-guide/).
+If your projects have a high volume of events, you can control how many errors Sentry receives by reviewing Sentry's guide to [Manage Your Event Stream](/product/accounts/quotas/manage-event-stream-guide/).
 
 ## FAQ
 
@@ -322,7 +322,7 @@ Your plan will continue until the end of the current billing cycle. After this,
 
 **Where can I find my previous invoices/receipts?**
 
-Users with the role of [Billing or Owner](/accounts/membership/) can find all previous invoices by going to **Organization > Usage & Billing > Usage & Payments > Receipts**.
+Users with the role of [Billing or Owner](/product/accounts/membership/) can find all previous invoices by going to **Organization > Usage & Billing > Usage & Payments > Receipts**.
 
 <Note><markdown>
 

src/docs/product/accounts/index.mdx

@@ -26,35 +26,35 @@ Sentry completes a thorough evaluation of each event to determine if it counts t
 
 1. **SDK configuration**
 
-   The SDK configuration either allows the event or filters the event out. For more information, see [Manage Your Event Stream](/accounts/quotas/manage-event-stream-guide/) or [Filtering Events](/platform-redirect/?next=/configuration/filtering/).
+   The SDK configuration either allows the event or filters the event out. For more information, see [Manage Your Event Stream](/product/accounts/quotas/manage-event-stream-guide/) or [Filtering Events](/platform-redirect/?next=/configuration/filtering/).
 
 2. **SDK sample rate**
 
    If a sample rate is defined for the SDK, the SDK evaluates whether this event should be sent as a representative fraction of events. Setting a sample rate is documented for each SDK. The SDK sample rate is not dynamic; changing it requires re-deployment. In addition, setting an SDK sample rate limits visibility into the source of events. Setting a rate limit for your project may better suit your needs.
 
 3. **Quota availability**
 
-   Events that exceed your quota are not sent. To add to your quota or review what happens when you exceed it, see [Increasing Quotas](/accounts/quotas/#increasing-quotas).
+   Events that exceed your quota are not sent. To add to your quota or review what happens when you exceed it, see [Increasing Quotas](/product/accounts/quotas/#increasing-quotas).
 
 4. **Event repetition**
 
 - If you have intervened to Delete and Discard an issue, then _future_ events with the same fingerprint do not count toward your quota.
 - If the previous event was resolved, this event counts toward your quota because it may represent a regression in your code.
-- If you have intervened to ignore alerts about events with the same fingerprint, this event counts toward your quota because the event is still occurring. For more information, see [Inbound Filters](/accounts/quotas/#inbound-data-filters).
+- If you have intervened to ignore alerts about events with the same fingerprint, this event counts toward your quota because the event is still occurring. For more information, see [Inbound Filters](/product/accounts/quotas/#inbound-data-filters).
 
 5. **Spike protection**
 
-   Sentry’s spike protection prevents huge overages from consuming your event capacity; spike protection is not currently available for transactions. For more information, see [Spike Protection](/accounts/quotas/#spike-protection).
+   Sentry’s spike protection prevents huge overages from consuming your event capacity; spike protection is not currently available for transactions. For more information, see [Spike Protection](/product/accounts/quotas/#spike-protection).
 
 In addition, depending on your project’s configuration and the plan you subscribe to, Sentry may also check:
 
 6. **Rate limit for the project**
 
-   If the error event rate limit for the project has been exceeded, and your subscription allows, the event will not be counted. For more information, see [Rate Limiting in our guide to Manage Your Event Stream](/accounts/quotas/manage-event-stream-guide/#6-rate-limiting) or [Error Event Limits](/accounts/quotas/#error-event-limits).
+   If the error event rate limit for the project has been exceeded, and your subscription allows, the event will not be counted. For more information, see [Rate Limiting in our guide to Manage Your Event Stream](/product/accounts/quotas/manage-event-stream-guide/#6-rate-limiting) or [Error Event Limits](/product/accounts/quotas/#error-event-limits).
 
 7. **Inbound filters**
 
-   If any inbound filter is set for this type of error event, and your subscription allows, the event will not be counted. For more information, see [Inbound Filters in our guide to Manage Your Event Stream](/accounts/quotas/manage-event-stream-guide/#3-inbound-data-filters) or [Inbound Data Filter](/accounts/quotas/#inbound-data-filters).
+   If any inbound filter is set for this type of error event, and your subscription allows, the event will not be counted. For more information, see [Inbound Filters in our guide to Manage Your Event Stream](/product/accounts/quotas/manage-event-stream-guide/#3-inbound-data-filters) or [Inbound Data Filter](/product/accounts/quotas/#inbound-data-filters).
 
 After these checks are processed, the event counts toward your quota. It is accepted into Sentry, where it persists and is stored.
 
@@ -141,7 +141,7 @@ After these checks are processed, the event counts toward your quota. It is acce
 
 Add to your quota at any time during your billing period, either by upgrading to a higher tier or by increasing your on-demand capacity. While the available plans fit most individual and business needs, Sentry is designed to handle large throughput. If your team needs more, we’re happy to help. Reach out to our sales team at [[email protected]](mailto:[email protected]) to learn more about increasing capacity.
 
-If you’ve exceeded your quota threshold, the server will respond with a 429 HTTP status code. However, if this is your first time exceeding quota, you'll be entered into a one-time grace period. For more information, see this [Help article](https://help.sentry.io/hc/en-us/articles/115000154554-What-happens-when-I-run-out-of-event-capacity-and-a-grace-period-is-triggered-). In addition, you can specify a spending cap for on-demand capacity if you need additional events; for example, if you’re rolling out a new version and anticipate more events this month. For more information, see [On-Demand Spending Cap](/accounts/pricing/#on-demand-cap).
+If you’ve exceeded your quota threshold, the server will respond with a 429 HTTP status code. However, if this is your first time exceeding quota, you'll be entered into a one-time grace period. For more information, see this [Help article](https://help.sentry.io/hc/en-us/articles/115000154554-What-happens-when-I-run-out-of-event-capacity-and-a-grace-period-is-triggered-). In addition, you can specify a spending cap for on-demand capacity if you need additional events; for example, if you’re rolling out a new version and anticipate more events this month. For more information, see [On-Demand Spending Cap](/product/accounts/pricing/#on-demand-cap).
 
 ## Limiting Events
 
@@ -151,7 +151,7 @@ Per-key rate limits allow you to set the maximum volume of error events a key wi
 
 For example, you may have a project in production that generates a lot of noise. A rate limit allows you to set the maximum amount of data to “500 events per minute”. Additionally, you can create a second key for the same project for your staging environment, which is unlimited, ensuring your QA process is still untouched.
 
-To set up rate limits, navigate to **[Project] » Client Keys » Configure**. Select an individual key or create a new one, then you’ll be able to define a rate limit as well as view a breakdown of events received by that key. For additional information and examples, see [Rate Limiting in our guide to Manage Your Event Stream](/accounts/quotas/manage-event-stream-guide/#6-rate-limiting).
+To set up rate limits, navigate to **[Project] » Client Keys » Configure**. Select an individual key or create a new one, then you’ll be able to define a rate limit as well as view a breakdown of events received by that key. For additional information and examples, see [Rate Limiting in our guide to Manage Your Event Stream](/product/accounts/quotas/manage-event-stream-guide/#6-rate-limiting).
 
 <Alert>Per-key rate limiting is available only for Business plans.</Alert>
 
@@ -171,7 +171,7 @@ In some cases, the data you’re receiving in Sentry is hard to filter, or you d
 - From specific release versions of your code
 - From certain IP addresses.
 
-Explore these by navigating to **[Project] » Project Settings » Inbound Filters**. Commonly-set filters are discussed here for your quick reference. For additional information and examples, see [Inbound Data Filters in our guide to Manage Your Event Stream](/accounts/quotas/manage-event-stream-guide/#inbound-data-filters). Commonly-set filters include:
+Explore these by navigating to **[Project] » Project Settings » Inbound Filters**. Commonly-set filters are discussed here for your quick reference. For additional information and examples, see [Inbound Data Filters in our guide to Manage Your Event Stream](/product/accounts/quotas/manage-event-stream-guide/#inbound-data-filters). Commonly-set filters include:
 
 ### IP Filters