[desk-tool] update badge label text

sanity-io · Oct 6, 2020 · d64fa1b · d64fa1b
1 parent 4efefc4
commit d64fa1b
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 83 deletions.
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBar.css b/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBar.css
@@ -27,11 +27,6 @@
   /*  */
 }
 
-.statusDetails {
-  white-space: nowrap;
-  margin: -2px 0 -1px;
-}
-
 .lastUpdatedButton {
   -webkit-appearance: none;
   -webkit-font-smoothing: inherit;

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBar.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBar.tsx
@@ -1,15 +1,12 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 
 import React from 'react'
-import TimeAgo from '../../../components/TimeAgo'
 import {useDocumentHistory} from '../documentHistory'
 import styles from './documentStatusBar.css'
 import {DocumentStatusBarActions} from './documentStatusBarActions'
-import {DocumentStatusBarBadges} from './documentStatusBarBadges'
-// import {SyncState} from './syncState'
+import {DocumentStatusBarSparkline} from './documentStatusBarSparkline'
 import {useEditState} from '@sanity/react-hooks'
 import resolveDocumentBadges from 'part:@sanity/base/document-badges/resolver'
-import {RenderBadgeCollectionState} from 'part:@sanity/base/actions/utils'
 
 interface Props {
   id: string
@@ -30,22 +27,11 @@ export function DocumentStatusBar(props: Props) {
           type="button"
           disabled={historyController.selectionState === 'active'}
         >
-          <DocumentStatusBarBadges
+          <DocumentStatusBarSparkline
             editState={editState}
             badges={badges}
             disabled={historyController.selectionState === 'active'}
           />
-          <div className={styles.statusDetails}>
-            {/* TODO */}
-            <div className={styles.lastStatus}>Todo</div>
-            {props.lastUpdated ? (
-              <div>
-                <TimeAgo time={props.lastUpdated} />
-              </div>
-            ) : (
-              'Empty'
-            )}
-          </div>
         </button>
       </div>
 

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBarBadges.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBarBadges.tsx
diff --git a/...ane/statusBar/documentStatusBarBadges.css → .../statusBar/documentStatusBarSparkline.css b/...ane/statusBar/documentStatusBarBadges.css → .../statusBar/documentStatusBarSparkline.css
@@ -3,6 +3,11 @@
   --size: 1.8rem;
 }
 
+.root {
+  display: flex;
+  align-items: center;
+}
+
 .statusBadges {
   position: relative;
   display: flex;
@@ -66,3 +71,12 @@
     color: var(--state-danger-color--inverted);
   }
 }
+
+.statusDetails {
+  white-space: nowrap;
+  margin: -2px 0 -1px;
+}
+
+.label {
+  font-weight: 500;
+}
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBarSparkline.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBarSparkline.tsx
@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable react/no-multi-comp */
+/* eslint-disable react/no-array-index-key */
+
+import React from 'react'
+import Badge from 'part:@sanity/components/badges/default'
+import {RenderBadgeCollectionState} from 'part:@sanity/base/actions/utils'
+// import {SyncState} from './syncState' // TODO
+import styles from './documentStatusBarSparkline.css'
+import {useDocumentHistory} from '../documentHistory'
+import {useTimeAgo} from '@sanity/base/hooks'
+
+export interface Badge {
+  label: string
+  title: string
+  color: 'success' | 'failure' | 'warning'
+  icon?: any
+}
+
+interface Props {
+  states: Badge[]
+  disabled: boolean
+}
+
+function DocumentStatusBarSparklineInner({states, disabled}: Props) {
+  if (states.length === 0) {
+    return null
+  }
+  const {displayed} = useDocumentHistory()
+  const timeAgo = displayed?._updatedAt && useTimeAgo(displayed._updatedAt)
+  const lastState = states[states.length - 1]
+  return (
+    <div className={styles.root}>
+      <div className={styles.statusBadges} data-disabled={disabled}>
+        {states.map((badge, badgeIndex) => {
+          const Icon = badge.icon
+          return (
+            <div
+              key={String(badgeIndex)}
+              className={styles.badge}
+              data-color={badge.color}
+              title={badge.title}
+            >
+              {Icon ? <Icon /> : badge.label}
+            </div>
+          )
+        })}
+        <div className={styles.sparkline} />
+      </div>
+      <div className={styles.statusDetails}>
+        <div className={styles.label}>{lastState.label}</div>
+        <div>{timeAgo ? timeAgo : 'Empty'}</div>
+      </div>
+    </div>
+  )
+}
+
+export function DocumentStatusBarSparkline(props: {
+  badges: Badge[]
+  editState: any
+  disabled: boolean
+}) {
+  return props.badges ? (
+    <RenderBadgeCollectionState
+      component={DocumentStatusBarSparklineInner}
+      badges={props.badges}
+      badgeProps={props.editState}
+      disabled={props.disabled}
+    />
+  ) : null
+}