Add support for rendering diffs based on yarn plugin (#15)

Co-authored-by: Vincenzo Scamporlino <[email protected]>
backstage · Oct 9, 2024 · 8853a86 · 8853a86
1 parent 87b418e
commit 8853a86
Show file tree

Hide file tree

Showing 9 changed files with 198 additions and 92 deletions.
diff --git a/src/ReleaseProvider.jsx b/src/ReleaseProvider.jsx
@@ -1,5 +1,7 @@
 import React, { useContext, useState } from 'react'
 import { useFetchReleases } from './hooks/fetch-release-versions'
+import { USE_YARN_PLUGIN } from './utils'
+import { useSettings } from './SettingsProvider'
 
 export const ReleasesContext = React.createContext({
   isDone: false,
@@ -8,7 +10,11 @@ export const ReleasesContext = React.createContext({
 })
 
 export const ReleasesProvider = React.memo(function({ children, packageName }) {
-  const value = useFetchReleases({ packageName })
+  const {
+    settings: { [USE_YARN_PLUGIN]: useYarnPlugin }
+  } = useSettings()
+
+  const value = useFetchReleases({ packageName, useYarnPlugin })
   const [selectedVersions, setSelectedVersions] = useState()
 
   return (

diff --git a/src/SettingsProvider.jsx b/src/SettingsProvider.jsx
@@ -0,0 +1,26 @@
+import React, { useContext } from 'react'
+import useLocalStorage from 'react-use/lib/useLocalStorage'
+
+import { SHOW_LATEST_RCS, USE_YARN_PLUGIN } from './utils'
+
+const INITIAL_STATE = {
+  [`${SHOW_LATEST_RCS}`]: false,
+  [`${USE_YARN_PLUGIN}`]: false
+}
+
+export const SettingsContext = React.createContext(INITIAL_STATE)
+
+export const SettingsProvider = React.memo(function({ children }) {
+  const [settings, setSettings] = useLocalStorage(
+    'backstage:upgrade-helper:settings',
+    INITIAL_STATE
+  )
+
+  return (
+    <SettingsContext.Provider value={{ settings, setSettings }}>
+      {children}
+    </SettingsContext.Provider>
+  )
+})
+
+export const useSettings = () => useContext(SettingsContext)
diff --git a/src/components/common/DownloadFileButton.js b/src/components/common/DownloadFileButton.js
@@ -6,7 +6,6 @@ import { getBinaryFileURL } from '../../utils'
 
 const DownloadFileButton = styled(
   ({ visible, version, path, packageName, ...props }) => {
-    console.info(visible, version, path, packageName)
     return visible ? (
       <Button
         {...props}

diff --git a/src/components/common/Settings.js b/src/components/common/Settings.js
@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
 import { Popover, Button, Checkbox } from 'antd'
-import { SHOW_LATEST_RCS } from '../../utils'
+import { SHOW_LATEST_RCS, USE_YARN_PLUGIN } from '../../utils'
 import styled from '@emotion/styled'
+import { useSettings } from '../../SettingsProvider'
 
 const SettingsButton = styled(Button)`
   color: initial;
@@ -10,29 +11,47 @@ const SettingsButton = styled(Button)`
 const SettingsIcon = styled(props => <span {...props}>⚙️</span>)`
   font-family: initial;
 `
-const Settings = ({ handleSettingsChange, settings }) => {
+const Settings = () => {
+  const { settings, setSettings } = useSettings()
   const [popoverVisibility, setVisibility] = useState(false)
 
   const handleClickChange = visibility => {
     setVisibility(visibility)
   }
 
-  const updateCheckboxValues = () =>
-    handleSettingsChange({
+  const toggleShowLatestRCs = () =>
+    setSettings({
+      ...settings,
       [SHOW_LATEST_RCS]: !settings[SHOW_LATEST_RCS]
     })
 
+  const toggleUseYarnPlugin = () =>
+    setSettings({
+      ...settings,
+      [USE_YARN_PLUGIN]: !settings[USE_YARN_PLUGIN]
+    })
+
   return (
     <Popover
       placement="bottomRight"
       content={
         <>
-          <Checkbox
-            defaultChecked={settings[SHOW_LATEST_RCS]}
-            onChange={updateCheckboxValues}
-          >
-            {SHOW_LATEST_RCS}
-          </Checkbox>
+          <div>
+            <Checkbox
+              defaultChecked={settings[SHOW_LATEST_RCS]}
+              onChange={toggleShowLatestRCs}
+            >
+              {SHOW_LATEST_RCS}
+            </Checkbox>
+          </div>
+          <div>
+            <Checkbox
+              defaultChecked={settings[USE_YARN_PLUGIN]}
+              onChange={toggleUseYarnPlugin}
+            >
+              {USE_YARN_PLUGIN}
+            </Checkbox>
+          </div>
         </>
       }
       trigger="click"

diff --git a/src/components/common/VersionSelector.js b/src/components/common/VersionSelector.js
@@ -9,6 +9,8 @@ import UpgradeButton from './UpgradeButton'
 import { updateURL } from '../../utils/update-url'
 import { deviceSizes } from '../../utils/device-sizes'
 import { useReleases } from '../../ReleaseProvider'
+import { useSettings } from '../../SettingsProvider'
+import { SHOW_LATEST_RCS, USE_YARN_PLUGIN } from '../../utils'
 
 export const testIDs = {
   fromVersionSelector: 'fromVersionSelector',
@@ -174,13 +176,52 @@ const doesVersionExist = ({ version, allVersions, minVersion }) => {
   }
 }
 
+const getDefaultToVersion = releases => releases[0]
+
+const getDefaultFromVersion = (toVersion, releases, showReleaseCandidates) => {
+  // Remove `rc` versions from the array of versions
+  const sanitizedVersionsWithReleases = getReleasedVersionsWithCandidates({
+    releasedVersions: releases,
+    toVersion,
+    latestVersion: releases[0].version,
+    showReleaseCandidates
+  })
+
+  const sanitizedVersions = sanitizedVersionsWithReleases.map(
+    ({ version }) => version
+  )
+
+  const version =
+    getFirstRelease(
+      {
+        releasedVersions: sanitizedVersions,
+        versionToCompare: toVersion.version
+      },
+      'minor'
+    ) ||
+    getFirstRelease(
+      {
+        releasedVersions: sanitizedVersions,
+        versionToCompare: toVersion.version
+      },
+      'patch'
+    )
+
+  return sanitizedVersionsWithReleases.find(value => value.version === version)
+}
+
 const VersionSelector = ({
   packageName,
   language,
   isPackageNameDefinedInURL,
-  showDiff,
-  showReleaseCandidates
+  showDiff
 }) => {
+  const {
+    settings: {
+      [SHOW_LATEST_RCS]: showReleaseCandidates,
+      [USE_YARN_PLUGIN]: useYarnPlugin
+    }
+  } = useSettings()
   const [allVersions, setAllVersions] = useState([])
   const [fromVersionList, setFromVersionList] = useState([])
   const [toVersionList, setToVersionList] = useState([])
@@ -300,31 +341,35 @@ const VersionSelector = ({
       })
     )
 
-    if (hasVersionsFromURL) {
-      upgradeButtonEl.current.props.onClick()
-    }
+    upgradeButtonEl.current.props.onClick()
   }, [
     isLoading,
     allVersions,
     localFromVersion,
     localToVersion,
     hasVersionsFromURL,
+    releases,
     showReleaseCandidates
   ])
 
   const onShowDiff = () => {
     const resolveDiffVersion = targetVersion =>
       releases.find(r => r.version === targetVersion)
 
+    const to =
+      resolveDiffVersion(localToVersion) || getDefaultToVersion(releases)
+    const from =
+      resolveDiffVersion(localFromVersion) ||
+      getDefaultFromVersion(to, releases, showReleaseCandidates)
+
     setSelectedVersions({
-      from: resolveDiffVersion(localFromVersion),
-      to: resolveDiffVersion(localToVersion)
+      from,
+      to
     })
 
     showDiff({
-      fromVersion:
-        resolveDiffVersion(localFromVersion)?.createApp || localFromVersion,
-      toVersion: resolveDiffVersion(localToVersion)?.createApp || localToVersion
+      fromVersion: from[useYarnPlugin ? 'version' : 'createApp'],
+      toVersion: to[useYarnPlugin ? 'version' : 'createApp']
     })
 
     updateURL({
@@ -340,6 +385,7 @@ const VersionSelector = ({
     <Fragment>
       <Selectors>
         <FromVersionSelector
+          key={'from-' + useYarnPlugin}
           data-testid={testIDs.fromVersionSelector}
           title={`What's your current Backstage release or @backstage/create-app (0.4.x) version?`}
           loading={isLoading}
@@ -349,6 +395,7 @@ const VersionSelector = ({
         />
 
         <ToVersionSelector
+          key={'to-' + useYarnPlugin}
           data-testid={testIDs.toVersionSelector}
           title="To which version would you like to upgrade?"
           loading={isLoading}

diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js
@@ -8,12 +8,11 @@ import DiffViewer from '../common/DiffViewer'
 import Settings from '../common/Settings'
 import { homepage } from '../../../package.json'
 import logo from '../../assets/logo.svg'
-import { SHOW_LATEST_RCS } from '../../utils'
 import { useGetLanguageFromURL } from '../../hooks/get-language-from-url'
 import { useGetPackageNameFromURL } from '../../hooks/get-package-name-from-url'
 import { deviceSizes } from '../../utils/device-sizes'
 import { ReleasesProvider } from '../../ReleaseProvider'
-import useLocalStorage from 'react-use/lib/useLocalStorage'
+import { SettingsProvider } from '../../SettingsProvider'
 
 const Page = styled.div`
   display: flex;
@@ -92,12 +91,6 @@ const Home = () => {
   const [toVersion, setToVersion] = useState('')
   const [shouldShowDiff, setShouldShowDiff] = useState(false)
   // const [releases, setReleases] = useState({})
-  const [settings, setSettings] = useLocalStorage(
-    'backstage:upgrade-helper:settings',
-    {
-      [`${SHOW_LATEST_RCS}`]: false
-    }
-  )
   const [appName /* setAppName */] = useState('')
 
   useEffect(() => {
@@ -117,66 +110,64 @@ const Home = () => {
     setShouldShowDiff(true)
   }
 
-  const handleSettingsChange = settingsValues => {
-    setSettings(settingsValues)
-  }
-
   return (
-    <ReleasesProvider packageName={defaultPackageName}>
-      <Page>
-        <Container>
-          <HeaderContainer>
-            <TitleContainer>
-              <LogoImg alt="Backstage logo" title="Backstage logo" src={logo} />
-
-              <a href={homepage}>
-                <TitleHeader>Backstage Upgrade Helper</TitleHeader>
-              </a>
-            </TitleContainer>
-            <SettingsContainer>
-              <StarButton
-                href="https://github.com/backstage/upgrade-helper"
-                data-icon="octicon-star"
-                data-show-count="true"
-                aria-label="Star backstage/upgrade-helper on GitHub"
-              >
-                Star
-              </StarButton>
-
-              <UpdateDocsLink>
-                <a href="https://backstage.io/docs/getting-started/keeping-backstage-updated">
-                  Keeping Backstage Updated
+    <SettingsProvider>
+      <ReleasesProvider packageName={defaultPackageName}>
+        <Page>
+          <Container>
+            <HeaderContainer>
+              <TitleContainer>
+                <LogoImg
+                  alt="Backstage logo"
+                  title="Backstage logo"
+                  src={logo}
+                />
+
+                <a href={homepage}>
+                  <TitleHeader>Backstage Upgrade Helper</TitleHeader>
                 </a>
-              </UpdateDocsLink>
-
-              <Settings
-                handleSettingsChange={handleSettingsChange}
-                settings={settings}
-              />
-            </SettingsContainer>
-          </HeaderContainer>
-
-          <VersionSelector
-            key={defaultPackageName}
-            showDiff={handleShowDiff}
-            showReleaseCandidates={settings[SHOW_LATEST_RCS]}
+              </TitleContainer>
+              <SettingsContainer>
+                <StarButton
+                  href="https://github.com/backstage/upgrade-helper"
+                  data-icon="octicon-star"
+                  data-show-count="true"
+                  aria-label="Star backstage/upgrade-helper on GitHub"
+                >
+                  Star
+                </StarButton>
+
+                <UpdateDocsLink>
+                  <a href="https://backstage.io/docs/getting-started/keeping-backstage-updated">
+                    Keeping Backstage Updated
+                  </a>
+                </UpdateDocsLink>
+
+                <Settings />
+              </SettingsContainer>
+            </HeaderContainer>
+
+            <VersionSelector
+              key={defaultPackageName}
+              showDiff={handleShowDiff}
+              fromVersion={fromVersion}
+              toVersion={toVersion}
+              packageName={defaultPackageName}
+              language={defaultLanguage}
+              isPackageNameDefinedInURL={isPackageNameDefinedInURL}
+            />
+          </Container>
+          <DiffViewer
+            shouldShowDiff={shouldShowDiff}
             fromVersion={fromVersion}
             toVersion={toVersion}
+            appName={appName}
             packageName={defaultPackageName}
             language={defaultLanguage}
-            isPackageNameDefinedInURL={isPackageNameDefinedInURL}
           />
-        </Container>
-        <DiffViewer
-          shouldShowDiff={shouldShowDiff}
-          fromVersion={fromVersion}
-          toVersion={toVersion}
-          appName={appName}
-          packageName={defaultPackageName}
-          language={defaultLanguage}
-        />
-      </Page>
-    </ReleasesProvider>
+        </Page>
+      </ReleasesProvider>
+    </SettingsProvider>
   )
 }