Merge branch 'master' of github.com:getsentry/sentry-docs into feat/node-lambda-docs

Author: AJ

src/components/markdown.tsx

@@ -20,6 +20,7 @@ import DefinitionList from "./definitionList";
 import PlatformRedirectLink from "./platformRedirectLink";
 import PlatformSection from "./platformSection";
 import PlatformIdentifier from "./platformIdentifier";
+import RelayMetrics from "./relayMetrics";
 
 const mdxComponents = {
   Alert,
@@ -39,6 +40,7 @@ const mdxComponents = {
   PlatformRedirectLink,
   PlatformSection,
   PlatformIdentifier,
+  RelayMetrics,
 };
 
 export default ({ value }) => {

src/components/relayMetrics.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { graphql, useStaticQuery } from "gatsby";
+import Alert from "~src/components/alert";
+
+const query = graphql`
+  query RelayMetricsQuery {
+    allRelayMetric {
+      nodes {
+        name
+        type
+        features
+
+        childRelayMetricDescription {
+          childMarkdownRemark {
+            html
+          }
+        }
+      }
+    }
+  }
+`;
+
+const MetricType = styled.span`
+  color: var(--light-text);
+  font-style: italic;
+`;
+
+function RelayFeatures({ features }) {
+  if (Array.isArray(features) && features.includes("processing")) {
+    return (
+      <Alert level="info" title="Note">
+        This metric is emitted only when Relay runs as internal Sentry service
+        for event ingestion (<code>processing</code> feature).
+      </Alert>
+    );
+  }
+
+  return null;
+}
+
+function Metric({ metric }) {
+  const descriptionHtml =
+    metric.childRelayMetricDescription.childMarkdownRemark.html;
+
+  return (
+    <>
+      <dt>
+        <code>
+          {metric.name} <MetricType>({metric.type})</MetricType>
+        </code>
+      </dt>
+      <dd>
+        <RelayFeatures features={metric.features} />
+        <div
+          dangerouslySetInnerHTML={{
+            __html: descriptionHtml,
+          }}
+        />
+      </dd>
+    </>
+  );
+}
+
+export default (): JSX.Element => {
+  const data = useStaticQuery(query);
+  const metrics = data.allRelayMetric.nodes;
+
+  return (
+    <dl>
+      {metrics.map(metric => (
+        <Metric key={metric.name} metric={metric} />
+      ))}
+    </dl>
+  );
+};

src/components/sidebar.tsx

@@ -40,7 +40,12 @@ export const Sidebar = ({ data }: ChildProps): JSX.Element => {
   const tree = toTree(data.allSitePage.nodes.filter(n => !!n.context));
   return (
     <ul className="list-unstyled" data-sidebar-tree>
-      <DynamicNav root="product" title="Product" tree={tree} />
+      <DynamicNav
+        root="product"
+        title="Product"
+        tree={tree}
+        exclude={["/product/relay/"]}
+      />
       <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} />

src/css/_includes/development-api.scss

@@ -29,6 +29,23 @@
   align-items: center;
 }
 
+.api-block-header.response .tabs-group {}
+
+.api-block-header.response .tabs-group .tab {
+  border-left: 1px solid #444;
+  color: #9990ab;
+  cursor: pointer;
+
+  &:first-child {
+    padding-right: 8px;
+    border: none;
+  }
+
+  &:not(:first-child) {
+    padding-left: 8px;
+  }
+}
+
 .response-status-btn-group {
   border-radius: 3px;
 }
@@ -55,7 +72,8 @@
   }
 }
 
-.response-status-btn.selected {
+.response-status-btn.selected,
+.api-block-header.response .tabs-group .tab.selected {
   color: var(--white);
 }
 
@@ -87,3 +105,15 @@
 .api-params dd {
   margin-top: 0rem !important;
 }
+
+.api-params dt {
+  display: flex;
+  flex-direction: row;
+}
+
+.api-params .required {
+  font-size: 0.8rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  padding-left: 1rem;
+}