[desk-tool] Fix indentation display of change groups

sanity-io · Oct 6, 2020 · 1508cb1 · 1508cb1
1 parent 0a7e6f6
commit 1508cb1
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 14 deletions.
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/buildChangeList.ts b/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/buildChangeList.ts
@@ -72,7 +72,7 @@ function buildObjectChangeList(
         key: pathToString(path),
         path,
         titlePath,
-        changes: changes
+        changes: reduceTitlePaths(changes, titlePath.length)
       }
     ]
   }
@@ -124,13 +124,17 @@ function buildArrayChangeList(
         key: pathToString(path),
         path,
         titlePath,
-        changes: changes.map(change => {
-          change.titlePath = change.titlePath.slice(titlePath.length)
-          return change
-        })
+        changes: reduceTitlePaths(changes, titlePath.length)
       }
     ]
   }
 
   return changes
 }
+
+function reduceTitlePaths(changes: ChangeNode[], byLength = 1): ChangeNode[] {
+  return changes.map(change => {
+    change.titlePath = change.titlePath.slice(byLength)
+    return change
+  })
+}
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.css b/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.css
@@ -52,17 +52,40 @@
   }
 }
 
+.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  */
-  padding: 0.25em 0.5em;
+  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 {

diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/changesPanel/changesPanel.tsx
@@ -64,7 +64,7 @@ export function ChangesPanel({documentId, schemaType}: ChangesPanelProps) {
         <DocumentContext.Provider value={documentContext}>
           <div className={styles.changeList}>
             {changes.map(change => (
-              <ChangeResolver change={change} key={change.key} level={0} />
+              <ChangeResolver change={change} key={change.key} />
             ))}
           </div>
         </DocumentContext.Provider>
@@ -93,12 +93,12 @@ function ChangeHeader({change, titlePath}: {change: FieldChangeNode; titlePath:
   )
 }
 
-function FieldChange({change, level = 0}: {change: FieldChangeNode; level: number}) {
+function FieldChange({change}: {change: FieldChangeNode}) {
   const DiffComponent = resolveDiffComponent(change.schemaType) || FallbackDiff
 
   return (
     <div className={styles.fieldChange}>
-      <ChangeHeader change={change} titlePath={change.titlePath.slice(level)} />
+      <ChangeHeader change={change} titlePath={change.titlePath} />
 
       <div className={styles.diffComponent}>
         <DiffErrorBoundary>
@@ -123,16 +123,16 @@ function GroupChange({change: group}: {change: GroupChangeNode}) {
 
       <div className={styles.changeList}>
         {changes.map(change => (
-          <ChangeResolver key={change.key} change={change} level={change.titlePath.length - 1} />
+          <ChangeResolver key={change.key} change={change} />
         ))}
       </div>
     </div>
   )
 }
 
-function ChangeResolver({change, level = 0}: {change: ChangeNode; level: number}) {
+function ChangeResolver({change}: {change: ChangeNode}) {
   if (change.type === 'field') {
-    return <FieldChange change={change} level={level} />
+    return <FieldChange change={change} />
   }
 
   if (change.type === 'group') {
@@ -147,7 +147,9 @@ function ChangeBreadcrumb({titlePath}: {titlePath: ChangeTitlePath}) {
     <div className={styles.change__breadcrumb}>
       {titlePath.map((titleSegment, idx) => (
         <Fragment key={idx}>
-          {idx > 0 && typeof titleSegment === 'string' && <em> / </em>}
+          {idx > 0 && typeof titleSegment === 'string' && (
+            <em className={styles.change__breadcrumb__separator}> / </em>
+          )}
           <TitleSegment segment={titleSegment} />
         </Fragment>
       ))}
@@ -157,7 +159,11 @@ function ChangeBreadcrumb({titlePath}: {titlePath: ChangeTitlePath}) {
 
 function TitleSegment({segment}: {segment: string | FromToIndex}) {
   if (typeof segment === 'string') {
-    return <strong>{segment}</strong>
+    return (
+      <strong className={styles.change__breadcrumb__segment} title={segment}>
+        {segment}
+      </strong>
+    )
   }
 
   const {hasMoved, fromIndex, toIndex} = segment