Use "Example payload" for all payload example buttons and always enable example buttons - #47167
Conversation
There was a problem hiding this comment.
Pull request overview
This PR standardizes user-facing terminology for payload example/preview actions across multiple Fleet UI modals by changing button/reveal labels to “Example payload,” and updates the frontend patterns documentation to remove reliance on the old UI wording.
Changes:
- Rename “Preview payload” buttons to “Example payload” in software automations and end user migration UI.
- Update multiple
RevealButtontoggles from “Show/Hide example payload” to the single label “Example payload.” - Adjust
frontend/docs/patterns.mdwording to remove the coupling between*PreviewPayloadnaming and UI terminology.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/pages/SoftwarePage/components/modals/ManageSoftwareAutomationsModal/ManageSoftwareAutomationsModal.tsx | Renames the payload button label to “Example payload” in the software automations modal. |
| frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx | Updates the example payload reveal toggle copy (and is the policy webhook example toggle tied to the linked issue). |
| frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/CalendarEventsModal/CalendarEventsModal.tsx | Updates the example payload reveal toggle copy in calendar automations. |
| frontend/pages/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx | Updates the example payload reveal toggle copy in activity feed automations. |
| frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/EndUserMigrationSection/EndUserMigrationSection.tsx | Renames the payload button label to “Example payload” for end user migration. |
| frontend/docs/patterns.md | Updates guidance text to remove dependence on the “Preview payload” UI phrase. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| hideText="Hide example payload" | ||
| showText="Show example payload" | ||
| hideText="Example payload" | ||
| showText="Example payload" | ||
| caretPosition="after" | ||
| onClick={() => setShowExamplePayload(!showExamplePayload)} | ||
| disabled={!isPolicyAutomationsEnabled} |
There was a problem hiding this comment.
This is a good idea, I'll commit this soon.
| @@ -473,7 +473,7 @@ const ManageAutomationsModal = ({ | |||
| onClick={togglePreviewPayloadModal} | |||
| disabled={!softwareAutomationsEnabled} | |||
| > | |||
| Preview payload | |||
| Example payload | |||
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
💤 Files with no reviewable changes (3)
WalkthroughThis PR standardizes preview/reveal button text across several automation modals (using “Example payload” or “Example data”), imports and uses useGitOpsMode in ActivityFeed to read gitOpsModeEnabled, and updates disabled logic so destination inputs, sliders, and example toggles consider gitOpsModeEnabled. Some RevealButton disabled props were removed or relocated; payload rendering and submit/validation flows were unchanged. Possibly related issues
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (3)
frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx (1)
247-248: ⚡ Quick winConsider distinct labels for toggle states and consistent patterns.
Setting both
hideTextandshowTextto "Example payload" creates two concerns:
Accessibility: The button label remains identical regardless of state. Screen reader users and keyboard-only users lose the semantic indication of the current state and the action the button will perform.
Inconsistency: Within this same modal, the example ticket toggle (lines 278-279) uses distinct state-specific labels:
hideText="Hide example ticket"/showText="Show example ticket". This creates an inconsistent user experience where similar toggle controls behave differently.Consider using distinct labels for both toggles to maintain consistency and improve accessibility:
hideText="Hide example payload"/showText="Show example payload"🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx` around lines 247 - 248, The toggle in OtherWorkflowsModal currently sets both props hideText and showText to "Example payload"; update the toggle used in the OtherWorkflowsModal component so the two props are distinct (e.g., hideText="Hide example payload" and showText="Show example payload") to match the pattern used by the example ticket toggle and improve accessibility and consistency; locate the toggle by the prop names hideText/showText inside OtherWorkflowsModal and change the labels accordingly.frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/CalendarEventsModal/CalendarEventsModal.tsx (1)
193-194: ⚡ Quick winConsider distinct labels for toggle states to improve accessibility.
Setting both
hideTextandshowTextto "Example payload" means the button label remains identical regardless of whether the payload is shown or hidden. While the caret icon may provide a visual cue, screen reader users and keyboard-only users lose the semantic indication of the current state and the action the button will perform.For better accessibility, consider using distinct labels such as:
hideText="Hide example payload"/showText="Show example payload", orhideText="Example payload ▲"/showText="Example payload ▼"This pattern improves clarity for all users about what will happen when they activate the button.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/CalendarEventsModal/CalendarEventsModal.tsx` around lines 193 - 194, The toggle in CalendarEventsModal currently uses identical labels for both states (hideText="Example payload" and showText="Example payload"); update the props on the toggling control in CalendarEventsModal so the two strings are distinct (e.g., showText="Show example payload" and hideText="Hide example payload" or add directional markers like "Example payload ▼" / "Example payload ▲") to ensure screen readers and keyboard users can determine current state and action; locate the instance in CalendarEventsModal.tsx where hideText and showText are passed and replace the duplicate values with descriptive, contrasting labels.frontend/pages/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx (1)
163-164: ⚡ Quick winConsider distinct labels for toggle states to improve accessibility.
Setting both
hideTextandshowTextto "Example payload" means the button label remains identical regardless of whether the payload is shown or hidden. While the caret icon may provide a visual cue, screen reader users and keyboard-only users lose the semantic indication of the current state and the action the button will perform.For better accessibility, consider using distinct labels such as:
hideText="Hide example payload"/showText="Show example payload", orhideText="Example payload ▲"/showText="Example payload ▼"This pattern improves clarity for all users about what will happen when they activate the button.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/pages/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx` around lines 163 - 164, ActivityFeedAutomationsModal uses identical labels for the toggle (hideText="Example payload" and showText="Example payload"), which hides state for screen readers; update the props on the toggle control in ActivityFeedAutomationsModal (where hideText and showText are set) to distinct, descriptive strings (e.g., hideText="Hide example payload" and showText="Show example payload" or include directional markers like "Example payload ▲" / "Example payload ▼") so the button conveys both current state and action to assistive tech.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In
`@frontend/pages/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx`:
- Around line 163-164: ActivityFeedAutomationsModal uses identical labels for
the toggle (hideText="Example payload" and showText="Example payload"), which
hides state for screen readers; update the props on the toggle control in
ActivityFeedAutomationsModal (where hideText and showText are set) to distinct,
descriptive strings (e.g., hideText="Hide example payload" and showText="Show
example payload" or include directional markers like "Example payload ▲" /
"Example payload ▼") so the button conveys both current state and action to
assistive tech.
In
`@frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/CalendarEventsModal/CalendarEventsModal.tsx`:
- Around line 193-194: The toggle in CalendarEventsModal currently uses
identical labels for both states (hideText="Example payload" and
showText="Example payload"); update the props on the toggling control in
CalendarEventsModal so the two strings are distinct (e.g., showText="Show
example payload" and hideText="Hide example payload" or add directional markers
like "Example payload ▼" / "Example payload ▲") to ensure screen readers and
keyboard users can determine current state and action; locate the instance in
CalendarEventsModal.tsx where hideText and showText are passed and replace the
duplicate values with descriptive, contrasting labels.
In
`@frontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx`:
- Around line 247-248: The toggle in OtherWorkflowsModal currently sets both
props hideText and showText to "Example payload"; update the toggle used in the
OtherWorkflowsModal component so the two props are distinct (e.g.,
hideText="Hide example payload" and showText="Show example payload") to match
the pattern used by the example ticket toggle and improve accessibility and
consistency; locate the toggle by the prop names hideText/showText inside
OtherWorkflowsModal and change the labels accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 1c51f39e-b6dc-4489-befb-06c416d71149
📥 Commits
Reviewing files that changed from the base of the PR and between ac16ca6 and b7b22eae82811673f92481bef85270ef36c03199.
⛔ Files ignored due to path filters (1)
frontend/docs/patterns.mdis excluded by!**/*.md
📒 Files selected for processing (5)
frontend/pages/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsxfrontend/pages/SoftwarePage/components/modals/ManageSoftwareAutomationsModal/ManageSoftwareAutomationsModal.tsxfrontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/EndUserMigrationSection/EndUserMigrationSection.tsxfrontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/CalendarEventsModal/CalendarEventsModal.tsxfrontend/pages/policies/ManagePoliciesPage/components/AutomationsModal/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #47167 +/- ##
==========================================
- Coverage 67.19% 67.18% -0.01%
==========================================
Files 2917 2970 +53
Lines 226376 226484 +108
Branches 11720 11722 +2
==========================================
+ Hits 152119 152172 +53
- Misses 60514 60569 +55
Partials 13743 13743
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
b7b22ea to
8d8d67d
Compare
spalmesano0
changed the title
spalmesano0
changed the title
| className="save-loading" | ||
| isLoading={isUpdating} | ||
| disabled={Object.keys(formErrors).length > 0} | ||
| > |
There was a problem hiding this comment.
Since you're modifying the disabled status of other fields based on gitops, should you apply it to the save button as well?
There was a problem hiding this comment.
@dantecatalfamo As in, enable the Save button in GitOps? If so, I don't think so. We don't want users to think they can save changes in GitOps mode.
Related issue: #44719
Also, make sure the Dashboard > Activity > Automations modal is grayed out when in GitOps mode.
Checklist for submitter
Testing
Summary by CodeRabbit