[desk-tool] Refactor DocumentPane

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

@@ -47,6 +47,7 @@
     "promise-latest": "^1.0.4",
     "react-click-outside": "^3.0.0",
     "react-json-inspector": "^7.1.1",
+    "react-popper": "1.3.7",
     "react-tiny-virtual-list": "^2.0.5",
     "react-tippy": "1.4.0",
     "rxjs": "^6.5.3",

packages/@sanity/desk-tool/src/panes/documentPane/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "react/require-default-props": "off"
+  }
+}

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

@@ -10,21 +10,22 @@ import TabbedPane from 'part:@sanity/components/panes/tabbed'
 import Snackbar from 'part:@sanity/components/snackbar/default'
 import LanguageFilter from 'part:@sanity/desk-tool/language-select-component?'
 import * as PathUtils from '@sanity/util/paths'
-import {usePaneRouter} from '../../contexts/PaneRouterContext'
-import {getMenuItems, getProductionPreviewItem} from './menuItems'
-import {DocumentActionShortcuts, isInspectHotkey, isPreviewHotkey} from './keyboardShortcuts'
-import {Doc, DocumentViewType, MenuAction} from './types'
-
-import DocumentStatusBar from './statusBar/DocumentStatusBar'
-import {createObservableController} from './history/controller'
-import {Timeline} from './history/timeline'
-import InspectView from './inspect/InspectView'
-import {ChangesPanel} from './changesPanel/ChangesPanel'
+import {usePaneRouter} from '../../../contexts/PaneRouterContext'
+import {getMenuItems, getProductionPreviewItem} from '../documentPanel/menuItems'
+import {DocumentActionShortcuts, isInspectHotkey, isPreviewHotkey} from '../keyboardShortcuts'
+import {Doc, DocumentViewType, MenuAction} from '../types'
+
+import {DocumentStatusBar} from '../documentPanel/statusBar'
+import {createObservableController} from '../documentHistory/history/controller'
+import {Timeline} from '../documentHistory/history/timeline'
+import {InspectDialog} from '../inspectDialog'
+import {ChangesPanel} from '../changesPanel/changesPanel'
+import {FormView} from '../documentPanel/views'
+import {DocumentHeaderTitle} from '../documentPanel/header'
+import {DocumentOperationResults} from '../documentPanel/documentOperationResults'
 import {HistoryTimelinePanel} from './historyTimelinePanel'
-import FormView from './FormView'
 import {Validation} from './Validation'
-import {DocumentHeaderTitle} from './DocumentHeaderTitle'
-import {DocumentOperationResults} from './DocumentOperationResults'
+
 import styles from './DocumentPane.css'
 
 declare const __DEV__: boolean
@@ -269,12 +270,7 @@ function DocumentPane(props: Props) {
   )
 
   const paneFooter = (
-    <DocumentStatusBar
-      id={documentId}
-      type={typeName}
-      lastUpdated={value && value._updatedAt}
-      onLastUpdatedButtonClick={() => null}
-    />
+    <DocumentStatusBar id={documentId} type={typeName} lastUpdated={value && value._updatedAt} />
   )
 
   const renderPaneHeaderActions = React.useCallback(
@@ -328,7 +324,7 @@ function DocumentPane(props: Props) {
         )}
 
         <div className={styles.editorContainer} key="editor">
-          {inspect && <InspectView value={value} onClose={() => toggleInspect(false)} />}
+          {inspect && <InspectDialog value={value} onClose={() => toggleInspect(false)} />}
 
           <TabbedPane
             key="pane"
@@ -380,11 +376,7 @@ function DocumentPane(props: Props) {
 
         {isHistoryOpen && (
           <div className={styles.changesContainer}>
-            <ChangesPanel
-              diff={timeline.currentDiff() as any}
-              schemaType={schemaType}
-              documentId={documentId}
-            />
+            <ChangesPanel schemaType={schemaType} documentId={documentId} />
           </div>
         )}
       </div>

packages/@sanity/desk-tool/src/panes/documentPane/historyTimelinePanel/historyTimelinePanel.tsx → packages/@sanity/desk-tool/src/panes/documentPane/__legacy/historyTimelinePanel/historyTimelinePanel.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {format} from 'date-fns'
-import {Timeline, TimeRef} from '../history/timeline'
+import {Timeline, TimeRef} from '../../documentHistory/history/timeline'
 
 import styles from './historyTimelinePanel.css'
 

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

@@ -6,12 +6,23 @@
 
 .header {
   padding: 1em;
+  border-bottom: 1px solid #ddd;
+}
 
-  @nest & h2 {
-    margin: 0;
-    font: inherit;
-    font-weight: 700;
-  }
+.mainNav {
+  display: flex;
+}
+
+.title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font: inherit;
+  font-weight: 700;
+}
+
+.closeButtonContainer {
+  padding: 4px;
 }
 
 .body {

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

@@ -1,20 +1,20 @@
 /* eslint-disable max-depth */
 import React, {useCallback, Fragment, useContext} from 'react'
 import {useDocumentOperation} from '@sanity/react-hooks'
-//import {useUserColorManager} from '@sanity/base/user-color'
 import {ObjectDiff, SchemaType, ObjectSchemaType, ArrayDiff} from '@sanity/field/diff'
 import {FallbackDiff} from '../../../diffs/_fallback/FallbackDiff'
 import {resolveDiffComponent} from '../../../diffs/resolveDiffComponent'
-import {DiffErrorBoundary} from './DiffErrorBoundary'
+import {useDocumentHistory} from '../documentHistory'
 import {buildChangeList} from './buildChangeList'
+import {DiffErrorBoundary} from './diffErrorBoundary'
 import {OperationsAPI, ChangeNode, ArrayChangeNode, FieldChangeNode, GroupChangeNode} from './types'
 import {undoChange} from './undoChange'
-import styles from './ChangesPanel.css'
 
-type Props = {
-  diff: ObjectDiff
-  schemaType: ObjectSchemaType
+import styles from './changesPanel.css'
+
+interface ChangesPanelProps {
   documentId: string
+  schemaType: ObjectSchemaType
 }
 
 type DocumentContextProps = {
@@ -24,7 +24,10 @@ type DocumentContextProps = {
 
 const DocumentContext = React.createContext<DocumentContextProps>({} as any)
 
-export function ChangesPanel({diff, schemaType, documentId}: Props) {
+export function ChangesPanel({documentId, schemaType}: ChangesPanelProps) {
+  const {closeHistory, timeline} = useDocumentHistory()
+  const diff: ObjectDiff = timeline.currentDiff() as any
+
   if (diff.type !== 'object') {
     return null
   }
@@ -34,7 +37,19 @@ export function ChangesPanel({diff, schemaType, documentId}: Props) {
   return (
     <div className={styles.root}>
       <header className={styles.header}>
-        <h2>Changes</h2>
+        <div className={styles.mainNav}>
+          <h2 className={styles.title}>Changes</h2>
+          <div className={styles.closeButtonContainer}>
+            <button onClick={closeHistory} type="button">
+              Close
+            </button>
+          </div>
+        </div>
+        <div>
+          <div style={{display: 'inline-block', border: '1px solid #ccc'}}>
+            Since last published &darr;
+          </div>
+        </div>
       </header>
 
       <div className={styles.body}>

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

@@ -1,5 +1,6 @@
 import * as React from 'react'
-import styles from './DiffErrorBoundary.css'
+
+import styles from './diffErrorBoundary.css'
 
 declare const __DEV__: boolean
 

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

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

packages/@sanity/desk-tool/src/panes/documentPane/documentHistory/context.ts

@@ -0,0 +1,16 @@
+import {createContext} from 'react'
+import {Doc} from '../types'
+import {Controller} from './history/controller'
+import {Timeline, TimeRef} from './history/timeline'
+
+export interface HistoryContextInstance {
+  closeHistory: () => void
+  displayed: Doc | null
+  timeline: Timeline
+  historyController: Controller
+  historyDisplayed: 'from' | 'to'
+  startTime: TimeRef | null
+  toggleHistory: (startTimeId: string | null) => void
+}
+
+export const DocumentHistoryContext = createContext<HistoryContextInstance | null>(null)

packages/@sanity/desk-tool/src/panes/documentPane/documentHistory/history/index.ts

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

packages/@sanity/desk-tool/src/panes/documentPane/history/types.ts → packages/@sanity/desk-tool/src/panes/documentPane/documentHistory/history/types.ts

@@ -1,4 +1,4 @@
-export {Doc} from '../types'
+export {Doc} from '../../types'
 
 export type MendozaPatch = unknown[]