[desk-tool] Move changes logic from @sanity/desk-tool to @sanity/field

packages/@sanity/desk-tool/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "complexity": [15, "warn"]
+  }
+}

packages/@sanity/desk-tool/package.json

@@ -51,7 +51,6 @@
     "react-popper": "^2.2.3",
     "react-tiny-virtual-list": "^2.0.5",
     "rxjs": "^6.5.3",
-    "sanity-diff-patch": "^1.0.7",
     "shallow-equals": "^1.0.0",
     "use-onclickoutside": "^0.3.1"
   },

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

@@ -1,4 +1,4 @@
-import {TypedObject, KeyedObject} from '../panes/documentPane/changesPanel/types'
+import {TypedObject, KeyedObject} from '@sanity/field/diff'
 
 export function getObjectKey(obj: unknown, fallback: string | number) {
   if (isKeyedObject(obj)) {

packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/buildChangeList.ts

@@ -1,15 +1,16 @@
-import {toString as pathToString} from '@sanity/util/paths'
 import {
   ObjectDiff,
   ObjectSchemaType,
   Path,
   ArraySchemaType,
   ArrayDiff,
   SchemaType,
-  Diff
+  Diff,
+  ChangeNode,
+  ChangeTitlePath
 } from '@sanity/field/diff'
+import {toString as pathToString} from '@sanity/util/paths'
 import {resolveDiffComponent} from '../../../diffs/resolveDiffComponent'
-import {ChangeNode, ChangeTitlePath} from './types'
 import {getArrayDiffItemType} from './helpers'
 
 export function buildDocumentChangeList(schemaType: ObjectSchemaType, diff: ObjectDiff) {

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

@@ -42,68 +42,3 @@
   display: grid;
   grid-gap: 2.25em;
 }
-
-.change__header {
-  margin: 0 0 0.5em;
-  display: flex;
-}
-
-.change__breadcrumb {
-  flex: 1;
-  font-size: 13px;
-
-  @nest & strong {
-    font-weight: 600;
-  }
-}
-
-.change__breadcrumb > * {
-  overflow: hidden;
-  display: inline-block;
-  white-space: nowrap;
-  padding: 0.2em 0;
-}
-
-.change__breadcrumb__index_group {
-  padding: 0;
-}
-
-.change__breadcrumb__index_group:not(:first-child) {
-  /* @todo coder styling, fix me  */
-  margin-left: 5px;
-}
-
-.change__breadcrumb__index {
-  /* @todo coder styling, fix me  */
-  display: inline-block;
-  background: #ddd;
-  border-radius: 3px;
-  font-weight: bold;
-  padding: 0.2em 0.5em;
-}
-
-.change__breadcrumb__separator {
-  /* @todo coder styling, fix me  */
-  margin: 0 2.5px;
-}
-
-.change__breadcrumb__segment:not(:only-child) {
-  /* @todo coder styling, fix me  */
-  max-width: 100px;
-  text-overflow: ellipsis;
-}
-
-.change__revertButton {
-  font-size: 12px;
-  padding: 0.25em;
-}
-
-.groupChange > .changeList {
-  border-left: 1px solid #ccc;
-  padding-left: 0.75em;
-}
-
-.diffComponent {
-  border-left: 1px solid #ccc;
-  padding-left: 0.75em;
-}

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

@@ -1,22 +1,14 @@
 /* eslint-disable max-depth */
-
+import React, {useCallback} from 'react'
+import {
+  ObjectDiff,
+  ObjectSchemaType,
+  ChangeResolver,
+  DocumentChangeContext
+} from '@sanity/field/diff'
 import Button from 'part:@sanity/components/buttons/default'
-import React, {useCallback, Fragment, useContext} from 'react'
-import {useDocumentOperation} from '@sanity/react-hooks'
-import {ObjectDiff, SchemaType, ObjectSchemaType} from '@sanity/field/diff'
-import {FallbackDiff} from '../../../diffs/_fallback/FallbackDiff'
 import {useDocumentHistory} from '../documentHistory'
 import {buildDocumentChangeList} from './buildChangeList'
-import {DiffErrorBoundary} from './diffErrorBoundary'
-import {
-  OperationsAPI,
-  ChangeNode,
-  FieldChangeNode,
-  GroupChangeNode,
-  FromToIndex,
-  ChangeTitlePath
-} from './types'
-import {undoChange} from './undoChange'
 
 import styles from './changesPanel.css'
 
@@ -27,13 +19,6 @@ interface ChangesPanelProps {
   schemaType: ObjectSchemaType
 }
 
-type DocumentContextProps = {
-  documentId: string
-  schemaType: SchemaType
-}
-
-const DocumentContext = React.createContext<DocumentContextProps>({} as any)
-
 export function ChangesPanel({
   changesSinceSelectRef,
   documentId,
@@ -77,117 +62,14 @@ export function ChangesPanel({
       </header>
 
       <div className={styles.body}>
-        <DocumentContext.Provider value={documentContext}>
+        <DocumentChangeContext.Provider value={documentContext}>
           <div className={styles.changeList}>
             {changes.map(change => (
               <ChangeResolver change={change} key={change.key} />
             ))}
           </div>
-        </DocumentContext.Provider>
-      </div>
-    </div>
-  )
-}
-
-function ChangeHeader({change, titlePath}: {change: FieldChangeNode; titlePath: ChangeTitlePath}) {
-  const {documentId, schemaType} = useContext(DocumentContext)
-  const docOperations = useDocumentOperation(documentId, schemaType.name) as OperationsAPI
-  const handleUndoChange = useCallback(() => undoChange(change.diff, change.path, docOperations), [
-    documentId,
-    change.key,
-    change.diff
-  ])
-
-  return (
-    <div className={styles.change__header}>
-      <ChangeBreadcrumb titlePath={titlePath} />
-
-      <button type="button" className={styles.change__revertButton} onClick={handleUndoChange}>
-        Revert changes
-      </button>
-    </div>
-  )
-}
-
-function FieldChange({change}: {change: FieldChangeNode}) {
-  const DiffComponent = change.diffComponent || FallbackDiff
-
-  return (
-    <div className={styles.fieldChange}>
-      <ChangeHeader change={change} titlePath={change.titlePath} />
-
-      <div className={styles.diffComponent}>
-        <DiffErrorBoundary>
-          <DiffComponent diff={change.diff} schemaType={change.schemaType} />
-        </DiffErrorBoundary>
-      </div>
-    </div>
-  )
-}
-
-function GroupChange({change: group}: {change: GroupChangeNode}) {
-  const {titlePath, changes} = group
-  return (
-    <div className={styles.groupChange}>
-      <div className={styles.change__header}>
-        <ChangeBreadcrumb titlePath={titlePath} />
-
-        <button type="button" className={styles.change__revertButton}>
-          Revert changes
-        </button>
-      </div>
-
-      <div className={styles.changeList}>
-        {changes.map(change => (
-          <ChangeResolver key={change.key} change={change} />
-        ))}
+        </DocumentChangeContext.Provider>
       </div>
     </div>
   )
 }
-
-function ChangeResolver({change}: {change: ChangeNode}) {
-  if (change.type === 'field') {
-    return <FieldChange change={change} />
-  }
-
-  if (change.type === 'group') {
-    return <GroupChange change={change} />
-  }
-
-  return <div>Unknown change type: {(change as any).type}</div>
-}
-
-function ChangeBreadcrumb({titlePath}: {titlePath: ChangeTitlePath}) {
-  return (
-    <div className={styles.change__breadcrumb}>
-      {titlePath.map((titleSegment, idx) => (
-        <Fragment key={idx}>
-          {idx > 0 && typeof titleSegment === 'string' && (
-            <em className={styles.change__breadcrumb__separator}> / </em>
-          )}
-          <TitleSegment segment={titleSegment} />
-        </Fragment>
-      ))}
-    </div>
-  )
-}
-
-function TitleSegment({segment}: {segment: string | FromToIndex}) {
-  if (typeof segment === 'string') {
-    return (
-      <strong className={styles.change__breadcrumb__segment} title={segment}>
-        {segment}
-      </strong>
-    )
-  }
-
-  const {hasMoved, fromIndex, toIndex} = segment
-  return (
-    <span className={styles.change__breadcrumb__index_group}>
-      {hasMoved && <span className={styles.change__breadcrumb__index}>{fromIndex}</span>}
-      {hasMoved && ' → '}
-      <span className={styles.change__breadcrumb__index}>{toIndex}</span>
-    </span>
-  )
-}

packages/@sanity/field/package.json

@@ -26,7 +26,9 @@
   },
   "dependencies": {
     "@sanity/base": "1.150.3",
-    "@sanity/diff": "1.150.1"
+    "@sanity/diff": "1.150.1",
+    "@sanity/react-hooks": "1.150.4",
+    "sanity-diff-patch": "^1.0.7"
   },
   "devDependencies": {
     "react": "16.9.0",