Merge pull request #360 from blakef/feat-changelog-link

Author: pvinis

src/__tests__/utils.spec.js

@@ -1,6 +1,6 @@
 import { PACKAGE_NAMES } from '../constants'
 import '../releases/__mocks__/index'
-import { getVersionsContentInDiff } from '../utils'
+import { getVersionsContentInDiff, getChangelogURL } from '../utils'
 
 describe('getVersionsContentInDiff', () => {
   it('returns the versions in the provided range', () => {
@@ -37,3 +37,31 @@ describe('getVersionsContentInDiff', () => {
     expect(versions).toEqual([{ version: '0.59' }, { version: '0.58' }])
   })
 })
+
+describe('getChangelogURL', () => {
+  const { RN, RNM, RNW } = PACKAGE_NAMES
+  test.each([
+    [
+      RN,
+      '0.71.7',
+      'https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0717',
+    ],
+    [
+      RN,
+      '0.71.6',
+      'https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0716',
+    ],
+    [
+      RNM,
+      '0.71.5',
+      'https://github.com/microsoft/react-native-macos/releases/tag/v0.71.5',
+    ],
+    [
+      RNW,
+      '0.71.4',
+      'https://github.com/microsoft/react-native-windows/releases/tag/react-native-windows_v0.71.4',
+    ],
+  ])('getChangelogURL("%s", "%s") -> %s', (packageName, version, url) => {
+    expect(getChangelogURL({ packageName, version })).toEqual(url)
+  })
+})

src/components/common/DiffViewer.js

@@ -4,7 +4,7 @@ import { Alert } from 'antd'
 import { motion, AnimatePresence, AnimateSharedLayout } from 'framer-motion'
 import { withChangeSelect } from 'react-diff-view'
 import 'react-diff-view/style/index.css'
-import { getTransitionDuration } from '../../utils'
+import { getTransitionDuration, getChangelogURL } from '../../utils'
 import DiffSection from './Diff/DiffSection'
 import DiffLoading from './Diff/DiffLoading'
 import UsefulContentSection from './UsefulContentSection'
@@ -26,6 +26,11 @@ const TopContainer = styled.div`
   justify-content: flex-end;
 `
 
+const Link = styled.a`
+  padding: 4px 15px;
+  color: #1677ff;
+`
+
 const getDiffKey = ({ oldRevision, newRevision }) =>
   `${oldRevision}${newRevision}`
 
@@ -127,6 +132,16 @@ const DiffViewer = ({
 
   const [, jumpToAnchorOnce] = useReducer(jumpToAnchor, false)
 
+  let changelog
+  if (!toVersion.includes('-rc')) {
+    const href = getChangelogURL({ packageName, version: toVersion })
+    changelog = (
+      <Link href={href} target="_blank" rel="noreferrer">
+        changelog
+      </Link>
+    )
+  }
+
   useEffect(() => {
     if (!isDone) {
       resetCompletedDiffs()
@@ -175,6 +190,8 @@ const DiffViewer = ({
           />
 
           <TopContainer>
+            {changelog}
+
             <BinaryDownload
               diff={diff}
               fromVersion={fromVersion}

src/utils.js

@@ -100,7 +100,7 @@ export const getChangelogURL = ({ version, packageName }) => {
     return `${RN_CHANGELOG_URLS[packageName]}v${version}`
   }
 
-  return `${RN_CHANGELOG_URLS[packageName]}#v${version.replace('.', '')}0`
+  return `${RN_CHANGELOG_URLS[packageName]}#v${version.replaceAll('.', '')}`
 }
 
 // If the browser is headless (running puppeteer) then it doesn't have any duration