highlight clickable, make empty space non-clickable, move closing bra…

…ce under opening
quiltdata · Sep 28, 2023 · 10b4ce2 · 10b4ce2
1 parent d2b8b6e
commit 10b4ce2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/catalog/app/components/JsonDisplay/JsonDisplay.js b/catalog/app/components/JsonDisplay/JsonDisplay.js
@@ -16,16 +16,25 @@ const useStyles = M.makeStyles((t) => ({
     fontFamily: t.typography.monospace.fontFamily,
     fontSize: t.typography.body2.fontSize,
     overflow: 'auto',
+    padding: '1px', // makes `outline` visible when `overflow: hidden`
     whiteSpace: 'pre',
     width: '100%',
   },
+  container: {
+    alignItems: 'start',
+    display: 'flex',
+    flexDirection: 'column',
+  },
   more: {
     color: t.palette.text.secondary,
   },
   flex: {
     display: 'flex',
   },
   compoundInner: {
+    alignItems: 'start',
+    display: 'flex',
+    flexDirection: 'column',
     paddingLeft: t.spacing(2),
   },
   hidden: {
@@ -43,6 +52,18 @@ const useStyles = M.makeStyles((t) => ({
   brace: {
     color: t.palette.text.secondary,
   },
+  clickable: {
+    cursor: 'pointer',
+    '&:hover': {
+      outline: `1px dotted ${t.palette.text.primary}`,
+    },
+  },
+  topLevelIcon: {
+    margin: '1px 0 0 1px',
+  },
+  tailingBrace: {
+    padding: t.spacing(0, 0.5),
+  },
 }))
 
 const IconBlank = ({ classes }) => <div className={classes.iconBlank} />
@@ -199,6 +220,7 @@ function CollapsedEntry({ availableSpace, value, showValuesWhenCollapsed }) {
 }
 
 function CompoundEntry({
+  className,
   name,
   value,
   topLevel = true,
@@ -225,9 +247,8 @@ function CompoundEntry({
     ])
 
   return (
-    <div>
-      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
-      <div className={classes.flex} onClick={toggle}>
+    <div className={className}>
+      <div className={cx(classes.flex, classes.clickable)} onClick={toggle}>
         {/* TODO: use icon rotation like MUI ? */}
         {empty ? ( // eslint-disable-line no-nested-ternary
           !topLevel && <IconBlank classes={classes} />
@@ -258,6 +279,7 @@ function CompoundEntry({
           <div className={cx(classes.compoundInner)}>
             {entries.map(([k, v]) => (
               <JsonDisplayInner
+                className={className}
                 classes={classes}
                 key={k}
                 name={k}
@@ -272,8 +294,9 @@ function CompoundEntry({
                 showValuesWhenCollapsed={showValuesWhenCollapsed}
               />
             ))}
-            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
-            <div onClick={toggle}>{braces[1]}</div>
+            <div className={cx(classes.clickable, classes.tailingBrace)} onClick={toggle}>
+              {braces[1]}
+            </div>
           </div>
         </React.Suspense>
       )}
@@ -342,6 +365,7 @@ export default function JsonDisplay({
             classes,
             showValuesWhenCollapsed,
           }}
+          className={classes.container}
           showKeysWhenCollapsed={computedKeys}
         />
       </React.Suspense>

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -38,6 +38,7 @@ Entries inside each section should be ordered by type:
 * [Changed] Allow users select files and directories and keep selection whenever they navigate to multiple directories or use filter ([#3527](https://github.com/quiltdata/quilt/pull/3527))
 * [Changed] Unify per-bucket and global search ([#3613](https://github.com/quiltdata/quilt/pull/3613))
 * [Changed] Allow use of <br /> in Markdown ([#3720](https://github.com/quiltdata/quilt/pull/3720))
+* [Changed] JSON display: highlight clickable on hover, minor layout changes ([#3734](https://github.com/quiltdata/quilt/pull/3734))
 
 # 5.3.1 - 2023-05-02
 ## Python API