Make scripts editable in Fleet UI

[eugkuo]

Goal

User story
As an admin,
I want to be able to edit scripts within the Fleet UI
so that I can quickly fix typos or other errors without having to download and re-upload the script.

Key result

Every sprint, ship small UX improvements based on dogfooding or customer feedback

Original requests

• Add script editor in the UI #23767

Context

• Product designer: @eugkuo

Changes

Product

• UI changes: Figma | Prototype
• CLI (fleetctl) usage changes: No changes
• YAML changes: No changes
• REST API changes: Add "Modify script" + capitalization & :id update for consistency (take 2) #24596 + potentially API Docs: Match request format for script edit vs. script add #24679
• Fleet's agent (fleetd) changes: No changes
• Activity changes: Added modify_script to the feed: API design: modified script activity #24523.
• Permissions changes: No changes
• Changes to paid features or tiers: Available for "Fleet free" and "Fleet Premium"
• Other reference documentation changes: No changes
• Once shipped, requester has been notified
• Once shipped, dogfooding issue has been filed

Engineering

• Either the FE or BE engineer should define the test-plan.
• Implement FE per the Figma file above
• Implement BE API changes per the link above
• Feature guide changes: If script doc exists, Add a section in it to describe the edit ability.
• Database schema migrations: not needed
• Load testing: To be considered by the BE engineer depending on the DB changes.

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

QA

Risk assessment

• Requires load testing: Not needed
• Risk level: Low
• Risk description: Potential bug with the new ability to run bash scripts. Low potential to affect other scripts.

Manual testing steps

@xpkoala, please complete testplan together with @dantecatalfamo

1. Step 1
2. Step 2
3. Step 3

Testing notes

Confirmation

1. Engineer (@____): Added comment to user story confirming successful completion of QA.
2. QA (@____): Added comment to user story confirming successful completion of QA.

[eugkuo]

FYI @noahtalerman I've added this prototype to show editing scripts from the script library page.

[eugkuo]

FYI (to discuss) @noahtalerman I've updated the design and the prototype.

After thinking about this a little bit, I wanted to be clearer to people when text has been entered into the edit field (in case they accidentally did something.

So when people first hit the modal, the button at the bottom is . If they enter text or delete text the button changes to with a secondary button.

A few questions:

1. Do we do any checks on the syntax or formatting of scripts when people are entering text or saving it?
2. What type of error mesesaging could we see here? I've rendered a success message. If we have standard messages for this lmk (and if we have standard messages can I say "use standard messaging" without rendering them?

Thanks! Hope you had a great Thanksgiving!

[eugkuo]

FYI @noahtalerman

Updated the design and prototype so that the modal always displays "Cancel" and "Save" buttons in the interest of maintaining consistency with other areas where we surface editable querys (i.e. policies).

[iansltx]

@eugkuo Can you add the PR for the new activity so it's apparent which fields that activity has? Or spec which fields the activity has if you want to avoid editing Go code (since the activity documentation is based off of the code)?

[eugkuo]

@iansltx Apologies for the oversight. Added it to the top comment. Here's a direct link as well: #24523

LMK if there's anything I've forgotten or missed.

[iansltx]

I think we're good now for API/activity specs (subject to the follow-up API spec PR I filed). Thanks!

[sgress454]

I can QA this

[sgress454]

See #24601 (comment) for QA.

[noahtalerman]

@sharon-fdm @dantecatalfamo this feature is looking good!

Heads up, it looks like we have a small unreleased bug for this one: #26323