Commit graph

109 commits

Author SHA1 Message Date
RachelElysia
c574c4db25
Fleet UI: Consistent font size across input fields and dropdowns (#29865) 2025-06-10 15:04:18 -04:00
RachelElysia
45015b01e8
Fleet UI: Update hover and focus states for dropdowns and inputfields (#26506) 2025-02-28 08:46:00 -05:00
RachelElysia
c4a556618f
Fleet UI: Updates to dropdown selected states (#25635) 2025-01-22 10:22:59 -05:00
Gabriel Hernandez
8168ff3655
update storybook to 8.4.7 (#25451)
For #25349

This updates storybook and its addons to 8.4.7. This is done to remove
the transitive dependency on path-to-regexp,
which is no longer used in this version of storybook.

This will fix the original vulnerability issue for `path-to-regexp`
2025-01-20 16:17:33 +00:00
RachelElysia
f6425e686c
Fleet UI: Update Dropdown to use react-select 5.4 and other cleanup (#24164) 2024-12-03 09:08:11 -05:00
Luke Heath
8d0cc970f4
Fix teams modal only showing two options (#23889) 2024-11-20 11:13:46 -06:00
RachelElysia
f8e09ad4f3
Fleet UI: Disabled forms cannot be accessed via keyboard (#23727) 2024-11-13 15:38:28 -05:00
RachelElysia
2a756088f1
Fleet UI: Accessibility button actions, tabbing (#22916) 2024-10-25 11:02:52 -04:00
RachelElysia
0fe6b6c6e1
Fleet UI: Host filter styling/click bug fixes (#22147) 2024-09-17 10:10:34 -07:00
jacobshandling
09b6402f76
UI – Policy software install automations (#21792)
## Front end for #19551

Feature branch merge to `main` – all work as been previously approved in
individual PRs to the feature branch.

- [x] Changes file added for user-visible changes in `changes/`
- [x] Added/updated tests
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2024-09-03 15:35:33 -07:00
RachelElysia
b0025fbe98
Fleet UI: Fix unreleased border showing up on hover of dropdown with no border (#21528) 2024-08-23 11:12:40 -04:00
RachelElysia
3dd1219a27
Fleet UI: Filter software/version tables by vulnerability score and exploitability (#21278)
## 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
2024-08-20 09:41:49 -04:00
jacobshandling
19a64941ba
UI – Add VPP features for iPadOS and iOS (#20755)
## Addresses #20467 – part 2

### Aggregate software:

#### Software titles
<img width="1616" alt="sw-titles-updated"
src="https://github.com/user-attachments/assets/0b9922c7-e36e-4d2f-b204-95c3cdf9b602">

#### Software versions
<img width="1616" alt="Screenshot 2024-07-29 at 6 14 21 PM"
src="https://github.com/user-attachments/assets/5a097700-cd6c-45b1-a21f-9d76a733f0ae">

#### Host software
<img width="1616" alt="Screenshot 2024-07-29 at 6 23 01 PM"
src="https://github.com/user-attachments/assets/84e18695-f47a-4022-bd53-7f5d37ce452a">


### Add software modal (VPP) _screenshots use mocked data - UI is
flexible enough to display cleanly before and after backend is in
place:_
<img width="1339" alt="happy"
src="https://github.com/user-attachments/assets/8900aa93-316c-4a09-8e5a-1a1e45b0c458">

#### No apps:
<img width="1572" alt="Screenshot 2024-07-29 at 6 35 03 PM"
src="https://github.com/user-attachments/assets/466b9b6c-4d3d-49dd-94a9-94e395d89cb7">

#### Not enabled:
<img width="1572" alt="Screenshot 2024-07-29 at 6 37 45 PM"
src="https://github.com/user-attachments/assets/9bcfd480-8741-4d95-ba3b-550dee4dc673">

#### Error:
<img width="1572" alt="Screenshot 2024-07-29 at 6 39 39 PM"
src="https://github.com/user-attachments/assets/e944dd40-676e-4aba-9cd9-49ff319bf402">

### Vuln support – Not supported for now:
_see above screenshots for `list` endpoints_

#### Software title detail
<img width="1616" alt="Screenshot 2024-07-29 at 6 47 29 PM"
src="https://github.com/user-attachments/assets/2e30fd0a-21e4-4d19-bf9b-71a994bfd0e7">

#### Software version and OS detail:
<img width="1616" alt="Screenshot 2024-07-29 at 6 48 28 PM"
src="https://github.com/user-attachments/assets/e8fec769-ba97-4b6b-b10c-9bb4c973c732">
<img width="1616" alt="Screenshot 2024-07-29 at 6 50 25 PM"
src="https://github.com/user-attachments/assets/0ac15727-e0cb-447c-8758-c58b79656d1a">


- [x] Changes file added for user-visible changes in `changes/`,
- [x] Added/updated tests
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2024-07-30 10:14:25 -07:00
Jacob Shandling
1725cb3a0c UI - Merge inherited and and team-scope queries tables (#18596)
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2024-05-07 15:44:41 -04:00
RachelElysia
e92e76aee3
Revert "Feature: 15605 merge inherited queries and policies" 2024-05-07 13:30:39 -04:00
Jacob Shandling
fc3cb5b5d3 UI - Merge inherited and and team-scope queries tables (#18596)
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2024-05-06 12:27:05 -04:00
Jacob Shandling
5657b2ddd1
UI – when host's scripts_enabled is null, allow running scripts with warning (#18386)
## Addresses #18382 

- Do not disable option when `scripts_enabled: null`
- Update disabled tooltip copy for 3 actions
- Generalize dropdown with tooltip component to work for disabled and
non-disabled (now unused, but was used in prototype before product
input) cases
![Screenshot 2024-04-18 at 11 52
15 AM](https://github.com/fleetdm/fleet/assets/61553566/b1a08086-d39e-47ea-af8f-57f4e391e106)
![Screenshot 2024-04-18 at 12 29
18 PM](https://github.com/fleetdm/fleet/assets/61553566/25072573-ee79-45f4-951a-af072645a7d6)

- [x] Added/updated tests
- [x] Manual QA for all new/changed functionality
- [x] Confirm previously disabled options with tooltips still work as
expected with generalized dropdown option with tooltip

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2024-04-18 14:34:20 -07:00
RachelElysia
c5b2b25091
Fleet UI: Make disabled dropdown tooltip a part of reusable dropdown component and implement (#18054) 2024-04-12 09:10:19 -04:00
RachelElysia
d5df23964b
Fleet UI: Clickable elements include cursor hover state (#17688) 2024-03-22 15:26:09 -04:00
Jacob Shandling
67c45d5417
UI – refactor forms and form fields (#16159)
## 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**
![Screenshot 2024-01-17 at 11 49
14 AM](https://github.com/fleetdm/fleet/assets/61553566/14f209fb-31db-41ef-8e63-e0d8994698c1)

**Edit query form**
![Screenshot 2024-01-17 at 11 50
35 AM](https://github.com/fleetdm/fleet/assets/61553566/b07e70ea-3095-4e4f-be73-95a3c499839b)

**Add hosts modal**
![Screenshot 2024-01-17 at 11 51
48 AM](https://github.com/fleetdm/fleet/assets/61553566/4ef1f410-a823-41d1-b2f6-ea8eb5231f93)


## 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>
2024-01-18 10:48:44 -05:00
Marko Lisica
8162d052bf
Icons improvements (making frontend consistent with Figma component library) (#14185)
# 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>
2023-10-31 16:06:38 +00:00
RachelElysia
e2d68b9b51
Fleet UI: (Styling bug) Search bar alignment, hover state (#13151) 2023-08-09 13:35:28 -04:00
RachelElysia
fafea94dba
Fleet UI: Dropdown arrows updated, on hover button icon color, etc (#13129) 2023-08-07 09:25:32 -04:00
RachelElysia
49eb3885f8
Fleet UI: New font face... Inter! (#11625) 2023-05-12 09:40:43 -04:00
Jacob Shandling
cb58849d95
Fleet Premium to Sandbox (#11372)
## Addresses #9371 
### Adds a suite of UI logic for premium features in the Sandbox
environment

For reviewer: please review the work for the below 3 substasks, which
are the only remaining subtasks encompassed by this PR that have not yet
passed review individually:
  - #10822 (9)
  - #10823 (10)
  - #10824 (11)

## 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: Martin Angers <martin.n.angers@gmail.com>
2023-04-27 08:53:30 -07:00
Luke Heath
abb5a332c5
UI hackathon: transitions, tooltips, empty states, buttons, bookmarks (#9195) 2023-01-06 17:08:48 -06:00
RachelElysia
9a5789459e
Fleet UI: Autofocus forms (#9180) 2023-01-06 09:25:00 -05:00
Gabriel Hernandez
a2d672435d
update buttons to match new styleguide (#9183)
* update button to follow new style guide

* update button styles for inverted ghost buttons

* update a color name to match new styleguide
2023-01-05 15:23:27 +00:00
Luke Heath
dea1d6b66e
UI hackathon transitions (#9163) 2023-01-04 10:06:30 -06:00
RachelElysia
322356e929
Fleet UI: Fix multiselect remove selection coloring (#9112) 2022-12-22 16:47:21 -06:00
RachelElysia
8980088f98
Fleet UI: Fix multi select styling on schedule, packs, members (#9102) 2022-12-22 16:34:47 -05:00
RachelElysia
267f65a603
Frontend testing documentation (#8936) 2022-12-14 13:56:56 -05:00
RachelElysia
46a38daf3b
Fleet UI: Various dropdown fixes (#8645) 2022-11-10 11:55:43 -05:00
RachelElysia
373378cdd6
Fleet UI: Dropdown and dashboard styling fixes (#8448) 2022-11-01 16:09:57 -04:00
Luke Heath
428b3958ae
Fix one pixel offset on dropdown menu (#8374) 2022-10-20 16:34:32 -05:00
Luke Heath
ed174c4847
Remove border around actions button (#8363) 2022-10-20 12:29:32 -05:00
Luke Heath
6d4c885f22
Fix select dropdown highlighting on Firefox (#8264) 2022-10-19 17:57:06 +00:00
RachelElysia
c04ebbc490
Fleet UI: Missing host and low disk space filters on dashboard and manage host page (#7728) 2022-10-14 15:21:30 -05:00
Luke Heath
753483ffd6
Add consistent input hover (#7677) 2022-10-05 09:43:54 -05:00
Gabriel Hernandez
f1995bf79e
Fleet UI update to testing tooling user-event library (#7514)
* adding FE testing documentation

* extend radio button tests

* update test to work with new user-events lib version

* more testing docs
2022-09-12 16:10:10 +01:00
RachelElysia
4631e4eeaa
Fleet UI: Sentence casing, typo (#6942) 2022-07-28 14:54:01 -04:00
RachelElysia
f78fa3c42a
Fix firefox/safari > input alignment (#6925) 2022-07-27 17:22:35 -04:00
RachelElysia
45b8ba2675
Fleet UI: Align dropdown cursors, buttons (#6886) 2022-07-27 08:51:45 -04:00
RachelElysia
9bfb43b2cf
Fix alignment for dropdown's placeholder and search text (#6395) 2022-06-29 09:49:27 -04:00
Martavis Parker
384c987389
Removed all traces of Redux from the app! (#5287)
* clean up routes and useless components

* component clean up

* removed redux from routes

* rename file

* moved useDeepEffect hook with others

* removed redux, fleet, app_constants dirs; added types to utilities

* style cleanup

* typo fix

* removed unused ts-ignore comments

* removed redux packages!!!

* formatting

* fixed typing for simple search function

* updated frontend readme
2022-04-22 09:45:35 -07:00
RachelElysia
118ae6499b
UI Accessibility: Ability to tab through app (#4699) 2022-03-28 17:31:36 -04:00
Tharun Rajendran
54a17b9e97
chore(test): rewritten dropdown component test using rtl (#4626) 2022-03-18 14:08:54 -05:00
RachelElysia
a022a11ebf
Frontend Tech Debt: Typescript types (#4319) 2022-03-10 10:10:44 -05:00
Martavis Parker
33c5f0651c
New tooltips! (#4326)
* 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>
2022-02-28 13:25:06 -08:00
RachelElysia
85487eb5b2
Settings > Organization Settings: Code revamp (#3580) 2022-01-21 12:06:58 -05:00