## 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**
**Edit query form**
**Add hosts modal**
## 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>
## 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>
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
* 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
- 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.
* consistent error handling
* Display server errors in InviteUserForm
* Handle errors in Form component
* Refactors query form
* creates KolideAce component
* Renders QueryForm from query page and manage hosts page
* Moves ace editor and select targets dropdown to query form
* Render base errors in Form HOC
* LoginPage and ForgotPasswordPage server errors
* Ensure unique key for user blocks
* Adds base error to login form and forgot password form
* Adds base error to query form
* Adds base error to Pack Form
* Adds errors to confirm invite form
* Adds clearErrors action
* clear errors when confirm invite page unmounts
* Handle errors in the App Setting page
* Handle server errors in the User Settings Page
* Handle server errors in the User Management Page
* API call to create queries
* Add queries to redux
* create query when query form is submitted
* Redirect to ShowQueryPage after creating query
* Removes theme dropdown and NewQuery component header
* Extract NewQueryPage component state to redux state
* Pass logic down to NewQuery component as props
* Changes NewQuery component name to QueryComposer
* Render NewQueryPage for /queries/:id route
* Update ReduxConfig for loading a single resource
* QueryPage tests
* Get query when the query page loads
* catch errors when query is invalid
* Renames UpdateQueryForm to QueryForm to re-usability
* Changes InputField to a controlled component
* Always render the Query Form on Query Pages
* Api client get targets
* Allow entities to parse full api response
* responsive nav style fixes
* Add disabled prop to button
* Add targets from API to target select input
* customize target rendering in input field
* call API on select target input change
* display # hosts selected
* Adds new icons to icon font
* Customize select targets input options
* Update directory structure
* restructure select targets input
* Adds hosts to labels
* Host modal styles
* ShadowBoxInput component
* TargetInfoModal for labels
* consistent entity response in api client stubs
* Fix bug removing multiple hosts in target select input
* change Button component to use css classes
* Sidebar/Layout improvements
* New Query route and page
* Display text editor
* Gradient style longhand
* Slider button component
* Move new query section to component
* Kolide Ace theme
* Styles slider on page
* run query on CMD + Enter
* clicking hosts sends user to homepage
* SaveQueryForm component
* Splits NewQuery component JSX into multiple dumb components
* InputField component
* save query form
* new query
* styleguide
* moves all new query form logic to the new query form
* Kolide theme for osquery tables
* Add SCSS pipeline and fix login style issues
* Fix nav styles and make tests pass
* Fix nav header styles and animations
* Change font-size to 13px on nav
* Fix duplicate specificity of styles
* Authentication middleware
* API client refactor
* Configure API client to make forgot_password requests
* Successfully submit forgot password form
* Display server errors for unknown email address
* GradientButton components
* Style guide updates
* Display errors and override styles for InputFieldWithIcon
* Envelope Icon
* Login page form submission (#157)
* API client utility
* moves test helpers to the test directory
* Utility to namespace local storage keys
* LoginSuccessfulPage component
* Check icon
* adds auth to redux state
* successful form submission
* Allow tests to load dummy SVG static images & test fixes
* ForgotPassword Page, Form & route
* Email validator
