small tweaks

src/components/common/VersionSelector.tsx

@@ -458,7 +458,7 @@ const VersionSelector = ({
           key={'from-' + useYarnPlugin}
           showSearch
           data-testid={testIDs.fromVersionSelector}
-          title={`What's your current Backstage release or @backstage/create-app (0.4.x) version?`}
+          title={`What's your current Backstage version?`}
           loading={isLoading}
           value={localFromVersion}
           options={fromVersionList}

src/components/pages/Home.tsx

@@ -1,4 +1,8 @@
-import React, { useState, useEffect /* useDeferredValue  */ } from 'react'
+import React, {
+  useState,
+  useEffect /* useDeferredValue  */,
+  ComponentProps,
+} from 'react'
 import styled from '@emotion/styled'
 import { ThemeProvider } from '@emotion/react'
 import { Card, ConfigProvider, theme } from 'antd'
@@ -7,7 +11,7 @@ import GitHubButton, { ReactGitHubButtonProps } from 'react-github-btn'
 import createPersistedState from 'use-persisted-state'
 // import queryString from 'query-string'
 import VersionSelector from '../common/VersionSelector'
-import DiffViewer from '../common/DiffViewer'
+import DiffViewer, { DiffViewerProps } from '../common/DiffViewer'
 import Settings from '../common/Settings'
 // @ts-ignore-next-line
 import logo from '../../assets/logo.svg'
@@ -19,6 +23,9 @@ import { ReleasesProvider } from '../../ReleaseProvider'
 import { SettingsProvider } from '../../SettingsProvider'
 import { lightTheme, darkTheme, type Theme } from '../../theme'
 import pkg from '../../../package.json'
+import { getChangelogURL } from '../../utils'
+import { PACKAGE_NAMES } from '../../constants'
+import { Link } from '../common/Markdown'
 
 const homepage = pkg.homepage
 
@@ -124,7 +131,6 @@ const Home = () => {
   const [fromVersion, setFromVersion] = useState('')
   const [toVersion, setToVersion] = useState('')
   const [shouldShowDiff, setShouldShowDiff] = useState(false)
-  // const [releases, setReleases] = useState({})
   const [appName /* setAppName */] = useState('')
 
   // const homepageUrl = process.env.PUBLIC_URL
@@ -143,9 +149,9 @@ const Home = () => {
     fromVersion: string
     toVersion: string
   }) => {
-    if (fromVersion === toVersion) {
-      return
-    }
+    // if (fromVersion === toVersion) {
+    //   return
+    // }
 
     setFromVersion(fromVersion)
     setToVersion(toVersion)
@@ -221,7 +227,7 @@ const Home = () => {
                   isPackageNameDefinedInURL={isPackageNameDefinedInURL}
                 />
               </Container>
-              <DiffViewer
+              <BackstageDiffViewer
                 //@ts-expect-error - the component prop type is messed up
                 shouldShowDiff={shouldShowDiff}
                 fromVersion={fromVersion}
@@ -238,4 +244,34 @@ const Home = () => {
   )
 }
 
+function BackstageDiffViewer(props: ComponentProps<typeof DiffViewer>) {
+  const { fromVersion, toVersion } = props as unknown as DiffViewerProps
+
+  if (fromVersion && fromVersion === toVersion) {
+    return (
+      <div style={{ textAlign: 'center', width: '90%' }}>
+        <p>
+          The selected versions share the same dependencies. This usually
+          happens when a patch for one of the dependencies is released.
+        </p>
+        <p>
+          Please refer to the{' '}
+          <Link
+            href={getChangelogURL({
+              packageName: PACKAGE_NAMES.BACKSTAGE,
+              version: toVersion,
+            })}
+            target="_blank"
+            rel="noreferrer"
+          >
+            changelog
+          </Link>{' '}
+          to see what has changed.
+        </p>
+      </div>
+    )
+  }
+  return <DiffViewer {...props} />
+}
+
 export default Home

src/hooks/fetch-diff.ts

@@ -5,22 +5,6 @@ import { getDiffURL, USE_YARN_PLUGIN } from '../utils'
 import sortBy from 'lodash/sortBy'
 import { useSettings } from '../SettingsProvider'
 
-const excludeYarnLock = ({ oldPath, newPath, ...rest }: File) =>
-  !(oldPath.includes('yarn.lock') || newPath.includes('yarn.lock'))
-
-const applyCustomSort = (parsedDiff: File[]) =>
-  sortBy(parsedDiff, ({ newPath }: File) => {
-    if (newPath.includes('package.json')) {
-      return -1
-    } else if (newPath === '.yarnrc.yml') {
-      return 1
-    } else if (newPath.startsWith('.yarn/')) {
-      return 2
-    }
-
-    return 0
-  })
-
 const delay = (ms: number) => new Promise((res) => setTimeout(res, ms))
 
 // const movePackageJsonToTop = (parsedDiff: File[]) =>
@@ -45,7 +29,7 @@ export const useFetchDiff = ({
   } = useSettings()
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const [isDone, setIsDone] = useState<boolean>(false)
-  const [diff, setDiff] = useState<File[]>([])
+  const [diff, setDiff] = useState<File[] | Error>([])
 
   useEffect(() => {
     const fetchDiff = async () => {
@@ -67,7 +51,7 @@ export const useFetchDiff = ({
 
       const diff = await response.text()
 
-      setDiff(applyCustomSort(parseDiff(diff).filter(excludeYarnLock)))
+      setDiff(applyBackstageDiff(response, parseDiff(diff)))
 
       setIsLoading(false)
       setIsDone(true)
@@ -86,3 +70,25 @@ export const useFetchDiff = ({
     diff,
   }
 }
+
+function applyBackstageDiff(response: Response, parsedDiff: File[]) {
+  if (response.status === 404) {
+    return new Error('Diff not found. Please reach out to the maintainers.')
+  }
+
+  return sortBy(parsedDiff, ({ newPath }: File) => {
+    if (newPath.includes('package.json')) {
+      return -1
+    } else if (newPath === '.yarnrc.yml') {
+      return 1
+    } else if (newPath.startsWith('.yarn/')) {
+      return 2
+    }
+
+    return 0
+  }).filter(excludeYarnLock)
+}
+
+function excludeYarnLock({ oldPath, newPath }: File) {
+  return !(oldPath.includes('yarn.lock') || newPath.includes('yarn.lock'))
+}