Install page TOC: Remove link from SidebarHeading (#2272)

src/components/open-api-sidebar-contents/utils/filter-by-title.ts

@@ -16,16 +16,6 @@ export function filterByTitle<T = unknown>(
 	items: T[],
 	filterValue: string
 ): T[] {
-	// If we're in dev, and none of the items have a `title` property,
-	// throw an error cause there's probably something unintentional happening.
-	if (IS_DEV) {
-		if (!items.some(isObjectWithTitle)) {
-			throw new Error(
-				'Error: None of the items passed to filterByTitle were found to have a `title` attribute. Please ensure at least one of the items being passed has a `title` attribute.'
-			)
-		}
-	}
-
 	if (!filterValue) {
 		// If there's no filter value, return items unchanged
 		return items

src/components/sidebar/components/sidebar-nav-highlight-item/index.tsx

@@ -7,8 +7,10 @@ import Link from 'components/link'
 import classNames from 'classnames'
 import { isProductSlug } from 'lib/products'
 import ProductIcon from 'components/product-icon'
+import Text from 'components/text'
 import { NavHighlightItem } from 'components/sidebar/types'
 import s from './sidebar-nav-highlight-item.module.css'
+import { log } from 'console'
 
 /**
  * Render a fancy-looking, product themed linked sidebar item.
@@ -24,19 +26,34 @@ export default function SidebarNavHighlightItem({
 }: {
 	theme: NavHighlightItem['theme']
 	text: string
-	href: string
+	href?: string
 	isActive?: boolean
 }) {
+	const icon = isProductSlug(theme) ? (
+		<ProductIcon className={s.icon} productSlug={theme} />
+	) : null
+	const textEl = <span className={s.text}>{text}</span>
+
+	if (!href?.length) {
+		return (
+			<Text
+				asElement="p"
+				aria-current={isActive ? 'page' : undefined}
+				className={classNames(s.root, s[`theme-${theme}`])}
+			>
+				{icon}
+				{textEl}
+			</Text>
+		)
+	}
 	return (
 		<Link
 			aria-current={isActive ? 'page' : undefined}
 			className={classNames(s.root, s[`theme-${theme}`])}
 			href={href}
 		>
-			{isProductSlug(theme) ? (
-				<ProductIcon className={s.icon} productSlug={theme} />
-			) : null}
-			<span className={s.text}>{text}</span>
+			{icon}
+			{textEl}
 		</Link>
 	)
 }

src/components/sidebar/components/sidebar-nav-menu-item/index.tsx

@@ -293,19 +293,19 @@ const SidebarNavMenuItem = ({ item }: SidebarNavMenuItemProps) => {
 	let itemContent
 	if (item.divider) {
 		itemContent = <SidebarHorizontalRule />
-	} else if (item.heading) {
-		itemContent = <SidebarSectionHeading text={item.heading} />
 	} else if (item.routes) {
 		itemContent = <SidebarNavSubmenuItem item={item} />
 	} else if (item.theme) {
 		itemContent = (
 			<SidebarNavHighlightItem
 				theme={item.theme}
-				text={item.title}
+				text={item.title ?? item.heading}
 				href={item.fullPath}
 				isActive={item.isActive}
 			/>
 		)
+	} else if (item.heading) {
+		itemContent = <SidebarSectionHeading text={item.heading} />
 	} else {
 		itemContent = <SidebarNavLinkItem item={item} />
 	}

src/components/sidebar/helpers/generate-install-view-nav-items.ts

@@ -38,9 +38,9 @@ export const generateInstallViewNavItems = (
 		? `Install ${product.name} Enterprise`
 		: `Install ${product.name}`
 	const titleItem = {
-		title,
-		fullPath: `/${product.slug}/install`,
+		heading: title,
 		theme: product.slug,
+		isActive: true,
 	}
 
 	return {