feat(structure): History UI updates (#7462)

Merge draft changes into the publish action.
Moves revision into the history panel

Co-authored-by: RitaDias <[email protected]>

Author: pedrobonamin

packages/sanity/src/core/form/inputs/DateInputs/index.ts

@@ -1,2 +1,3 @@
 export {DateInput, type DateInputProps} from './DateInput'
 export {DateTimeInput, type DateTimeInputProps} from './DateTimeInput'
+export {getCalendarLabels} from './utils'

packages/sanity/src/core/form/inputs/DateInputs/utils.ts

@@ -4,6 +4,9 @@ export function isValidDate(date: Date): boolean {
   return date instanceof Date && !isNaN(date.valueOf())
 }
 
+/**
+ * @internal
+ */
 export function getCalendarLabels(
   t: (key: string, values?: Record<string, unknown>) => string,
 ): CalendarLabels {

packages/sanity/src/core/i18n/bundles/studio.ts

@@ -197,7 +197,7 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'calendar.weekday-names.short.wednesday': 'Wed',
 
   /** Label for the close button label in Review Changes pane */
-  'changes.action.close-label': 'Close review changes',
+  'changes.action.close-label': 'Close history',
   /** Cancel label for revert button prompt action */
   'changes.action.revert-all-cancel': 'Cancel',
   /** Revert all confirm label for revert button action - used on prompt button + review changes pane */
@@ -313,7 +313,7 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /** Label for when the action of the change was a removal, eg a field was cleared, an array item was removed, an asset was deselected or similar */
   'changes.removed-label': 'Removed',
   /** Title for the Review Changes pane */
-  'changes.title': 'Review changes',
+  'changes.title': 'History',
 
   /** --- Common components --- */
   /** Tooltip text for context menu buttons */
@@ -359,6 +359,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'document-status.not-published': 'Not published',
   /** Label to show in the document footer indicating the published date of the document */
   'document-status.published': 'Published {{date}}',
+  /** Label to show in the document footer indicating the revision from date of the document */
+  'document-status.revision-from': 'Revision from <em>{{date}}</em>',
 
   /** The value of the <code>_key</code> property must be a unique string. */
   'form.error.duplicate-keys-alert.details.additional-description':
@@ -1592,7 +1594,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'sheet-list.select-fields': 'Select up to 5 field types',
   /** Accessibility label for the navbar status button */
   'status-button.aria-label': 'Configuration status',
-
+  /** Title for the changes tooltip in the history inspector*/
+  'timeline.changes.title': 'Changes by',
   /** Description for error when the timeline for the given document can't be loaded */
   'timeline.error.load-document-changes-description':
     'Document history transactions have not been affected.',
@@ -1656,7 +1659,7 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
    * Label for determining since which version the changes for timeline menu dropdown are showing.
    * Receives the time label as a parameter (`timestamp`).
    */
-  'timeline.since': 'Since: {{timestamp, datetime}}',
+  'timeline.since': '{{timestamp, datetime}}',
   /** Label for missing change version for timeline menu dropdown are showing */
   'timeline.since-version-missing': 'Since: unknown version',
   /** Aria label for the action buttons in the PTE toolbar */

packages/sanity/src/core/store/_legacy/history/history/TimelineController.ts

@@ -126,6 +126,10 @@ export class TimelineController {
     return this._revTime && typeof this._revTime === 'object' ? this._revTime : null
   }
 
+  get isLoading(): boolean {
+    return this._isRunning
+  }
+
   get realRevChunk(): Chunk {
     return this.revTime || this.timeline.lastChunk()
   }
@@ -258,6 +262,7 @@ export class TimelineController {
       !this._isSuspended
 
     if (!shouldFetchMore) {
+      this._isRunning = false
       return
     }
 

packages/sanity/src/core/store/_legacy/history/useTimelineStore.ts

@@ -194,7 +194,6 @@ export function useTimelineStore({
       findRangeForSince: (chunk: Chunk) => controller.findRangeForNewSince(chunk),
       loadMore: () => {
         controller.setLoadMore(true)
-        timelineStateRef.current.isLoading = true
       },
       getSnapshot: () => timelineStateRef.current,
       subscribe: (callback: () => void) => {
@@ -217,7 +216,7 @@ export function useTimelineStore({
               return {
                 chunks,
                 diff: innerController.sinceTime ? innerController.currentObjectDiff() : null,
-                isLoading: false,
+                isLoading: innerController.isLoading,
                 isPristine: timelineReady ? chunks.length === 0 && hasMoreChunks === false : null,
                 hasMoreChunks: !innerController.timeline.reachedEarliestEntry,
                 lastNonDeletedRevId: lastNonDeletedChunk?.[0]?.id,

packages/sanity/src/structure/documentActions/HistoryRestoreAction.tsx

@@ -1,4 +1,4 @@
-import {RestoreIcon} from '@sanity/icons'
+import {RevertIcon} from '@sanity/icons'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {
   type DocumentActionComponent,
@@ -66,14 +66,14 @@ export const HistoryRestoreAction: DocumentActionComponent = ({id, type, revisio
 
     return {
       label: t('action.restore.label'),
-      color: 'primary',
+      tone: 'caution',
       onHandle: handle,
       title: t(
         isRevisionInitial
           ? 'action.restore.disabled.cannot-restore-initial'
           : 'action.restore.tooltip',
       ),
-      icon: RestoreIcon,
+      icon: RevertIcon,
       dialog,
       disabled: isRevisionInitial,
     }

packages/sanity/src/structure/documentActions/PublishAction.tsx

@@ -111,19 +111,14 @@ export const PublishAction: DocumentActionComponent = (props) => {
 
   useEffect(() => {
     const didPublish = publishState === 'publishing' && !hasDraft
-    if (didPublish) {
-      if (changesOpen) {
-        // Re-open the panel
-        onHistoryOpen()
-      }
-    }
+
     const nextState = didPublish ? 'published' : null
     const delay = didPublish ? 200 : 4000
     const timer = setTimeout(() => {
       setPublishState(nextState)
     }, delay)
     return () => clearTimeout(timer)
-  }, [changesOpen, publishState, hasDraft, onHistoryOpen])
+  }, [changesOpen, publishState, hasDraft])
 
   const telemetry = useTelemetry()
 

packages/sanity/src/structure/i18n/resources.ts

@@ -69,15 +69,15 @@ const structureLocaleStrings = defineLocalesResources('structure', {
   /** Tooltip when publish button is waiting for validation and async tasks to complete.*/
   'action.publish.waiting': 'Waiting for tasks to finish before publishing',
 
-  /** Message prompting the user to confirm that they want to restore to an earlier version*/
+  /** Message prompting the user to confirm that they want to restore to an earlier revision*/
   'action.restore.confirm.message': 'Are you sure you want to restore this document?',
-  /** Fallback tooltip for when user is looking at the initial version */
-  'action.restore.disabled.cannot-restore-initial': "You can't restore to the initial version",
+  /** Fallback tooltip for when user is looking at the initial revision */
+  'action.restore.disabled.cannot-restore-initial': "You can't restore to the initial revision",
 
   /** Label for the "Restore" document action */
-  'action.restore.label': 'Restore',
+  'action.restore.label': 'Revert to revision',
   /** Default tooltip for the action */
-  'action.restore.tooltip': 'Restore to this version',
+  'action.restore.tooltip': 'Restore to this revision',
 
   /** Tooltip when action is disabled because the document is not already published */
   'action.unpublish.disabled.not-published': 'This document is not published',
@@ -90,7 +90,7 @@ const structureLocaleStrings = defineLocalesResources('structure', {
     'This document has live edit enabled and cannot be unpublished',
 
   /** The text for the restore button on the deleted document banner */
-  'banners.deleted-document-banner.restore-button.text': 'Restore most recent version',
+  'banners.deleted-document-banner.restore-button.text': 'Restore most recent revision',
   /** The text content for the deleted document banner */
   'banners.deleted-document-banner.text': 'This document has been deleted.',
   /** The text content for the deprecated document type banner */
@@ -147,7 +147,14 @@ const structureLocaleStrings = defineLocalesResources('structure', {
   'buttons.split-pane-close-button.title': 'Close split pane',
   /** The title for the close group button on the split pane on the document panel header */
   'buttons.split-pane-close-group-button.title': 'Close pane group',
-
+  /** The label used in the changes inspector for the from selector */
+  'changes.from.label': 'From',
+  /* The label for the history tab in the changes inspector*/
+  'changes.tab.history': 'History',
+  /* The label for the review tab in the changes inspector*/
+  'changes.tab.review-changes': 'Review changes',
+  /** The label used in the changes inspector for the to selector */
+  'changes.to.label': 'To',
   /** The text in the "Cancel" button in the confirm delete dialog that cancels the action and closes the dialog */
   'confirm-delete-dialog.cancel-button.text': 'Cancel',
   /** Used in `confirm-delete-dialog.cdr-summary.title` */
@@ -378,7 +385,7 @@ const structureLocaleStrings = defineLocalesResources('structure', {
     '<Strong>{{title}}</Strong> was restored',
   /** The text when an unpublish operation succeeded  */
   'panes.document-operation-results.operation-success_unpublish':
-    '<Strong>{{title}}</Strong> was unpublished. A draft has been created from the latest published version.',
+    '<Strong>{{title}}</Strong> was unpublished. A draft has been created from the latest published revision.',
   /** The document title shown when document title is "undefined" in operation message */
   'panes.document-operation-results.operation-undefined-title': 'Untitled',
   /** The title of the reconnecting toast */
@@ -467,6 +474,15 @@ const structureLocaleStrings = defineLocalesResources('structure', {
   'structure-error.reload-button.text': 'Reload',
   /** Labels the structure path of the structure error screen */
   'structure-error.structure-path.label': 'Structure path',
+
+  /** The aria label for the menu button in the timeline item */
+  'timeline-item.menu-button.aria-label': 'Open action menu',
+  /** The text for the tooltip in menu button the timeline item */
+  'timeline-item.menu-button.tooltip': 'Actions',
+  /** The text for the collapse action in the timeline item menu */
+  'timeline-item.menu.action-collapse': 'Collapse',
+  /** The text for the expand action in the timeline item menu */
+  'timeline-item.menu.action-expand': 'Expand',
 })
 
 /**

packages/sanity/src/structure/panes/document/DocumentPaneProvider.tsx

@@ -390,7 +390,7 @@ export const DocumentPaneProvider = memo((props: DocumentPaneProviderProps) => {
     }
 
     if (resolvedChangesInspector) {
-      openInspector(resolvedChangesInspector.name)
+      openInspector(resolvedChangesInspector.name, {changesInspectorTab: 'review'})
     }
   }, [features.reviewChanges, openInspector, resolvedChangesInspector])
 

packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx

@@ -25,7 +25,7 @@ import {type Path} from 'sanity-diff-patch'
 import {styled} from 'styled-components'
 
 import {TooltipDelayGroupProvider} from '../../../../ui-components'
-import {Pane, PaneFooter, usePane, usePaneLayout} from '../../../components'
+import {Pane, PaneFooter, usePane, usePaneLayout, usePaneRouter} from '../../../components'
 import {DOCUMENT_PANEL_PORTAL_ELEMENT} from '../../../constants'
 import {structureLocaleNamespace} from '../../../i18n'
 import {useStructureTool} from '../../../useStructureTool'
@@ -82,7 +82,7 @@ export function DocumentLayout() {
     schemaType,
     value,
   } = useDocumentPane()
-
+  const {params: paneParams} = usePaneRouter()
   const {features} = useStructureTool()
   const {t} = useTranslation(structureLocaleNamespace)
   const {collapsed: layoutCollapsed} = usePaneLayout()
@@ -228,7 +228,7 @@ export function DocumentLayout() {
             <Flex direction="column" flex={1} height={layoutCollapsed ? undefined : 'fill'}>
               <StyledChangeConnectorRoot
                 data-testid="change-connector-root"
-                isReviewChangesOpen={changesOpen}
+                isReviewChangesOpen={changesOpen && paneParams?.changesInspectorTab === 'review'}
                 onOpenReviewChanges={onHistoryOpen}
                 onSetFocus={onConnectorSetFocus}
               >

packages/sanity/src/structure/panes/document/documentPanel/header/DocumentPanelHeader.tsx

@@ -10,12 +10,7 @@ import {
   useMemo,
   useState,
 } from 'react'
-import {
-  type DocumentActionDescription,
-  useFieldActions,
-  useTimelineSelector,
-  useTranslation,
-} from 'sanity'
+import {type DocumentActionDescription, useFieldActions, useTranslation} from 'sanity'
 
 import {Button, TooltipDelayGroupProvider} from '../../../../../ui-components'
 import {
@@ -33,7 +28,6 @@ import {type PaneMenuItem} from '../../../../types'
 import {useStructureTool} from '../../../../useStructureTool'
 import {ActionDialogWrapper, ActionMenuListItem} from '../../statusBar/ActionMenuButton'
 import {isRestoreAction} from '../../statusBar/DocumentStatusBarActions'
-import {TimelineMenu} from '../../timeline'
 import {useDocumentPane} from '../../useDocumentPane'
 import {DocumentHeaderTabs} from './DocumentHeaderTabs'
 import {DocumentHeaderTitle} from './DocumentHeaderTitle'
@@ -57,7 +51,6 @@ export const DocumentPanelHeader = memo(
       onPaneSplit,
       menuItemGroups,
       schemaType,
-      timelineStore,
       connectionState,
       views,
       unstable_languageFilter,
@@ -84,9 +77,6 @@ export const DocumentPanelHeader = memo(
     const contextMenuNodes = useMemo(() => menuNodes.filter(isNotMenuNodeButton), [menuNodes])
     const showTabs = views.length > 1
 
-    // Subscribe to external timeline state changes
-    const rev = useTimelineSelector(timelineStore, (state) => state.revTime)
-
     const {collapsed, isLast} = usePane()
     // Prevent focus if this is the last (non-collapsed) pane.
     const tabIndex = isLast && !collapsed ? -1 : 0
@@ -152,7 +142,6 @@ export const DocumentPanelHeader = memo(
               />
             )
           }
-          subActions={<TimelineMenu chunk={rev} mode="rev" placement="bottom-end" />}
           actions={
             <Flex align="center" gap={1}>
               {unstable_languageFilter.length > 0 && (