# Details
As mentioned in a previous front-end sync, I realized after having to
add a `reload()` method to the `PaginatedList` imperative handle that I
had strayed too far from the path. The original concept for this
component was for it to be fully self-contained, so the parent didn't
have to concern itself with pagination at all other than being told what
page to load. But the addition of an `onChangePage` property isn't a
tragedy and is totally worth the reduction in code, consistency with use
of `useQuery` elsewhere and React best practice of passing data from
parent to child.
This refactor still retains the use of the imperative handle for
querying the "dirty state" of the list, so parents don't have to manage
that state themselves.
## Testing
- [X] Added/updated automated tests
Updated PaginatedList tests as needed. Also confirmed that tests for the
upstream components (PoliciesPaginatedList, Secrets, RunBatchScriptModal
and ScriptBatchProgress) all passed without any modification.
- [X] QA'd all new/changed functionality manually
Added enough data to paginate each of the components that uses
PaginatedList, confirmed pagination still works and dirty state
functionality (in PoliciesPaginatedList) still works. Also confirmed
add/delete functionality works as expected in Secrets.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- New Features
- Consistent, responsive pagination across Scripts, Secrets, Hosts, and
Policies pages with clearer loading and empty states.
- Bug Fixes
- Delete Secret modal now reliably displays errors and refreshes the
list after deletion.
- Refactor
- Unified data-driven pagination flow for improved performance and
smoother navigation.
- Simplified list interactions by removing manual reloads.
- Tests
- Updated tests to align with the new pagination behavior and data flow.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## For #28159
- Implement UI capability to run scripts on batches of hosts at a time
- Add new hosts table `Run script` primary action, triggers
- new `RunScriptBatch` modal, allows running scripts on the selected
batch of hosts
- new `RunScriptBatchPaginatedList`, handles logic specific to this
modal, and utilizes the now more flexible `PaginatedList` component
- Widen capabilities of `PaginatedList` component to elegantly handle
more diverse applications, including this one
- Widen capabilities of `ScriptDetailsModal` component to elegantly
handle more diverse applications, including this one
- Streamline updating `state`s on manage hosts page
- Clearer, more concise naming
- [x] Changes file added for user-visible changes in `changes/`
- [x] A detailed QA plan exists on the associated ticket (if it isn't
there, work with the product group's QA engineer to add it)
- [x] Manual QA for all new/changed functionality
---------
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
For #23243
# Checklist for submitter
<!-- Note that API documentation changes are now addressed by the
product design team. -->
- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files)
for more information.
- [x] Added/updated automated tests
- [ ] A detailed QA plan exists on the associated ticket (if it isn't
there, work with the product group's QA engineer to add it)
- [x] Manual QA for all new/changed functionality
## Details
This PR updates the policy Manage Automations modals to support
pagination. Previously, these modals received a list of policies from
the main Manage Policies page, which is itself paginated, so that a user
could only add automations to whatever policies were currently listed on
the Manage Automations page. This PR does some refactoring via the
creation of a new PaginatedList component which:
* accepts a `fetchPage` property it can call to get a page of data,
* renders the data in a list with checkboxes and optional custom markup
(e.g. dropdowns)
* keeps track of changed ("dirty") items in the list, even across page
changes
* allows parent components to access the list of dirty items via a React
`ref`
For this specific use case, there's also a new `PoliciesPaginatedList`
which implements the `fetchPage` for getting a page of policies, and
adds Save and Cancel buttons. Each of the updated modals uses
`PoliciesPaginatedList` to replace its current code for rendering
policies in a list, and delegates much of the logic around change
tracking to the new components.
