DOP-4952: Breadcrumb used for "Previous Page" (#1299)

mongodb · Nov 4, 2024 · 1896d79 · 1896d79
1 parent 89cc8e1
commit 1896d79
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/src/templates/FeatureNotAvailable.js b/src/templates/FeatureNotAvailable.js
@@ -8,6 +8,7 @@ import { H2 } from '@leafygreen-ui/typography';
 import { theme } from '../theme/docsTheme';
 import Breadcrumbs from '../components/Breadcrumbs';
 import { isBrowser } from '../utils/is-browser';
+import { getCompleteUrl, getUrl } from '../utils/url-utils';
 
 const StyledMain = styled.main`
   max-width: 100vw;
@@ -79,12 +80,6 @@ const LinkContainer = styled.div`
   margin-top: ${theme.size.large};
 `;
 
-const click = () => {
-  if (isBrowser) {
-    window.history.back();
-  }
-};
-
 const FeatureNotAvailContainer = styled.div`
   align-items: center;
   display: flex;
@@ -110,6 +105,9 @@ const FeatureNotAvailable = () => {
     pageInfo = JSON.parse(sessionStorage.getItem('pageInfo'));
   }
 
+  const { urlSlug, project, siteBasePrefix } = pageInfo || {};
+  const selfCrumbPath = getCompleteUrl(getUrl(urlSlug, project, siteBasePrefix, selfBreadcrumb?.slug));
+
   return (
     <StyledMain>
       <div class="body">
@@ -128,7 +126,7 @@ const FeatureNotAvailable = () => {
           <ContentBox>
             <H2 className={cx(titleStyling)}>We're sorry, this page isn't available in the version you selected.</H2>
             <LinkContainer>
-              <Button onClick={click} variant="default" className={cx(buttonStyling)}>
+              <Button href={withPrefix(selfCrumbPath)} variant="default" className={cx(buttonStyling)}>
                 Go back to previous page
               </Button>
             </LinkContainer>

diff --git a/src/utils/get-complete-breadcrumb-data.js b/src/utils/get-complete-breadcrumb-data.js
@@ -35,6 +35,14 @@ export const getFullBreadcrumbPath = (siteUrl, path, needsPrefix) => {
   return assertTrailingSlash(path);
 };
 
+export const getSelfCrumbPath = (selfCrumbContent, urlSlug, project, siteBasePrefix) => {
+  if (!project || !siteBasePrefix) return baseUrl();
+  const isLanding = project === 'landing';
+  if (!isLanding && selfCrumbContent)
+    return getCompleteUrl(getUrl(urlSlug, project, siteBasePrefix, selfCrumbContent.slug));
+  return selfCrumbContent?.slug ?? baseUrl();
+};
+
 export const getCompleteBreadcrumbData = ({
   siteUrl,
   siteTitle,
@@ -82,15 +90,10 @@ export const getCompleteBreadcrumbData = ({
     };
   });
 
-  const selfCrumbPath =
-    selfCrumbContent && !isLanding
-      ? getCompleteUrl(getUrl(urlSlug, project, siteBasePrefix, selfCrumbContent.slug))
-      : selfCrumbContent?.slug;
-
   const selfCrumb = selfCrumbContent
     ? {
         title: selfCrumbContent.title,
-        path: selfCrumbPath,
+        path: getSelfCrumbPath(selfCrumbContent, urlSlug, project, siteBasePrefix),
       }
     : null;