merge with master

quiltdata · Jun 13, 2023 · 9ec4e39 · 9ec4e39
2 parents 8c3bf95 + f974670
commit 9ec4e39
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 45 deletions.
diff --git a/catalog/app/components/Preview/Header.tsx b/catalog/app/components/Preview/Header.tsx
@@ -0,0 +1,71 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+import * as Buttons from 'components/Buttons'
+import type * as Model from 'model'
+
+import Menu from './Menu'
+
+const useStyles = M.makeStyles((t) => ({
+  heading: {
+    ...t.typography.h6,
+    alignItems: 'flex-start',
+    display: 'flex',
+    lineHeight: 1.75,
+    [t.breakpoints.up('md')]: {
+      ...t.typography.h5,
+    },
+  },
+  headingText: {
+    flexGrow: 1,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  actions: {
+    display: 'flex',
+    flexShrink: 0,
+    marginLeft: t.spacing(2),
+    marginTop: '2px',
+  },
+  menu: {
+    display: 'flex',
+    marginLeft: t.spacing(1),
+  },
+}))
+
+interface HeaderProps {
+  children: React.ReactNode
+  className?: string
+  downloadable?: boolean
+  expanded?: boolean
+  handle?: Model.S3.S3ObjectLocation
+  onToggle?: () => void
+}
+
+export default function Header({
+  downloadable = false,
+  expanded = false,
+  handle,
+  children,
+  onToggle,
+  className,
+}: HeaderProps) {
+  const classes = useStyles()
+  return (
+    <div className={cx(classes.heading, className)}>
+      <div className={classes.headingText}>{children}</div>
+      <div className={classes.actions}>
+        {onToggle && (
+          <Buttons.Iconized
+            label={expanded ? 'Collapse' : 'Expand'}
+            icon={expanded ? 'unfold_less' : 'unfold_more'}
+            rotate={expanded}
+            onClick={onToggle}
+          />
+        )}
+        {downloadable && !!handle && <Menu className={classes.menu} handle={handle} />}
+      </div>
+    </div>
+  )
+}
diff --git a/catalog/app/components/Preview/index.js b/catalog/app/components/Preview/index.js
@@ -2,4 +2,5 @@ export { default as Display, bind as display } from './Display'
 export { default as render } from './render'
 export { default as load, getRenderProps } from './load'
 export { PreviewData, PreviewError, CONTEXT } from './types'
+export { default as Header } from './Header'
 export { default as Menu } from './Menu'
diff --git a/catalog/app/components/SearchResults/SearchResults.js b/catalog/app/components/SearchResults/SearchResults.js
@@ -5,7 +5,6 @@ import { Link } from 'react-router-dom'
 import * as M from '@material-ui/core'
 
 import * as BreadCrumbs from 'components/BreadCrumbs'
-import * as Buttons from 'components/Buttons'
 import JsonDisplay from 'components/JsonDisplay'
 import Pagination from 'components/Pagination2'
 import * as Preview from 'components/Preview'
@@ -78,20 +77,14 @@ function HeaderIcon(props) {
 
 function ObjectHeader({ handle, showBucket, downloadable = false, expanded, onToggle }) {
   return (
-    <Heading display="flex" alignItems="center" mb="0 !important">
+    <Preview.Header
+      downloadable={downloadable}
+      expanded={expanded}
+      handle={handle}
+      onToggle={onToggle}
+    >
       <ObjectCrumbs {...{ handle, showBucket }} />
-      <M.Box flexGrow={1} />
-      <Buttons.Iconized
-        label={expanded ? 'Collapse' : 'Expand'}
-        icon={expanded ? 'unfold_less' : 'unfold_more'}
-        rotate={expanded}
-        onClick={onToggle}
-        mr={1}
-      />
-      {!!downloadable && (
-        <Preview.Menu handle={handle} expanded={expanded} onToggle={onToggle} />
-      )}
-    </Heading>
+    </Preview.Header>
   )
 }
 

diff --git a/catalog/app/containers/Bucket/Summarize.tsx b/catalog/app/containers/Bucket/Summarize.tsx
@@ -6,11 +6,11 @@ import * as React from 'react'
 import * as M from '@material-ui/core'
 
 import * as BreadCrumbs from 'components/BreadCrumbs'
-import * as Buttons from 'components/Buttons'
 import Markdown from 'components/Markdown'
 import * as Preview from 'components/Preview'
 import type { Type as SummaryFileTypes } from 'components/Preview/loaders/summarize'
 import Skeleton, { SkeletonProps } from 'components/Skeleton'
+import cfg from 'constants/config'
 import { docs } from 'constants/urls'
 import type * as Model from 'model'
 import * as APIConnector from 'utils/APIConnector'
@@ -124,27 +124,10 @@ const useSectionStyles = M.makeStyles((t) => ({
     ...t.typography.body2,
   },
   heading: {
-    ...t.typography.h6,
-    display: 'flex',
-    lineHeight: 1.75,
     marginBottom: t.spacing(1),
     [t.breakpoints.up('sm')]: {
       marginBottom: t.spacing(2),
     },
-    [t.breakpoints.up('md')]: {
-      ...t.typography.h5,
-    },
-  },
-  headingText: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  },
-  menu: {
-    display: 'flex',
-    marginLeft: t.spacing(1),
-  },
-  toggle: {
-    marginLeft: 'auto',
   },
 }))
 
@@ -173,19 +156,15 @@ export function Section({
     <M.Paper className={cx(classes.root, classes[ft])} {...props}>
       <div className={classes.content}>
         {!!heading && (
-          <div className={classes.heading}>
-            <div className={classes.headingText}>{heading}</div>
-            {onToggle && (
-              <Buttons.Iconized
-                className={classes.toggle}
-                label={expanded ? 'Collapse' : 'Expand'}
-                icon={expanded ? 'unfold_less' : 'unfold_more'}
-                rotate={expanded}
-                onClick={onToggle}
-              />
-            )}
-            {handle && <Preview.Menu className={classes.menu} handle={handle} />}
-          </div>
+          <Preview.Header
+            className={classes.heading}
+            downloadable={!cfg.noDownload}
+            expanded={expanded}
+            handle={handle}
+            onToggle={onToggle}
+          >
+            {heading}
+          </Preview.Header>
         )}
         {!!description && <div className={classes.description}>{description}</div>}
         {children}

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -20,6 +20,7 @@ Entries inside each section should be ordered by type:
 ## CLI
 
 ## Catalog, Lambdas
+* [Fixed] Fixed file preview header layout ([#3454](https://github.com/quiltdata/quilt/pull/3454))
 * [Fixed] Fix getting custom styles and options for files listed in quilt_summarize.json ([#3485](https://github.com/quiltdata/quilt/pull/3485))
 * [Fixed] Fix Header's orange flash on load ([#3487](https://github.com/quiltdata/quilt/pull/3487))
 * [Added] Add filter for users and buckets tables in Admin dashboards ([#3480](https://github.com/quiltdata/quilt/pull/3480))