feat(sanity): update restore button (#7448)

* feat(sanity): update restore button * chore(sanity): update translations * feat(sanity): add left side information on footer (revision status line)
sanity-io · Nov 14, 2024 · a4c1200 · a4c1200
1 parent 3d16064
commit a4c1200
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 33 deletions.
diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -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':

diff --git a/packages/sanity/src/structure/documentActions/HistoryRestoreAction.tsx b/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,
     }

diff --git a/packages/sanity/src/structure/i18n/resources.ts b/packages/sanity/src/structure/i18n/resources.ts
@@ -75,9 +75,9 @@ const structureLocaleStrings = defineLocalesResources('structure', {
   'action.restore.disabled.cannot-restore-initial': "You can't restore to the initial version",
 
   /** 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',

diff --git a/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBar.tsx b/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBar.tsx
@@ -1,4 +1,4 @@
-import {Flex} from '@sanity/ui'
+import {Card, Flex} from '@sanity/ui'
 import {type Ref, useCallback, useState} from 'react'
 import {
   type CreateLinkMetadata,
@@ -14,6 +14,7 @@ import {useDocumentTitle} from '../useDocumentTitle'
 import {DocumentBadges} from './DocumentBadges'
 import {DocumentStatusBarActions, HistoryStatusBarActions} from './DocumentStatusBarActions'
 import {DocumentStatusLine} from './DocumentStatusLine'
+import {RevisionStatusLine} from './RevisionStatusLine'
 import {useResizeObserver} from './useResizeObserver'
 
 export interface DocumentStatusBarProps {
@@ -61,35 +62,41 @@ export function DocumentStatusBar(props: DocumentStatusBarProps) {
   }
 
   return (
-    <Flex direction="column" ref={setRootElement} sizing="border">
-      {shouldRender && (
-        <Flex
-          align="stretch"
-          gap={1}
-          justify="space-between"
-          paddingY={2}
-          paddingLeft={4}
-          paddingRight={3}
-        >
-          <Flex align="center" flex={1} gap={collapsed ? 2 : 3} wrap="wrap" paddingRight={3}>
-            <Flex align="center">
-              <DocumentStatusLine singleLine={!collapsed} />
-              <SpacerButton size="large" />
-            </Flex>
-            <DocumentBadges />
-          </Flex>
-
+    <Card tone={showingRevision ? 'caution' : undefined}>
+      <Flex direction="column" ref={setRootElement} sizing="border">
+        {shouldRender && (
           <Flex
-            align="flex-start"
-            justify="flex-end"
-            ref={actionsBoxRef}
-            style={{flexShrink: 0, marginLeft: 'auto'}}
+            align="stretch"
+            gap={1}
+            justify="space-between"
+            paddingY={2}
+            paddingLeft={4}
+            paddingRight={3}
           >
-            <SpacerButton size="large" />
-            {actions}
+            <Flex align="center" flex={1} gap={collapsed ? 2 : 3} wrap="wrap" paddingRight={3}>
+              <Flex align="center">
+                {showingRevision ? (
+                  <RevisionStatusLine />
+                ) : (
+                  <DocumentStatusLine singleLine={!collapsed} />
+                )}
+                <SpacerButton size="large" />
+              </Flex>
+              <DocumentBadges />
+            </Flex>
+
+            <Flex
+              align="flex-start"
+              justify="flex-end"
+              ref={actionsBoxRef}
+              style={{flexShrink: 0, marginLeft: 'auto'}}
+            >
+              <SpacerButton size="large" />
+              {actions}
+            </Flex>
           </Flex>
-        </Flex>
-      )}
-    </Flex>
+        )}
+      </Flex>
+    </Card>
   )
 }
diff --git a/packages/sanity/src/structure/panes/document/statusBar/RevisionStatusLine.tsx b/packages/sanity/src/structure/panes/document/statusBar/RevisionStatusLine.tsx
@@ -0,0 +1,56 @@
+import {RestoreIcon} from '@sanity/icons'
+import {Box, Flex, Text} from '@sanity/ui'
+import {format} from 'date-fns'
+import {createElement} from 'react'
+import {Translate, useTranslation} from 'sanity'
+import {styled} from 'styled-components'
+
+import {useDocumentPane} from '../useDocumentPane'
+
+export const StatusText = styled(Text)`
+  color: var(--card-muted-fg-color);
+
+  em {
+    color: var(--card-fg-color);
+    font-weight: 500;
+    font-style: normal;
+  }
+`
+
+export function RevisionStatusLine(): JSX.Element {
+  const {displayed} = useDocumentPane()
+  const {t} = useTranslation()
+
+  const message = {
+    name: 'revision',
+    icon: RestoreIcon,
+    text: (
+      <Translate
+        t={t}
+        i18nKey="document-status.revision-from"
+        values={{
+          date: format(
+            new Date(displayed?._updatedAt || displayed?._createdAt || 0),
+            `MMM d, yyyy '@' pp`,
+          ),
+        }}
+      />
+    ),
+    tone: 'caution',
+  }
+
+  return (
+    <>
+      <Flex flex={1} gap={3} padding={2}>
+        <Box flex="none">
+          <Text size={1}>{createElement(message.icon)}</Text>
+        </Box>
+        <Box flex={1}>
+          <StatusText size={1} textOverflow="ellipsis">
+            {message.text}
+          </StatusText>
+        </Box>
+      </Flex>
+    </>
+  )
+}