Remove scoped visibility from the docs engine

components/Admonition/Admonition.tsx

@@ -1,6 +1,6 @@
 import cn from "classnames";
 import { useContext, useMemo } from "react";
-import { DocsContext, getScopes } from "layouts/DocsPage/context";
+import { DocsContext } from "layouts/DocsPage/context";
 import styles from "./Admonition.module.css";
 
 const capitalize = (text: string): string =>
@@ -12,31 +12,19 @@ export interface AdmonitionProps {
   type: (typeof types)[number];
   title: string;
   children: React.ReactNode;
-  scopeOnly: boolean;
   scope?: string | string[];
 }
 
 const Admonition = ({
   type = "tip",
   title,
   children,
-  scopeOnly = false,
   scope,
 }: AdmonitionProps) => {
   const resolvedType = type && types.includes(type) ? type : "tip";
-  const { scope: currentScope } = useContext(DocsContext);
-  const scopes = useMemo(() => getScopes(scope), [scope]);
-  const isInCurrentScope = scopes.includes(currentScope);
-  const isHidden = scopeOnly && !isInCurrentScope;
 
   return (
-    <div
-      className={cn(
-        styles.wrapper,
-        isHidden && styles.hidden,
-        styles[resolvedType]
-      )}
-    >
+    <div className={cn(styles.wrapper, styles[resolvedType])}>
       <div className={styles.header}>{title || capitalize(type)}</div>
       <div className={styles.body}>{children}</div>
     </div>

components/Details/Details.tsx

@@ -3,7 +3,7 @@ import { useContext, useEffect, useState, useMemo } from "react";
 import { useRouter } from "next/router";
 import HeadlessButton from "components/HeadlessButton";
 import Icon from "components/Icon";
-import { DocsContext, getScopes } from "layouts/DocsPage/context";
+import { DocsContext } from "layouts/DocsPage/context";
 import { getAnchor } from "utils/url";
 import styles from "./Details.module.css";
 
@@ -19,54 +19,35 @@ export interface DetailsProps {
   scope?: string | string[];
   title: string;
   opened?: boolean;
-  scopeOnly: boolean;
   min: string;
   children: React.ReactNode;
 }
 
 export const Details = ({
   scope,
-  scopeOnly = false,
   opened = false,
   title,
   min,
   children,
 }: DetailsProps) => {
   const {
-    scope: currentScope,
     versions: { current, latest },
   } = useContext(DocsContext);
   const router = useRouter();
-  const scopes = useMemo(() => getScopes(scope), [scope]);
   const [isOpened, setIsOpened] = useState(opened);
-  const isInCurrentScope = scopes.includes(currentScope);
   const detailsId = title ? transformTitleToAnchor(title) : "title";
   const anchorInPath = getAnchor(router.asPath);
 
-  useEffect(() => {
-    if (scopes.length) {
-      setIsOpened(isInCurrentScope);
-    }
-  }, [scopes, isInCurrentScope]);
-
   useEffect(() => {
     if (anchorInPath === detailsId) {
       setIsOpened(true);
     }
   }, [anchorInPath, detailsId]);
 
-  const isCloudAndNotCurrent = scopes.includes("cloud") && current !== latest;
-  const isHiddenInCurrentScope = scopeOnly && !isInCurrentScope;
-  const isHidden = isCloudAndNotCurrent || isHiddenInCurrentScope;
-
   return (
     <div
-      className={cn(
-        styles.wrapper,
-        isHidden && styles.hidden,
-        isOpened && styles.opened
-      )}
-      id={isHidden ? undefined : detailsId}
+      className={cn(styles.wrapper, isOpened && styles.opened)}
+      id={detailsId}
     >
       <HeadlessButton
         onClick={() => setIsOpened((value) => !value)}
@@ -75,17 +56,8 @@ export const Details = ({
         <Icon name="arrow" className={styles.icon} />
         <div className={styles.description}>
           <div className={styles.title}>{title}</div>
-          {(scope || min) && (
+          {min && (
             <div className={styles.meta}>
-              {scopes && (
-                <div className={styles.scopes}>
-                  {scopes.map((scope) => (
-                    <div className={styles.scope} key={scope}>
-                      {scope}
-                    </div>
-                  ))}
-                </div>
-              )}
               {min && <div className={styles.min}>VERSION {min}+</div>}
             </div>
           )}

components/Link/hooks.ts

@@ -9,7 +9,7 @@ import {
   isExternalLink,
   isLocalAssetFile,
 } from "utils/url";
-import { DocsContext, updateScopeInUrl } from "layouts/DocsPage/context";
+import { DocsContext } from "layouts/DocsPage/context";
 
 /*
  * This hook should return current href with resolved rewrites
@@ -35,8 +35,6 @@ export const useNormalizedHref = (href: string) => {
     ? href.substring(basePath.length)
     : href;
 
-  let scope: ScopeType = useContext(DocsContext).scope;
-
   const { query } = splitPath(href);
 
   // This needs to be added because all strings of "/docs/" are being stripped down to
@@ -46,15 +44,6 @@ export const useNormalizedHref = (href: string) => {
     return href;
   }
 
-  // If a valid scope is provided via query parameter, adjust the
-  // link to navigate to that scope.
-  if (
-    query.hasOwnProperty("scope") &&
-    scopeValues.includes(query.scope as ScopeType)
-  ) {
-    scope = query["scope"] as ScopeType;
-  }
-
   if (
     isHash(noBaseHref) ||
     isExternalLink(noBaseHref) ||
@@ -65,7 +54,5 @@ export const useNormalizedHref = (href: string) => {
 
   const currentHref = normalizePath(asPath);
 
-  let fullHref = resolve(splitPath(currentHref).path, noBaseHref);
-
-  return updateScopeInUrl(fullHref, scope);
+  return resolve(splitPath(currentHref).path, noBaseHref);
 };

components/Notice/Notice.tsx

@@ -1,7 +1,5 @@
 import { useMemo, useContext } from "react";
 import Icon from "components/Icon";
-import { DocsContext, getScopes } from "layouts/DocsPage/context";
-import { ScopesType } from "layouts/DocsPage/types";
 import cn from "classnames";
 import styles from "./Notice.module.css";
 
@@ -21,7 +19,7 @@ export interface NoticeProps {
   children: React.ReactNode;
   className?: string;
   icon?: boolean;
-  scope?: ScopesType;
+  scope?: string;
 }
 
 const Notice = ({
@@ -34,17 +32,8 @@ const Notice = ({
 }: NoticeProps) => {
   const type = baseType && types.includes(baseType) ? baseType : "tip";
   const iconName = typeIcons[type];
-  const { scope: currentScope } = useContext(DocsContext);
-  const scopes = useMemo(() => getScopes(scope), [scope]);
-
-  const isHidden = scope && !scopes.includes(currentScope);
-
   return (
-    <div
-      className={cn(styles.wrapper, styles[type], className, {
-        [`${styles.hidden}`]: isHidden,
-      })}
-    >
+    <div className={cn(styles.wrapper, styles[type], className)}>
       {icon && <Icon name={iconName} className={styles.icon} />}
       <div className={styles.body}>{children}</div>
     </div>

components/Tabs/Tabs.tsx

@@ -6,7 +6,7 @@ import {
   useMemo,
 } from "react";
 import { Dropdown } from "components/Dropdown";
-import { DocsContext, getScopes } from "layouts/DocsPage/context";
+import { DocsContext } from "layouts/DocsPage/context";
 import { TabLabelList } from "./TabLabel";
 import { TabItemList } from "./TabItem";
 import { DataTab, TabsInDropdowns, TabItemProps, TabsProps } from "./types";
@@ -46,7 +46,7 @@ import { TabContext } from "./TabContext";
       ```
     </TabItem>
 
-    <TabItem scope={["oss", "enterprise"]} label="From Source">
+    <TabItem label="From Source">
       ```code
         # Checkout teleport-plugins
         $ git clone https://github.com/gravitational/teleport-plugins.git
@@ -78,7 +78,6 @@ export const Tabs = ({
   dropdownView,
 }: TabsProps) => {
   const {
-    scope,
     versions: { latest, current },
   } = useContext(DocsContext);
 
@@ -168,16 +167,6 @@ export const Tabs = ({
     setCurrentTab(getSelectedTab(tabsMeta));
   }, [tabsMeta, selectedDropdownOption]);
 
-  useEffect(() => {
-    const scopedTab = childTabs.find(({ props }) =>
-      getScopes(props.scope).includes(scope)
-    );
-
-    if (scopedTab) {
-      setCurrentTab(scopedTab.props.label);
-    }
-  }, [scope, childTabs]);
-
   const visibleTabs = dropdownVarsArr.filter((t) => t !== DEFAULT_DROPDOWN);
   const dropOptions = tabsMeta.map((item) => item.label);
 

layouts/DocsPage/DocsPage.tsx

@@ -45,22 +45,14 @@ const DocsPage = ({
 }: DocsPageProps) => {
   const route = useCurrentHref();
 
-  const { setVersions, scope, setScope } = useContext(DocsContext);
+  const { setVersions } = useContext(DocsContext);
 
   const { current, latest, available } = versions;
   const getPath = useFindDestinationPath(versions);
 
   useEffect(() => {
     setVersions(versions);
-
-    if (
-      scopes[0] !== "" &&
-      scopes[0] !== "noScope" &&
-      !scopes.includes(scope)
-    ) {
-      setScope(scopes[0]);
-    }
-  }, [versions, setVersions, setScope, scopes, scope]);
+  }, [versions, setVersions]);
 
   const isSectionLayout = layout === "section";
   const isTocVisible = (!layout || layout === "doc") && tableOfContents.length;

layouts/DocsPage/Header.tsx

@@ -30,8 +30,6 @@ const DocHeader = ({
   latest,
   scopes,
 }: DocHeaderProps) => {
-  const { scope } = useContext(DocsContext);
-
   return (
     <section className={styles.wrapper}>
       <a href={GITHUB_DOCS} className={styles["github-link"]}>
@@ -53,7 +51,6 @@ const DocHeader = ({
               {...versions}
               className={styles.versions}
               getNewVersionPath={getNewVersionPath}
-              disabled={scope === "cloud" || scope === "team"}
               latest={latest}
             />
           )}

layouts/DocsPage/Navigation.tsx

@@ -5,7 +5,6 @@ import HeadlessButton from "components/HeadlessButton";
 import Search from "components/Search";
 import Icon from "components/Icon";
 import Link, { useCurrentHref } from "components/Link";
-import { getScopeFromUrl } from "./context";
 import {
   NavigationItem,
   NavigationCategory,
@@ -63,7 +62,6 @@ const DocsNavigationItems = ({
 }: DocsNavigationItemsProps) => {
   const router = useRouter();
   const docPath = useCurrentHref().split(SCOPELESS_HREF_REGEX)[0];
-  const urlScope = getScopeFromUrl(router.asPath);
 
   return (
     <>

layouts/DocsPage/Scopes.module.css

@@ -19,3 +19,51 @@
     margin-left: var(--m-1);
   }
 }
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 32px;
+  padding: 0 var(--m-2);
+  font-size: var(--fs-text-sm);
+  font-weight: 600;
+  border-radius: var(--r-default);
+  transition: background-color var(--t-interaction),
+    border-color var(--t-interaction);
+
+  &.variant-availablefor {
+    color: var(--color-black);
+    background-color: var(--color-white);
+  }
+
+  &.variant-gray {
+    color: var(--color-gray);
+    background-color: var(--color-white);
+  }
+
+  &.variant-green {
+    color: var(--color-green);
+    background-color: var(--color-white);
+  }
+
+  &.variant-blue {
+    color: var(--color-light-blue);
+    background-color: var(--color-white);
+  }
+
+  @media (--sm-scr) {
+    font-size: var(--fs-text-md);
+  }
+}
+
+.icon {
+  width: 14px;
+  height: 14px;
+  margin-right: var(--m-0-5);
+}
+
+.wrapper {
+  position: relative;
+}