ref(platform): Update sidebar components

mydea · mydea · commit 1ecd8c42f9b1 · 2025-04-09T10:51:11.000+02:00
This was a bit tricky to follow/understand, and should hopefully be clearer now.
diff --git a/src/components/sidebar/developDocsSidebar.tsx b/src/components/sidebar/developDocsSidebar.tsx
@@ -2,14 +2,14 @@ import {DocNode, nodeForPath} from 'sentry-docs/docTree';
 
 import styles from './style.module.scss';
 
-import {DynamicNav, toTree} from '../dynamicNav';
 import {SidebarLink} from '../sidebarLink';
 
+import {DynamicNav, toTree} from './dynamicNav';
 import {NavNode} from './types';
 import {docNodeToNavNode, getNavNodes} from './utils';
 
-const devDocsMenuItems: {root: string; title: string; hideChevron?: boolean}[] = [
-  {root: 'getting-started', title: 'Getting Started', hideChevron: true},
+const devDocsMenuItems: {root: string; title: string}[] = [
+  {root: 'getting-started', title: 'Getting Started'},
   {root: 'engineering-practices', title: 'Engineering Practices'},
   {root: 'application-architecture', title: 'Application Architecture'},
   {root: 'development-infrastructure', title: 'Development Infrastructure'},
@@ -26,9 +26,7 @@ export function DevelopDocsSidebar({
   path,
   rootNode,
   sidebarToggleId,
-  headerClassName,
 }: {
-  headerClassName: string;
   path: string;
   rootNode: DocNode;
   sidebarToggleId: string;
@@ -47,15 +45,13 @@ export function DevelopDocsSidebar({
       <div className="md:flex flex-col items-stretch">
         <div className={styles.toc}>
           <ul data-sidebar-tree>
-            {devDocsMenuItems.map(({root, title, hideChevron}) => (
+            {devDocsMenuItems.map(({root, title}) => (
               <DynamicNav
                 key={root}
                 root={root}
                 title={title}
                 tree={getNavTree(root)}
-                headerClassName={headerClassName}
-                collapse
-                withChevron={!hideChevron}
+                collapsible
               />
             ))}
           </ul>
diff --git a/src/components/sidebar/dynamicNav.tsx b/src/components/sidebar/dynamicNav.tsx
@@ -4,9 +4,12 @@ import {serverContext} from 'sentry-docs/serverContext';
 import {sortPages} from 'sentry-docs/utils';
 import {getUnversionedPath, VERSION_INDICATOR} from 'sentry-docs/versioning';
 
-import {NavChevron} from './sidebar/navChevron';
-import {SidebarLink} from './sidebarLink';
-import {SmartLink} from './smartLink';
+import styles from './style.module.scss';
+
+import {SidebarLink} from '../sidebarLink';
+import {SmartLink} from '../smartLink';
+
+import {NavChevron} from './navChevron';
 
 type Node = {
   [key: string]: any;
@@ -105,31 +108,19 @@ export function Children({tree, path, exclude = [], showDepth = 0}: ChildrenProp
 }
 
 type Props = {
-  headerClassName: string;
   root: string;
   tree: EntityTree[];
-  collapse?: boolean;
+  collapsible?: boolean;
   exclude?: string[];
-  noHeadingLink?: boolean;
-  prependLinks?: [string, string][];
-  showDepth?: number;
-  suppressMissing?: boolean;
   title?: string;
-  withChevron?: boolean;
 };
 
 export function DynamicNav({
   root,
   title,
   tree,
-  collapse = false,
+  collapsible = false,
   exclude = [],
-  showDepth = 0,
-  prependLinks = [],
-  suppressMissing = false,
-  noHeadingLink = false,
-  headerClassName,
-  withChevron = false,
 }: Props) {
   if (root.startsWith('/')) {
     root = root.substring(1);
@@ -141,10 +132,8 @@ export function DynamicNav({
   rootBits.forEach(bit => {
     entity = currentTree.find(n => n.name === bit);
     if (!entity) {
-      if (!suppressMissing) {
-        // eslint-disable-next-line no-console
-        console.warn(`Could not find entity at ${root} (specifically at ${bit})`);
-      }
+      // eslint-disable-next-line no-console
+      console.warn(`Could not find entity at ${root} (specifically at ${bit})`);
       return;
     }
     currentTree = entity.children;
@@ -155,44 +144,39 @@ export function DynamicNav({
   if (!title && entity.node) {
     title = entity.node.context.sidebar_title || entity.node.context.title || '';
   }
-  const parentNode = entity.children
-    ? entity.children.find((n: EntityTree) => n.name === '')
-    : null;
+  const parentNode = entity.children?.find((n: EntityTree) => n.name === '');
+
+  if (!parentNode) {
+    // eslint-disable-next-line no-console
+    console.warn(`Could not find parentNode at ${root}`);
+    return null;
+  }
 
   const {path} = serverContext();
   const isActive = path.join('/').indexOf(root) === 0;
   const linkPath = `/${path.join('/')}/`;
 
-  const header =
-    parentNode && !noHeadingLink ? (
-      <SmartLink
-        to={`/${root}/`}
-        className={`${headerClassName} ${getUnversionedPath(path, false) === root ? 'active' : ''} justify-between`}
-        activeClassName="active"
-        data-sidebar-link
-      >
-        <strong>{title}</strong>
-        {withChevron && <NavChevron direction={isActive ? 'down' : 'right'} />}
-      </SmartLink>
-    ) : (
-      <div className={headerClassName} data-sidebar-link>
-        <strong>{title}</strong>
-      </div>
-    );
+  const header = (
+    <SmartLink
+      to={`/${root}/`}
+      className={`${styles['sidebar-title']} flex items-center ${getUnversionedPath(path, false) === root ? 'active' : ''} justify-between`}
+      activeClassName="active"
+      data-sidebar-link
+    >
+      <strong>{title}</strong>
+      {collapsible && <NavChevron direction={isActive ? 'down' : 'right'} />}
+    </SmartLink>
+  );
 
   return (
     <li className="mb-3" data-sidebar-branch>
       {header}
-      {(!collapse || isActive) && entity.children && (
+      {(!collapsible || isActive) && entity.children && (
         <ul data-sidebar-tree className="pl-3">
-          {prependLinks &&
-            prependLinks.map(link => (
-              <SidebarLink to={link[0]} key={link[0]} title={link[1]} path={linkPath} />
-            ))}
           <Children
             tree={entity.children}
             exclude={exclude}
-            showDepth={showDepth}
+            showDepth={0}
             path={linkPath}
           />
         </ul>
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
@@ -19,7 +19,6 @@ import {SidebarLinks} from './sidebarLinks';
 import {SidebarProps} from './types';
 
 const activeLinkSelector = `.${styles.sidebar} .toc-item .active`;
-const headerClassName = `${styles['sidebar-title']} flex items-center`;
 
 export const sidebarToggleId = styles['navbar-menu-toggle'];
 
@@ -29,7 +28,6 @@ export async function Sidebar({path, versions}: SidebarProps) {
   if (isDeveloperDocs) {
     return (
       <DevelopDocsSidebar
-        headerClassName={headerClassName}
         sidebarToggleId={sidebarToggleId}
         path={'/' + path.join('/') + '/'}
         rootNode={rootNode}
@@ -102,7 +100,7 @@ export async function Sidebar({path, versions}: SidebarProps) {
         </div>
         <div className={styles.toc}>
           <ScrollActiveLink activeLinkSelector={activeLinkSelector} />
-          <SidebarLinks path={path} headerClassName={headerClassName} />
+          <SidebarLinks path={path} />
         </div>
       </div>
     </aside>
diff --git a/src/components/sidebar/platformSidebar.tsx b/src/components/sidebar/platformSidebar.tsx
@@ -1,15 +1,13 @@
 import {DocNode, getGuide, getPlatform, nodeForPath} from 'sentry-docs/docTree';
 
-import {DynamicNav, toTree} from '../dynamicNav';
-
+import {DynamicNav, toTree} from './dynamicNav';
 import {PlatformSidebarProps} from './types';
 import {getNavNodes} from './utils';
 
 export function PlatformSidebar({
   rootNode,
   platformName,
   guideName,
-  headerClassName,
 }: PlatformSidebarProps) {
   const docNodeToPlatformSidebarNode = (n: DocNode) => {
     if (n.frontmatter.draft) {
@@ -52,7 +50,6 @@ export function PlatformSidebar({
         tree={tree}
         title={`Sentry for ${(guide || platform).title}`}
         exclude={[`/${pathRoot}/guides/`]}
-        headerClassName={headerClassName}
       />
     </ul>
   );
diff --git a/src/components/sidebar/productSidebar.tsx b/src/components/sidebar/productSidebar.tsx
@@ -1,12 +1,12 @@
 import {nodeForPath} from 'sentry-docs/docTree';
 
-import {DynamicNav, toTree} from '../dynamicNav';
 import {SidebarLink} from '../sidebarLink';
 
+import {DynamicNav, toTree} from './dynamicNav';
 import {NavNode, ProductSidebarProps} from './types';
 import {docNodeToNavNode, getNavNodes} from './utils';
 
-export function ProductSidebar({rootNode, items, headerClassName}: ProductSidebarProps) {
+export function ProductSidebar({rootNode, items}: ProductSidebarProps) {
   const itemTree = (item: string) => {
     const node = nodeForPath(rootNode, item);
     if (!node) {
@@ -28,9 +28,7 @@ export function ProductSidebar({rootNode, items, headerClassName}: ProductSideba
                 root={item.root}
                 title={item.title}
                 tree={tree}
-                headerClassName={headerClassName}
-                collapse
-                withChevron
+                collapsible
               />
             )
           );
diff --git a/src/components/sidebar/sidebarLinks.tsx b/src/components/sidebar/sidebarLinks.tsx
@@ -2,9 +2,8 @@ import {Fragment} from 'react';
 
 import {getDocsRootNode, nodeForPath} from 'sentry-docs/docTree';
 
-import {DynamicNav, toTree} from '../dynamicNav';
-
 import {DefaultSidebar} from './defaultSidebar';
+import {DynamicNav, toTree} from './dynamicNav';
 import {PlatformSidebar} from './platformSidebar';
 import {ProductSidebar} from './productSidebar';
 import {NavNode} from './types';
@@ -47,13 +46,7 @@ const productSidebarItems = [
   },
 ];
 
-export async function SidebarLinks({
-  path,
-  headerClassName,
-}: {
-  headerClassName: string;
-  path: string[];
-}) {
+export async function SidebarLinks({path}: {path: string[]}) {
   const rootNode = await getDocsRootNode();
   if (
     productSidebarItems.some(el => el.root === path[0]) ||
@@ -63,7 +56,6 @@ export async function SidebarLinks({
       <ProductSidebar
         rootNode={rootNode}
         items={productSidebarItems}
-        headerClassName={headerClassName}
       />
     );
   }
@@ -79,15 +71,13 @@ export async function SidebarLinks({
               platformName={platformName}
               guideName={guideName}
               rootNode={rootNode}
-              headerClassName={headerClassName}
             />
             <hr />
           </Fragment>
         )}
         <ProductSidebar
           rootNode={rootNode}
           items={productSidebarItems}
-          headerClassName={headerClassName}
         />
       </Fragment>
     );
@@ -102,7 +92,6 @@ export async function SidebarLinks({
             root="contributing"
             title="Contributing to Docs"
             tree={toTree(contribNodes)}
-            headerClassName={headerClassName}
           />
         </ul>
       );
diff --git a/src/components/sidebar/types.ts b/src/components/sidebar/types.ts
@@ -18,13 +18,11 @@ export type DefaultSidebarProps = SidebarProps & {
 };
 
 export type ProductSidebarProps = {
-  headerClassName: string;
   items: {root: string; title: string}[];
   rootNode: DocNode;
 };
 
 export type PlatformSidebarProps = {
-  headerClassName: string;
   platformName: string;
   rootNode: DocNode;
   guideName?: string;
