## Issue
Story #19099
Subtask #20706
## Description
- Additions to Software > Software tab to filter software and versions
by vulnerable, known exploit, and CVSS score
- Includes a new "Add filters" button which has dynamic tooltip and
button text
- New responsive design to the table header controls
- New modal to customize vulnerability filters
- Handles edge case where user types in a custom CVSS score in URL
## TODO list
- [x] Design, confirm and build empty states
- [x] search bar is showing on empty state, fix this
- [x] Disabled state color for dropdown placeholder text
- [x] Add tests to the modal
- [ ] Test with API when API is ready (good flow to check, choose from
dropdown, then toggle versions on)
## Screen recording
TODO
# Checklist for submitter
If some of the following don't apply, delete the relevant line.
<!-- Note that API documentation changes are now addressed by the
product design team. -->
- [x] Added/updated tests
- [ ] Manual QA for all new/changed functionality
relates to #17031
Adds functionality to create manual labels in fleet.
- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://fleetdm.com/docs/contributing/committing-changes#changes-files)
for more information.
- [x] Added/updated tests
- [x] M0anual QA for all new/changed functionality
---------
Co-authored-by: Martin Angers <martin.n.angers@gmail.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>
* 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>
* Query Edit/Run page renders based on user role
* Original UI for global admin/ global maintainer
* New UI for global observer / team maintainer / team observer
* New create new query UI for team maintainer
* Styling matches Figma
* Tests modified accordingly
Styling Closes#859
Co-authored by: Sarah Gillespie @gillespi314
Tests co-authored by: @ghernandez345
This PR brings the style changes made in the "Align Fleet UI colors with Figma components"
#615 and "Align Fleet UI with Figma (spacing and fonts)" #628 PRs into the master branch.
* add prettier and have it format all js code except website:
:
* trying running prettier check in CI
* fix runs on in CI
* change CI job name
* fix prettier erros and fix CI
This if the 2nd PR as part of the of the Align components in Fleet UI with design system in Figma #539
These changes **refactor the spacing and font sizes** used by the frontend.
- Change the scss variables in `padding.scss` and `fonts.scss`.
- Replace custom styles with the new variables throughout all stylesheets.
- This if the 1st PR as part of the of the Align components in Fleet UI with design system in Figma #539
- These changes replace all the color variables in /styles/var/colors.scss with new colors and naming convention used in Figma.
* updated typescript version and tsconfig in project
* updated eslint version
* change from experimental export to supported export
* removed accidentally added script
* turn off buggy jsx-a11y eslint rules
* remove unused tslint.json
* fix wrong jsx-a11y depedency
* use correct eslint-plugin-jsx-a11y version
* fix rest of linting errors
* move back js-yaml version to 3 major
The goal of this PR is to update the styles of the LabelForm component.
Also include global style changes for form components (FormField, LabelForm, and others).
The goal of this PR was to insert new colors, remove legacy colors, and update only the styles accordingly. The Nunito Sans Italic font was also added.
Later PRs will include layout, copy, and style change to individual components. These later changes will more exactly resemble the current mockups.
This is the first PR as a part of the Fleet UI Refresh #38.
Changes include:
- Add Nunito Sans font files and modify global styles to reflect the font change.
- Modify global font variables to reflect new sizing and weight naming conventions.
-- New sizing and naming conventions:
--- SIZE: xx-small: 12px, x-small: 14px, small: 16px, medium: 20px, large: 24px, x-large: 28px
--- WEIGHT: regular: 400, bold: 700
- Remove the old Oxygen font files.
Changes to other style sheets reflect the changes to the new font sizing and weight naming conventions for global variables. The changes don't necessarily use the correct size (as illustrated by mockups). Those "up to spec" sizing changes are to come.
* AppSettingsPage at /admin/settings
* Adds App Settings to site nav items
* SMTP not configured warning
* Creates AppConfigForm
* Avatar preview
* API client to update app config
* Creates OrgLogoIcon component
* Hide username/password when no auth type
* Creates new PackComposerPage at /packs/new
* Creates PackForm component
* Adds PackForm to PackComposerPage
* Creates QueriesListItem
* Creates QueriesList
* Creates QueriesListWrapper
* Get all queries when the Packs Composer Page loads
* Form HOC handles updates to formData prop
* Creates form to configure scheduled queries
* QueriesListWrapper renders ConfigurePackQueryForm
* search queries input filters queries list
* Empty state text
* create pack when user submits the new pack form
* Adds Edit pack page to /packs/:pack_id/edit
* API client - get scheduled queries for a pack
* API client - create scheduled query
* Redux config for scheduled queries
* Remove scheduled queries from packs
* Add labels to pack on create
* Add disabled state to the select targets dropdown
* Adds edit route and pushes to new route on edit click
* Adds cancel button to edit pack form
* Adds Checkbox that selects all scheduled queries in table
