Allow bulk select/delete images in a project and unify pagination placement

[edlerd]

Done

• allow bulk select and delete images
• extract PageHeader component
• refactor settings, instance list and project list to use the new header component
• move table pagination always below table

Fixes #618

QA

1. Run the LXD-UI:
   • On the demo server via the link posted by @webteam-app below. This is only available for PRs created by collaborators of the repo. Ask @lorumic or @edlerd for access.
   • With a local copy of this branch, run as described here.
2. Perform the following QA steps:
   • select one or many images and remove them from a project's image list
   • ensure layout of following pages (also responsive and with panel) is correct:
     • instance list
     • instance detail snapshots
     • profile list
     • image list
     • settings
     • storage volume list
     • custom storage volume snapshot list
     • custom iso list

[webteam-app]

Demo starting at https://lxd-ui-620.demos.haus

[mas-who]

I think we should align the page layout between images list and instances list? On the images page, when we bulk select, the delete button appears towards the right hand side of the page where on the instances page, the same action results in the delete button appear where the search bar is located (next to the other actions buttons). Maybe we can align layout and behaviour with the instances page?

Images list

Instances list

[piperdeck]

This looks good to me, but I'm still not sure we should move the table pagination to the bottom of the page. For one thing, the reason we moved it to the top was because I observed users being confused and not finding the pagination controls when they were at the bottom, and for another thing, this might interact negatively with the new notifications which float at the bottom of the page.

Could we talk about this next week in a working together session?

[edlerd]

This looks good to me, but I'm still not sure we should move the table pagination to the bottom of the page. For one thing, the reason we moved it to the top was because I observed users being confused and not finding the pagination controls when they were at the bottom, and for another thing, this might interact negatively with the new notifications which float at the bottom of the page.

Could we talk about this next week in a working together session?

My main idea was to make the pagination placement consistent. In our discussion we concluded, due to users having trouble finding the select notifications if the pagination (with select info) was rendered below, to move all of them up.

Now, all TablePaginations are used with their default position of above.

Thank you for the fruitful discussion @piperdeck and @mas-who please give it another look as it is now.

[mas-who]

QA looks good, just some code review comments for consideration 🙂

[mas-who]

LGTM. Thanks for making the changes :)

[piperdeck]

When I select an item in the list, the delete button is appearing off to the side for some reason

This should be "created at"

Since this table's rows will always be at least 2 lines of text tall, maybe this description field should be able to occupy 2 lines before being truncated?

Other than that, this is looking good :)

[edlerd]

Addressed the three issues you found @piperdeck -- please give it another pass.

[piperdeck]

Everything looks good!