diff --git a/.changeset/tough-dots-rest.md b/.changeset/tough-dots-rest.md new file mode 100644 index 0000000000..cecc0c3694 --- /dev/null +++ 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 index b422a01edd..5274abac15 100644 --- 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 ( { + 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 index d09352275f..4781c02653 100644 --- 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) => { {shouldRenderLinkToReleaseNotes && ( - {'Release notes'} - + - + )} {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 index 6cf9730cfa..01db82e61d 100644 --- 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) => { { 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 index 5f8c7108ed..b0856f857a 100644 --- 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(''); -});