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