Skip to content

feat(databases-collections-list): replace the database and collection cards with tables COMPASS-9585 COMPASS-9586 #7399

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.

Sign up for GitHub

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

Jump to bottom
Open
wants to merge 34 commits into
base: main
Choose a base branch
from
Open

feat(databases-collections-list): replace the database and collection cards with tables COMPASS-9585 COMPASS-9586 #7399

wants to merge 34 commits into from
+1,243 −1,700

Conversation

lerouxb
Copy link
Contributor

@lerouxb lerouxb commented Sep 30, 2025 •
edited
Loading

This replaced the databases and collection cards with tables.

Screenshot 2025-10-16 at 17 01 26 Screenshot 2025-10-16 at 17 01 30 Screenshot 2025-10-16 at 16 49 50 Screenshot 2025-10-16 at 16 51 11 Screenshot 2025-10-16 at 16 51 03 Screenshot 2025-10-16 at 16 50 53 Screenshot 2025-10-16 at 16 50 49

Plan:

  • check that all the GridControls things work, especially the ones that only show up in some cases in Atlas
    • breadcrumbs
    • Open MongoDB shell
    • Create database
    • Create collection
    • Refresh
    • banner (renderLoadSampleDataBanner())
    • Visualize your data
  • make sure the table is sized to fit whenever you resize the window and also inside DE
  • wordBreak: 'break-word' on the name column for crazy long names
  • hovering over the view badge should show Derived from {collection_name} (including dark mode)
  • columns other than the name column are too wide
  • there are some perf insights to port over
  • port the inferredFromPrivileges stuff
  • put the delete button in a final column like on indexes
  • add loaders for cells that are not loaded
  • port the e2e tests
  • add a properties column for collections
  • fix browser.scrollToVirtualItem()
  • write some new unit tests

@github-actions github-actions bot added the feat label Sep 30, 2025
lerouxb
lerouxb commented Oct 14, 2025
View reviewed changes
packages/databases-collections-list/src/databases.tsx
: '-';
},
},
/*
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I initially wanted to display this because it would make all sizes explicit, but the table quickly gets crowded.

lerouxb
lerouxb commented Oct 14, 2025
View reviewed changes
packages/databases-collections-list/src/collections.tsx
: '-';
},
},
/*
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I initially wanted to display this because it would make all sizes explicit, but the table quickly gets crowded.

@lerouxb lerouxb marked this pull request as ready for review October 16, 2025 15:48
@lerouxb lerouxb requested a review from a team as a code owner October 16, 2025 15:48
Copilot
Copilot AI reviewed Oct 16, 2025
View reviewed changes
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR replaces database and collection cards with tables as part of COMPASS-9585 and COMPASS-9586. The change transitions from a grid-based card layout to a table-based interface for displaying databases and collections.

  • Removes grid view components and implements table-based displays
  • Updates e2e tests to work with new table selectors and structure
  • Consolidates functionality into ItemsTable component with column-based data display

Reviewed Changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
packages/databases-collections-list/src/use-view-type.tsx Removes view type toggle functionality (grid/list views)
packages/databases-collections-list/src/namespace-param.tsx Removes parameter display component used in cards
packages/databases-collections-list/src/namespace-card.tsx Removes card-based display component
packages/databases-collections-list/src/items-table.tsx Adds new table-based component for displaying items
packages/databases-collections-list/src/items-grid.tsx Removes grid-based display component
packages/databases-collections-list/src/index.spec.tsx Removes old test suite for card-based components
packages/databases-collections-list/src/databases.tsx Converts databases display to use table columns instead of cards
packages/databases-collections-list/src/collections.tsx Converts collections display to use table columns instead of cards
packages/compass-e2e-tests/tests/instance-databases-tab.test.ts Updates test selectors from card to row references
packages/compass-e2e-tests/tests/in-use-encryption.test.ts Updates collection selectors for table-based display
packages/compass-e2e-tests/tests/database-collections-tab.test.ts Updates collection test selectors and interactions
packages/compass-e2e-tests/package.json Updates test command flags from --bail to --mocha-bail
packages/compass-e2e-tests/index.ts Adds bail handling for test cleanup
packages/compass-e2e-tests/helpers/selectors.ts Updates selectors from card-based to row-based for tables
packages/compass-e2e-tests/helpers/commands/scroll-to-virtual-item.ts Updates virtual scrolling for table structure
packages/compass-e2e-tests/helpers/commands/database-workspaces.ts Updates navigation to use row selector
packages/compass-components/src/components/leafygreen.tsx Exports additional table-related components

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

lerouxb
lerouxb commented Oct 17, 2025
View reviewed changes
packages/databases-collections/src/collections-plugin.spec.tsx
});

describe('with loaded collections', function () {
// TODO
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The table isn't rendering any rows in unit tests, so I haven't bothered trying to port these as the tests won't work until I find a workaround anyway.

lerouxb
lerouxb commented Oct 17, 2025
View reviewed changes
packages/databases-collections/src/databases-plugin.spec.tsx
});

describe('with loaded databases', function () {
// TODO
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto.

paula-stacho
paula-stacho reviewed Oct 17, 2025
View reviewed changes
lerouxb
lerouxb commented Oct 20, 2025
View reviewed changes
packages/compass-e2e-tests/helpers/commands/scroll-to-virtual-item.ts
// real harm in trying to scroll beyond the end - it will either have found
// the item already and exited the loop or worst case it will attempt to
// scroll one more time and then still not find the item.
totalHeight += scrollHeight;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this works then I can change the table height calculator to just add the height of the sticky header. Or whatever it is that's about two/three row heights causing this thing to stop before the end.

@lerouxb
Copy link
Contributor Author

lerouxb commented Oct 20, 2025

evergreen retry

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@paula-stacho paula-stacho paula-stacho left review comments

Copilot code review Copilot Copilot left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

feat release notes

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@lerouxb @paula-stacho