Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hide columns without values in files listings #3512

Merged
merged 10 commits into from
Jul 5, 2023
Merged
46 changes: 21 additions & 25 deletions catalog/app/containers/Bucket/Listing.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -696,9 +696,12 @@ function Footer({ truncated = false, locked = false, loadMore, items }: FooterPr
{filteredStats && <>{readableBytes(filteredStats.size)} / </>}
{readableBytes(stats.size, truncated ? '+' : '')}
</div>
<div className={classes.cellLast}>
{modified && `${truncated ? '~' : ''}${modified.toLocaleString()}`}
</div>
{modified && (
<div className={classes.cellLast}>
{truncated ? '~' : ''}
{modified.toLocaleString()}
</div>
)}
{locked && <div className={classes.lock} />}
</div>
)
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand All @@ -1011,8 +1005,10 @@ export function Listing({
</CellComponent>
)
},
},
{
})
}
if (items.some(({ modified }) => !!modified)) {
columnsWithValues.push({
field: 'modified',
headerName: 'Last modified',
type: 'dateTime',
Expand All @@ -1034,10 +1030,10 @@ export function Listing({
</CellComponent>
)
},
},
],
[classes, CellComponent, sm],
)
})
}
return columnsWithValues
}, [classes, CellComponent, items, sm])

const noRowsLabel = `No files / directories${
prefixFilter ? ` starting with "${prefixFilter}"` : ''
Expand Down
1 change: 1 addition & 0 deletions docs/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down