Fix: Activity table fixes and table refactoring - Githubissues

JoinColony / colonyCDapp

An iteration of the Colony Dapp sporting both a fully decentralized operating mode, as well as a mode enhanced by a metadata caching layer

5 stars 14 forks source link

Fix: Activity table fixes and table refactoring #3757

Open mmioana opened 3 days ago

mmioana commented 3 days ago

Description

This PR aims to refactor (a tiny bit) the Table component and addresses the following issues

[X] The pagination should be displayed inside the table container and not outside for all tables Figma link
[X] When there are not enough items for there to be more than 1 page, the recent activity table should go as tall as it can until it either fills the bottom of the dashboard area, or reaches the max height it would be with 7 items.
[X] For activity tables, the content - namely the metadata and status pill - is moving upon expanding a row

Tabs closed (note the position of the pill, title and metadata):

With one tab open (again, note the position of the pill, title and metadata):

[X] For the recent activity table, the status pills should have only 16px between the expandable icon

Testing

TODO: Please test the above mentioned issues have been resolved, as well as the Table component refactoring didn't introduce bugs.

Step 1. Visit http://localhost:9091/planex
Step 2. Set your viewport to mobile
Step 3. Try expanding an existing action

https://github.com/user-attachments/assets/f4844621-3029-4b7c-8c87-a36e37623b37

Step 4. Ensure the description and status pills of the other actions doesn't change their position
Step 5. Check the spacing between the status pill and expandable icon is 16px

Screenshot 2024-11-22 at 16 03 44

Step 6. Now go to http://localhost:9091/planex/activity
Step 7. Check the table pagination is displayed inside the table
Step 8. Run node scripts/create-colony-url.js and complete creating a colony
Step 9. Create a Mint tokens action
Step 10. Go to the newly created colony Dashboard page
Step 11. Check the height of the Recent activity table - it should occupy the whole available page height

Further testing

Please check the tables from http://localhost:9091/planex/balances http://localhost:9091/planex/incoming http://localhost:9091/account/crypto-to-fiat

Also please try creating an Advanced payment or Manage tokens action and check the tables there for both mobile and desktop

Any further testing ideas are highly welcomed 🙌 and thanks a lot for reaching this far in the testing 🥇

Diffs

Changes 🏗

The Table component has been split up into more manageable partial components

Resolves #2695 Resolves #3550 Resolves #3668