## For #24950
- Track more granular host count data when running a live query/policy,
and return it in two new fields of each `"status"`-typed websocket
message
- On completion of live query/policy, display that granular data in a
tooltip in the UI
- Streamline and clarify frontend live query logic
- Update types and field names to better reflect the data they contain
and the sources from which that data is derived
- Add comments to clearly define what various fields of data represent
- Update heading copy rendered while live queries and policies are
running
###
[Demo](https://www.loom.com/share/ad1d64cf527f4fbc981df58ad581242f?sid=a0dc1269-a049-43c3-afdb-65c0bb946ece)
- [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>
## More global solution to #16277, cleanup to prevent similar bugs
- Swap out [localized
solution](https://github.com/fleetdm/fleet/pull/16287) for standard
`.main-content` containing desired padding
- Apply `.core-wrapper` class to parent, in line with all other UI pages
- Remove problematic legacy `.body-wrap`
- spot check all places this class was being applied:
- PlatformWrapper
- LiveQuery –> SelectTargets (was causing excess padding here)
- PackQueriesTable (caused excess padding here)
- TeamManagementPage (excess padding was being locally negated)
- EditQueryPage
- LiveQueryPage
- DeviceUserPage
- Remove local styles meant to negate `.body-wrap`'s styles
- [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>
Merging during freeze with approval from all stakeholders, including verbal approval from @sharon-fdm
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
# Checklist for submitter
If some of the following don't apply, delete the relevant line.
- [ ] Manual QA for all new/changed functionality
---------
Co-authored-by: Gabriel Hernandez <ghernandez345@gmail.com>
## Improve breakpoint variables to be useful "sm", "md", etc. instead of
the pixel widths they are set to
Also made sure all media queries are using these variables instead of
hard-coded values.
See @lukeheath's previous to-do in `frontend > styles > var >
breakpoints.scss`
---------
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
* add awaitng results state to live query search
* make spinner more reusable and add it to query page awaiting results
* create common QueryResultsHeader component to use on query policy flows
* base logic to handle rendering a notification without redux
* removed dispatches for new flash mesage triggers
* query page wrapper is no longer needed
* refactored confirm invite page to remove redux
* refactored email token redirect to functional and typescript
* refactored pack composer page to functional and typescript
* clean up
* lint fixes
* tests no longer needed
* fixed confirm sso invite test
* test fix
* fixed test
* fixed tests
* removed redux from flash on rebased pages
* Allow sort by more than one key
* created custom tooltip component
* remove unused code
* fixed style for more layouts
* added tooltip to query side panel
* tooltips added to setting form
* finished settings form
* added tooltip for perf impact table headers
* tooltip for pack table and user form
* tooltip on manage policies page
* tooltip for manage schedules
* tooltip for automations; spacing for form input
* tooltip for automations modal
* user form; fixed input with icon component
* more user form tooltips
* tooltip for homepage; style fixes
* replaced many more tooltips with new version
* added story for tooltip
* added position prop
* fixed tests
* re-work how we click react-select dropdowns
* forcing the update button click
* trying a blur
* fixed typo
* trying blur on another element
* temp check-in
* replaced tooltip from host details software
* more consolidation of tooltip use for software
* fixed settings flow test
Co-authored-by: Tomas Touceda <chiiph@gmail.com>
* Add new software page
* Add hosts counts and last updated to software card on homepage
* Extend InfoCard component to all children to set dynamic title information and hyperlinks
* Add new TeamsDropdownHeader component
* Refactor TableContainer to move server-side pagination buttons to DataTable
* Extend DataTable to include footer element
* Allow sort by more than one key
* forcing 404 page where entity ids do not exist
* refactored error boundary; handling 404s now
* added 403 overlay; refactored auth wrappers
* fixed test for maintainer
* more efficient fetches; test fixes
* clarify comment
* clean up
Co-authored-by: Tomas Touceda <chiiph@gmail.com>
