## For #28821
- Update UI-rendered references to `/(F|f)requency/` to refer to
`/(I|i)nterval/` instead
- More info: Note that this PR only changes copy actually rendered in
the UI (and an associated test), and is low-risk, so can be merged and
QAed quickly. [This
branch](https://github.com/fleetdm/fleet/tree/28821-add-on-update-code)
contains updates to variables, constants, and class names, more
error-prone changes that, if review and QA capacity allow, can be PRed
for consistency between the code and the copy, but is not critical for
the desired UI updates.
- [x] Changes file added for user-visible changes in `changes/`
- [x] Added/updated automated tests
- [x] Manual QA for all new/changed functionality
---------
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
For #27601
## Details
A couple of updates to the save/edit Query screens to bring them in line
with how save/edit Policy screens work, as described in [the
Figma](https://www.figma.com/design/LzGmucdJQgbQCuHMZhGKCM/-24097-Custom-targets--labels--for-policies?node-id=2-130&p=f&t=9iFB2FRnIkn98NSg-0):
* Moved platform selector out from under Advanced
* Use checkboxes for selecting platforms
* Disable Save button when no platforms are selected
* In the "Save new query" modal, pre-select the platforms that are
compatible with the query
## Testing
1. Add a new query with the SQL "SELECT * FROM privacy_preferences;".
Verify that only ChromeOS is checked in the modal when you click Save.
2. Verify that if you deselect ChromeOS (so that no platforms are
selected), the save button is disabled in the modal.
3. Select one or more platforms and save the query.
4. After saving the query, edit it and verify that the platforms you
selected are checked.
5. Verify that deselecting all platforms disables the edit button on the
Edit Query screen.
6. Select different platforms, save, and refresh to verify that the
platforms you selected were persisted.
For #26649
# Checklist for submitter
- [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.
## Details
This PR adds the ability to select labels when saving or editing a query
in the UI, so that the query will only target hosts with those labels.
It follows the API design from
https://github.com/fleetdm/fleet/pull/26589, utilizing the
`labels_include_any` field. The expectation is that when creating or
updating a query, `labels_include_any` is an array of label names, and
when fetching a single query, `labels_include_any` is an array of
objects with a `name` and an `id` key.
As part of this work the `TargetLabelSelector` component is updated to
allow it to show a message in place of the dropdown when there are no
custom options (e.g. "include any", "include all", "exclude any") to
choose from.
## #22212
- Trim whitespace from names on field blur, form submit, and in API
calls when:
- Creating a team
- Updating a team
- Creating a query
- Updating a query
- Refactor `AutoResizeInputField` to remove its internal state-based
management of its value, leaving its `value` prop as the single source
of truth for the field's value at all times.
[Loom
demo](https://www.loom.com/share/882f4a803b1540db985c987adbd9f441?sid=67caf100-4711-41a3-971f-bc8f67beeae7)
- [x] Changes file added for user-visible changes in `changes/`,
- [x] Manual QA for all new/changed functionality
---------
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
## Addresses #15325
- Define shared global styles for forms (`form` and `.form`s) and
`.form-field`s
- Sweep through the app, updating each form from being locally styled to
first prioritizing the global styles and only defining local styles
where needed for custom behavior
- Remove lots of unnecessary nesting of elements
- Other small bug fixes and improvements
### Samples, before (L) | after (R):
**Save query modal**
**Edit query form**
**Add hosts modal**
## QA Plan:
@xpkoala here's the same list from the issue, freshly de-checked for you
to use if it's helpful:
* Please check error states of each field
#### Specified by issue:
##### In "Save query" modal:
- [ ] Reduce space between checkboxes and their help text to 8px/0.5rem
for the following fields:
- [ ] Observers can run
- [ ] Discard data
- [ ] Update the following checkbox labels to have normal font weight
(not bold):
- [ ] Discard data
##### On "Edit query" page:
- [ ] Update the following checkbox labels to have normal font weight
(not bold):
- [ ] Observers can run
- [ ] Discard data
##### In "Add hosts" modal, for copy text fields:
- [ ] match typical form form field styles
- [ ] Adjust the positioning of the copy icon to keep it from being too
far down
##### Further locations to check
- [ ] ChangeEmailForm.jsx
- [ ] ChangePasswordForm.jsx
- [ ] ConfirmInviteForm.jsx
- [ ] ConfirmSSOInviteForm.jsx
- [ ] EnrollSecretModal.tsx
- [ ] ForgotPasswordForm.jsx
- [ ] LoginForm.tsx
- [ ] EditPackForm.tsx
- [ ] (New)PackForm.tsx
- [ ] AdminDetails.jsx
- [ ] ConfirmationPage.tsx
- [ ] FleetDetails.jsx
- [ ] OrgDetails.jsx
- [ ] ResetPasswordForm.tsx
- [ ] UserSettingsForm.jsx
- [ ] EditTeamModal.tsx
- [ ] IdpSection.tsx
- [ ] DeleteIntegrationModal.tsx
- [ ] IntegrationForm.tsx
- [ ] EndUserMigrationSection.tsx
- [ ] RequestCSRModal.tsx
- [ ] Advanced.tsx
- [ ] Agents.tsx
- [ ] FleetDesktop.tsx
- [ ] HostStatusWebhook.tsx front
- [ ] Info.tsx
- [ ] Smtp.tsx
- [ ] Sso.tsx
- [ ] Statistics.tsx
- [ ] WebAddress.tsx
- [ ] CreateTeamModal.tsx
- [ ] DeleteTeamModal.tsx
- [ ] EditTeamModal.tsx
- [ ] AgentOptionsPage.tsx
- updated the layout of this page to align with the rest of the forms in
the UI – can easily revert if it's not what we want
- [ ] AddMemberModal.tsx
- [ ] RemoveMemberModal.tsx
- [ ] UserForm.tsx
- Used by both `EditUserModal` and `CreateUserModal`
- A few different conditions that cause different rendering behavior
- [ ] DeleteHostModal.tsx
- [ ] TransferHostModal.tsx
- [ ] LabelForm.tsx
- [ ] MacOSTargetForm.tsx
- [ ] WindowsTargetForm.tsx
- [ ] BootstrapPackageListltem.ts
- [ ] EndUserAuthForm.tsx
- [ ] PackQueryEditorModal.tsx
- [ ] PolicyForm.tsx
- [ ] SaveNewPolicyModal.tsx
- [ ] ConfirmSaveChangesModal.tsx
- [ ] Query automations modal
- [ ] Policy automations modal - addresses #16010
- [ ] SoftwareAutomationsModal
## Checklist for submitter
- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality
---------
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
Co-authored-by: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
