Commit graph

48 commits

Author SHA1 Message Date
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
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
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
85b15758f7
Fleet UI: AI autofill policy description and resolution (#18646) 2024-05-02 11:57:00 -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
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
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
RachelElysia
85487eb5b2
Settings > Organization Settings: Code revamp (#3580) 2022-01-21 12:06:58 -05: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
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
noahtalerman
0c4720c721
Fix IP column label and section label. Add border color style for inputs. (#374) 2021-03-04 15:18:21 +00:00
noahtalerman
1b23b7b74f
Add style fixes caught during QA. Add favicon. (#119)
Changes include style fixes that were caught during a QA pass.
2020-12-10 13:09:05 -08:00
noahtalerman
028b968ff5
New styles for label creation form. (#101)
The goal of this PR is to update the styles of the LabelForm component.
Also include global style changes for form components (FormField, LabelForm, and others).
2020-12-07 15:08:59 -08:00
noahtalerman
51cfb07f64
Implement global colors. Add italic font. (#64)
The goal of this PR was to insert new colors, remove legacy colors, and update only the styles accordingly. The Nunito Sans Italic font was also added.

Later PRs will include layout, copy, and style change to individual components. These later changes will more exactly resemble the current mockups.
2020-11-24 08:59:03 -08:00
noahtalerman
23ce98ec51
Add Nunito Sans font and update global styles. (#59)
This is the first PR as a part of the Fleet UI Refresh #38.

Changes include:

- Add Nunito Sans font files and modify global styles to reflect the font change.
- Modify global font variables to reflect new sizing and weight naming conventions.
-- New sizing and naming conventions:
--- SIZE: xx-small: 12px, x-small: 14px, small: 16px, medium: 20px, large: 24px, x-large: 28px
--- WEIGHT: regular: 400, bold: 700
- Remove the old Oxygen font files.

Changes to other style sheets reflect the changes to the new font sizing and weight naming conventions for global variables. The changes don't necessarily use the correct size (as illustrated by mockups). Those "up to spec" sizing changes are to come.
2020-11-19 16:51:22 -08:00
Zachary Wasserman
759a69b5b7
Upgrade Bourbon to 5.1.0 and fix deprecation warnings (#1973)
- Replace uses of deprecated Bourbon helpers with raw CSS
- Add autoprefixer into the build chain to prefix the now removed helpers

This process was achieved by running through each of the deprecation warnings and using the following bash function to replace it in all files:

```
function bourbon-deprecate() {
    grep -rl "@include $1" ./frontend --exclude-dir=.git | xargs sed -i '' -E "s/@include $1[(](.*)[)]/$1: \1/g"
}
```

For some helpers, this did not result in valid CSS, so manual modifications were made.

Closes #1189 #1274
2019-01-03 12:46:55 -08:00
Caleb Coy
0bb9c409a0 Flatten login screen styles (#1912) 2018-09-19 10:07:37 -04:00
Mike Stone
639bdb4e11 Scaffold import config page (#927) 2017-01-13 18:27:58 -05:00
Kyle Knight
eaf0105c6c Some additional stylings to make New Packs a little more bester (#679) 2017-01-06 09:36:51 -06:00
Mike Stone
f099b2ae22 Create packs (#516)
* Creates new PackComposerPage at /packs/new

* Creates PackForm component

* Adds PackForm to PackComposerPage

* Creates QueriesListItem

* Creates QueriesList

* Creates QueriesListWrapper

* Get all queries when the Packs Composer Page loads

* Form HOC handles updates to formData prop

* Creates form to configure scheduled queries

* QueriesListWrapper renders ConfigurePackQueryForm

* search queries input filters queries list

* Empty state text

* create pack when user submits the new pack form

* Adds Edit pack page to /packs/:pack_id/edit

* API client - get scheduled queries for a pack

* API client - create scheduled query

* Redux config for scheduled queries

* Remove scheduled queries from packs

* Add labels to pack on create

* Add disabled state to the select targets dropdown

* Adds edit route and pushes to new route on edit click

* Adds cancel button to edit pack form

* Adds Checkbox that selects all scheduled queries in table
2016-12-21 12:25:54 -05:00
Kyle Knight
8ad731e8fb Refactor form fields (#636) 2016-12-16 09:54:49 -06:00
Kyle Knight
46dee08ab3 Query Select Target Dropdown (#499) 2016-11-23 15:10:32 -06:00
Kyle Knight
cd2981e76b Updating styles on Admin User Management (#463) 2016-11-11 08:42:23 -06:00
Kyle Knight
ecf9eddbca Styling New Query page forms (#451) 2016-11-09 08:00:40 -06:00
Kyle Knight
ca33d238d8 Converting JS/Radium styles to SCSS (#360) 2016-11-03 14:40:54 -05:00