Merge pull request #349 from blakef/feat-add-anchor-links

feat: Add support for anchor links

Author: Lucas Bento

src/components/common/Diff/Diff.js

@@ -157,6 +157,7 @@ const Diff = ({
       <DiffHeader
         oldPath={oldPath}
         newPath={newPath}
+        fromVersion={fromVersion}
         toVersion={toVersion}
         type={type}
         diffKey={diffKey}

src/components/common/Diff/DiffHeader.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import styled from '@emotion/styled'
 import { Tag, Button, Popover } from 'antd'
 import {
@@ -7,6 +7,7 @@ import {
   RightOutlined,
   CopyOutlined,
   RollbackOutlined,
+  LinkOutlined,
 } from '@ant-design/icons'
 import { getFilePathsToShow } from '../../../utils'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
@@ -57,6 +58,15 @@ const FileName = ({ oldPath, newPath, type, appName }) => {
   return <span>{newPath}</span>
 }
 
+function generatePathId(oldPath, newPath) {
+  const isMoved = oldPath !== newPath
+  if (newPath === '/dev/null') {
+    newPath = 'deleted'
+  }
+  const path = isMoved ? oldPath + '-' + newPath : oldPath
+  return encodeURIComponent(path.replace(/[/\\]/g, '-'))
+}
+
 const FileStatus = ({ type, ...props }) => {
   const colors = {
     add: 'blue',
@@ -154,6 +164,49 @@ const CopyPathToClipboardButton = styled(
   ${defaultIconButtonStyle}
 `
 
+const copyAnchorLinks = {
+  default: 'Click to copy anchor link',
+  copied: 'Anchor link copied!',
+}
+
+const CopyAnchorLinksToClipboardButton = styled(
+  ({ id, type, onCopy, fromVersion, toVersion, ...props }) => {
+    const [content, setContent] = React.useState(copyAnchorLinks.default)
+    const resetContent = () => setContent(copyAnchorLinks.default)
+    const onCopyContent = () => setContent(copyAnchorLinks.copied)
+
+    const url = React.useMemo(() => {
+      const url = new URL(window.location)
+      url.hash = id
+      url.searchParams.set('from', fromVersion)
+      url.searchParams.set('to', toVersion)
+      return url.toString()
+    }, [id])
+
+    return (
+      <CopyToClipboard text={url} onCopy={onCopyContent}>
+        <Popover
+          content={content}
+          trigger="hover"
+          overlayStyle={{
+            width: '175px',
+            textAlign: 'center',
+          }}
+        >
+          <Button
+            {...props}
+            type="ghost"
+            icon={<LinkOutlined />}
+            onMouseOver={resetContent}
+          />
+        </Popover>
+      </CopyToClipboard>
+    )
+  }
+)`
+  ${defaultIconButtonStyle}
+`
+
 const CollapseClickableArea = styled.div`
   display: inline-block;
   &:hover {
@@ -182,6 +235,7 @@ const CollapseDiffButton = styled(({ open, isDiffCollapsed, ...props }) =>
 const DiffHeader = ({
   oldPath,
   newPath,
+  fromVersion,
   toVersion,
   type,
   diffKey,
@@ -200,8 +254,13 @@ const DiffHeader = ({
 }) => {
   const sanitizedFilePaths = getFilePathsToShow({ oldPath, newPath, appName })
 
+  const id = React.useMemo(
+    () => generatePathId(oldPath, newPath),
+    [oldPath, newPath]
+  )
+
   return (
-    <Wrapper {...props}>
+    <Wrapper id={id} {...props}>
       <div>
         <CollapseClickableArea
           data-testid={testIDs.collapseClickableArea}
@@ -228,6 +287,12 @@ const DiffHeader = ({
           copyPathPopoverContent={copyPathPopoverContent}
           resetCopyPathPopoverContent={resetCopyPathPopoverContent}
         />
+        <CopyAnchorLinksToClipboardButton
+          id={id}
+          type={type}
+          fromVersion={fromVersion}
+          toVersion={toVersion}
+        />
 
         <DiffCommentReminder
           comments={diffComments}
@@ -236,24 +301,22 @@ const DiffHeader = ({
         />
       </div>
       <div>
-        <Fragment>
-          <ViewFileButton
-            open={hasDiff && type !== 'delete'}
-            version={toVersion}
-            path={newPath}
-            packageName={packageName}
-          />
-          <DownloadFileButton
-            open={!hasDiff && type !== 'delete'}
-            version={toVersion}
-            path={newPath}
-            packageName={packageName}
-          />
-          <CompleteDiffButton
-            open={isDiffCompleted}
-            onClick={() => onCompleteDiff(diffKey)}
-          />
-        </Fragment>
+        <ViewFileButton
+          open={hasDiff && type !== 'delete'}
+          version={toVersion}
+          path={newPath}
+          packageName={packageName}
+        />
+        <DownloadFileButton
+          open={!hasDiff && type !== 'delete'}
+          version={toVersion}
+          path={newPath}
+          packageName={packageName}
+        />
+        <CompleteDiffButton
+          open={isDiffCompleted}
+          onClick={() => onCompleteDiff(diffKey)}
+        />
       </div>
     </Wrapper>
   )

src/components/common/DiffViewer.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useReducer } from 'react'
 import styled from '@emotion/styled'
 import { Alert } from 'antd'
 import { motion, AnimatePresence, AnimateSharedLayout } from 'framer-motion'
@@ -31,6 +31,20 @@ const getDiffKey = ({ oldRevision, newRevision }) =>
 
 const scrollToRef = (ref) => ref.current.scrollIntoView({ behavior: 'smooth' })
 
+// Lazy loaded content won't respect anchor links in the URL, so we have to help
+// the viewport once we know our diff has loaded.
+const jumpToAnchor = (stopScrolling) => {
+  if (!window.location.hash || stopScrolling) {
+    return true
+  }
+  const ref = document.getElementById(window.location.hash.slice(1))
+  if (!ref) {
+    return true
+  }
+  ref.scrollIntoView()
+  return true
+}
+
 const DiffViewer = ({
   packageName,
   language,
@@ -111,6 +125,8 @@ const DiffViewer = ({
     localStorage.setItem('viewStyle', newViewStyle)
   }
 
+  const [, jumpToAnchorOnce] = useReducer(jumpToAnchor, false)
+
   useEffect(() => {
     if (!isDone) {
       resetCompletedDiffs()
@@ -149,6 +165,7 @@ const DiffViewer = ({
           initial={{ opacity: 0, translateY: 75 }}
           animate={{ opacity: 1, translateY: 0 }}
           transition={{ duration: getTransitionDuration(0.5) }}
+          onAnimationComplete={jumpToAnchorOnce}
         >
           <UsefulContentSection
             isLoading={isLoading}

src/components/common/VersionSelector.js

@@ -58,6 +58,17 @@ const getVersionsInURL = () => {
   }
 }
 
+// Users making changes to version should not retain anchor links
+// to files that may or may not change.
+const stripAnchorInUrl = () => {
+  if (window.location.hash) {
+    const url = new URL(window.location)
+    url.hash = ''
+    window.history.pushState({}, '', url)
+  }
+  return true
+}
+
 const compareReleaseCandidateVersions = ({ version, versionToCompare }) =>
   ['prerelease', 'prepatch', null].includes(
     semver.diff(version, versionToCompare)
@@ -309,7 +320,9 @@ const VersionSelector = ({
           loading={isLoading}
           value={localFromVersion}
           options={fromVersionList}
-          onChange={(chosenVersion) => setLocalFromVersion(chosenVersion)}
+          onChange={(chosenVersion) =>
+            stripAnchorInUrl() && setLocalFromVersion(chosenVersion)
+          }
         />
 
         <ToVersionSelector
@@ -327,7 +340,9 @@ const VersionSelector = ({
               />
             )
           }
-          onChange={(chosenVersion) => setLocalToVersion(chosenVersion)}
+          onChange={(chosenVersion) =>
+            stripAnchorInUrl() && setLocalToVersion(chosenVersion)
+          }
         />
       </Selectors>
 

src/utils/update-url.js

@@ -7,21 +7,22 @@ export function updateURL({
   fromVersion,
   toVersion,
 }) {
-  const pageURL = window.location.href.replace(window.location.search, '')
+  const url = new URL(window.location.origin)
+  url.pathname = window.location.pathname
+  url.hash = window.location.hash
 
-  const newURL =
-    fromVersion !== '' || toVersion !== ''
-      ? `?from=${fromVersion}&to=${toVersion}`
-      : '?'
-  const packageNameInURL = isPackageNameDefinedInURL
-    ? `&package=${packageName}`
-    : ''
-  const languageInURL =
-    packageName === PACKAGE_NAMES.RNW ? `&language=${language}` : ''
+  if (fromVersion) {
+    url.searchParams.set('from', fromVersion)
+  }
+  if (toVersion) {
+    url.searchParams.set('to', toVersion)
+  }
+  if (isPackageNameDefinedInURL) {
+    url.searchParams.set('package', packageName)
+  }
+  if (packageName === PACKAGE_NAMES.RNW) {
+    url.searchParams.set('language', language)
+  }
 
-  window.history.replaceState(
-    null,
-    null,
-    `${pageURL}${newURL}${packageNameInURL}${languageInURL}`
-  )
+  window.history.replaceState(null, null, url.toString())
 }