feat(devices): use MainToolbar in DeviceListHeader MAASENG-2515

[ndv99]

Done

• Bumped maas-react-components to v1.15.0
• Replaced SectionHeader with MainToolbar in DeviceListHeader
• Move searchbox and filter into header
• Moved DeviceFilterAccordion folder under DeviceListHeader
• Deleted DeviceListControls
• Moved DeviceListControls test to DeviceListHeader

QA steps

• Go to /devices
• Ensure the header renders correctly across all breakpoints
• Ensure the filters, searchbox, and buttons work correctly

Fixes

Fixes MAASENG-2515

Screenshots

Before

After

Notes

I am aware of the (lack of) padding issue at the top of the screen. The same is true on the controller list, and this will be fixed when pages are all using ContentSection. However, this collection of tasks needs to be done first.

[webteam-app]

Demo starting at https://maas-ui-5254.demos.haus

[Jay-Topher]

Is there no way we can add a padding with a #TODO tag to take it of once said implementation is done? other than that, everything looks good to me.

[ndv99]

Is there no way we can add a padding with a #TODO tag to take it of once said implementation is done? other than that, everything looks good to me.

I suppose we could yeah, might just do this as a global style on MainToolbar with a TODO comment.

[Jay-Topher]

Looks a lot better, thanks