[desk-tool] add size % diff to files

sanity-io · Oct 6, 2020 · 94f1e2a · 94f1e2a
1 parent 8c3b6bf
commit 94f1e2a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 5 deletions.
diff --git a/packages/@sanity/desk-tool/src/diffs/file/FileFieldDiff.tsx b/packages/@sanity/desk-tool/src/diffs/file/FileFieldDiff.tsx
@@ -7,12 +7,25 @@ import {getRefValue} from '../hooks'
 import styles from './FileFieldDiff.css'
 import FilePreview from './FilePreview'
 
+function getSizeDiff(prev, next) {
+  if (!prev || !next) {
+    return 0
+  }
+  const increase = next - prev
+  const pct = Math.round((increase / prev) * 100)
+  return pct
+}
+
 export const FileFieldDiff: DiffComponent<ObjectDiff> = ({diff, schemaType}) => {
   const {fromValue, toValue, fields} = diff
   const fromAsset = fromValue?.asset
   const toAsset = toValue?.asset
-  const prev = getRefValue(fromAsset?._ref)
-  const next = getRefValue(toAsset?._ref)
+  const prev: any = getRefValue(fromAsset?._ref)
+  const next: any = getRefValue(toAsset?._ref)
+
+  // Size in MB TODO: improve
+  const prevSize = prev?.size && Math.round(prev.size / 1024)
+  const nextSize = next?.size && Math.round(next.size / 1024)
 
   const changedFields = Object.keys(fields)
     .map(field => ({
@@ -45,7 +58,11 @@ export const FileFieldDiff: DiffComponent<ObjectDiff> = ({diff, schemaType}) =>
           )}
           {next && (
             <DiffAnnotation diff={diff} path="asset._ref">
-              <FilePreview value={next} action={didAssetChange ? 'added' : 'changed'} />
+              <FilePreview
+                value={next}
+                action={didAssetChange ? 'added' : 'changed'}
+                pctDiff={getSizeDiff(prevSize, nextSize)}
+              />
             </DiffAnnotation>
           )}
         </div>

diff --git a/packages/@sanity/desk-tool/src/diffs/file/FilePreview.css b/packages/@sanity/desk-tool/src/diffs/file/FilePreview.css
@@ -49,4 +49,20 @@
   @nest & .title {
     text-decoration: line-through;
   }
+}
+
+.sizeDiff {
+  font-size: 13px;
+  padding: 1px 4px;
+  background: var(--component-bg);
+  border-radius: 2px;
+  margin: 0 var(--small-padding);
+
+  @nest &[data-number="positive"] {
+    color: var(--state-success-color);
+  }
+
+  @nest &[data-number="negative"] {
+    color: var(--state-danger-color);
+  }
 }
diff --git a/packages/@sanity/desk-tool/src/diffs/file/FilePreview.tsx b/packages/@sanity/desk-tool/src/diffs/file/FilePreview.tsx
@@ -5,9 +5,10 @@ import styles from './FilePreview.css'
 interface Props {
   value: any // TODO
   action: 'changed' | 'added' | 'removed'
+  pctDiff?: number
 }
 
-export default function FilePreview({value, action = 'changed'}: Props) {
+export default function FilePreview({value, action = 'changed', pctDiff}: Props) {
   const title = value.originalFilename || 'Untitled'
   return (
     <div className={styles.root}>
@@ -21,7 +22,12 @@ export default function FilePreview({value, action = 'changed'}: Props) {
           </h3>
           <div>
             <span>{action}</span>
-            {action === 'changed' && <span>{value.size}</span>}
+            {pctDiff && pctDiff !== 0 && (
+              <span className={styles.sizeDiff} data-number={pctDiff > 0 ? 'positive' : 'negative'}>
+                {pctDiff > 0 && '+'}
+                {pctDiff}%
+              </span>
+            )}
           </div>
         </div>
       </div>