Commit graph

75 commits

Author SHA1 Message Date
RachelElysia
a2345bb75e
Fleet UI: Allow 'textarea' onBlur, clean to never race (#40744)
## Issue
Closes #34167 

## Followup
- Add missing onBlur to text area inputs app wide
- Update onBlur function to not race with onChange

## Screenshot of fix


https://github.com/user-attachments/assets/9abfbef9-af0d-4247-a18e-e2ea1b4abd4d



## Testing

- [x] QA'd all new/changed functionality manually
2026-02-27 19:51:56 -06:00
jacobshandling
beca67550b
Move copy UI for InputFields with type="textarea" in line with the label (#39885)
<!-- Add the related story/sub-task/bug number, like Resolves #123, or
remove if NA -->
**Related issue:** Resolves #35561 

<img width="647" height="655" alt="Screenshot 2026-02-13 at 4 24 57 PM"
src="https://github.com/user-attachments/assets/b191f8bb-e6b7-4f3d-8819-eccf23a408f8"
/>

- Spot checked all relevant instances of `InputField` (`type="textarea"
and `enableCopy`)


- [x] Changes file added for user-visible changes in `changes/`
-  [x] QA'd all new/changed functionality manually
2026-02-16 12:11:40 -08:00
RachelElysia
300b379ff4
Fleet UI: Styling updates to Packs flow (legacy feature) (#38856) 2026-01-29 09:24:28 -05:00
RachelElysia
ae73f90327
Fleet UI: Update Button to match latest style guide (#38221) 2026-01-14 10:54:09 -05:00
RachelElysia
efc64389b1
Fleet UI [Feature]: UI reskin (#33558) 2025-09-29 12:10:41 -05:00
RachelElysia
b485aeca5b
Fleet UI: Add custom CVSS scores input fields (#31456) 2025-08-05 16:29:55 -04:00
jacobshandling
69cd060b9a
UI: Consistent password field styling (#29984) 2025-06-13 11:37:26 -04:00
RachelElysia
c574c4db25
Fleet UI: Consistent font size across input fields and dropdowns (#29865) 2025-06-10 15:04:18 -04:00
RachelElysia
7fe5dcd045
Fleet UI components; Editor copy button added, File details/uploader gitopsCompatible can now be false (#29307) 2025-05-21 13:32:18 -04:00
RachelElysia
175f110f86
Fleet UI: Created consistent UI for the copy button of an input field (#29056) 2025-05-13 10:24:32 -04:00
RachelElysia
0f2b5aa536
FE: Buttons clean up Part 2 (#28346) 2025-04-23 14:42:30 -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
Sarah Gillespie
f25c845da2
Add metadata field to end user authentication UI (#24579) 2024-12-10 14:13:15 -06:00
RachelElysia
a2e7010ee2
Fleet UI: Add SCEP integration to MDM settings (#22275) 2024-10-15 09:23:59 -04:00
Gabriel Hernandez
35c172dcfd
add ability for end users to enrol their device into fleet mdm (#21751)
relates to #21559

This adds the ability for end users to enrol their own device in fleet
mdm.

> NOTE: this new byod HTML page is a separate HTML asset that contains
all styles and scripts needed for the page to work. We do not send the
fleet UI assets and this drastically cuts down the response time to the
users who will be visiting this page on mobile devices

There are two sides included in this:

**Adding a new add host modal ios and iPad section for IT admins**


![image](https://github.com/user-attachments/assets/1008b190-9c38-4a0e-9b02-19df5da7937d)

**delivering a new byod HTML page to end users that will allow end users
to download the config profile to enrol into fleet mdm**


![image](https://github.com/user-attachments/assets/58d790e4-233b-4b03-ab36-9971aac075de)

<!-- Note that API documentation changes are now addressed by the
product design team. -->

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files)
for more information.
- [ ] Added/updated tests
- [x] Manual QA for all new/changed functionality
2024-09-05 12:47:34 +01:00
RachelElysia
48884b0ae3
Fleet UI: Disabled styling fixes (#19614) 2024-06-11 11:11:40 -04:00
RachelElysia
12c1597049
Fleet UI: Fix form field tooltips to show below the form label (#19382) 2024-05-31 09:22:28 -04:00
RachelElysia
85b15758f7
Fleet UI: AI autofill policy description and resolution (#18646) 2024-05-02 11:57:00 -05:00
Jacob Shandling
5137fe380c
17445 calendar events modal (#17717)
Addresses #17445 

Follow-up iteration:
- Finalize styling of dropdown tooltips
- All `//TODO`s

<img width="1393" alt="Screenshot 2024-03-20 at 1 43 54 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/9b792cf0-058a-4ae6-8f5f-a49eb936ebef">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 01 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/86195dcf-ec28-4cf0-ab8b-d785d12372ed">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 21 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/01effdec-ca20-49ec-a442-5fe754a5e12b">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 26 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/b6de6891-6eae-426e-bbff-b01184094ac9">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 33 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/96e167dd-752c-4b49-a1a7-69fe9b4f42ac">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 43 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/feedbda5-e915-4e5e-84ee-2316db49434a">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 47 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/c4b5ac47-3357-43ef-95ca-dd0953994f6f">
<img width="1393" alt="Screenshot 2024-03-20 at 1 45 02 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/17838415-5bf4-46f0-9bde-522deb0f0886">
<img width="1393" alt="Screenshot 2024-03-20 at 1 45 10 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/b7228484-bb9f-4119-9fbf-a60ce990ba0e">

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2024-03-26 13:39:37 -05:00
RachelElysia
82887fc90c
Frontend: Cleanup 42 js warnings (#16219) 2024-01-23 09:16:10 -05: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
Gabriel Hernandez
b72aaa56b0
add copied message to copy button on input (#15366)
relates to #14090

adds copied message when user click on the copy button on inputs.


![image](https://github.com/fleetdm/fleet/assets/1153709/b5d89630-37a3-4b05-9678-ac62da2e6109)

- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
- [x] Manual QA for all new/changed functionality
2023-11-29 17:27:01 +00:00
RachelElysia
d8d28184f5
Fleet UI: Disable 1password autofills in random inputs (#13762) 2023-09-11 10:01:31 -04:00
Gabriel Hernandez
6555d8def4
Feat UI windows automatic enrollment (#12988)
relates to #12606

Implementation of the Windows automatic enrollment Fleet UI pages. This
includes implementation of card for windows automatic enrollment, the
setup page for windows automatic enrollment, and terms and conditions
page for windows (This is currently still being worked on as our current
solution is not working).

**windows mdm auto enrollment card**


![image](https://github.com/fleetdm/fleet/assets/1153709/d4dc1813-dc28-4a63-bacd-cb7e43e18170)

**windows auto enrollment setup page**


![image](https://github.com/fleetdm/fleet/assets/1153709/92da4b05-0d5d-4404-867f-6d315957bdc3)

- [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.
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Marcos Oviedo <marcos@fleetdm.com>
2023-08-08 15:57:55 +01:00
RachelElysia
49eb3885f8
Fleet UI: New font face... Inter! (#11625) 2023-05-12 09:40:43 -04:00
Gabriel Hernandez
3b86ed0156
add components to storybook (#11500) 2023-05-03 17:51:33 +01:00
RachelElysia
dbec2f85df
Fleet UI: Consistent URL validation (#9806) 2023-02-22 09:05:38 -05:00
Gabriel Hernandez
091ee35ba6
implement macOS update content (#9469) 2023-01-27 16:25:53 -06: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
Jacob Shandling
54bf64ada4
UI: Fix line height issue on error in registration flow via replacing InputFieldWithIcon with InputField (#8819)
* Replace InputFieldWithIcon with InputField on setup page

* same refactor on OrgDetails and FleetDetails

* Fix admin setup page spacing issue

* change file

* Remove redundant registration flow placeholders per style guide - info already in labels

* Update reg flow tests getByPlaceHolder ->  getByLabel

* update e2e tests with getByPlaceHolderText -> getByLabelText

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2022-12-16 10:32:10 -08:00
RachelElysia
4e9ac903e3
Fleet UI: App settings styling (#8529)
Co-authored-by: Luke Heath <luke@fleetdm.com>
2022-11-11 16:12:00 -05:00
Luke Heath
753483ffd6
Add consistent input hover (#7677) 2022-10-05 09:43:54 -05:00
RachelElysia
b23374ad16
Fleet UI: Placeholder text vertical padding (#7828) 2022-09-23 10:44:14 -04:00
Martavis Parker
d0ab0bca9e
fixed prop type for inputfield (#4611) 2022-03-15 23:38:10 -07: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
Luke Heath
67326e16cc
Block autocomplete for username and password in SMTP settings (#3732) 2022-01-20 11:39:55 -06:00
RachelElysia
eba5d1b1b6
Manage Policies Page: New policy modal (#3108) 2021-12-05 17:12:55 -06:00
RachelElysia
1253020678
New Policy UI: Add policy resolution to create and edit policy (#3125) 2021-12-02 10:03:56 -05:00
RachelElysia
321402ebb7
New error state outline red under 32 char (#2951) 2021-11-16 12:30:04 -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
ad3ed4210f
Host Details Page: Software Inventory Searchable (#1390)
* Refactored Software inventory table to use TableContainer
* Add search, reordering, IconTooltipCell
2021-07-15 10:01:52 -07:00
noahtalerman
7338e7bfef
Add sentence casing to full name. Remove letter spacing from password fields (#1207) 2021-06-25 17:46:11 -04:00
RachelElysia
aeb852e168
Remove username from UI (#1168)
* Remove username from UI code
* Remove username from tests
* Remove username from database
* Modify server endpoints for removing username
* Implement backend aspects of removing username
* Update API docs
* Add name to fleetctl
2021-06-24 13:42:29 -07: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
noahtalerman
0f48eb8525
Bring new style variables from teams into master (#707)
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.
2021-04-30 17:32:50 -04:00
Gabe Hernandez
efb35b537a
add prettier and have it format all fleet application code (#625)
* 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
2021-04-12 14:32:25 +01:00
RachelElysia
b7f81a8c39
E2E tests for query flow, label flow, packs flow (#611)
Label flow
  - Create a new label and make sure it shows up on the hosts page
  - Edit the label name
  - Delete the label

Query flow
  - Create a new saved query
  - Edit the query
  - Delete the query

Pack flow
  - Create a pack
  - Edit the pack name
  - Schedule a query
  - Remove a query from the pack
  - Delete the pack

Closes #597
2021-04-09 08:47:16 -07:00