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

[UI v2] feat: Re-organizes flow runs data table components and to use a provider for row selection capabilities #17216

Merged
merged 1 commit into from
Feb 20, 2025

Conversation

devinvillarosa
Copy link
Contributor

@devinvillarosa devinvillarosa commented Feb 20, 2025

Re-organizes flow runs data table components and to use a provider for row selection capabilities

  1. Re-organizes the components into subfolders. Ths flattened structure was getting too large (filters, cells, and main components)
  2. Because the UX needs to support a filtered and selectable view and non-filtered/selectable view, broke down data table into 3 parts: table, filters, and row selection provider.
  3. Updated tests and stories to reflect this re-organization

Uploading Screen Recording 2025-02-20 at 10.21.10 AM.mov…

Checklist

  • This pull request references any related issue by including "closes <link to issue>"
    • If no issue exists and your change is not a small fix, please create an issue first.
  • If this pull request adds new functionality, it includes unit tests that cover the changes
  • If this pull request removes docs files, it includes redirect settings in mint.json.
  • If this pull request adds functions or classes, it includes helpful docstrings.

@devinvillarosa devinvillarosa added the DONT MERGE This PR shouldn't be merged (yet) label Feb 20, 2025
@github-actions github-actions bot added the ui-replatform Related to the React UI rewrite label Feb 20, 2025
@devinvillarosa devinvillarosa force-pushed the re-organize-flow-run-data-table branch 4 times, most recently from 5183359 to 370918e Compare February 20, 2025 18:10
@devinvillarosa devinvillarosa force-pushed the re-organize-flow-run-data-table branch from 370918e to ea62c35 Compare February 20, 2025 18:18
@devinvillarosa devinvillarosa changed the title Re organize flow run data table [UI v2] feat: Re-organizes flow runs data table components and to use a provider for row selection capabilities Feb 20, 2025
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixes bug from mismatched values


const selectedRows = Object.keys(rowSelection);
if (rowSelectionCtx) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Here's the logic to give the data-table the selectable UX. Dependent if its wrapped with a row-selection provider

<ViewComponent key={value} />
))}
</Tabs>
);
};

function useBuildTabOptions(deployment: Deployment) {
return useMemo(
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Needed to memo-ize this to prevent the entire tab component to re-render and losing input focus

@devinvillarosa devinvillarosa removed the DONT MERGE This PR shouldn't be merged (yet) label Feb 20, 2025
@devinvillarosa devinvillarosa marked this pull request as ready for review February 20, 2025 18:24
@devangrose
Copy link
Contributor

Thanks for cleaning this up!

@devinvillarosa devinvillarosa merged commit 2dfe5d4 into main Feb 20, 2025
21 checks passed
@devinvillarosa devinvillarosa deleted the re-organize-flow-run-data-table branch February 20, 2025 19:21
devinvillarosa added a commit that referenced this pull request Feb 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ui-replatform Related to the React UI rewrite
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants