Fix: Activity table fixes and table refactoring

[mmioana]

Description

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

• The pagination should be displayed inside the table container and not outside for all tables
  Figma link
• 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.
• 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):

• 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

Screen.Recording.2024-11-22.at.16.01.32.mov

• 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

• 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

[rdig]

Very nice, all 3 cases I tested, mobile, desktop, and single action in the list, work as described.

Nicely done!

Screencast.from.2024-11-25.21-30-59.mp4

Screencast.from.2024-11-25.21-31-41.mp4

Screencast.from.2024-11-25.21-33-09.mp4

[iamsamgibbs]

Great job on this @mmioana These tables are a pain to deal with so nice job handling them here!

The only issue I noticed is here on the Crypto to fiat page:

Otherwise everything else is great.

Expandable rows without pills shifting:

Screen.Recording.2024-11-26.at.10.02.29.mov

All activity:

Empty activity table goes up to max height:

And with 1 activity:

Other tables are unbroken:

[mmioana]

Hey @rdig @iamsamgibbs thanks for your reviews 🙏
I pushed a fix for the Crypto to fiat page's table, if you can please re-check 🙌

[iamsamgibbs]

Thanks for the change, looks perfect now!

[bassgeta]

Definitely a step in the right direction with the table, it was about time we took everythin out into separate components.
Love that we have 2 different layouts now, it was quite confusing before :')
Overall, super happy with the foundations laid in this PR, let's hope we can get to refactoring that beast into something manageable in the future 🤞

1. Expanding an existing action ✔️
   
2. Padding is 16px ✔️
   
3. No pagination on latest activity when only 1 action ✔️
   
4. Tallboi recent activity table ✔️
   

[rumzledz]

Almost at the finish line @mmioana ! All the test cases you mentioned are looking good on my end but I just noticed one wee problem. The error state for the table seems to be slightly off:

Manage permissions form

Master	Your branch

Advanced payments form

Master	Your branch

[mmioana]

Thanks so much for finding this issue @rumzledz 🙌

I pushed a fix, so could you guys @iamsamgibbs @bassgeta @rumzledz please re-check? 🙏

[mmioana]

@rumzledz found an issue with duplicated borders for table shown on the http://localhost:9091/planex/incoming page when expanding a token, but now it should be fixed