Added support for diffing next releases (#11)

* Added support for diffing next releases Co-authored-by: Ainhoa Larumbe <[email protected]> Signed-off-by: Harry Hogg <[email protected]> * Stored settings in localStorage Co-authored-by: Vincenzo Scamporlino <[email protected]> Signed-off-by: Harry Hogg <[email protected]> * Hide next versions in the useful content section Signed-off-by: Harry Hogg <[email protected]> Co-authored-by: Vincenzo Scamporlino <[email protected]> --------- Signed-off-by: Harry Hogg <[email protected]> Co-authored-by: Ainhoa Larumbe <[email protected]> Co-authored-by: Vincenzo Scamporlino <[email protected]>
backstage · Feb 1, 2023 · 9af7339 · 9af7339
1 parent d619c5e
commit 9af7339
Show file tree

Hide file tree

Showing 6 changed files with 259 additions and 165 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "react-ga": "2.7.0",
     "react-github-btn": "1.1.1",
     "react-scripts": "3.4.0",
+    "react-use": "^17.4.0",
     "semver": "7.1.3",
     "use-persisted-state": "^0.3.3"
   },

diff --git a/src/components/common/Settings.js b/src/components/common/Settings.js
@@ -1,13 +1,7 @@
 import React, { useState } from 'react'
-import { Popover, Button, Checkbox, Input, Radio } from 'antd'
+import { Popover, Button, Checkbox } from 'antd'
 import { SHOW_LATEST_RCS } from '../../utils'
 import styled from '@emotion/styled'
-import { WindowsFilled } from '@ant-design/icons'
-import { PACKAGE_NAMES, LANGUAGE_NAMES } from '../../constants'
-
-const InputContainer = styled.div({
-  marginTop: '16px'
-})
 
 const SettingsButton = styled(Button)`
   color: initial;
@@ -16,111 +10,29 @@ const SettingsButton = styled(Button)`
 const SettingsIcon = styled(props => <span {...props}>⚙️</span>)`
   font-family: initial;
 `
-
-const PlatformsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  margin-top: 12px;
-`
-
-const PackagesGroupContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-`
-
-const Settings = ({
-  handleSettingsChange,
-  packageName,
-  language,
-  onChangePackageNameAndLanguage,
-  appName,
-  onChangeAppName
-}) => {
+const Settings = ({ handleSettingsChange, settings }) => {
   const [popoverVisibility, setVisibility] = useState(false)
-  const [newAppName, setNewAppName] = useState(appName)
-  const [newPackageName, setNewPackageName] = useState(packageName)
-  const [newLanguage, setNewLanguage] = useState(language)
 
   const handleClickChange = visibility => {
     setVisibility(visibility)
-
-    if (newAppName !== appName) {
-      onChangeAppName(newAppName)
-    }
-
-    const processedNewLanguage =
-      newLanguage !== language && newPackageName === PACKAGE_NAMES.RNW
-        ? newLanguage
-        : LANGUAGE_NAMES.CPP
-
-    if (
-      !visibility &&
-      (newPackageName !== packageName || processedNewLanguage !== language)
-    ) {
-      onChangePackageNameAndLanguage({
-        newPackageName:
-          newPackageName !== packageName ? newPackageName : undefined,
-        newLanguage: processedNewLanguage
-      })
-    }
   }
 
-  const updateCheckboxValues = checkboxValues =>
-    handleSettingsChange(checkboxValues)
+  const updateCheckboxValues = () =>
+    handleSettingsChange({
+      [SHOW_LATEST_RCS]: !settings[SHOW_LATEST_RCS]
+    })
 
   return (
     <Popover
       placement="bottomRight"
       content={
         <>
-          <Checkbox.Group onChange={updateCheckboxValues}>
-            <div>
-              <Checkbox value={SHOW_LATEST_RCS}>{SHOW_LATEST_RCS}</Checkbox>
-            </div>
-          </Checkbox.Group>
-          <InputContainer>
-            <h4>What's your app name?</h4>
-            <Input
-              value={newAppName}
-              onChange={({ target }) => setNewAppName(target.value)}
-              placeholder="MyAwesomeApp"
-            />
-          </InputContainer>
-          <PlatformsContainer>
-            <h5>Upgrading another platform?</h5>
-            <Radio.Group
-              value={newPackageName}
-              onChange={e => setNewPackageName(e.target.value)}
-            >
-              <PackagesGroupContainer>
-                <Radio value={PACKAGE_NAMES.RN}>react-native</Radio>
-                <Radio value={PACKAGE_NAMES.RNW}>
-                  <Radio.Group
-                    size="small"
-                    value={
-                      newPackageName === PACKAGE_NAMES.RNW
-                        ? newLanguage
-                        : undefined
-                    }
-                    onChange={e => {
-                      setNewPackageName(PACKAGE_NAMES.RNW)
-                      setNewLanguage(e.target.value)
-                    }}
-                  >
-                    <span style={{ marginRight: 10 }}>
-                      react-native-windows
-                      <WindowsFilled style={{ margin: 5 }} />
-                    </span>
-                    <Radio.Button value="cpp">C++</Radio.Button>
-                    <Radio.Button value="cs">C#</Radio.Button>
-                  </Radio.Group>
-                </Radio>
-                <Radio value={PACKAGE_NAMES.RNM}>react-native-macos</Radio>
-              </PackagesGroupContainer>
-            </Radio.Group>
-          </PlatformsContainer>
+          <Checkbox
+            defaultChecked={settings[SHOW_LATEST_RCS]}
+            onChange={updateCheckboxValues}
+          >
+            {SHOW_LATEST_RCS}
+          </Checkbox>
         </>
       }
       trigger="click"

diff --git a/src/components/common/VersionSelector.js b/src/components/common/VersionSelector.js
@@ -76,7 +76,7 @@ const getLatestMajorReleaseVersion = releasedVersions =>
   )
 
 // Check if `from` rc version is one of the latest major release (ie. 0.60.0)
-const checkIfVersionIsALatestRC = ({ version, latestVersion }) =>
+const checkIfVersionIsALatestPrerelease = ({ version, latestVersion }) =>
   semver.prerelease(version) &&
   compareReleaseCandidateVersions({
     version: latestVersion,
@@ -96,15 +96,21 @@ const getReleasedVersionsWithCandidates = ({
 
   return releasedVersions.filter(({ version: releasedVersion }) => {
     // Show the release candidates of the latest version
-    const isLatestReleaseCandidate =
+    const isNotLatestReleaseCandidate =
       showReleaseCandidates &&
-      checkIfVersionIsALatestRC({
+      !checkIfVersionIsALatestPrerelease({
         version: releasedVersion,
         latestVersion
       })
 
+    const isLatestReleaseCandidate = checkIfVersionIsALatestPrerelease({
+      version: releasedVersion,
+      latestVersion
+    })
+
     return (
       isLatestReleaseCandidate ||
+      isNotLatestReleaseCandidate ||
       semver.prerelease(releasedVersion) === null ||
       (isToVersionAReleaseCandidate &&
         compareReleaseCandidateVersions({
@@ -126,7 +132,7 @@ const getReleasedVersions = ({ releasedVersions, minVersion, maxVersion }) => {
   )
 
   const isVersionAReleaseAndOfLatest = version =>
-    version.includes('rc') &&
+    version.includes('next') &&
     semver.valid(semver.coerce(version)) === latestMajorReleaseVersion
 
   return releasedVersions.filter(

diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js
@@ -5,17 +5,15 @@ import GitHubButton from 'react-github-btn'
 // import ReactGA from 'react-ga'
 import VersionSelector from '../common/VersionSelector'
 import DiffViewer from '../common/DiffViewer'
-// import Settings from '../common/Settings'
+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 { PACKAGE_NAMES } from '../../constants'
-import { TroubleshootingGuidesButton } from '../common/TroubleshootingGuidesButton'
-import { updateURL } from '../../utils/update-url'
 import { deviceSizes } from '../../utils/device-sizes'
 import { ReleasesProvider } from '../../ReleaseProvider'
+import useLocalStorage from 'react-use/lib/useLocalStorage'
 
 const Page = styled.div`
   display: flex;
@@ -86,15 +84,16 @@ const Home = () => {
     isPackageNameDefinedInURL
   } = useGetPackageNameFromURL()
   const defaultLanguage = useGetLanguageFromURL()
-  const [packageName, setPackageName] = useState(defaultPackageName)
-  const [language, setLanguage] = useState(defaultLanguage)
   const [fromVersion, setFromVersion] = useState('')
   const [toVersion, setToVersion] = useState('')
   const [shouldShowDiff, setShouldShowDiff] = useState(false)
   // const [releases, setReleases] = useState({})
-  const [settings, setSettings] = useState({
-    [`${SHOW_LATEST_RCS}`]: false
-  })
+  const [settings, setSettings] = useLocalStorage(
+    'backstage:upgrade-helper:settings',
+    {
+      [`${SHOW_LATEST_RCS}`]: false
+    }
+  )
   const [appName /* setAppName */] = useState('')
 
   useEffect(() => {
@@ -114,42 +113,12 @@ const Home = () => {
     setShouldShowDiff(true)
   }
 
-  // eslint-disable-next-line no-unused-vars
-  const handlePackageNameAndLanguageChange = ({
-    newPackageName,
-    newLanguage
-  }) => {
-    let localPackageName =
-      newPackageName === undefined ? packageName : newPackageName
-    let localLanguage = newLanguage === undefined ? language : newLanguage
-
-    updateURL({
-      packageName: localPackageName,
-      language: localLanguage,
-      isPackageNameDefinedInURL:
-        isPackageNameDefinedInURL || newPackageName !== undefined,
-      toVersion: '',
-      fromVersion: ''
-    })
-    setPackageName(localPackageName)
-    setLanguage(localLanguage)
-    setFromVersion('')
-    setToVersion('')
-    setShouldShowDiff(false)
-  }
-
-  // eslint-disable-next-line no-unused-vars
   const handleSettingsChange = settingsValues => {
-    const normalizedIncomingSettings = settingsValues.reduce((acc, val) => {
-      acc[val] = true
-      return acc
-    }, {})
-
-    setSettings(normalizedIncomingSettings)
+    setSettings(settingsValues)
   }
 
   return (
-    <ReleasesProvider packageName={packageName}>
+    <ReleasesProvider packageName={defaultPackageName}>
       <Page>
         <Container>
           <HeaderContainer>
@@ -170,31 +139,21 @@ const Home = () => {
                 Star
               </StarButton>
 
-              {packageName === PACKAGE_NAMES.RN && (
-                <TroubleshootingGuidesButton />
-              )}
-              {/*
-            <Settings
-              handleSettingsChange={handleSettingsChange}
-              appName={appName}
-              packageName={packageName}
-              onChangePackageNameAndLanguage={
-                handlePackageNameAndLanguageChange
-              }
-              language={language}
-              onChangeAppName={setAppName}
-            />*/}
+              <Settings
+                handleSettingsChange={handleSettingsChange}
+                settings={settings}
+              />
             </SettingsContainer>
           </HeaderContainer>
 
           <VersionSelector
-            key={packageName}
+            key={defaultPackageName}
             showDiff={handleShowDiff}
             showReleaseCandidates={settings[SHOW_LATEST_RCS]}
             fromVersion={fromVersion}
             toVersion={toVersion}
-            packageName={packageName}
-            language={language}
+            packageName={defaultPackageName}
+            language={defaultLanguage}
             isPackageNameDefinedInURL={isPackageNameDefinedInURL}
           />
         </Container>
@@ -203,8 +162,8 @@ const Home = () => {
           fromVersion={fromVersion}
           toVersion={toVersion}
           appName={appName}
-          packageName={packageName}
-          language={language}
+          packageName={defaultPackageName}
+          language={defaultLanguage}
         />
       </Page>
     </ReleasesProvider>

diff --git a/src/utils.js b/src/utils.js
@@ -83,9 +83,11 @@ export const getVersionsContentInDiff = ({
 
   return versions.filter(({ version }) => {
     const cleanedVersion = semver.coerce(version)
+    const isPreRelease = semver.prerelease(version)
 
     // `cleanedVersion` can't be newer than `cleanedToVersion` nor older (or equal) than `fromVersion`
     return (
+      !isPreRelease &&
       semver.compare(cleanedToVersion, cleanedVersion) !== -1 &&
       ![0, -1].includes(semver.compare(cleanedVersion, fromVersion))
     )
@@ -108,7 +110,7 @@ export const getTransitionDuration = duration =>
   navigator.webdriver ? 0 : duration
 
 // settings constants
-export const SHOW_LATEST_RCS = 'Show latest release candidates'
+export const SHOW_LATEST_RCS = 'Show all next releases'
 
 export const getFilePathsToShow = ({ oldPath, newPath, appName }) => {
   const oldPathSanitized = replaceWithProvidedAppName(oldPath, appName)