Bulk Move devices UI

[Steve-Mcl]

closes #4337

NOTE: This PR can be reviewed and approved independently of the API PR #4336 but to keep the API PR slim and easier to review, I would recommend we merge this PR after #4336 is approved/merged.

Description

Adds support in UI for bulk move operations

• Moves the current Bulk Delete trash icon to a dropdown
• In an instance, the dropdown displays
  • Move to Instance, Move to Application, remove from Instance
• In an Application, the dropdown displays
  • Move to Instance, Move to Application, remove from Application
• On team devices page, the dropdown displays
  • Move to Instance, Move to Application, remove from Assignment

e2e Tests added

Screenshots

Team Devices Page

Instance Devices Page

Application Devices Page

Related Issue(s)

Owner #4337 Parent #4290

Checklist

• [x] I have read the contribution guidelines
• [x] 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[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 78.33%. Comparing base (f070a56) to head (c439a17).

Additional details and impacted files

@@                   Coverage Diff                   @@
##           4290-bulk-move-devices    #4338   +/-   ##
=======================================================
  Coverage                   78.33%   78.33%           
=======================================================
  Files                         292      292           
  Lines                       13558    13558           
  Branches                     3050     3050           
=======================================================
  Hits                        10621    10621           
  Misses                       2937     2937           

Flag	Coverage Δ
backend	78.33% <ø> (ø)

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

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[joepavitt]

Added CSS to cover:

• 2 x Columns for the devices list when confirming actions
• Vertical alignment of the "Check All" button as it wasn't centered

[joepavitt]

Approved, but holding off merge as requested

[Steve-Mcl]

• 2 x Columns for the devices list when confirming actions

Joe, i've added additional CSS to clean up the dlialog when names are longer in commit 088ecd2...

BEFORE

AFTER

[Steve-Mcl]

got the dreaded e2e bulk test error again.

  1) FlowForge - Devices
       bulk operations
         move
           should move selected devices to unassigned:
     TypeError: Cannot read properties of undefined (reading 'name')
      at Context.eval (webpack:///../test/e2e/frontend/cypress/tests/devices/bulk.spec.js:80:102)

which points to the line

                        cy.get('[data-el="devices-browser"] tbody tr').contains(sacrificialDevices[0].name).parent().parent().find('.checkbox').click()

The weird thing here is line is part of a loop that already ran 2 out of 3 times successfully!

definitely some timing issue.

New plan. I am gonna change the tests to run be explicit as opposed to using the response data from a wait.

e.g. instead of

                    // wait for the devices API call to complete
                    cy.wait(['@getDevices']).then(({ response }) => {
                        const devices = response.body.devices

I'm gonna do

                cy.wait(['@getDevices'])

                // wait for the table items to be updated
                cy.get('[data-el="devices-browser"] tbody tr').contains(deviceName1).should('exist')
                cy.get('[data-el="devices-browser"] tbody tr').contains(deviceName2).should('exist')
                cy.get('[data-el="devices-browser"] tbody tr').contains(deviceName3).should('exist')

[Steve-Mcl]

e2e tests update in fix e2e tests (again) 2db89d6

NOTE: I ran this locally at least 20 times without issue. 4th time should be the charm.

defo a cypress skill issue