fix: attempt to fix release notes links (#2000)

* fix: attempt to fix release notes links * chore: changeset * chore: another attempo * chore: attempt with custom page * chore: megamenu link * chore: sidebar link fix * chore: remove leftover * chore: added release-notes.yaml * chore: add initial docs * chore: use gatsby-config data * chore: remove leftover
commercetools · Jun 13, 2024 · 2da2bac · 2da2bac
1 parent 6818cc2
commit 2da2bac
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 115 deletions.
diff --git a/.changeset/tough-dots-rest.md b/.changeset/tough-dots-rest.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-docs/gatsby-theme-docs': patch
+'@commercetools-website/docs-smoke-test': patch
+---
+
+Fix internal links to release notes
diff --git a/packages/gatsby-theme-docs/src/components/link.js b/packages/gatsby-theme-docs/src/components/link.js
@@ -226,8 +226,11 @@ const PureLink = (extendedProps) => {
     !isUsingUndocumentedNotationToLinkToAnotherDocsSite
       ? hrefObject.origin +
         trimTrailingSlash(hrefObject.pathname) +
-        hrefObject.hash
-      : trimTrailingSlash(hrefObject.pathname) + hrefObject.hash;
+        hrefObject.hash +
+        hrefObject.search
+      : trimTrailingSlash(hrefObject.pathname) +
+        hrefObject.hash +
+        hrefObject.search;
   return (
     <InternalSiteLink
       data-link-type="internal-link"

diff --git a/packages/gatsby-theme-docs/src/hooks/use-release-notes-config.js b/packages/gatsby-theme-docs/src/hooks/use-release-notes-config.js
@@ -0,0 +1,26 @@
+import { buildReleaseNotesQueryString } from '../utils/release-notes';
+import { useSiteData } from './use-site-data';
+
+const OTHER_GROUP_SITE_PREFIXES = ['/docs']; // let's yse pathPrefix to identify websites (works only on prod)
+
+const useReleaseNotesConfig = () => {
+  const {
+    pathPrefix,
+    siteMetadata: { products, title },
+  } = useSiteData();
+
+  const getReleaseNotesUrl = () => {
+    const product = products?.[0];
+
+    const queryString = buildReleaseNotesQueryString(
+      OTHER_GROUP_SITE_PREFIXES.includes(pathPrefix) ? 'other' : 'product',
+      title,
+      product
+    );
+    return `/docs/release-notes${queryString}`; // only prod url
+  };
+
+  return { getReleaseNotesUrl };
+};
+
+export default useReleaseNotesConfig;
diff --git a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js
@@ -2,6 +2,7 @@ import React, { useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Location } from '@reach/router';
 import { Link, withPrefix } from 'gatsby';
+import KitLink from '../../components/link';
 import { css, ClassNames } from '@emotion/react';
 import styled from '@emotion/styled';
 import {
@@ -32,10 +33,25 @@ import {
   isRightChapterRecursive,
 } from './sidebar.utils';
 import { useSiteData } from '../../hooks/use-site-data';
-import { getReleaseNotesQueryStringBySiteTitle } from '../../utils/release-notes';
+import useReleaseNotesConfig from '../../hooks/use-release-notes-config';
 
 const ReleaseNotesIcon = createStyledIcon(Icons.ReleaseNotesSvgIcon);
 
+const ReleaseNotesLink = styled(KitLink)`
+  display: flex;
+  color: ${designSystem.colors.light.link} !important;
+  padding-left: ${designSystem.dimensions.spacings.m};
+  text-decoration: underline;
+  :hover {
+    color: ${designSystem.colors.light.linkHover} !important;
+    svg {
+      * {
+        fill: ${designSystem.colors.light.linkHover};
+      }
+    }
+  }
+`;
+
 // React currently throws a warning when using useLayoutEffect on the server.
 // To get around it, we can conditionally useEffect on the server (no-op) and
 // useLayoutEffect in the browser. We need useLayoutEffect because we want
@@ -484,14 +500,12 @@ SidebarNavigationLinks.propTypes = {
 };
 
 const Sidebar = (props) => {
+  const { getReleaseNotesUrl } = useReleaseNotesConfig();
   // If this is a release page, we need to render the "back" link instead of
   // the normal navigation links.
   const isReleasePage = props.location.pathname.startsWith(
     withPrefix('/releases')
   );
-  const releaseNotesIconHoverStyle = isReleasePage
-    ? designSystem.colors.light.linkNavigation
-    : designSystem.colors.light.linkHover;
   const shouldRenderLinkToReleaseNotes = props.hasReleaseNotes;
   const shouldRenderBackToDocsLink = props.hasReleaseNotes && isReleasePage;
   // Restore scroll position
@@ -534,49 +548,15 @@ const Sidebar = (props) => {
       <ScrollContainer id={scrollContainerId}>
         {shouldRenderLinkToReleaseNotes && (
           <ReleaseNoteLinkContainer>
-            <SidebarLink
-              to={`/docs/release-notes${getReleaseNotesQueryStringBySiteTitle(
-                props.siteTitle
-              )}`}
+            <ReleaseNotesLink
+              href={`/..${getReleaseNotesUrl()}`}
               onClick={props.onLinkClick}
-              locationPath={
-                isReleasePage
-                  ? withPrefix('/releases')
-                  : props.location.pathname
-              }
-              customStyles={css`
-                color: ${designSystem.colors.light.link} !important;
-                padding-left: ${designSystem.dimensions.spacings.m};
-                text-decoration: underline;
-                :hover {
-                  color: ${designSystem.colors.light.linkHover} !important;
-                  svg {
-                    * {
-                      fill: ${releaseNotesIconHoverStyle};
-                    }
-                  }
-                }
-              `}
-              customActiveStyles={css`
-                color: ${designSystem.colors.light.linkNavigation} !important;
-                padding-left: calc(
-                  ${designSystem.dimensions.spacings.m} -
-                    ${designSystem.dimensions.spacings.xs}
-                ) !important;
-                text-decoration: none;
-                :hover {
-                  color: ${designSystem.colors.light.linkNavigation} !important;
-                }
-              `}
             >
               <SpacingsInline alignItems="center">
                 <LinkSubtitle isReleaseNoteLink>{'Release notes'}</LinkSubtitle>
-                <ReleaseNotesIcon
-                  size="medium"
-                  color={isReleasePage ? 'linkNavigation' : 'link'}
-                />
+                <ReleaseNotesIcon size="medium" color={'link'} />
               </SpacingsInline>
-            </SidebarLink>
+            </ReleaseNotesLink>
           </ReleaseNoteLinkContainer>
         )}
         {shouldRenderBackToDocsLink && (

diff --git a/packages/gatsby-theme-docs/src/layouts/release-notes-detail.js b/packages/gatsby-theme-docs/src/layouts/release-notes-detail.js
@@ -20,12 +20,13 @@ import LayoutReleaseNotePageHeaderSide from './layout-release-note-page-header-s
 import LayoutPageContent from './internals/layout-page-content';
 import PageContentInset from './internals/page-content-inset';
 import { ReleaseNotePageTitle } from '../components/release-note-heading';
-import { getReleaseNotesQueryStringBySiteTitle } from '../utils/release-notes';
+import useReleaseNotesConfig from '../hooks/use-release-notes-config';
 
 const LayoutReleaseNotesDetail = (props) => {
   const { ref } = useInView();
   const layoutState = useLayoutState();
   const siteData = useSiteData();
+  const { getReleaseNotesUrl } = useReleaseNotesConfig();
   const excludeFromSearchIndex =
     props.pageData.excludeFromSearchIndex ||
     siteData.siteMetadata.excludeFromSearchIndex;
@@ -60,9 +61,7 @@ const LayoutReleaseNotesDetail = (props) => {
           <LayoutPage>
             <LayoutPageHeader>
               <Link
-                href={`/docs/release-notes${getReleaseNotesQueryStringBySiteTitle(
-                  siteData.siteMetadata.title
-                )}`}
+                href={`/..${getReleaseNotesUrl()}`}
                 nounderline={true}
                 css={css`
                   svg {

diff --git a/packages/gatsby-theme-docs/src/utils/release-notes.js b/packages/gatsby-theme-docs/src/utils/release-notes.js
@@ -1,24 +1,6 @@
 export const MIN_DATERANGE = 0;
 export const MAX_DATERANGE = 2537011284;
 
-// TODO: this could be used to generate sitemap.xml urls query strings
-const mapSiteTitleToFacetFilter = new Map([
-  ['Merchant Center', { group: 'product', productArea: 'Merchant Center' }],
-  ['HTTP API', { group: 'product', productArea: 'HTTP API' }],
-  ['Checkout', { group: 'product', product: 'Checkout' }],
-  ['Connect', { group: 'product', product: 'Connect' }],
-  [
-    'Frontend Development',
-    { group: 'product', productArea: 'Frontend Development' },
-  ],
-  ['Frontend Studio', { group: 'product', productArea: 'Frontend Studio' }],
-  ['Import API', { group: 'product', productArea: 'Import API' }],
-  [
-    'Merchant Center Customizations',
-    { productArea: 'Merchant Center Customizations' },
-  ],
-]);
-
 export const buildReleaseNotesQueryString = (group, product, productArea) => {
   let searchState = {
     range: {
@@ -47,15 +29,3 @@ export const buildReleaseNotesQueryString = (group, product, productArea) => {
     ? `?searchState=${encodeURIComponent(JSON.stringify(searchState))}`
     : '';
 };
-
-export const getReleaseNotesQueryStringBySiteTitle = (siteTitle) => {
-  const facetConfig = mapSiteTitleToFacetFilter.get(siteTitle);
-  if (facetConfig) {
-    return buildReleaseNotesQueryString(
-      facetConfig.group,
-      facetConfig.product,
-      facetConfig.productArea
-    );
-  }
-  return '';
-};
diff --git a/packages/gatsby-theme-docs/src/utils/release-notes.spec.js b/packages/gatsby-theme-docs/src/utils/release-notes.spec.js
@@ -2,7 +2,6 @@ import {
   MAX_DATERANGE,
   MIN_DATERANGE,
   buildReleaseNotesQueryString,
-  getReleaseNotesQueryStringBySiteTitle,
 } from './release-notes';
 
 describe('buildReleaseNotesQueryString', () => {
@@ -66,39 +65,3 @@ describe('buildReleaseNotesQueryString', () => {
     expect(queryString).toBe('');
   });
 });
-
-describe('getReleaseNotesQueryStringBySiteTitle', () => {
-  it('should return a query string with productArea for "Merchant Center"', () => {
-    const siteTitle = 'Merchant Center';
-    const queryString = getReleaseNotesQueryStringBySiteTitle(siteTitle);
-
-    const expectedValue = {
-      range: {
-        dateTimestamp: `${MIN_DATERANGE}:${MAX_DATERANGE}`,
-      },
-      configure: {
-        facetFilters: `group:product`,
-      },
-      refinementList: {
-        productArea: ['Merchant Center'],
-      },
-    };
-    const expectedStringValue = encodeURIComponent(
-      JSON.stringify(expectedValue)
-    );
-
-    expect(queryString).toBe(`?searchState=${expectedStringValue}`);
-  });
-
-  it('should return an empty query string if siteTitle is not found', () => {
-    const siteTitle = 'Non-existent Title';
-    const queryString = getReleaseNotesQueryStringBySiteTitle(siteTitle);
-    expect(queryString).toBe('');
-  });
-});
-
-it('should return an empty query string if siteTitle is not found', () => {
-  const siteTitle = 'Non-existent Title';
-  const queryString = getReleaseNotesQueryStringBySiteTitle(siteTitle);
-  expect(queryString).toBe('');
-});