Commit graph

23 commits

Author SHA1 Message Date
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
Gabriel Hernandez
7e974970bb
fix for tooltip wrapper text alignment (#15755)
relates to #15435

fix for tooltip text alignment across multiple browsers. Firefox needs
additional styles to make the tooltip text appear correct.

- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
- [x] Manual QA for all new/changed functionality
2023-12-21 14:43:18 -06:00
Jacob Shandling
1fa5004428
UI – Add and update performance impact features to uitilize metrics that include live query runs (#15642)
Merging during freeze with approval from all stakeholders, including verbal approval from @sharon-fdm 

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-12-14 11:49:56 -08:00
Jacob Shandling
41c2ebfb27
UI – Small adjustments to various Tooltipwrapper instances (#15170)
## Addresses #14244 

- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-11-16 14:34:56 -08:00
Jacob Shandling
1a5633e716
UI – Truncate long query results cells (#15079) 2023-11-10 13:31:11 -08:00
Jacob Shandling
bf8504a028
Refactor Tooltip Wrapper (#13845) 2023-11-07 13:15:49 -08:00
RachelElysia
ee365ea276
Frontend: Step 1 for query caching (organize FE directories, build save modals, modify routes/URLs) (#13908) 2023-10-02 12:26:53 -07:00
Jacob Shandling
46b1db7850
UI: Update tooltip/link structure & functionality in Software tables (#13893) 2023-09-13 10:19:56 -07:00
Gabriel Hernandez
3755264529
Feat UI view script activity and script details (#13388)
relates to #13308

Implements the UI for the activity item for script ran, and the script
details modal.

NOTE: Still have to do API integration and will do when API is ready in
another PR.

- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
See [Changes
files](https://fleetdm.com/docs/contributing/committing-changes#changes-files)
for more information.
- [ ] Added/updated tests
- [x] Manual QA for all new/changed functionality
2023-08-29 11:47:37 +01:00
Jacob Shandling
1c18765dfa
UI: Security patch (#12229)
## Addresses
[confidential/2940](https://github.com/fleetdm/confidential/issues/2940)

Patched a potential security issue in UI

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [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>
2023-06-08 13:13:27 -04:00
Gabriel Hernandez
d027036985
add figma to storybook and a couple new stories (#11521)
add figma addon to storybook that allows us to link figma designed to
our storybook
2023-05-09 16:53:43 +01:00
RachelElysia
c467aaad73
Fleet UI: MDM pending hosts (#9427) 2023-01-24 12:55:43 -05:00
Jacob Shandling
a568c28124
UI: Add {on|off}line status tooltips and refactor HostSummary to use StatusCell (#8750)
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
Co-authored-by: Luke Heath <luke@fleetdm.com>
2022-11-22 14:15:17 -08:00
RachelElysia
1aaf2d0b06
Fleet UI: Update styling of tooltips and modals (#8436) 2022-10-26 09:10:20 -04:00
Gabriel Hernandez
a950e9d095
Feat/update query doc sidepanel (#8214)
* create new components for query side panel

* add reusable icon component that uses svg for icons

* integrate with new osquery_fleet_schema.json data

* update UI to work with osquery_fleet_schema.json

* add remark-gfm to safely support direct urls in markdown

* move fleet ace into markdown component so we can render code with ace editor

* add testing for new query sidebar

* remove incomplete tests for query sidepanel
2022-10-14 17:45:57 +01:00
RachelElysia
01654925c7
Fleet UI: Add optional tooltip delay used on compatibility tooltip (#8065) 2022-10-04 10:03:51 -04:00
Luke Heath
51aaa7755a
Fix tooltip jank and hosts text on query target selection (#7909) 2022-09-23 18:28:43 -04:00
RachelElysia
f9737cdb48
Fleet UI: macOS dashboard Munki issues (#7096) 2022-09-02 17:05:07 -05:00
gillespi314
4a4e832d3a
Increase minimum password length to 12 characters (#5712) 2022-05-18 12:03:00 -05:00
RachelElysia
b85105113f
UI bug fix: Mac details > Software tooltip shows correctly on hover (#5597) 2022-05-05 16:47:09 -04:00
RachelElysia
401225ec38
Fix tooltip underline bug on safari (#4742) 2022-03-22 17:33:25 -04:00
Martavis Parker
850add8c59
Docs for new patterns (#4438)
* added docs for homepage

* added docs for new tooltip pattern
2022-03-07 11:35:26 -08: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