Commit graph

282 commits

Author SHA1 Message Date
RachelElysia
48884b0ae3
Fleet UI: Disabled styling fixes (#19614) 2024-06-11 11:11:40 -04:00
RachelElysia
db5538be30
Fleet UI: Revert small checkboxes to normal size (#19429) 2024-05-31 16:41:35 -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
Jacob Shandling
c73904ec8c
UI – Place all TooltipWrapper tooltips on the bottom (#19002)
## Addresses #18741 
<img width="727" alt="Screenshot 2024-05-14 at 3 26 20 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/671c680e-00db-4481-a7b3-5425bf6a610d">

- [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>
2024-05-24 14:30:54 -07:00
Jacob Shandling
7cc39cdc3e
UI – Only render SW version tooltip for > 1 version (#19003)
## Addresses #18852 

![Screenshot-2024-05-14-at-41502PM](https://github.com/fleetdm/fleet/assets/61553566/04e2ae9c-613e-49ba-95df-e2915e1427df)

- [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>
2024-05-16 12:52:39 -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
RachelElysia
85b15758f7
Fleet UI: AI autofill policy description and resolution (#18646) 2024-05-02 11:57:00 -05:00
RachelElysia
470fb673a5
Fleet UI: Updates to calendar events previews (#18569) 2024-05-02 11:56:40 -05:00
RachelElysia
66f2f0eca6
Fleet UI/FE: Separate validation from set state, separate toggle and input handler… (#18425) 2024-04-19 16:16:34 -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
2940b32a06
Fleet UI: Calendar settings page (#17593) 2024-03-26 13:39:37 -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
6d965426e0
Fleet UI: Users can see a tooltip on a disabled checkbox (#17664) 2024-03-26 09:55:49 -04:00
RachelElysia
d5df23964b
Fleet UI: Clickable elements include cursor hover state (#17688) 2024-03-22 15:26:09 -04:00
Jacob Shandling
fa093203df
UI – Simpler edit icon solution, applied to Edit query and Edit policy forms (#17364)
## ➡️ #17224  

- Replace the [solution merged
here](https://github.com/fleetdm/fleet/pull/17086) with a simpler and
more easily extendable one
- Apply same approach to the Edit policies form.

Edit query demo:

https://www.loom.com/share/589d3bfedc754f62b31c39bc517c2382?sid=ce65e5a5-e13f-4446-a37c-991a09cc8960

Edit query:
<img width="1791" alt="Screenshot 2024-03-04 at 5 34 35 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/6727bd9e-ad05-45b0-a65c-e01487d7d923">

Edit policy:
<img width="2550" alt="Screenshot 2024-03-05 at 11 47 34 AM"
src="https://github.com/fleetdm/fleet/assets/61553566/fdd8e455-7f54-4177-be3e-4a82a879a176">

<img width="2550" alt="Screenshot 2024-03-05 at 11 47 27 AM"
src="https://github.com/fleetdm/fleet/assets/61553566/3b33b097-f652-4e99-b944-2d29ffe3f311">



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

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2024-03-05 14:08:24 -08:00
Jacob Shandling
cbd1a142b4
UI – Refactor edit query > name and description fields to allow reasonable control of pencil icons (#17086)
## –> #16663 
- Display text within `textarea` only when editing. Since the
problematic pencil icons are hidden in this state, it is okay that their
position varies depending on browser (see previous discussions).
- When not editing, text and icon are displayed in a `button` , removing
the dependence of their position on the variable per browser`textarea`
"col"s.
- Note that the wrapping behavior of these texts can affect how much
space is placed after it _within_ its span/textarea – the distance of
the icon from this element remains constant.


https://www.loom.com/share/105df09a447e42cc9e3a71668f5d1d2c?sid=244d0543-cc4b-43ed-83dd-22959cb08879


<img width="1284" alt="Screenshot 2024-02-27 at 2 15 12 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/7b8f7fea-bc57-4699-9d61-d93b19e8d922">



- [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>
2024-02-29 21:56:31 -08:00
RachelElysia
7158df1a85
[tiny released bug] Fleet UI: Fix live query/policy host search icon (#17082) 2024-02-29 08:49:36 -05:00
RachelElysia
2a6e94a55e
Frontend tech debt: Cleanup {} around strings (#16592) 2024-02-23 09:57:18 -05:00
RachelElysia
20d6a1bc19
Fleet UI: Rename user settings/profile page to account page (#17032) 2024-02-22 10:31:16 -05:00
Gabriel Hernandez
a9daca1b4d
fix to disk encryption modal input icons (#16780)
relates to #16747

this fixes the icons on the disk encryption view key modal.

<img width="663" alt="image"
src="https://github.com/fleetdm/fleet/assets/1153709/c7ed36b4-9115-4f07-b174-949cf0b03367">


- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
- [x] Manual QA for all new/changed functionality
2024-02-13 15:59:32 +00: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
Jacob Shandling
aa64c1cf34
UI – set textarea columns based on placeholder length (#15700)
## Addresses #13095 

<img width="501" alt="Screenshot 2023-12-15 at 1 52 05 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/37fa6d41-e7d0-4324-93c8-d3d7ce4e0d33">


- [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-12-18 09:37:40 -08: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
Jacob Shandling
e709357ca2
UI – Restore clickability to entirety of sort headers except in filter text inputs (#15260)
## Addresses #14519 

- Applies anywhere there is a sort header, including the query results
and query report tables


https://github.com/fleetdm/fleet/assets/61553566/5bf0db8f-3d13-434d-b811-914fdded02df



- [x] Changes file added for user-visible changes in `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: Jacob Shandling <jacob@fleetdm.com>
2023-11-21 13:49:41 -08:00
Jacob Shandling
b961c8e912
UI – Add help text, modularize help text styling, misc cleanup (#15252)
## Addresses #14882 

- Add help text
- Align heading of Advanced section
- Add `help-text` mixin for improved modularity/reusability
- Fix responsive styles on LabelFilterSelect

<img width="721" alt="Screenshot 2023-11-21 at 9 52 45 AM"
src="https://github.com/fleetdm/fleet/assets/61553566/216112f8-de9d-4ee3-acb5-376e6ccd3b4e">

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

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-11-21 10:16:33 -08:00
Jacob Shandling
bf8504a028
Refactor Tooltip Wrapper (#13845) 2023-11-07 13:15:49 -08: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
e75f413d04
Fleet UI: [styling bugs] Scrollbars attack pt. 2 and unreleased checkbox bug introduced (#14630) 2023-10-18 17:04:08 -04:00
Jacob Shandling
53b08bfa99
UI: Fix edit query form padding; align all Fleet checkboxes with their text (#14545)
## Addresses #14535 

- Fix the issue
- Dedupe and modularize styles while at it

**Left: fix | Right: bug**
<img width="1750" alt="Screenshot 2023-10-13 at 11 27 31 AM"
src="https://github.com/fleetdm/fleet/assets/61553566/f13daf10-977c-45f1-bfcc-c294551ca18c">

- Also fix global alignment issue with checkboxes and their text:

**Left: fix | Right: bug**
<img width="868" alt="Screenshot 2023-10-13 at 11 46 42 AM"
src="https://github.com/fleetdm/fleet/assets/61553566/33e92582-65b8-4c5d-aa46-45f8730ef439">

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

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-10-13 16:07:53 -07:00
Roberto Dip
aeb4810541
prevent input secret from overflowing (#14458)
this implements the exact same fix as the component in
`frontend/components/EnrollSecrets/SecretField/_styles.scss`

we should probably refactor the three different components we have:
`SecretField`, `InputFieldHiddenContent` and the ad-hoc component (which
has a TODO) we have inside `EnrollSecretRow`.

for now, adding the padding for #14416
2023-10-11 16:08:48 -03:00
RachelElysia
d8d28184f5
Fleet UI: Disable 1password autofills in random inputs (#13762) 2023-09-11 10:01:31 -04:00
RachelElysia
f0cdb58ea5
Fleet UI: Fix autosize text field to not cut off placeholder text (#13826) 2023-09-11 09:39:01 -04:00
RachelElysia
17e581b916
Fleet UI: [small released styling bugs] Fix live query icons (size, alignment, style, color) (#13593) 2023-09-01 10:18:29 -04:00
RachelElysia
e2d68b9b51
Fleet UI: (Styling bug) Search bar alignment, hover state (#13151) 2023-08-09 13:35:28 -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
fafea94dba
Fleet UI: Dropdown arrows updated, on hover button icon color, etc (#13129) 2023-08-07 09:25:32 -04:00
Jacob Shandling
38b4407671
UI – prevent vertical scrolling for single queries (#12985)
## Addresses #12976 

Prevent vertical scrolling when only a single query is present while
maintaining horizontal scrolling in presence of queries with long names:
<img width="1056" alt="Screenshot 2023-07-26 at 2 26 03 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/9188afdf-c216-49c6-89fd-1dadca4edee0">

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

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-07-27 14:32:58 -07:00
RachelElysia
629f408d31
Fleet UI styleguide update: Replace all search bars and icons with new styling (#12312) 2023-07-19 10:40:59 -04:00
Gabriel Hernandez
75212d81d4
Feat UI add end user auth to controls page (#11991)
relates to #11002

Implements the UI for mdm macos setup end user authentication page.


![image](https://github.com/fleetdm/fleet/assets/1153709/1af6c5d7-99d0-401d-9938-a78617eca817)


![image](https://github.com/fleetdm/fleet/assets/1153709/8f0ed8cc-63f5-425b-8f3a-f2f83ed018f7)



- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
- [x] Manual QA for all new/changed functionality
2023-06-02 14:14:39 +01:00
RachelElysia
210d8d8b8a
Fleet UI: Begin updating icons (6 icons only) (#11852) 2023-05-25 09:43:44 -04:00
Luke Heath
162b709eb2
Adjust bold weight (#11905) 2023-05-23 16:24:01 -05:00
Gabriel Hernandez
0491c730ac
Feat UI mdm migration (#11732)
relates to #11669

Implements the UI for the end-user migration workflow. This includes:

UI for migration form:


![image](https://github.com/fleetdm/fleet/assets/1153709/5f2959a3-efd9-4a4a-9aef-83025d5e23a4)

Preview payload modal:


![image](https://github.com/fleetdm/fleet/assets/1153709/aee580f4-c570-447f-8a99-c7f2a8f3dab8)

Mdm setup state:


![image](https://github.com/fleetdm/fleet/assets/1153709/09b8210a-b4e6-4407-86de-fd439de0841e)

- [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.
2023-05-17 17:32:55 +01:00
RachelElysia
49eb3885f8
Fleet UI: New font face... Inter! (#11625) 2023-05-12 09:40:43 -04:00
Jacob Shandling
6b70d11bc6
UI: Login page bugs (#11520)
## Addresses #11338 

-  Validate emails on login page
- Fix jumping error state for no email provided ("Email field must be
completed")
- Fix jumping error state for password field
- Fix jumping error state for Forgot password > email field

https://www.loom.com/share/92a238fcd2614d6e8d2655d571aa2757

# 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] Added/updated tests
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-05-09 10:12:29 -07: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
Gabriel Hernandez
3b86ed0156
add components to storybook (#11500) 2023-05-03 17:51:33 +01:00