Toggle button for file previews

catalog/app/containers/Bucket/Summarize.tsx

@@ -65,6 +65,42 @@ function DownloadButton({ className, handle }: DownloadButtonProps) {
   ))
 }
 
+const useToggleButtonStyles = M.makeStyles((t) => ({
+  root: {
+    alignItems: 'center',
+    display: 'flex',
+    height: t.spacing(4),
+    justifyContent: 'center',
+    width: t.spacing(3),
+  },
+  icon: {
+    transition: 'ease transform .15s',
+  },
+  iconExpanded: {
+    transform: `rotate(180deg)`,
+  },
+}))
+
+interface ToggleButtonProps {
+  className?: string
+  expanded?: boolean
+  onExpand?: () => void
+}
+
+function ToggleButton({ className, expanded, onExpand }: ToggleButtonProps) {
+  const classes = useToggleButtonStyles()
+  return (
+    <div className={cx(classes.root, className)}>
+      <M.IconButton
+        onClick={onExpand}
+        className={cx(classes.icon, { [classes.iconExpanded]: expanded })}
+      >
+        <M.Icon>{expanded ? 'unfold_less' : 'unfold_more'}</M.Icon>
+      </M.IconButton>
+    </div>
+  )
+}
+
 enum FileThemes {
   Overview = 'overview',
   Nested = 'nested',
@@ -121,19 +157,26 @@ const useSectionStyles = M.makeStyles((t) => ({
   headingAction: {
     marginLeft: 'auto',
   },
+  toggle: {
+    marginRight: t.spacing(1),
+  },
 }))
 
 interface SectionProps extends M.PaperProps {
   description?: React.ReactNode
   handle?: S3Handle
   heading?: React.ReactNode
+  expanded?: boolean
+  onToggle?: () => void
 }
 
 export function Section({
   handle,
   heading,
   description,
   children,
+  expanded,
+  onToggle,
   ...props
 }: SectionProps) {
   const ft = React.useContext(FileThemeContext)
@@ -142,6 +185,13 @@ export function Section({
     <M.Paper className={cx(classes.root, classes[ft])} {...props}>
       {!!heading && (
         <div className={classes.heading}>
+          {onToggle && (
+            <ToggleButton
+              className={classes.toggle}
+              expanded={expanded}
+              onExpand={onToggle}
+            />
+          )}
           <div className={classes.headingText}>{heading}</div>
           {handle && <DownloadButton className={classes.headingAction} handle={handle} />}
         </div>
@@ -155,7 +205,7 @@ export function Section({
 interface PreviewBoxProps {
   children: React.ReactNode
   expanded?: boolean
-  onExpand: () => void
+  onToggle: () => void
 }
 
 const usePreviewBoxStyles = M.makeStyles((t) => ({
@@ -201,13 +251,22 @@ const usePreviewBoxStyles = M.makeStyles((t) => ({
   },
 }))
 
-function PreviewBox({ children, expanded, onExpand }: PreviewBoxProps) {
+function PreviewBox({ children, expanded, onToggle }: PreviewBoxProps) {
   const classes = usePreviewBoxStyles()
+  const ref = React.useRef<HTMLDivElement>(null)
+  const [checkedHeight, setCheckedHeight] = React.useState(false)
+  React.useEffect(() => {
+    if (!ref.current || expanded || checkedHeight) return
+    const child = ref.current.firstElementChild
+    if (!child) return
+    if (child.clientHeight <= ref.current.clientHeight) onToggle()
+    setCheckedHeight(true)
+  }, [expanded, checkedHeight, onToggle])
   return (
-    <div className={cx(classes.root, { [classes.expanded]: expanded })}>
+    <div className={cx(classes.root, { [classes.expanded]: expanded })} ref={ref}>
       {children}
       {!expanded && (
-        <div className={classes.fade} onClick={onExpand} title="Click to expand">
+        <div className={classes.fade} onClick={onToggle} title="Click to expand">
           <M.Button variant="outlined">Expand</M.Button>
         </div>
       )}
@@ -264,7 +323,7 @@ export function FilePreview({
   headingOverride,
   packageHandle,
 }: FilePreviewProps) {
-  const description = file ? <Markdown data={file.description} /> : null
+  const description = file?.description ? <Markdown data={file.description} /> : null
   const heading = headingOverride != null ? headingOverride : <Crumbs handle={handle} />
 
   const key = handle.logicalKey || handle.key
@@ -283,15 +342,21 @@ export function FilePreview({
   )
 
   const [expanded, setExpanded] = React.useState(defaultExpanded)
-  const onExpand = React.useCallback(() => setExpanded(true), [setExpanded])
+  const onToggle = React.useCallback(() => setExpanded((isExpanded) => !isExpanded), [])
   const renderContents = React.useCallback(
-    (children) => <PreviewBox {...{ children, expanded, onExpand }} />,
-    [expanded, onExpand],
+    (children) => <PreviewBox {...{ children, expanded, onToggle }} />,
+    [expanded, onToggle],
   )
 
   // TODO: check for glacier and hide items
   return (
-    <Section description={description} heading={heading} handle={handle}>
+    <Section
+      description={description}
+      heading={heading}
+      handle={handle}
+      expanded={expanded}
+      onToggle={onToggle}
+    >
       {Preview.load(
         previewHandle,
         Preview.display({

docs/CHANGELOG.md

@@ -20,6 +20,7 @@ Entries inside each section should be ordered by type:
 * [Added] Add link to package revisions from package list ([#3256](https://github.com/quiltdata/quilt/pull/3256))
 * [Added] WebP support in thumbnail lambda ([#3275](https://github.com/quiltdata/quilt/pull/3275))
 * [Added] Set default search mode in Admin Settings ([#3270](https://github.com/quiltdata/quilt/pull/3270))
+* [Added] Togggle buttons for file previews and auto-expand small previews ([#3290](https://github.com/quiltdata/quilt/pull/3290))
 * [Fixed] Fix performance issue (missing memoization) in search results ([#3257](https://github.com/quiltdata/quilt/pull/3257))
 * [Fixed] Fix fetching and writing settings in Admin/Settings section ([#3276](https://github.com/quiltdata/quilt/pull/3276))
 * [Fixed] Fix iframe preview width ([#3279](https://github.com/quiltdata/quilt/pull/3279))