🎸❤️‍🩹 Move self-service management/scoping from the Edit modal to the Actions menu + its own modal

[eugkuo]

Goal

User story
As an IT admin
I want to have a quick, dedicated way to modify self-service options for software
so that I don't have to wade through a busy edit modal to tweak self-service options.

Key result

Auto-update (patch) any software without writing custom policies

Original requests

#21825

Context

• Design: @eugkuo
• Dev: @iansltx

Changes

Product

• UI changes: Figma design

  Move self-service management/scoping from the Edit modal to the Actions menu + its own modal. Frontend-only. Depends on 🎸❤️‍🩹 Allow adding auto-install policies to (and removing from) existing installers #28060 plus some of its dependencies. Designs assume self-service categories have already been added to the existing edit modal.

• CLI (fleetctl) usage changes: No changes
• YAML changes: No changes
• REST API changes: No changes
• Fleet's agent (fleetd) changes: No changes
• GitOps mode changes: Self-service actions menu option should be disabled with standard GitOps Mode tooltip when in GitOps Mode
• Activity changes: No changes
• Permissions changes: No changes
• Changes to paid features or tiers: No changes (software installers are Fleet Premium)
• My device and fleetdm.com/better changes: No changes
• First draft of test plan added
• Other reference documentation changes: No changes
• Once shipped, requester has been notified
• Once shipped, dogfooding issue has been filed

Engineering

• Test plan is finalized
• Contributor API changes: No changes
• Feature guide changes: No changes

ℹ️  Please read this issue carefully and understand it. Pay special attention to UI wireframes, especially "dev notes".

QA

Risk assessment

• Risk level: Low

Test plan

Make sure to go through the list and consider all events that might be related to this story, so we catch edge cases earlier.

1. On /software/titles/:id for software that already has an installer package uploaded and Self-service NOT enabled, click Actions >> Self-service
2. Self-service modal appears (per Figma), toggle is set to "Disabled"
3. After toggling to the enabled position, Target and categories options appear.
4. Modal height changes to accommodate categories list, and labels list when "Custom" target is selected. Labels list is scrollable.
5. Set Target to "All hosts" and click Save.
6. A flash message appears (per Figma) indicating success saving Self Service settings per Figma. User is returned to the /software/titles/:id page.
7. Click Actions >> Self-service
8. Self-service modal appears (per Figma), toggle is set to "Enabled"
9. Edit targets or categories, click Save
10. A flash message appears (per Figma) indicating success saving Self Service settings per Figma. User is returned to the /software/titles/:id page.
11. Confirm changes have been saved.
12. Click Actions >> Self-service
13. Self-service modal appears (per Figma), toggle is set to "Enabled"
14. Set toggle to "Disabled". All sections below the toggle should disappear in the modal.
15. Click Save.
16. A flash message appears (per Figma) indicating success saving Self Service settings per Figma. User is returned to the /software/titles/:id page. Self service should be disabled.
17. Click the pencil Icon to edit the software installer. Edit software modal appears (per Figma). Self service options should not appear in the modal.
18. Edit the software installer and swap it out with a different version of the same software. Click Save. NOTE: Fleet maintained apps should not have the option to edit the installer.
19. "Save changes?" modal appears per Figma.
20. Click Save. Success flash appears and user is returned to the /software/titles/:id page. Verify changes saved.
21. Click the trash Icon to delete the software installer. Delete modal appears per Figma. Click Delete.
22. Flash message appears indicating success of delete. User is returned to the /software/titles/:id page. Any previously configured Fleet maintained policies should also be deleted. If any custom policies were previously set up with install software automations for this software installer, they should no longer appear in the policies table and should no longer have the Install software automation configured (Also want to make sure that not only is the installer not selected for the automation, the automation has been disabled)

Testing notes

Confirmation

1. Engineer: Added comment to user story confirming successful completion of test plan.
2. QA: Added comment to user story confirming successful completion of test plan.

[eugkuo]

@jmwatts

Self-service modal appears (per Figma), toggle is set to "Disabled", and Target section is greyed out 🔴 Why does the toggle ALWAYS say disabled in Figma?

My bad. I just realized that the component's label doesn't change in figma when it's toggled. I was just about to update the component, but see it's genericized in case people want to use different patterns. I'll keep an eye out for this in the future.

Any changes made to the software installer or advanced options should result in 🔴 Policies being deleted and status counts being reset? Am I reading that right? So any changes to advanced options will delete all the fleet maintained policies? Will it dissociate the software from custom policies? Same with installer changes?

It sounds like it. @iansltx could you confirm?

Flash message appears indicating success of delete. User is returned to the /software/titles/:id page. Any previously configured Fleet maintained policies should also be deleted. If any custom policies were previously set up with install software automations for this software installer, they should no longer appear in the policies table and should no longer have the Install software automation configured (🔴Probably want to make sure that not only is the installer not selected for the automation, the automation has been disabled)

Sounds reasonable.

[eugkuo]

@iansltx @jmwatts @noahtalerman

I updated this to add categories into the self-service modal. See prototype

[iansltx]

@eugkuo @jmwatts Re: policy dissociation on package/advanced options changes, that should be in scope for #28060 + #28065 rather than here (this is just a UI change). Adding notes on each of those tickets now to make sure they get discussed. I don't recall this topic having come up in design, an I wasn't the one to suggest this behavior.

I've left a few comments in Figma mainly on how this is sliced. We may be able to drop a few screens as "move this from X place to Y place while maintaining logic" and, given that the categories work will already be done by the time this is built, we can regression-test (the existing test plan is solid for that) rather than having to sift through designs for what needs dev'ing vs. what's a no-op.

[eugkuo]

@RachelElysia @iansltx @mostlikelee

Updates from 16 April 2025 USR:

1. I've taken a stab at making the modal show the target and categories side by side. Note that I've taken the categories out of the scrolling table component and rendered them as a regular list. In the future we may want to convert this back to a scrollable table component once the number of categories exceeds X number. Thoughts?
2. I've also added an example of the Self service badge to the designs.
   cc @noahtalerman