Yarn plugin diffing improvements (#19)

* Sort yarn-related changes to the bottom of the diff view * Hide yarn plugin diff by default
backstage · Nov 28, 2024 · d928675 · d928675
1 parent 35505c4
commit d928675
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "antd": "4.0.3",
     "date-fns": "^2.23.0",
     "framer-motion": "^2.0.0-beta.52",
+    "lodash": "^4.17.21",
     "markdown-to-jsx": "6.11.0",
     "react": "16.13.0",
     "react-content-loader": "5.0.2",

diff --git a/src/components/common/Diff/Diff.js b/src/components/common/Diff/Diff.js
@@ -7,6 +7,7 @@ import {
   tokenize,
   Decoration as DiffDecoration
 } from 'react-diff-view'
+import { Button, Card, Typography } from 'antd'
 import DiffHeader from './DiffHeader'
 import { getComments } from './DiffComment'
 import { replaceWithProvidedAppName } from '../../../utils'
@@ -86,6 +87,30 @@ const DiffView = styled(RDiff)`
 const isDiffCollapsedByDefault = ({ type, hunks }) =>
   type === 'delete' || hunks.length > 5 ? true : undefined
 
+const Placeholder = ({ newPath, children }) => {
+  const [showDiff, setShowDiff] = useState(false)
+
+  if (!showDiff && newPath === '.yarn/plugins/@yarnpkg/plugin-backstage.cjs') {
+    return (
+      <Card
+        bodyStyle={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          rowGap: '10px'
+        }}
+      >
+        <Button onClick={() => setShowDiff(true)}>Show diff</Button>
+        <Typography>
+          The diff for the Backstage yarn plugin is hidden by default.
+        </Typography>
+      </Card>
+    )
+  }
+
+  return children
+}
+
 const Diff = ({
   packageName,
   oldPath,
@@ -185,36 +210,38 @@ const Diff = ({
       />
 
       {!isDiffCollapsed && (
-        <DiffView
-          viewType={diffViewStyle}
-          diffType={type}
-          hunks={hunks}
-          widgets={diffComments}
-          optimizeSelection={true}
-          selectedChanges={selectedChanges}
-        >
-          {originalHunks => {
-            const updatedHunks = getHunksWithAppName(originalHunks)
-
-            const options = {
-              enhancers: [markEdits(updatedHunks)]
-            }
-
-            const tokens = tokenize(updatedHunks, options)
-
-            return updatedHunks.map(hunk => [
-              <Decoration key={'decoration-' + hunk.content}>
-                <More>{hunk.content}</More>
-              </Decoration>,
-              <Hunk
-                key={hunk.content}
-                hunk={hunk}
-                tokens={tokens}
-                gutterEvents={{ onClick: onToggleChangeSelection }}
-              />
-            ])
-          }}
-        </DiffView>
+        <Placeholder newPath={newPath}>
+          <DiffView
+            viewType={diffViewStyle}
+            diffType={type}
+            hunks={hunks}
+            widgets={diffComments}
+            optimizeSelection={true}
+            selectedChanges={selectedChanges}
+          >
+            {originalHunks => {
+              const updatedHunks = getHunksWithAppName(originalHunks)
+
+              const options = {
+                enhancers: [markEdits(updatedHunks)]
+              }
+
+              const tokens = tokenize(updatedHunks, options)
+
+              return updatedHunks.map(hunk => [
+                <Decoration key={'decoration-' + hunk.content}>
+                  <More>{hunk.content}</More>
+                </Decoration>,
+                <Hunk
+                  key={hunk.content}
+                  hunk={hunk}
+                  tokens={tokens}
+                  gutterEvents={{ onClick: onToggleChangeSelection }}
+                />
+              ])
+            }}
+          </DiffView>
+        </Placeholder>
       )}
     </Container>
   )

diff --git a/src/hooks/fetch-diff.js b/src/hooks/fetch-diff.js
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { parseDiff } from 'react-diff-view'
+import sortBy from 'lodash/sortBy'
 import { getDiffURL, USE_YARN_PLUGIN } from '../utils'
 import { useSettings } from '../SettingsProvider'
 
@@ -8,8 +9,18 @@ const delay = ms => new Promise(res => setTimeout(res, ms))
 const excludeYarnLock = ({ oldPath, newPath, ...rest }) =>
   !(oldPath.includes('yarn.lock') || newPath.includes('yarn.lock'))
 
-const packageJsonFirst = ({ newPath }) =>
-  newPath.includes('package.json') ? -1 : 1
+const applyCustomSort = parsedDiff =>
+  sortBy(parsedDiff, ({ newPath }) => {
+    if (newPath.includes('package.json')) {
+      return -1
+    } else if (newPath === '.yarnrc.yml') {
+      return 1
+    } else if (newPath.startsWith('.yarn/')) {
+      return 2
+    }
+
+    return 0
+  })
 
 export const useFetchDiff = ({
   shouldShowDiff,
@@ -45,11 +56,7 @@ export const useFetchDiff = ({
 
       const diff = await response.text()
 
-      setDiff(
-        parseDiff(diff)
-          .filter(excludeYarnLock)
-          .sort(packageJsonFirst)
-      )
+      setDiff(applyCustomSort(parseDiff(diff).filter(excludeYarnLock)))
 
       setIsLoading(false)
       setIsDone(true)

diff --git a/yarn.lock b/yarn.lock
@@ -7516,7 +7516,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
-lodash@^4.17.4:
+lodash@^4.17.21, lodash@^4.17.4:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==