Merge pull request #367 from smallsaucepan/custom-app-package

src/__tests__/utils.spec.js

@@ -1,6 +1,10 @@
 import { PACKAGE_NAMES } from '../constants'
 import '../releases/__mocks__/index'
-import { getVersionsContentInDiff, getChangelogURL } from '../utils'
+import {
+  getVersionsContentInDiff,
+  replaceAppDetails,
+  getChangelogURL,
+} from '../utils'
 
 describe('getVersionsContentInDiff', () => {
   it('returns the versions in the provided range', () => {
@@ -65,3 +69,66 @@ describe('getChangelogURL', () => {
     expect(getChangelogURL({ packageName, version })).toEqual(url)
   })
 })
+
+describe('replaceAppDetails ', () => {
+  test.each([
+    // Don't change anything if no app name or package is passed.
+    [
+      'RnDiffApp/ios/RnDiffApp/main.m',
+      '',
+      '',
+      'RnDiffApp/ios/RnDiffApp/main.m',
+    ],
+    [
+      'android/app/src/debug/java/com/rndiffapp/ReactNativeFlipper.java',
+      '',
+      '',
+      'android/app/src/debug/java/com/rndiffapp/ReactNativeFlipper.java',
+    ],
+    [
+      'location = "group:RnDiffApp.xcodeproj">',
+      '',
+      '',
+      'location = "group:RnDiffApp.xcodeproj">',
+    ],
+    // Update Java file path with correct app name and package.
+    [
+      'android/app/src/debug/java/com/rndiffapp/ReactNativeFlipper.java',
+      'SuperApp',
+      'au.org.mycorp',
+      'android/app/src/debug/java/au/org/mycorp/superapp/ReactNativeFlipper.java',
+    ],
+    // Update the app details in file contents.
+    [
+      'location = "group:RnDiffApp.xcodeproj">',
+      'MyFancyApp',
+      '',
+      'location = "group:MyFancyApp.xcodeproj">',
+    ],
+    [
+      'applicationId "com.rndiffapp"',
+      'ACoolApp',
+      'net.foobar',
+      'applicationId "net.foobar.acoolapp"',
+    ],
+    // Don't accidentally pick up other instances of "com" such as in domain
+    // names, or android or facebook packages.
+    [
+      'apply plugin: "com.android.application"',
+      'ACoolApp',
+      'net.foobar',
+      'apply plugin: "com.android.application"',
+    ],
+    [
+      '* https://github.com/facebook/react-native',
+      'ACoolApp',
+      'net.foobar',
+      '* https://github.com/facebook/react-native',
+    ],
+  ])(
+    'replaceAppDetails("%s", "%s", "%s") -> %s',
+    (path, appName, appPackage, newPath) => {
+      expect(replaceAppDetails(path, appName, appPackage)).toEqual(newPath)
+    }
+  )
+})

src/components/common/CopyFileButton.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import styled from '@emotion/styled'
 import { Button, Popover } from 'antd'
-import { getBinaryFileURL, replaceWithProvidedAppName } from '../../utils'
+import { getBinaryFileURL, replaceAppDetails } from '../../utils'
 import { CopyOutlined } from '@ant-design/icons'
 
 const popoverContentOpts = {
@@ -10,15 +10,15 @@ const popoverContentOpts = {
 }
 
 const CopyFileButton = styled(
-  ({ open, version, path, packageName, appName, ...props }) => {
+  ({ open, version, path, packageName, appName, appPackage, ...props }) => {
     const [popoverContent, setPopoverContent] = useState(
       popoverContentOpts.default
     )
 
     const fetchContent = () =>
       fetch(getBinaryFileURL({ packageName, version, path }))
         .then((response) => response.text())
-        .then((content) => replaceWithProvidedAppName(content, appName))
+        .then((content) => replaceAppDetails(content, appName, appPackage))
 
     const copyContent = () => {
       // From https://wolfgangrittner.dev/how-to-use-clipboard-api-in-firefox/

src/components/common/Diff/Diff.js

@@ -9,7 +9,7 @@ import {
 } from 'react-diff-view'
 import DiffHeader from './DiffHeader'
 import { getComments } from './DiffComment'
-import { replaceWithProvidedAppName } from '../../../utils'
+import { replaceAppDetails } from '../../../utils'
 
 const copyPathPopoverContentOpts = {
   default: 'Click to copy file path',
@@ -102,6 +102,7 @@ const Diff = ({
   setAllCollapsed,
   diffViewStyle,
   appName,
+  appPackage,
 }) => {
   const [isDiffCollapsed, setIsDiffCollapsed] = useState(
     isDiffCollapsedByDefault({ type, hunks })
@@ -123,20 +124,21 @@ const Diff = ({
 
   const getHunksWithAppName = useCallback(
     (originalHunks) => {
-      if (!appName) {
+      if (!appName && !appPackage) {
+        // No patching of rn-diff-purge output required.
         return originalHunks
       }
 
       return originalHunks.map((hunk) => ({
         ...hunk,
         changes: hunk.changes.map((change) => ({
           ...change,
-          content: replaceWithProvidedAppName(change.content, appName),
+          content: replaceAppDetails(change.content, appName, appPackage),
         })),
-        content: replaceWithProvidedAppName(hunk.content, appName),
+        content: replaceAppDetails(hunk.content, appName, appPackage),
       }))
     },
-    [appName]
+    [appName, appPackage]
   )
 
   if (areAllCollapsed !== undefined && areAllCollapsed !== isDiffCollapsed) {
@@ -178,6 +180,7 @@ const Diff = ({
         resetCopyPathPopoverContent={handleResetCopyPathPopoverContent}
         onCompleteDiff={onCompleteDiff}
         appName={appName}
+        appPackage={appPackage}
         diffComments={diffComments}
         packageName={packageName}
       />
@@ -226,6 +229,7 @@ const arePropsEqual = (prevProps, nextProps) =>
   prevProps.isDiffCompleted === nextProps.isDiffCompleted &&
   prevProps.areAllCollapsed === nextProps.areAllCollapsed &&
   prevProps.diffViewStyle === nextProps.diffViewStyle &&
-  prevProps.appName === nextProps.appName
+  prevProps.appName === nextProps.appName &&
+  prevProps.appPackage === nextProps.appPackage
 
 export default React.memo(Diff, arePropsEqual)

src/components/common/Diff/DiffHeader.js

@@ -243,11 +243,17 @@ const DiffHeader = ({
   copyPathPopoverContent,
   resetCopyPathPopoverContent,
   appName,
+  appPackage,
   diffComments,
   packageName,
   ...props
 }) => {
-  const sanitizedFilePaths = getFilePathsToShow({ oldPath, newPath, appName })
+  const sanitizedFilePaths = getFilePathsToShow({
+    oldPath,
+    newPath,
+    appName,
+    appPackage,
+  })
 
   const id = React.useMemo(
     () => generatePathId(oldPath, newPath),
@@ -308,6 +314,7 @@ const DiffHeader = ({
           path={newPath}
           packageName={packageName}
           appName={appName}
+          appPackage={appPackage}
         />
         <DownloadFileButton
           open={!hasDiff && type !== 'delete'}

src/components/common/Diff/DiffSection.js

@@ -25,6 +25,7 @@ const DiffSection = ({
   onToggleChangeSelection,
   diffViewStyle,
   appName,
+  appPackage,
   doneTitleRef,
 }) => {
   const [areAllCollapsed, setAllCollapsed] = useState(undefined)
@@ -86,6 +87,7 @@ const DiffSection = ({
             areAllCollapsed={areAllCollapsed}
             setAllCollapsed={setAllCollapsed}
             appName={appName}
+            appPackage={appPackage}
           />
         )
       })}

src/components/common/DiffViewer.js

@@ -59,6 +59,7 @@ const DiffViewer = ({
   selectedChanges,
   onToggleChangeSelection,
   appName,
+  appPackage,
 }) => {
   const { isLoading, isDone, diff } = useFetchDiff({
     shouldShowDiff,
@@ -197,6 +198,7 @@ const DiffViewer = ({
               fromVersion={fromVersion}
               toVersion={toVersion}
               appName={appName}
+              appPackage={appPackage}
               packageName={packageName}
             />
 
@@ -212,6 +214,7 @@ const DiffViewer = ({
             isDoneSection={false}
             diffViewStyle={diffViewStyle}
             appName={appName}
+            appPackage={appPackage}
           />
 
           {renderUpgradeDoneMessage({ diff, completedDiffs })}
@@ -222,6 +225,7 @@ const DiffViewer = ({
             isDoneSection={true}
             title="Done"
             appName={appName}
+            appPackage={appPackage}
             doneTitleRef={doneTitleRef}
           />
         </motion.div>

src/components/pages/Home.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useDeferredValue } from 'react'
 import styled from '@emotion/styled'
 import { Card, Input, Typography } from 'antd'
 import GitHubButton from 'react-github-btn'
@@ -10,7 +10,11 @@ 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 { DEFAULT_APP_NAME, PACKAGE_NAMES } from '../../constants'
+import {
+  DEFAULT_APP_NAME,
+  DEFAULT_APP_PACKAGE,
+  PACKAGE_NAMES,
+} from '../../constants'
 import { TroubleshootingGuidesButton } from '../common/TroubleshootingGuidesButton'
 import { updateURL } from '../../utils/update-url'
 import { deviceSizes } from '../../utils/device-sizes'
@@ -59,6 +63,34 @@ const TitleContainer = styled.div`
   margin-bottom: 8px;
 `
 
+const AppNameField = styled.div`
+  width: 100%;
+
+  @media ${deviceSizes.tablet} {
+    padding-right: 5px;
+  }
+`
+
+const AppPackageField = styled.div`
+  width: 100%;
+
+  @media ${deviceSizes.tablet} {
+    padding-left: 5px;
+  }
+`
+
+const AppDetailsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 15px;
+
+  @media ${deviceSizes.tablet} {
+    flex-direction: row;
+    gap: 0;
+  }
+`
+
 const SettingsContainer = styled.div`
   display: flex;
   align-items: center;
@@ -91,10 +123,12 @@ const Home = () => {
     [`${SHOW_LATEST_RCS}`]: false,
   })
 
-  const [appName, setAppName] = useState({
-    input: '',
-    diff: DEFAULT_APP_NAME,
-  })
+  const [appName, setAppName] = useState('')
+  const [appPackage, setAppPackage] = useState('')
+
+  // Avoid UI lag when typing.
+  const deferredAppName = useDeferredValue(appName)
+  const deferredAppPackage = useDeferredValue(appPackage)
 
   const homepageUrl = process.env.PUBLIC_URL
 
@@ -110,11 +144,6 @@ const Home = () => {
       return
     }
 
-    setAppName(({ input }) => ({
-      input: '',
-      diff: input || DEFAULT_APP_NAME,
-    }))
-
     setFromVersion(fromVersion)
     setToVersion(toVersion)
     setShouldShowDiff(true)
@@ -190,17 +219,31 @@ const Home = () => {
           </SettingsContainer>
         </HeaderContainer>
 
-        <Typography.Title level={5}>What's your app name?</Typography.Title>
+        <AppDetailsContainer>
+          <AppNameField>
+            <Typography.Title level={5}>What's your app name?</Typography.Title>
 
-        <Input
-          size="large"
-          placeholder={DEFAULT_APP_NAME}
-          value={appName.input}
-          onChange={({ target }) =>
-            setAppName(({ diff }) => ({ input: target.value, diff }))
-          }
-        />
+            <Input
+              size="large"
+              placeholder={DEFAULT_APP_NAME}
+              value={appName}
+              onChange={({ target }) => setAppName((value) => target.value)}
+            />
+          </AppNameField>
+
+          <AppPackageField>
+            <Typography.Title level={5}>
+              What's your app package?
+            </Typography.Title>
 
+            <Input
+              size="large"
+              placeholder={DEFAULT_APP_PACKAGE}
+              value={appPackage}
+              onChange={({ target }) => setAppPackage((value) => target.value)}
+            />
+          </AppPackageField>
+        </AppDetailsContainer>
         <VersionSelector
           key={packageName}
           showDiff={handleShowDiff}
@@ -210,11 +253,19 @@ const Home = () => {
           isPackageNameDefinedInURL={isPackageNameDefinedInURL}
         />
       </Container>
+      {/*
+        Pass empty values for app name and package if they're the defaults to 
+        hint to diffing components they don't need to further patch the 
+        rn-diff-purge output.
+      */}
       <DiffViewer
         shouldShowDiff={shouldShowDiff}
         fromVersion={fromVersion}
         toVersion={toVersion}
-        appName={appName.diff}
+        appName={deferredAppName !== DEFAULT_APP_NAME ? deferredAppName : ''}
+        appPackage={
+          deferredAppPackage !== DEFAULT_APP_PACKAGE ? deferredAppPackage : ''
+        }
         packageName={packageName}
         language={language}
       />

src/constants.js

@@ -1,4 +1,5 @@
 export const DEFAULT_APP_NAME = 'RnDiffApp'
+export const DEFAULT_APP_PACKAGE = 'com'
 
 export const PACKAGE_NAMES = {
   RN: 'react-native',