Add bulk delete for devices browser

[Steve-Mcl]

closes #4218

Description

• Adds support for checkbox column to table component
• Enables checkboxes in devices browser
• Adds Delete Bin icon in device browser toolbar

Demo

TODO:

• Fix Checkbox styling in table (@joepavitt )
• Tests
• Docs

Related Issue(s)

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

• Includes a DB migration? -> add the area:migration label

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 78.16%. Comparing base (3f397c3) to head (f591f88).
Report is 15 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4219      +/-   ##
==========================================
- Coverage   78.66%   78.16%   -0.51%     
==========================================
  Files         286      287       +1     
  Lines       13161    13261     +100     
  Branches     2949     2965      +16     
==========================================
+ Hits        10353    10365      +12     
- Misses       2808     2896      +88     

Flag	Coverage Δ
backend	78.16% <ø> (-0.51%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Steve-Mcl]

• Fix Checkbox styling in table (@joepavitt )

@joepavitt this is now ready to switch out of draft - please pull and update your local branch and switch out of draft when you have had a moment to sort out the funky column sizing.

[Steve-Mcl]

@joepavitt if you havent already pulled this local ignore.

I had this targeting main - I just re-targeted it as it was based off the API - you might want to pull local once more (sorry)

[knolleary]

How scalable is listing all of the devices in the dialog? What happens if they have 50 devices to delete?

[joepavitt]

Yeah, I'd say just say "Are you sure you want to delete N devices" - no need to list them explicitly.

[Steve-Mcl]

Yeah, I'd say just say "Are you sure you want to delete N devices" - no need to list them explicitly.

I disagree. I explicitly want to spell out what is to be deleted to avoid ambiguity (e.g. when a filter is applied AFTER selection). I've been stung in other applications like this.

However, Nick was right to point out scalability of large number of devices - currently this is what a user would see:

However, with a simple parent div with max-height and auto scroll overflow, we can still show devices but in a contained manor.

[Steve-Mcl]

How scalable is listing all of the devices in the dialog? What happens if they have 50 devices to delete?

contained with a max-height auto scroll parent div in contain device delete list to sensible size then scroll

[Steve-Mcl]

@joepavitt In an effort to move this along, do you want me to investigate the funky sizing on the new checkbox column and the existing kebab menu column?

[joepavitt]

Sorry Steve, this completely slipped off my radar. Will ping you on Slack

[joepavitt]

Functionally great, I've pushed fixes for the CSS alignment and table width problems, although seeing:

in the console. The problem is caused by <ff-checkbox v-model="checks[row[checkKeyProp]]" /> equating to undefined, as we need to ensure we've mapped the relevant rows into checks[] to at least show as false.

Leave it with me, and I'll sort.

[Steve-Mcl]

in the console. The problem is caused by `` equating to `undefined`, as we need to ensure we've mapped the relevant rows into `checks[]` to at least show as `false`.

I seen these too. I didnt get around to reading up on this - my approach was going to be to look for something like an "ignore" or "infer" directive for vue to ignore these warnings. Effectively, we don't really care. So long as "not true" can implicitly mean false (we dont care that it is undefined/null/whatever)?