* Display count is now correct, bug with 0 being falsy
* Empty component renders for client side search even if data table 'disappears'
* Hide display count if display count is 0 includes for client side search
* Hide search and dropdown if no queries have been created
- Add functionality to parse sql for platform compatibility based on osquery tables
- Surface query-platform compatibility in create/edit query form
- Surface query-platform compatibility as new column in manage queries table
- Add filter-by-platform feature to manage queries table
- Refactor manage queries page to useQuery and useContext patterns
- Add `$min-app-width: 1200px` to define the minimum width of the Fleet UI.
- Remove sort form the "Query name" column in the "Pack" tables on the **Host details** page
- Set static widths all column in the "Pack" tables on the **Host details** page except the "Query name" column to support the new minimum width
- Set static widths for all columns in the "Queries" table except the "Name" and "Author" columns to support the new minimum width
- 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
* Style query manage page including side panel and table
* Conditional side panel rendering
Additional riders:
* Less brittle team e2e test
* Update all search icons across app
* Removes create new query button from only observers
* Renders CTA ManageQueriesPage side panel
* Renders Observer can run column for non observers
* Fixes integration tests: ManageQueriesPage and SidePanel
UI co-authored by: @gillespi314
Integration 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
- Remove `$nav-width` and `$nav-tablet-width` because the navigation is now on the top of the layout.
- Add styles to `CoreLayout` to make the main content (everything except the top nav) fill the window height.
This PR includes additional style changes included in the UI layout changes project #360
Changes include:
- Moving the <FlashMessage /> component below the new horizontal nav
- Editing the "Save options" button on the Osquery options page
- Adding a pseudo-element to <SettingsWrapper /> to prevent bold text from shifting the layout
- Add sentence case for tabs in <SettingsWrapper />
- Adding $horizontal-gradient to colors.scss
* 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
- 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 style across the query and packs pages so they are consistent with the latest global styles (colors, buttons, and fonts).
- 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 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.
- Add the server_url_prefix flag for configuring this functionality
- Add prefix handling to the server routes
- Refactor JS to use appropriate paths from modules
- Use JS template to get URL prefix into JS environment
- Update webpack config to support prefixing
Thanks to securityonion.net for sponsoring the development of this feature.
Closes#1661
- 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
* renders ManageQueriesPage at /queries/manage
* Renames QueriesList components to ScheduledQueriesList components
* creates QueriesList component
* Adds side panel component to display query details
* Adds KolideAce editor to Query Details side panel
* Handle Edit Query button click
* Change text of the Delete Query button
* Show confirmation modal before deleting queries
