Design rework for Device Groups

[MarianRaphael]

Original Design

https://www.figma.com/file/rMB2w5ZZUtTC0nxbwLYKJY/FlowForge-Platform?type=design&node-id=2528-18633&mode=design&t=UtJNcyM8PnopNmc5-0

Task

Based on our discussion, there is a need for a new design scope around the Device Group concept in #2997

[joepavitt]

Full set of screens here: https://www.figma.com/file/rMB2w5ZZUtTC0nxbwLYKJY/FlowForge-Platform?type=design&node-id=3636%3A12502&mode=design&t=ti6Xpx7QyoRLfh3O-1

[joepavitt]

Golden Path Prototype for device groups: https://www.figma.com/proto/rMB2w5ZZUtTC0nxbwLYKJY/FlowForge-Platform?page-id=3636%3A12502&type=design&node-id=3641-24919&viewport=2746%2C968%2C0.43&t=aiNRiHeoodkgCFir-1&scaling=min-zoom&starting-point-node-id=3641%3A24919&mode=design

[joepavitt]

Highlights

Team > Devices > Device Groups

Device Group > Settings

Device Group > Devices (Empty)

Device Group > Devices (Added)

[MarianRaphael]

Thanks for the designs. Looks good!

[joepavitt]

To scope this back, we can for now, not bother with the Team-level screens, Device Groups 9as first iteration) can be Application-level configured only.

In a meeting between @MarianRaphael, @Steve-Mcl and myself we've agreed with this scope as first iteration. There was discussion around moving everything to live within the scope of DevOps pipelines only, but this would be just as much development effort, without a single view of Device Groups which would hinder UX.

[Steve-Mcl]

@joepavitt could do with a bit of a leg up here.

The screenshots all seem to show management at team level (the Devices menu level is highlighted in all)

I feel there is a screenshot design missing on how the Application shows its device groups?

[joepavitt]

this was the missing screenshot (it's all available in the Figma I linked to, and the prototype)

[Steve-Mcl]

Thanks (and apologies for not digging) @joepavitt

[Steve-Mcl]

After some discussion with @joepavitt there is a slight change in direction on the Device Membership Management.

• By default, there will now be only 1 table shown - the current "Member Devices" table
  • Col1: [x] check box
  • Col2 Name
  • Col3 Type
• There will be 2 buttons [Remove] (greyed out by default) and [Add]
  • [Remove] will become enabled when 1 or more [x] check boxes are selected. Also, its text will be updated to indicate how many devices will be removed e.g. [Remove (6)]
  • [Remove] will update the group's device membership by removing the [x] checked items
  • [Add] will replace the "Member Devices" table and show the "Available Devices" table in the same view
    • This view of "Available Devices" will look similar (with [x] checkboxes)
    • A [Confirm] button will be presented that will perform the membership update and close the "Available Devices" view, returning the user to the (updated) "Member Devices" view
    • A [Cancel] button will presented that will simply revert to the "Member Devices" table view
• There will still be a [Save Changes] that commits the modifications to the DB in one go. (figma)