Remove version from breadcrumb on product install page (#2216)

* Remove version from breadcrumb on product install page

* Added useRouter to product-view downloads page to handle VMware Utility edge case in breadcrumb title

* Update helpers.ts

remove url from breadcrumb if current page

* Update index.tsx

Moved useRouter to third-party imports

* Make last breadcrumb (the current page) a span instead of a link

* Added current class to last breadcrumb; removed aria-current as it's optional for last breadcrumb non-link item

src/components/breadcrumb-bar/breadcrumb-bar.module.css

@@ -46,7 +46,9 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-
+	&[aria-current='page'] {
+		color: var(--token-color-foreground-strong);
+	}
 	&[href] {
 		&:hover {
 			text-decoration: underline;
@@ -62,9 +64,5 @@
 			margin: -5px;
 			padding: 5px;
 		}
-
-		&[aria-current='page'] {
-			color: var(--token-color-foreground-strong);
-		}
 	}
 }

src/components/breadcrumb-bar/index.tsx

@@ -71,7 +71,8 @@ function BreadcrumbBar({
 			<ol className={s.listRoot}>
 				{links.map(({ title, url, isCurrentPage }) => {
 					const cleanTitle = title.replace(/<[^>]+>/g, '')
-					const Elem = url ? InternalLink : 'span'
+					const Elem = url && !isCurrentPage ? InternalLink : 'span'
+
 					return (
 						<Text
 							asElement="li"
@@ -82,7 +83,7 @@ function BreadcrumbBar({
 						>
 							<Elem
 								className={s.breadcrumbText}
-								href={url}
+								href={!isCurrentPage ? url : undefined}
 								aria-current={isCurrentPage ? 'page' : undefined}
 								data-heap-track="breadcrumb-bar-item"
 							>

src/views/product-downloads-view/helpers.ts

@@ -163,9 +163,13 @@ export const getPageSubtitle = ({
 
 export const initializeBreadcrumbLinks = (
 	currentProduct: Pick<ProductData, 'name' | 'slug'>,
-	selectedVersion: string,
-	isEnterpriseMode: boolean
+	isEnterpriseMode: boolean,
+	pathname: string
 ): BreadcrumbLink[] => {
+	const nonEnterpriseTitle =
+		pathname === '/vagrant/downloads/vmware'
+			? `Install VMware Utility`
+			: `Install`
 	return [
 		{
 			title: 'Developer',
@@ -177,12 +181,7 @@ export const initializeBreadcrumbLinks = (
 		},
 		{
 			isCurrentPage: true,
-			title: isEnterpriseMode
-				? `Install ${currentProduct.name} Enterprise`
-				: `Install v${selectedVersion}`,
-			url: isEnterpriseMode
-				? `/${currentProduct.slug}/downloads/enterprise`
-				: `/${currentProduct.slug}/downloads`,
+			title: isEnterpriseMode ? `Install Enterprise` : `${nonEnterpriseTitle}`,
 		},
 	]
 }

src/views/product-downloads-view/index.tsx

@@ -5,6 +5,7 @@
 
 // Third-party imports
 import { ReactElement, useMemo } from 'react'
+import { useRouter } from 'next/router'
 
 // HashiCorp imports
 import HashiHead from '@hashicorp/react-head'
@@ -61,14 +62,11 @@ const ProductDownloadsViewContent = ({
 	} = pageContent
 	const currentProduct = useCurrentProduct()
 	const { currentVersion } = useCurrentVersion()
+	const { pathname } = useRouter()
+
 	const breadcrumbLinks = useMemo(
-		() =>
-			initializeBreadcrumbLinks(
-				currentProduct,
-				currentVersion,
-				isEnterpriseMode
-			),
-		[currentProduct, currentVersion, isEnterpriseMode]
+		() => initializeBreadcrumbLinks(currentProduct, isEnterpriseMode, pathname),
+		[currentProduct, isEnterpriseMode, pathname]
 	)
 	const sidebarNavDataLevels = [
 		generateTopLevelSidebarNavData(currentProduct.name),