* create a MainContent and SidePanelContent containers for layout
this creates these two new components for handling layout more cleanly. It also allows us to put in common components into main layout, like sandbox expiration notification
* use MainContent and SidePanelContent in current pages
this brings in the two new components and wraps the page contents in these. This also allowed us to clean up and remove unused/no needed styling code
* add MainContent component to user settings page and clean up user settings component
this cleans up the user settings page to follow the panel convention we have as well as adds the MainContent component to this page
* add MainContent component to team pages
* update Sandbox gate to render optional component when in sandbox mode and add to MainContent
* add call to sandbox api to get expiry time
this adds a conditional call when the user is in sandbox mode to get the expiry time of the instance
* fix sticky elements on settings pages to work with sandbox expiry message
* fix e2e test after MainContent refactor
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
* 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>
* Add new feature: team policies
* Continue work on team policies
* Continue work on team policies
* Continue team policies
* Revert accidental deletion
* Rename variables
* code refactored; working on runtime errors
* updated front end docs
* Update URLs from team to teams, add tests for policy auth
* Fix test
* Continue work on team policies
* Add permission checks
* mange hosts functional and cleaned up; typing
* improved label logic
* added try catch to awaits
* lint fixes
* frontend unit tests don't work for functional components
* test fix
* revert
* Address errors related to refetch on window focus
* Add loading error check
* Fix typos in loading error checks
* Guard against invariant condition in useEffect
* Update links and routes for team policies
* lint fixes
* Update frontend/pages/hosts/ManageHostsPage/helpers.ts
Co-authored-by: gillespi314 <73313222+gillespi314@users.noreply.github.com>
* Change inherited policies button, tooltip
* lint fixes
Co-authored-by: gillespi314 <73313222+gillespi314@users.noreply.github.com>
Co-authored-by: Tomas Touceda <chiiph@gmail.com>
* Step 1 for improving query experience (#1591)
* fake change to create draft PR
* temp routes to work and not modify old query page
* created new API abstraction for query
* refactored App.jsx to prepare react-query
* fixed flow of redirects after page refresh; functional component added
* setup for getting data on edit
* implementing functions for query page
* Old form showing on new setup
* improving and breaking up query form
* no need for the helpers anymore; clean up
* added type for button component variant
* step toward new save modal; have to switch gears to #1619
* creating new query works
* clean up
* linting cleanup
* added default value for new query
* will address dynamic save disabled in edit step
* Step 2 for improving query experience (select targets) (#1732)
* fake change to create draft PR
* temp routes to work and not modify old query page
* created new API abstraction for query
* refactored App.jsx to prepare react-query
* fixed flow of redirects after page refresh; functional component added
* setup for getting data on edit
* implementing functions for query page
* Old form showing on new setup
* improving and breaking up query form
* no need for the helpers anymore; clean up
* added type for button component variant
* step toward new save modal; have to switch gears to #1619
* creating new query works
* clean up
* linting cleanup
* added default value for new query
* split steps into separate files for readability
* components laid out
* new targets picker
* function clean up
* styling tables
* fixing logic
* fixed logic to keep getting related hosts
* formatting targets for API
* fixed default query
* clean up
* styled target selectors; fixed target input styles
* began total count
* forgot to remove debugging code
* lint fixes
* added target count from API
* clean up
* able to remove selected host targets from table
* lint fixes
* Improving query experience - Step 3 (query results) (#1766)
* fake change to create draft PR
* temp routes to work and not modify old query page
* created new API abstraction for query
* refactored App.jsx to prepare react-query
* fixed flow of redirects after page refresh; functional component added
* setup for getting data on edit
* implementing functions for query page
* Old form showing on new setup
* improving and breaking up query form
* no need for the helpers anymore; clean up
* added type for button component variant
* step toward new save modal; have to switch gears to #1619
* creating new query works
* clean up
* linting cleanup
* added default value for new query
* split steps into separate files for readability
* components laid out
* new targets picker
* function clean up
* styling tables
* fixing logic
* fixed logic to keep getting related hosts
* formatting targets for API
* fixed default query
* clean up
* styled target selectors; fixed target input styles
* began total count
* forgot to remove debugging code
* lint fixes
* added target count from API
* clean up
* able to remove selected host targets from table
* lint fixes
* connected run query with modern React/JS; clean up
* linting fixes
* fixed logic to retrieve results from live query
* linting fixes
* created new, simpler query progress
* populating results and errors tables as expected
* syntax fixes
* fixing styles for query results
* more styling for query results
* manual merge from main
* Rename core->free and basic->premium
* Fix lint js
* Comment out portion of test that seems to timeout
* Rename tier to premium if basic is still loaded
* go sum
* Query Experience Cleanup Tasks (#1807)
* fixes to get merged main branch to build and work
* moved screens for query pages; clean up
* updated and typed react ace for query form; clean up
* using console error instead
* added real types instead of `any` except for errors
* query side panel ts and functional. prep for close task.
* ability to hide, show query table sidebar
* improved live query status warning
* added loading and error state for targets search
* error screen for targets; improved loading display
* now using API-created label for all linux
* missed some files on previous commit
* able to edit query
* clean up
* lint fixes
* query results showing as they come
* remove unused code
* removed old query page. major file cleanup.
* removed selectedTargets redux implementation
* removed unused redux actions and reducers
* removed unused keys in initial state
* selectedOsqueryTable is now using context API
* removed all querypages redux code
* set up context for app and user
* fixed auth with temp fix for wrapper
* completed redux removal from query page
* fixed var names coming from main branch
* fixed var name changes coming from issue 1501
* fixed save popup bug; clean up
* added permissions
* fixed login redirect
* removed unused props
* linting fix
* clean up
* removed unused component, refactor, and clean up
* fixed styles for step 1 as admin
* fixed styles for step 1 as observer
* fixed percentage of online hosts
* added loading progress to query stop button
* reset query status on run again
* added download icon to export button text
* fixed error reset on name input; fixed styles
* fixed bug where query value wasn't saving
* fixed query value when blank
* fixed bug - default query was running every time
* auto adding host from url to targets
* fixed flows for repeating run and save steps
* fleet ace is now TS and functional
* fixed a couple of tests
* fixed issues with query value text inconsistencies
* fixed query side panel not showing
* hiding error count if not > 0
* fixed showing editor for different roles
* using integer for targets
* go sum
* fixed targets param
* catching all errors while running query
* fixed hover state for title and description
* ignore unit test for now; lint fixes
* locking react-ace version
* ignoring tests breaking in github actions
* brought tests back
* fixing file name
* fixing file name again
* fixed e2e test
* have to ignore tests for now
* ignore certain premium tests for now
* one last test to revamp
* another test
* fixed teamflow test
* fixed observer query 403
* lint fixes
* fixed maintainer test
* added changes file
Co-authored-by: Tomas Touceda <chiiph@gmail.com>
- Set explicit width so that changing the selected table does not alter the side panel's width
- Update side panel padding to match Figma
- Update "Software" table styles on the **Host details** page to prevent the table from overflowing the page
- Adjust alignment for edit and delete label icons on **Hosts** page
- Reveal macOS icon the "Hosts" page
* Style all settings side panels
* Add builtin label icons
* Update tests aligning jest userStub and adminUserStub
* Update tests adding cypress checks for user teams/roles
* Query Edit/Run page renders based on user role
* Original UI for global admin/ global maintainer
* New UI for global observer / team maintainer / team observer
* New create new query UI for team maintainer
* Styling matches Figma
* Tests modified accordingly
Styling Closes#859
Co-authored by: Sarah Gillespie @gillespi314
Tests co-authored by: @ghernandez345
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.
* 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
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.
- 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.
* updated typescript version and tsconfig in project
* updated eslint version
* change from experimental export to supported export
* removed accidentally added script
* turn off buggy jsx-a11y eslint rules
* remove unused tslint.json
* fix wrong jsx-a11y depedency
* use correct eslint-plugin-jsx-a11y version
* fix rest of linting errors
* move back js-yaml version to 3 major
- Explicitly import all icon png assets in the component files they're referenced. Instead of creating a relative path to the icon image asset in the `<Icon />` component. This allows icon assets to be independent of any custom url prefix and fixes#193. In addition, eslint now catches all unresolved paths to image assets.
- Remove the `<Icon />` component
- Remove `icon_name.js`
- Add `<Link />` component and PATHS to 404 and 500 pages. These pages now work with a custom URL prefix specified.
- Remove all icons from the Hosts side panel. These changes are part of the Hosts UI #162.
Fixes#65 by bringing in new regular and bold Source Code Pro monospaced fonts.
- Remove old Source Code Pro font files
- Add new platform icons to <QuerySidePanel />
- Edit styles in <EditPackForm />
- Add new PNG files for the new icons in the left side navigation and the right side labels on the Hosts page.
- Rename the old `<Icon />` component to `<KolideIcon />` and create a new `<Icon />` component. The ultimate goal is to get rid of the `<KolideIcon />` and `<PlatformIcon />` components and use the encompassing `<Icon />` component for all icons. The full transition will be made when we have icon assets to replace all the kolide icons and platform icons. Currently, we don't.
- Rename the `icon_name_for_label.js` utility to `icon_name.js` because the utility now includes `iconNameForLabel()` and `iconNameForPlatform()` functions.
- Fixes issue #127.
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).
- Move from Mocha to Jest for JS testing (Jest seems to have better support for
'watching' tests and a more active community these days).
- Codemod existing tests to Jest syntax (using https://github.com/skovhus/jest-codemods)
- Fix some errors in tests that were previously hidden.
- Update Babel.
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.
This is the second PR as part of the Fleet UI Refresh #38.
The goal of this PR was to insert all updated Fleet assets and remove all old assets. More style changes, including the exact sizing and placement of the new images, will occur in a future PR.
- 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
