diff --git a/catalog/app/containers/Bucket/Listing.tsx b/catalog/app/containers/Bucket/Listing.tsx
index 0bba6966734..43775ec1373 100644
--- a/catalog/app/containers/Bucket/Listing.tsx
+++ b/catalog/app/containers/Bucket/Listing.tsx
@@ -696,9 +696,12 @@ function Footer({ truncated = false, locked = false, loadMore, items }: FooterPr
{filteredStats && <>{readableBytes(filteredStats.size)} / >}
{readableBytes(stats.size, truncated ? '+' : '')}
-
- {modified && `${truncated ? '~' : ''}${modified.toLocaleString()}`}
-
+ {modified && (
+
+ {truncated ? '~' : ''}
+ {modified.toLocaleString()}
+
+ )}
{locked && }
)
@@ -819,12 +822,10 @@ const useStyles = M.makeStyles((t) => ({
'& .MuiDataGrid-columnSeparator': {
pointerEvents: 'none',
},
- // "Size" column
- '&:nth-child(3)': {
+ '&[data-field="size"]': {
justifyContent: 'flex-end',
},
- // "Last modified" column
- '&:nth-child(4)': {
+ '&[data-field="modified"]': {
justifyContent: 'flex-end',
'& .MuiDataGrid-colCellTitleContainer': {
order: 1,
@@ -943,8 +944,8 @@ export function Listing({
})
// NOTE: after dependencies change fourth empty column appears
- const columns: DG.GridColumns = React.useMemo(
- () => [
+ const columns: DG.GridColumns = React.useMemo(() => {
+ const columnsWithValues: DG.GridColumns = [
{
field: 'name',
headerName: 'Name',
@@ -985,16 +986,9 @@ export function Listing({
)
},
},
- // TODO: uncomment this after implementing custom filter operators
- // {
- // field: 'type',
- // headerName: 'Type',
- // type: 'string',
- // hide: true,
- // // TODO: custom filter operators
- // // filterOperators: GridFilterOperator[]
- // },
- {
+ ]
+ if (items.some(({ size }) => size != null)) {
+ columnsWithValues.push({
field: 'size',
headerName: 'Size',
type: 'number',
@@ -1011,8 +1005,10 @@ export function Listing({
)
},
- },
- {
+ })
+ }
+ if (items.some(({ modified }) => !!modified)) {
+ columnsWithValues.push({
field: 'modified',
headerName: 'Last modified',
type: 'dateTime',
@@ -1034,10 +1030,10 @@ export function Listing({
)
},
- },
- ],
- [classes, CellComponent, sm],
- )
+ })
+ }
+ return columnsWithValues
+ }, [classes, CellComponent, items, sm])
const noRowsLabel = `No files / directories${
prefixFilter ? ` starting with "${prefixFilter}"` : ''
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 82628e8d84a..33b1c93eab6 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -27,6 +27,7 @@ Entries inside each section should be ordered by type:
* [Added] Add filter for users and buckets tables in Admin dashboards ([#3480](https://github.com/quiltdata/quilt/pull/3480))
* [Added] Add links to documentation and re-use code samples ([#3496](https://github.com/quiltdata/quilt/pull/3496))
* [Changed] Enable user selection in perspective grids ([#3453](https://github.com/quiltdata/quilt/pull/3453))
+* [Changed] Hide columns without values in files listings ([#3512](https://github.com/quiltdata/quilt/pull/3512))
* [Changed] Enable `allow-same-origin` for iframes in browsable buckets ([#3516](https://github.com/quiltdata/quilt/pull/3516))
# 5.3.1 - 2023-05-02