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

Add ability to switch between table and card views for listing items #42711

Merged
merged 6 commits into from
Oct 8, 2024

Conversation

bbovenzi
Copy link
Contributor

@bbovenzi bbovenzi commented Oct 3, 2024

Add a card list component to oru shared table component to allow toggling between a regular table view or a card list.

Screenshot 2024-10-03 at 5 44 44 PM Screenshot 2024-10-03 at 5 44 50 PM

Closes #42698 and #42734

Also, added loading states:
Screenshot 2024-10-04 at 11 10 50 AM
Screenshot 2024-10-04 at 11 10 57 AM


^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in newsfragments.

@boring-cyborg boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Oct 3, 2024
@bbovenzi bbovenzi force-pushed the add-card-view-to-table branch from d47ae6b to ba258e6 Compare October 4, 2024 09:18
@bbovenzi bbovenzi marked this pull request as ready for review October 4, 2024 09:19
Copy link
Contributor

@ryanahamilton ryanahamilton left a comment

Choose a reason for hiding this comment

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

Looks great! I just have some nitty suggestions—feel free to ignore.

Have you considered taking this opportunity to switch to single quotes ('') instead of double ("")? I think the former is more common. I definitely find it easier to read.

@jscheffl
Copy link
Contributor

jscheffl commented Oct 4, 2024

Oh nooo - all application UIs who call themself modern introduce card layouts... and I never understood what the benefit of this would be especially if you don't have thumbnails (e.g. like an image gallery) - So the new UI is now on the same level? Do we really "need" a card layout? I would have imagined we have more basic critical features to be added first :-D

@potiuk
Copy link
Member

potiuk commented Oct 5, 2024

and I never understood what the benefit of this would be especially if you don't have thumbnails (e.g. like an image gallery)

How about ... Peoople love it and feel they are using something modern? That's a very good reason. 😛

@jscheffl
Copy link
Contributor

jscheffl commented Oct 5, 2024

and I never understood what the benefit of this would be especially if you don't have thumbnails (e.g. like an image gallery)

How about ... Peoople love it and feel they are using something modern? That's a very good reason. 😛

Yeah that might be :-D Welcome CardLayout! (I hope it is of any use :-D besides feeling modern)

@bbovenzi
Copy link
Contributor Author

bbovenzi commented Oct 7, 2024

and I never understood what the benefit of this would be especially if you don't have thumbnails (e.g. like an image gallery)

How about ... Peoople love it and feel they are using something modern? That's a very good reason. 😛

Yeah that might be :-D Welcome CardLayout! (I hope it is of any use :-D besides feeling modern)

There will be quite a lot of tables in the Airflow UI. I consider this foundational UI work to make a good component for us to reuse everywhere. For complex objects, a customize card view can display all the information better than having to horizontally scroll for a dozen+ columns.

While we have a lot of API work to do. I wanted to flesh out the UI more too, to test out all our styling rules and give other contributors more examples to refer to.

@bbovenzi bbovenzi force-pushed the add-card-view-to-table branch from 557e009 to 8e0081c Compare October 8, 2024 08:39
Copy link
Member

@pierrejeambrun pierrejeambrun left a comment

Choose a reason for hiding this comment

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

Working as expected, code looks good :)

@bbovenzi bbovenzi merged commit 772fad4 into apache:main Oct 8, 2024
52 checks passed
@bbovenzi bbovenzi deleted the add-card-view-to-table branch October 8, 2024 10:08
kunaljubce pushed a commit to kunaljubce/airflow that referenced this pull request Oct 13, 2024
…pache#42711)

* Add ability to switch between table and card views for listing items

* add test for DagCard and loading states

* Add tests for loading states

* PR feedback

* use semantic tokens for reused colors

* Remove eslint-ignore lost in rebase
joaopamaral pushed a commit to joaopamaral/airflow that referenced this pull request Oct 21, 2024
…pache#42711)

* Add ability to switch between table and card views for listing items

* add test for DagCard and loading states

* Add tests for loading states

* PR feedback

* use semantic tokens for reused colors

* Remove eslint-ignore lost in rebase
harjeevanmaan pushed a commit to harjeevanmaan/airflow that referenced this pull request Oct 23, 2024
…pache#42711)

* Add ability to switch between table and card views for listing items

* add test for DagCard and loading states

* Add tests for loading states

* PR feedback

* use semantic tokens for reused colors

* Remove eslint-ignore lost in rebase
ellisms pushed a commit to ellisms/airflow that referenced this pull request Nov 13, 2024
…pache#42711)

* Add ability to switch between table and card views for listing items

* add test for DagCard and loading states

* Add tests for loading states

* PR feedback

* use semantic tokens for reused colors

* Remove eslint-ignore lost in rebase
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:UI Related to UI/UX. For Frontend Developers.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

AIP-38 | DAGs List | Add a card list view to table component
5 participants