[desk-tool] Move diffs and add basic array diff

packages/@sanity/desk-tool/src/diffs/FallbackDiff.tsx → packages/@sanity/desk-tool/src/diffs/_fallback/FallbackDiff.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {Diff} from '@sanity/diff'
-import {Annotation} from '../panes/documentPane/history/types'
-import {DiffComponent} from './types'
+import {Annotation} from '../../panes/documentPane/history/types'
+import {DiffComponent} from '../types'
 
 import styles from './FallbackDiff.css'
 

packages/@sanity/desk-tool/src/diffs/annotationTooltip/annotationTooltip.tsx

@@ -40,7 +40,13 @@ function UserItem(props: {userId: string}) {
   const user = useUser(props.userId)
   return (
     <div className={styles.userItem}>
-      {user && user !== LOADING_USER ? <UserAvatar user={user} /> : '…'}
+      {user && user !== LOADING_USER ? (
+        <>
+          <UserAvatar user={user} /> {user.displayName}
+        </>
+      ) : (
+        'Loading…'
+      )}
     </div>
   )
 }

packages/@sanity/desk-tool/src/diffs/arrayDiff/defaultArrayDiff.css → packages/@sanity/desk-tool/src/diffs/array/arrayFieldDiff.css

@@ -1,5 +1,5 @@
 .root {
-  /* border: 1px solid #ccc; */
+  /* display: block; */
 }
 
 .itemList {
@@ -23,7 +23,6 @@
 .diffItemBox {
   flex: 1;
   min-width: 0;
-  /* border-left: 1px solid #ccc; */
   padding-left: 0.25em;
 }
 
@@ -32,7 +31,6 @@
   margin: 0;
   padding: 0.5em;
   font-size: 14px;
-  /* border-radius: 4px; */
   overflow: auto;
 }
 

packages/@sanity/desk-tool/src/diffs/arrayDiff/defaultArrayDiff.tsx → packages/@sanity/desk-tool/src/diffs/array/arrayFieldDiff.tsx

@@ -1,27 +1,46 @@
+import {useUserColorManager} from '@sanity/base'
 import {ItemDiff} from '@sanity/diff'
 import React from 'react'
 import {Annotation} from '../../panes/documentPane/history/types'
+import {getAnnotationColor} from '../helpers'
+import {isPTSchemaType, PTDiff} from '../portableText'
 import {ArrayDiffProps} from './types'
 
-import styles from './defaultArrayDiff.css'
+import styles from './arrayFieldDiff.css'
+
+export function ArrayFieldDiff(props: ArrayDiffProps) {
+  const userColorManager = useUserColorManager()
+
+  if (isPTSchemaType(props.schemaType)) {
+    return <PTDiff diff={props.diff} items={props.items} schemaType={props.schemaType} />
+  }
 
-export function DefaultArrayDiff(props: ArrayDiffProps) {
   return (
     <div className={styles.root}>
       <div className={styles.itemList}>
-        {props.diff.items.map((diffItem, diffItemIndex) => (
-          <div className={styles.diffItemContainer} key={diffItemIndex}>
-            <div className={styles.diffItemIndexes}>
-              <ArrayDiffIndexes fromIndex={diffItem.fromIndex} toIndex={diffItem.toIndex} />
-            </div>
-            <div className={styles.diffItemBox}>
-              <DefaultArrayDiffItem
-                diff={diffItem}
-                metadata={props.items && props.items[diffItemIndex]}
-              />
+        {props.diff.items.map((diffItem, diffItemIndex) => {
+          const color =
+            diffItem.type === 'added' || diffItem.type === 'removed'
+              ? getAnnotationColor(userColorManager, diffItem.annotation)
+              : null
+
+          return (
+            <div className={styles.diffItemContainer} key={diffItemIndex}>
+              <div
+                className={styles.diffItemIndexes}
+                style={color ? {background: color.bg, color: color.fg} : {}}
+              >
+                <ArrayDiffIndexes fromIndex={diffItem.fromIndex} toIndex={diffItem.toIndex} />
+              </div>
+              <div className={styles.diffItemBox}>
+                <DefaultArrayDiffItem
+                  diff={diffItem}
+                  metadata={props.items && props.items[diffItemIndex]}
+                />
+              </div>
             </div>
-          </div>
-        ))}
+          )
+        })}
       </div>
     </div>
   )

packages/@sanity/desk-tool/src/diffs/array/index.ts

@@ -0,0 +1 @@
+export * from './arrayFieldDiff'

packages/@sanity/desk-tool/src/diffs/BooleanFieldDiff.tsx → packages/@sanity/desk-tool/src/diffs/boolean/BooleanFieldDiff.tsx

@@ -1,10 +1,10 @@
 import {useUserColorManager} from '@sanity/base'
 import {BooleanDiff} from '@sanity/diff'
 import React from 'react'
-import {Annotation} from '../panes/documentPane/history/types'
-import {AnnotationTooltip} from './annotationTooltip'
-import {getAnnotationColor} from './helpers'
-import {DiffComponent} from './types'
+import {Annotation} from '../../panes/documentPane/history/types'
+import {AnnotationTooltip} from '../annotationTooltip'
+import {getAnnotationColor} from '../helpers'
+import {DiffComponent} from '../types'
 
 import styles from './BooleanFieldDiff.css'
 

packages/@sanity/desk-tool/src/diffs/boolean/index.ts

@@ -0,0 +1 @@
+export * from './BooleanFieldDiff'

packages/@sanity/desk-tool/src/diffs/defaultComponents.ts

@@ -1,14 +1,14 @@
 import {DiffComponent} from './types'
-import {ArrayDiff} from './arrayDiff'
-import {NumberFieldDiff} from './NumberFieldDiff'
-import {StringFieldDiff} from './StringFieldDiff'
-import {ReferenceFieldDiff} from './ReferenceFieldDiff'
-import {ImageFieldDiff} from './ImageFieldDiff'
-import {BooleanFieldDiff} from './BooleanFieldDiff'
-import {SlugFieldDiff} from './SlugFieldDiff'
+import {ArrayFieldDiff} from './array'
+import {NumberFieldDiff} from './number'
+import {StringFieldDiff} from './string'
+import {ReferenceFieldDiff} from './reference'
+import {ImageFieldDiff} from './image'
+import {BooleanFieldDiff} from './boolean'
+import {SlugFieldDiff} from './slug'
 
 export const defaultComponents: {[key: string]: DiffComponent<any>} = {
-  array: ArrayDiff,
+  array: ArrayFieldDiff,
   string: StringFieldDiff,
   number: NumberFieldDiff,
   reference: ReferenceFieldDiff,

packages/@sanity/desk-tool/src/diffs/helpers.ts

@@ -1,11 +1,11 @@
 import {UserColorManager} from '@sanity/base'
 import {Annotation} from '../panes/documentPane/history/types'
 
-interface RGB {
-  red: number
-  green: number
-  blue: number
-}
+// interface RGB {
+//   red: number
+//   green: number
+//   blue: number
+// }
 
 interface UserColors {
   blue: {bg: string; fg: string}
@@ -28,13 +28,13 @@ const color: UserColors = {
   purple: {bg: '#F8E9FE', fg: '#7B1EA5'}
 }
 
-function multiply(rgb1: RGB, rgb2: RGB) {
-  return {
-    red: Math.floor((rgb1.red * rgb2.red) / 255),
-    green: Math.floor((rgb1.green * rgb2.green) / 255),
-    blue: Math.floor((rgb1.blue * rgb2.blue) / 255)
-  }
-}
+// function multiply(rgb1: RGB, rgb2: RGB) {
+//   return {
+//     red: Math.floor((rgb1.red * rgb2.red) / 255),
+//     green: Math.floor((rgb1.green * rgb2.green) / 255),
+//     blue: Math.floor((rgb1.blue * rgb2.blue) / 255)
+//   }
+// }
 
 export function getAnnotationColor(
   colorManager: UserColorManager,

packages/@sanity/desk-tool/src/diffs/ImageFieldDiff.tsx → packages/@sanity/desk-tool/src/diffs/image/ImageFieldDiff.tsx

@@ -2,10 +2,10 @@ import * as React from 'react'
 import {useUserColorManager} from '@sanity/base'
 import {ObjectDiff, FieldDiff, StringSegmentChanged, StringDiff} from '@sanity/diff'
 import Preview from 'part:@sanity/base/preview?'
-import {Annotation} from '../panes/documentPane/history/types'
-import {AnnotationTooltip} from './annotationTooltip'
-import {getAnnotationColor} from './helpers'
-import {DiffComponent} from './types'
+import {Annotation} from '../../panes/documentPane/history/types'
+import {AnnotationTooltip} from '../annotationTooltip'
+import {getAnnotationColor} from '../helpers'
+import {DiffComponent} from '../types'
 
 import styles from './ImageFieldDiff.css'
 

packages/@sanity/desk-tool/src/diffs/image/index.ts

@@ -0,0 +1 @@
+export * from './ImageFieldDiff'

packages/@sanity/desk-tool/src/diffs/NumberFieldDiff.tsx → packages/@sanity/desk-tool/src/diffs/number/NumberFieldDiff.tsx

@@ -1,10 +1,10 @@
 import {useUserColorManager} from '@sanity/base'
 import {NumberDiff} from '@sanity/diff'
 import React from 'react'
-import {Annotation} from '../panes/documentPane/history/types'
-import {AnnotationTooltip} from './annotationTooltip'
-import {getAnnotationColor} from './helpers'
-import {DiffComponent} from './types'
+import {Annotation} from '../../panes/documentPane/history/types'
+import {AnnotationTooltip} from '../annotationTooltip'
+import {getAnnotationColor} from '../helpers'
+import {DiffComponent} from '../types'
 
 import styles from './NumberFieldDiff.css'
 

packages/@sanity/desk-tool/src/diffs/number/index.ts

@@ -0,0 +1 @@
+export * from './NumberFieldDiff'

packages/@sanity/desk-tool/src/diffs/portableText/index.ts

@@ -0,0 +1,2 @@
+export * from './helpers'
+export * from './ptDiff'

packages/@sanity/desk-tool/src/diffs/portableText/ptDiff.tsx

@@ -0,0 +1,13 @@
+import {ArrayDiff} from '@sanity/diff'
+import React from 'react'
+import {Annotation} from '../../panes/documentPane/history/types'
+
+export interface PTDiffProps {
+  diff: ArrayDiff<Annotation>
+  items?: {fromType?: {name: string}; toType?: {name: string}}[]
+  schemaType: {name: string}
+}
+
+export function PTDiff(props: PTDiffProps) {
+  return <div>Portable Text Diff</div>
+}

packages/@sanity/desk-tool/src/diffs/ReferenceFieldDiff.tsx → packages/@sanity/desk-tool/src/diffs/reference/ReferenceFieldDiff.tsx

@@ -2,10 +2,10 @@ import * as React from 'react'
 import {useUserColorManager} from '@sanity/base'
 import {ObjectDiff, FieldDiff, StringSegmentChanged, StringDiff} from '@sanity/diff'
 import Preview from 'part:@sanity/base/preview?'
-import {Annotation} from '../panes/documentPane/history/types'
-import {AnnotationTooltip} from './annotationTooltip'
-import {getAnnotationColor} from './helpers'
-import {DiffComponent} from './types'
+import {Annotation} from '../../panes/documentPane/history/types'
+import {AnnotationTooltip} from '../annotationTooltip'
+import {getAnnotationColor} from '../helpers'
+import {DiffComponent} from '../types'
 
 import styles from './ReferenceFieldDiff.css'
 

packages/@sanity/desk-tool/src/diffs/reference/index.ts

@@ -0,0 +1 @@
+export * from './ReferenceFieldDiff'

packages/@sanity/desk-tool/src/diffs/SlugFieldDiff.tsx → packages/@sanity/desk-tool/src/diffs/slug/SlugFieldDiff.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import {ObjectDiff, StringDiff} from '@sanity/diff'
-import {Annotation} from '../panes/documentPane/history/types'
-import {DiffComponent, SchemaType} from './types'
-import {StringFieldDiff} from './StringFieldDiff'
+import {Annotation} from '../../panes/documentPane/history/types'
+import {DiffComponent, SchemaType} from '../types'
+import {StringFieldDiff} from '../string/StringFieldDiff'
 
 interface Slug {
   current?: string

packages/@sanity/desk-tool/src/diffs/slug/index.ts

@@ -0,0 +1 @@
+export * from './SlugFieldDiff'

packages/@sanity/desk-tool/src/diffs/StringFieldDiff.tsx → packages/@sanity/desk-tool/src/diffs/string/StringFieldDiff.tsx

@@ -3,10 +3,10 @@
 import {useUserColorManager} from '@sanity/base'
 import {StringDiffSegment, StringDiff} from '@sanity/diff'
 import React from 'react'
-import {Annotation} from '../panes/documentPane/history/types'
-import {AnnotationTooltip} from './annotationTooltip'
-import {getAnnotationColor} from './helpers'
-import {DiffComponent} from './types'
+import {Annotation} from '../../panes/documentPane/history/types'
+import {AnnotationTooltip} from '../annotationTooltip'
+import {getAnnotationColor} from '../helpers'
+import {DiffComponent} from '../types'
 
 import styles from './StringFieldDiff.css'
 

packages/@sanity/desk-tool/src/diffs/string/index.ts

@@ -0,0 +1 @@
+export * from './StringFieldDiff'

packages/@sanity/desk-tool/src/panes/documentPane/DocumentPane.tsx

@@ -20,7 +20,6 @@ import {createObservableController} from './history/controller'
 import {Timeline} from './history/timeline'
 import InspectView from './inspect/InspectView'
 import {ChangesPanel} from './changesPanel/ChangesPanel'
-import RevisionSummary from './RevisionSummary'
 import {HistoryTimelinePanel} from './historyTimelinePanel'
 import FormView from './FormView'
 import {Validation} from './Validation'
@@ -310,8 +309,6 @@ function DocumentPane(props: Props) {
       onKeyUp={handleKeyUp}
       className={styles.root}
     >
-      {isHistoryOpen && <RevisionSummary />}
-
       <div className={styles.container}>
         {isHistoryOpen && (
           <div className={styles.historyTimelineContainer}>

packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/ChangesPanel.css

@@ -14,15 +14,16 @@
   }
 }
 
+.body {
+  padding: 1em;
+}
+
 .changeList {
   display: grid;
   grid-gap: 2.25em;
-  /* padding: 0 1em; */
 }
 
 .group {
-  /* border-left: 1px solid gray;
-  padding-left: 0.75em; */
 }
 
 .change {

packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/ChangesPanel.tsx

@@ -2,7 +2,7 @@
 import React, {useCallback, Fragment, useContext} from 'react'
 import {useDocumentOperation} from '@sanity/react-hooks'
 import {Diff, NoDiff} from '@sanity/diff'
-import {FallbackDiff} from '../../../diffs/FallbackDiff'
+import {FallbackDiff} from '../../../diffs/_fallback/FallbackDiff'
 import {resolveDiffComponent} from '../../../diffs/resolveDiffComponent'
 import {Annotation} from '../history/types'
 import {SchemaType} from '../types'
@@ -37,21 +37,20 @@ export function ChangesPanel({diff, schemaType, documentId}: Props) {
         <h2>Changes</h2>
       </header>
 
-      <div style={{padding: '1em'}}>
-        <div className={styles.changeList}>
-          <DocumentContext.Provider value={documentContext}>
+      <div className={styles.body}>
+        <DocumentContext.Provider value={documentContext}>
+          <div className={styles.changeList}>
             {changes.map(change => (
               <ChangeResolver change={change} key={change.key} level={0} />
             ))}
-          </DocumentContext.Provider>
-        </div>
+          </div>
+        </DocumentContext.Provider>
       </div>
     </div>
   )
 }
 
 function ArrayChange({change, level = 0}: {change: ArrayChangeNode; level: number}) {
-  // console.log('FieldChange', change)
   const DiffComponent = resolveDiffComponent(change.schemaType) || FallbackDiff
   const {documentId, schemaType} = useContext(DocumentContext)
   const docOperations = useDocumentOperation(documentId, schemaType.name) as OperationsAPI