Commit graph

91 commits

Author SHA1 Message Date
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
RachelElysia
1efbef70b0
Resize dropdown font, do not resize twice button icons inside headers (#2972) 2021-11-17 13:08:00 -05:00
Martavis Parker
bcfac603f0
Added components to Storybook library (#2768)
* added storybook

* added avatar component

* added button story

* added dropdown button story

* removed unused ellipsis component

* cleaned up modal path

* reorganized enroll secrets table file

* added flash story; removed unused persistent flash

* added fleet ace story

* added checkbox story

* added dropdown story

* added input story

* fixed storybook build

* fixed avatar

* added input with icon story

* added radio button story

* added select targets dropdown story

* added slider story

* added tooltip story

* added info banner story

* removed unused loaders; added spinner story

* added modal story

* removed unused NumberPill

* added pagination story

* lint fixes

* added documentation to run

* modified documentation

* fixed corelayout test

* fixed format for date-fns

* fixed date format that breaks tests

* wait for page
2021-11-06 23:41:09 -07:00
RachelElysia
1ef3039b01
Add team member spiffied up (#2717) 2021-10-27 13:51:52 -04:00
Luke Heath
b12c7ab925
Add UI for team admin role (#2637) 2021-10-26 09:24:16 -05:00
RachelElysia
fcd0b3a88b
Disabled text: black-50 and italicized (#1827) 2021-08-27 09:25:04 -07:00
RachelElysia
bf57121c04
Team Schedules - New Feature! (#1550)
* Basic Tier users have access to Team Schedules in the UI
2021-08-05 10:48:00 -04:00
RachelElysia
567f43d4a3
Fix disabled color (#1434) 2021-07-21 08:42:50 -07:00
RachelElysia
a2db3ffbe6
Users management/Team management pages: Actions dropdown styling (#1392) 2021-07-15 10:02:58 -07:00
RachelElysia
3a51f95595
Dropdown Component: Clean Styling across Browsers (#1365)
* Dropdown styling (Chrome and Firefox)
* Fix incompatible row heights rendering in tables (Firefox)
2021-07-12 14:50:32 -07:00
RachelElysia
0834af5bb7
User Settings Page and User Management Page: SMTP config conditionally disables email update (#1309)
* Disable Email update field when SMTP is disabled
* Render tooltip, not-allowed cursor, greyed font for disabled UI
* Update integration tests accordingly
* Minor fixes to form styling
2021-07-06 12:22:51 -04:00
RachelElysia
8ee66f3309
Input field and form field error state (#1132)
Fix other small consistencies: password spacing, dropdown error, error messages, pack form order
2021-06-18 14:56:11 -04:00
RachelElysia
9469cb0bf1
Packs pages: Edit page empty state rendering, Manage page update UI (#885)
* Packs: Update empty state, tables, select targets pills, platform pills, icons, phrasing
2021-06-01 09:10:35 -04:00
Zach Wasserman
a5bd03e5d7 Merge branch 'master' into teams 2021-05-31 10:56:50 -07:00
RachelElysia
0395020b6f
Fix jumping bug dropdown onClick (#856) 2021-05-25 12:03:16 -04:00
RachelElysia
c0f67c5822
Packs Page UI: form pill contrast (#837)
* Pill border and colors
* Styling font, margin, padding (sans new icon)
* New close icon
2021-05-24 13:47:05 -04:00
Noah Talerman
72882e8f9f Merge branch 'master' into teams 2021-05-19 13:16:54 -04:00
Gabe Hernandez
87c4aba10d
bulk selecting hosts (#756)
* added teams to add host modal dropdown

* bulk and transfer host on host page

* started transferhost API call

* hook up client side of api

* hook up client side of api call for enrol secrets

* added selection number and clear all selections button

* remove log and document

* fix ManageHostPage tests

* fix linting errors

* add indeterminate styles to checkbox

* added clearable handler for dropdown component

* fix up no team for add modal

* Add active selection styles and move specific host table styles into ManageHostsPage styles

* changed add host team dropdown to include no team option

* add no team option to bulk transfer host options

* change enroll spelling

Co-authored-by: Noah Talerman <noahtal@umich.edu>
2021-05-13 15:30:42 +01:00
Gabe Hernandez
2ab1d106b0
team add new host UI (#723)
* added permissions for adding host button on host page

* added teams to add host modal dropdown

* add placeholder for dropdown and fix some type issues

* added add host redirect modal on team details
2021-05-12 14:06:39 +01:00