Commit graph

69 commits

Author SHA1 Message Date
RachelElysia
2a756088f1
Fleet UI: Accessibility button actions, tabbing (#22916) 2024-10-25 11:02:52 -04:00
RachelElysia
3dd1219a27
Fleet UI: Filter software/version tables by vulnerability score and exploitability (#21278)
## Issue
Story #19099 
Subtask #20706 

## Description
- Additions to Software > Software tab to filter software and versions
by vulnerable, known exploit, and CVSS score
- Includes a new "Add filters" button which has dynamic tooltip and
button text
- New responsive design to the table header controls
- New modal to customize vulnerability filters
- Handles edge case where user types in a custom CVSS score in URL

## TODO list
- [x] Design, confirm and build empty states
- [x] search bar is showing on empty state, fix this
- [x] Disabled state color for dropdown placeholder text
- [x] Add tests to the modal
- [ ] Test with API when API is ready (good flow to check, choose from
dropdown, then toggle versions on)

## Screen recording
TODO

# Checklist for submitter

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

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

- [x] Added/updated tests
- [ ] Manual QA for all new/changed functionality
2024-08-20 09:41:49 -04:00
Roberto Dip
a1b23acfea
fix the hover state of chevron-right icons (#16595)
for #16133, pair-programmed with @ghernandez345 



# Checklist for submitter

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

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

- [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: Gabe Hernandez <ghernandez345@gmail.com>
2024-02-05 13:12:18 -03:00
RachelElysia
c937305370
Fleet UI: Fix header styling to all use SectionHeader component (#16217) 2024-01-19 10:50:53 -05:00
Jacob Shandling
df2ada1809
UI - Add 'Discard data' option to Save Query modal (#14284)
## Addresses pt.1 of #13470

4 states + InfoBanner:

<img width="746" alt="Screenshot 2023-10-03 at 2 51 36 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/0cffd9a1-8a96-4723-a080-10d68d7c7c70">
<img width="746" alt="Screenshot 2023-10-03 at 2 51 55 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/12237208-f29a-4c90-86c8-8fb71d64fbf4">
<img width="746" alt="Screenshot 2023-10-03 at 2 52 20 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/6bdeb8c6-250f-4edb-a630-aa978a98e428">
<img width="746" alt="Screenshot 2023-10-03 at 2 52 26 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/bae0e656-56f4-4f6a-9972-5ff0fa2f24bf">

<img width="735" alt="Screenshot 2023-10-03 at 5 15 44 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/b26ce3ed-7949-4823-a6a4-fa04e152a480">

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

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-10-04 15:19:26 -07:00
RachelElysia
3a74a9fda4
Fleet UI: [bug squashes] Fix team dropdown z-index issue, fix copy icon hover state, fix spacing before icons (#14034) 2023-09-21 13:46:14 -04:00
RachelElysia
39c3eedc7b
Fleet UI: Improvements to highlighting while tabbing and not clicking (#13508) 2023-08-25 12:26:03 -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
210d8d8b8a
Fleet UI: Begin updating icons (6 icons only) (#11852) 2023-05-25 09:43:44 -04:00
Jacob Shandling
f9ac557c8e
UI: Make all Modal widths consistent (#11722)
## Addresses #11356

Images of 3 fixed modals referenced in the issue:
<img width="1235" alt="Screenshot 2023-05-12 at 4 11 52 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/098081c7-15d4-4009-92a0-7a2e14ffaab1">
<img width="1235" alt="Screenshot 2023-05-12 at 4 12 50 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/7d0f268d-f2dc-4686-a64d-94e28a94c717">
<img width="1235" alt="Screenshot 2023-05-12 at 4 13 26 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/d486b005-1344-4656-adec-c4929332816b">

## Implemented:
- [x] Updated global modal styles for consistency
- [x] Add optional "width" prop to `Modal`
- [x] Misc cleanup:
  - [x]  Restore missing padding from inverse-alert buttons
  - [x]  Improve naming, lots of cleanup
  - [x] More coming in separate PR
- [x] Check each of the following modals, define `width` where
necessary:
  - [x]  Add hosts
  - [x]  EnrollSecret
    - [x] Also fix misaligned icons  
  - [x]  SecretEditor
  - [x]  DeleteSecret
  - [x]  ShowQuery
  - [x]  AddIntegration
  - [x]  DeleteIntegration
  - [x]  EditIntegration
  - [x]  EditTeam
  - [x]  RequestCSR
  - [x]  HostStatusWebhook
  - [x]  CreateTeam
  - [x]  DeleteTeam
  - [x]  EditTeam
  - [x]  AddMember
  - [x]  RemoveMember
  - [x]  CreateUser
  - [x]  DeleteUser
  - [x]  EditUser
    - [x] Also fix randomly shorter 'Password' field  
  - [x]  ResetPassword
  - [x]  ResetSessions
  - [x]  WelcomeHost
  - [x]  DeletHost
  - [x]  TransferHost
  - [x]  POlicyDetails
  - [x]  AutoEnrollMdm
  - [x]  Info
  - [x]  ManualEnrollMdm
  - [x]  ResetKey
  - [x]  BootstrapPackage
  - [x]  DiskEncryption
  - [x]  OSPOlicy
  - [x]  SelectQuery
  - [x]  UnenrollMdm
  - [x]  MacSettings
  - [x]  DeleteLabel
  - [x]  EditCOlumns
  -  WIP, cannot QA yet (cc @ghernandez345):
      - DeleteScript
      - RerunScript
  - [x]  DeleteProfile
  - [x]  DeletePackage - allow to conform to default "m" width, 650px
  - [x]  PackQueryEditor - allow to conform to default "m" width
  - [x]  RemovePackQuery - allow to conform to default "m" width
  - [x]  DeletePack - allow to conform to default "m" width
  - [x]  AddPolicy 
  - [x]  DeletePolicy - allow to conform to default "m" width
- [x] NewPolicy (now "SaveNewPolicyModal") - allow to conform to default
"m" width
  - [x]  DeleteQuery
  - [x]  NewQuery - allow to conform to default "m" width
  - [x]  PreviewData
  - [x]  RemoveScheduledQuery
  - [x]  ScheduleEditor
  - [x]  UserSettingsPage (aka "get API token")
  - [x]  2 x ManageAutomations –  set to large
  - [x]  2 x PreviewPayload - allow to conform to default "m" width 
  - [x]  2 x PreviewTicket - same as ManageAutomations

## 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>
2023-05-17 10:07:38 -07:00
RachelElysia
49eb3885f8
Fleet UI: New font face... Inter! (#11625) 2023-05-12 09:40:43 -04:00
Roberto Dip
33d788caed
add support for displaying EULA during ADE/DEP (#11532)
Related to #11350 and the sub-tasks for stuff that happens in setup
assistant: #11477 and #11479

This adds back-end and UI logic to show an EULA during DEP enrollment if
one was uploaded via the UI, if an EULA wasn't uploaded, we just proceed
to enroll the device right after authentication.


https://user-images.githubusercontent.com/4419992/236316655-282ee74a-5f79-4095-a950-82b77b80a5c0.mov
2023-05-05 14:36:13 -03:00
Jacob Shandling
dc7bfd2a35
Select query style bugs (#11043) 2023-04-06 18:45:13 -05:00
Zachary Winnerman
b5e37ce056
Rebase sandcastle onto main (#10317)
# Checklist for submitter

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

- [ ] 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.
- [ ] Documented any API changes (docs/Using-Fleet/REST-API.md or
docs/Contributing/API-for-contributors.md)
- [ ] Documented any permissions changes
- [ ] Input data is properly validated, `SELECT *` is avoided, SQL
injection is prevented (using placeholders for values in statements)
- [ ] Added support on fleet's osquery simulator `cmd/osquery-perf` for
new osquery data ingestion features.
- [ ] Added/updated tests
- [ ] Manual QA for all new/changed functionality
  - For Orbit and Fleet Desktop changes:
- [ ] Manual QA must be performed in the three main OSs, macOS, Windows
and Linux.
- [ ] Auto-update manual QA, from released version of component to new
version (see [tools/tuf/test](../tools/tuf/test/README.md)).

---------

Co-authored-by: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
2023-03-30 11:22:41 -07: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
RachelElysia
1e96f4f0fb
Fleet UI: Fix left align wrapping on software table (#8803) 2022-11-28 09:56:34 -05:00
RachelElysia
299a4e54fc
Fleet UI: Dashboard summary tiles clickable with new component (#7826) 2022-09-19 16:47:43 -04:00
RachelElysia
b32f2b04aa
Fleet UI: Fix styling on query modal buttons (#7756) 2022-09-14 11:38:25 -05:00
RachelElysia
e64dd73b54
Fleet UI: Button loading spinners (#7124)
Co-authored-by: Luke Heath <luke@fleetdm.com>
2022-08-29 08:21:37 -07:00
RachelElysia
a594f89e8a
Unstyled focus button is not transparent (#5090) 2022-04-12 17:31:20 -05:00
RachelElysia
46e323cd9c
Host Details Page: Policy table truncates policy name (#5087) 2022-04-12 15:31:07 -05:00
RachelElysia
118ae6499b
UI Accessibility: Ability to tab through app (#4699) 2022-03-28 17:31:36 -04:00
gillespi314
deeaf9d036
Add ability to detect compatibility and update which hosts are checked for a policy (#4703)
Add new usePlatformSelector custom hook
Add new usePlatformCompatibility custom hook
Add new PlatformSelector global component
Refactor PlatformCompatibility as global component
Refactor sql_tools to TypeScript
Improve type definitions for context/policy
Align PolicyPage and QueryPage with platform compatibility changes
2022-03-21 11:51:00 -05:00
RachelElysia
ea3f0f127f
Manage Host Page: Spiffier icons for filter status/policy button/dropdowns (#2379) 2021-10-06 10:54:15 -04:00
noahtalerman
20792e7356
Add new loading spinner, edit text-icon buttons (spiffier) and rename SiteNavSidePanel (#1684)
- Update icon for "Edit columns" button on **Hosts** page
- Update `text-icon` button variant
- Add new loading spinner
- Rename `SiteNavSidePanel` to `SiteTopNav`
- Use `text-icon` button variant where appropriate
- Disable pagination on the **Schedule** page
2021-08-16 14:47:04 -04:00
RachelElysia
e8aae0dd25
Spiffier UI: Label pills (#1660) 2021-08-13 17:34:04 -04:00
RachelElysia
8e6f04d7c5
Spiffier buttons in UI (#1583) 2021-08-09 12:38:13 -04:00
Martavis Parker
ec23d4ee8e
Select all matching hosts (#1226)
* #940 passing matching props to table; typescript

* #940 fixed use of results title

* #940 logic to swap states of selected and not

* #940 optimized rendering selected text

* #940 began styling to match flexbox spacing

* #940 added logic to API

* #940 clean up

* #940 fixed action

* #940 fixed conflict and coment

* #940 hide select matching if under 100 hosts

* #940 fixed issue with status filter
2021-07-10 10:29:27 -07:00
RachelElysia
ed08190420
Update table row height and button font size (#1299) 2021-07-05 15:26:38 -04:00
noahtalerman
f2755ec93e
Add icon button styles and edit TableContainer to support styles (#713)
- Add `text-link-icon` button variant
- Add `actionButtonVariant` and `actionButtonIcon` props to `<TableContainer />`.
- Add 3 new icon assets (pencil, trash, and edit columns)
2021-05-18 12:30:57 -04:00
Noah Talerman
81bc137195 Merge style variables from master into teams 2021-04-30 18:12:49 -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
Zach Wasserman
a17556b2db Merge branch 'master' into teams 2021-04-30 09:40:10 -07:00
Gabe Hernandez
a85476c23b
implement member page for team details (#685)
* added reducers and kolide api teams code, hooked up empty state

* request for get all teams and remove unused loading bar

* added create team functionality|gs

* update link cell to be more generic

* create teams detail page and hook it up

* added tabbing and styling to top nav team details

* added edit and delete modal functionality

* add in table and modals for members for teams

* created reusable edit user modal and use it in manage teams page

* creating add member autocomplete

* hook up adding members to teams

* hook up real members from api into table, and empty state for table

* fix proptype warning

* hooked up table querying for member page

* added remove member modal

* added tems to edit useres on member page

* finish remove member from team

* fixed up editing on members page

* fix the role value in member table

* fix prettier errors

* fixes from PR comments round 1

* add missing error handler on add member

* add dynamic team name to member page and user dynamic user and team names to succuess and errors

* add test for userManagementHelper module

* fix lint errors

* fix tests

* add member test to row results on member page
2021-04-29 14:47:33 +01:00
RachelElysia
a8ce68f56a
Query modal on Hosts Details Page (#660)
* Query modal with error, no saved queries, and saved queries
* Ability to search saved queries
* Renders saved queries
* Queries page link uniquely from selected query/host
* Update hostDetailsPage test and refactored component onto own jsx

Pair programming, reviews, and suggestions: Noah Talerman <noahtal@umich.edu>
Reviews and suggestions: Zach Wasserman <zach@fleetdm.com>
2021-04-28 11:08:00 -04:00
Gabriel Hernandez
04712c0426 Merge master into teams 2021-04-14 17:52:15 +01: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
cdf43a79bd
Align Fleet UI with Figma (spacing and fonts) (#628)
This if the 2nd PR as part of the of the Align components in Fleet UI with design system in Figma #539

These changes **refactor the spacing and font sizes** used by the frontend. 

- Change the scss variables in `padding.scss` and `fonts.scss`. 
- Replace custom styles with the new variables throughout all stylesheets.
2021-04-09 17:30:42 -07:00
noahtalerman
c2700ee5c6
Align Fleet UI colors with Figma components (#615)
- This if the 1st PR as part of the of the Align components in Fleet UI with design system in Figma #539
- These changes replace all the color variables in /styles/var/colors.scss with new colors and naming convention used in Figma.
2021-04-09 12:04:11 -07:00
noahtalerman
4e8c5e7f86
Add Host details page (#238)
This PR adds a new Host details page as part of the Hosts UI project #162

Summary of changes:
- New component <HostDetailsPage />
- Move "Query" and "Delete" buttons from the hosts list to the Host details page
- Add new button variants label and text-link
- Add react-tooltip package to the project (v4.2.13)
2021-01-28 12:44:48 -08:00
noahtalerman
573097c2a3
Close UI Refresh. Update button styles. Edit status labels for hosts list and users list. (#139)
The final PR for the UI Refresh #38.

- Complete UI issues caught during the Dec. 09 QA pass.
- Update button and color styles, including hover and active states, to align with the mockups.
- Update status labels in the hosts list and users list. The status label now includes a colored circle along with a text description.
- Fixes #138.
2020-12-18 17:36:39 -08:00
noahtalerman
98799fdff8
New styles for 404, 500, Login, User settings, and Confirm invite pages. (#108)
- Kolide404 and Kolide500 components renamed to Fleet404 and Fleet500
- Styling for Login and Confirm invite pages are consistent with the recent changes to the Setup page.
- Add "*" character to the 404 <Route />'s path property. Now the 404 page renders when there is no exact path match.
2020-12-08 17:45:08 -08:00
noahtalerman
5dd9b75e9c
Update query page (edit, new, manage) and packs page (edit, new, manage) styles. (#106)
The goal of this PR is to update the style across the query and packs pages so they are consistent with the latest global styles (colors, buttons, and fonts).
2020-12-08 12:07:54 -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
57950a9645
Update host side panel. New styles for labels. (#72)
The goal of this PR is to implement the new styles in the mockups and update the right-side panel on the hosts
page. This right-side panel includes built-in labels, custom labels, and filtering for custom labels.
2020-11-30 12:17:55 -05:00
noahtalerman
05b8e432e5
Update nav layout and styles. Cleanup unused css. (#71)
The goal of this PR is to update the main navigation's layout and styles in accordance with the mockups created by @edamamedesign. The orgLogoUrl still needs to be tweaked so uploaded photos display nicely. For now, only the `username` is displayed at the top of the navigation and not the `orgName`.
2020-11-30 12:07:44 -05: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