Add docs component for API members that are marked as alpha/beta (#11529

)

docs/shared/ApiDoc/DocBlock.js

@@ -11,10 +11,12 @@ export function DocBlock({
   example = false,
   remarksCollapsible = false,
   deprecated = false,
+  releaseTag = false,
 }) {
   return (
     <Stack spacing="4">
       {deprecated && <Deprecated canonicalReference={canonicalReference} />}
+      {releaseTag && <ReleaseTag canonicalReference={canonicalReference} />}
       {summary && <Summary canonicalReference={canonicalReference} />}
       {remarks && (
         <Remarks
@@ -130,3 +132,30 @@ Example.propTypes = {
   collapsible: PropTypes.bool,
   index: PropTypes.number,
 };
+
+export function ReleaseTag({ canonicalReference }) {
+  const getItem = useApiDocContext();
+  const item = getItem(canonicalReference);
+  const MDX = useMDXComponents();
+
+  if (item.releaseTag === "Public") {
+    return null;
+  }
+
+  return (
+    <MDX.ExperimentalFeature>
+      This is in{" "}
+      <MDX.PrimaryLink
+        href="https://www.apollographql.com/docs/resources/product-launch-stages/#alpha--beta"
+        target="_blank"
+      >
+        {item.releaseTag.toLowerCase()} stage
+      </MDX.PrimaryLink>{" "}
+      and is subject to breaking changes.
+    </MDX.ExperimentalFeature>
+  );
+}
+
+ReleaseTag.propTypes = {
+  canonicalReference: PropTypes.string.isRequired,
+};

docs/shared/ApiDoc/Function.js

@@ -109,7 +109,12 @@ export function FunctionDetails({
         headingLevel={headingLevel}
         since
       />
-      <DocBlock canonicalReference={canonicalReference} deprecated remarks />
+      <DocBlock
+        canonicalReference={canonicalReference}
+        deprecated
+        remarks
+        releaseTag
+      />
       {item.comment?.examples.length == 0 ? null : (
         <>
           <SubHeading

docs/shared/ApiDoc/PropertySignatureTable.js

@@ -7,7 +7,6 @@ import {
   FunctionSignature,
   useApiDocContext,
   ApiDocHeading,
-  SectionHeading,
 } from ".";
 import { GridItem, Text } from "@chakra-ui/react";
 import { ResponsiveGrid } from "./ResponsiveGrid";
@@ -105,6 +104,7 @@ export function PropertySignatureTable({
                       summary
                       remarks
                       remarkCollapsible
+                      releaseTag
                     />
                   </GridItem>
                 </React.Fragment>

docs/shared/ApiDoc/index.js

@@ -1,5 +1,12 @@
 export { useApiDocContext } from "./Context";
-export { DocBlock, Deprecated, Example, Remarks, Summary } from "./DocBlock";
+export {
+  DocBlock,
+  Deprecated,
+  Example,
+  Remarks,
+  ReleaseTag,
+  Summary,
+} from "./DocBlock";
 export { PropertySignatureTable } from "./PropertySignatureTable";
 export { ApiDocHeading, SubHeading, SectionHeading } from "./Heading";
 export { InterfaceDetails } from "./InterfaceDetails";