This PR migrates test suites that use `renderHook` from the library
`@testing-library/react-hooks` to adopt the equivalent and replacement
of `renderHook` from the export that is now available from
`@testing-library/react`. This work is required for the planned
migration to react18.
## Context
In this PR, usages of `waitForNextUpdate` that previously could have
been destructured from `renderHook` are now been replaced with `waitFor`
exported from `@testing-library/react`, furthermore `waitFor`
that would also have been destructured from the same renderHook result
is now been replaced with `waitFor` from the export of
`@testing-library/react`.
***Why is `waitFor` a sufficient enough replacement for
`waitForNextUpdate`, and better for testing values subject to async
computations?***
WaitFor will retry the provided callback if an error is returned, till
the configured timeout elapses. By default the retry interval is `50ms`
with a timeout value of `1000ms` that
effectively translates to at least 20 retries for assertions placed
within waitFor. See
https://testing-library.com/docs/dom-testing-library/api-async/#waitfor
for more information.
This however means that for person's writing tests, said person has to
be explicit about expectations that describe the internal state of the
hook being tested.
This implies checking for instance when a react query hook is being
rendered, there's an assertion that said hook isn't loading anymore.
In this PR you'd notice that this pattern has been adopted, with most
existing assertions following an invocation of `waitForNextUpdate` being
placed within a `waitFor`
invocation. In some cases the replacement is simply a `waitFor(() => new
Promise((resolve) => resolve(null)))` (many thanks to @kapral18, for
point out exactly why this works),
where this suffices the assertions that follow aren't placed within a
waitFor so this PR doesn't get larger than it needs to be.
It's also worth pointing out this PR might also contain changes to test
and application code to improve said existing test.
### What to do next?
1. Review the changes in this PR.
2. If you think the changes are correct, approve the PR.
## Any questions?
If you have any questions or need help with this PR, please leave
comments in this PR.
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
## Summary
This PR is part of the Kibana Sustainable Architecture effort.
The goal is to start categorising Kibana packages into _generic
platform_ (`group: "platform"`) vs _solution-specific_.
```
group?: 'search' | 'security' | 'observability' | 'platform'
visibility?: 'private' | 'shared'
```
Uncategorised modules are considered to be `group: 'common', visibility:
'shared'` by default.
We want to prevent code from solution A to depend on code from solution
B.
Thus, the rules are pretty simple:
* Modules can only depend on:
* Modules in the same group
* OR modules with 'shared' visibility
* Modules in `'observability', 'security', 'search'` groups are
mandatorily `visibility: "private"`.
Long term, the goal is to re-organise packages into dedicated folders,
e.g.:
```
x-pack/platform/plugins/private
x-pack/observability/packages
```
For this first wave, we have categorised packages that seem
"straightforward":
* Any packages that have:
* at least one dependant module
* all dependants belong to the same group
* Categorise all Core packages:
* `@kbn/core-...-internal` => _platform/private_
* everything else => _platform/shared_
* Categorise as _platform/shared_ those packages that:
* Have at least one dependant in the _platform_ group.
* Don't have any `devOnly: true` dependants.
### What we ask from you, as CODEOWNERS of the _package manifests_, is
that you confirm that the categorisation is correct:
* `group: "platform", visibility: "private"` if it's a package that
should only be used from platform code, not from any solution code. It
will be loaded systematically in all serverless flavors, but solution
plugins and packages won't be able to `import` from it.
* `group: "platform", visibility: "shared"` if it's a package that can
be consumed by both platform and solutions code. It will be loaded
systematically in all serverless flavors, and anybody can import / use
code from it.
* `group: "observability" | "security" | "search", visibility:
"private"` if it's a package that is intented to be used exclusively
from a given solution. It won't be accessible nor loaded from other
solutions nor platform code.
Please refer to
[#kibana-sustainable-architecture](https://elastic.slack.com/archives/C07TCKTA22E)
for any related questions.
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
## Summary
This removes some indavertent testing of third-party
APIs/implementations caused by directly passing the result of a
`render()` call to `toMatchSnapshot()`.
In all cases, this was solved by passing `render().container` (the root
element rendered by the testing library) instead.
These changes remove implementation details of both styled-components
(#192368 being the reason for this commit) and testing-library from the
snapshots.
### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
## Summary
Prep work for React@18 bump
https://github.com/elastic/kibana/issues/138222
In React@18 `useCallback` types has changed that introduced breaking
changes:
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/46691
Fixed using:
https://github.com/eps1lon/types-react-codemod?tab=readme-ov-file#usecallback-implicit-any
**Tried to do my best with fixing the types, but if you disagree or have
a better idea how it should be solved feel free to suggest changes or
commit directly to the branch 🙏**
---------
Co-authored-by: Sergi Massaneda <sergi.massaneda@elastic.co>
Co-authored-by: Sébastien Loix <sabee77@gmail.com>
Co-authored-by: Nick Peihl <nick.peihl@elastic.co>
Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Co-authored-by: Felix Stürmer <felix.stuermer@elastic.co>
Co-authored-by: nickofthyme <nicholas.partridge@elastic.co>
Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>
Co-authored-by: Vitalii Dmyterko <92328789+vitaliidm@users.noreply.github.com>
Co-authored-by: Maxim Palenov <maxim.palenov@elastic.co>
Co-authored-by: Christos Nasikas <christos.nasikas@elastic.co>
Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
## Summary
- [x] Adds a warning message under the value, a callout and a
confirmation warning modal to endpoint exceptions if an entry contains
the "IS" operator with a wildcard value
- [x] Unit Tests
# Screenshots
---------
Co-authored-by: Vitalii Dmyterko <92328789+vitaliidm@users.noreply.github.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
## Summary
Upgrading intl packages from v2 to v6
### Packages upgrade:
- [x] Add @formatJS packages
- [x] `react-intl` Upgraded
- [x] `intl-messageformat` Upgraded
- [x] `intl-format-cache` removed
- [x] `intl-relativeformat` removed
- [x] `intl-messageformat-parser` removed
### Todo list:
- [x] Refactor HTML tags
- [x] Refactor Upgrade tags
- [x] Refactor `kbn-i18n`
- [x] Refactor `kbn-i18n-react`
- [x] Refactor `FormattedRelative` to `FormattedRelativeTime`
- [x] Refactor polyfills
- [x] Refactor IntlShape types
- [x] Rewrite Providers
- [x] Rewrite tests using i18n
- [x] Removed current pseudolocale implementation (tracker:
https://github.com/elastic/kibana/issues/180244)
- [x] Fix jest tests using rendered `Provider`
- [x] Remove no longer valid i18n packages documentation (tracker:
https://github.com/elastic/kibana/issues/180259)
Closes https://github.com/elastic/kibana/issues/178968
Closes https://github.com/elastic/kibana/issues/38642
## Notes to code reviewers
For team other than the core team, please review your plugins code
changes by filtering files by codeowners.
### Test Snapshot updates
Most of the changes are refactors of renamed functions and changed ICU
syntax.
The main updates are snapshot changes where `FormattedMessage` is now
memoized so snapshots capturing the html tree needed to be updated to
use `<Memo(MemoizedFormattedMessage)` instead of `<FormattedMessage`
### ICU now supports HTML tags:
before:
```
<FormattedMessage
defaultMessage="To buy a shoe, { link } and { cta }"
values={{
link: (
<a class="external_link" target="_blank" href="https://www.shoe.com/">
visit our website
</a>
),
cta: <strong class="important">eat a shoe</strong>,
}}
/>
```
after:
```
<FormattedMessage
defaultMessage="To buy a shoe, <a>visit our website</a> and <cta>eat a shoe</cta>"
values={{
a: msg => (
<a class="external_link" target="_blank" href="https://www.shoe.com/">
{msg}
</a>
),
cta: msg => <strong class="important">{msg}</strong>,
}}
/>
```
### Escape character to prevent ICU parsing changed from double slashes
to single quotes:
before: `\\{escaped\\}`
after: `'{escaped}'`
### No need for Intl Shape
the new packages under formatJS are written in typescript and come with
types support out of the box so no need to set types when using i18n.
Renamed `InjectedIntlProps` with `WrappedComponentProps`.
Removed `prop-types` and `intlShape` in favor of `IntlShape`.
### FormattedRelative has been renamed to FormattedRelativeTime and its
API has changed significantly. See
[FormattedRelativeTime](https://formatjs.io/docs/react-intl/upgrade-guide-3x#formattedrelativetime)
for more details.
### All tags specified must have corresponding values and will throw
error if it's missing
All tags are now parsed and expected to be formatted properly (all
opened tags must be closed).
To skip this check you can use the `ignoreTag: true` property
```
i18n.translate('xpack.apm.agentConfig.captureJmxMetrics.description', {
defaultMessage: 'This is not an HTML tag <JMX object name pattern>' +
ignoreTag: true,
}),
```
**When do I use ignore tags?**
If your message has HTML tags, it is preferred not to ignore the Tag to
have some string verification that the html tags you are adding are
properly formatted and closed.
If it the text between brackets is not an HTML tag and it is just a
fomat preference then using `ignoreTag` makes sense.
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Tiago Costa <tiago.costa@elastic.co>
`v94.2.1-backport.0` ⏩ `v94.3.0`
_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_
---
## [`v94.3.0`](https://github.com/elastic/eui/releases/v94.3.0)
- Updated `launch` glyph for `EuiIcon`
([#7670](https://github.com/elastic/eui/pull/7670))
- Updated `EuiComboBox`'s `options` to support including tooltip details
for selectable options. Use `toolTipContent` to render tooltip
information, and `toolTipProps` to optionally customize the tooltip
rendering behavior ([#7700](https://github.com/elastic/eui/pull/7700))
- Updated the following existing glyphs in `EuiIcon`:
([#7727](https://github.com/elastic/eui/pull/7727))
- `error` (now an outlined version instead of filled)
- `tokenMetricCounter`
- `tokenMetricGauge`
- Added the following new glyphs to `EuiIcon`:
([#7727](https://github.com/elastic/eui/pull/7727))
- `tokenDimension`
- `clickLeft`
- `clickRight`
- `clockCounter`
- `errorFilled` (the previous `error` glyph design)
- `warningFilled`
**Bug fixes**
- Fixed a visual layout bug for `EuiComboBox` with `isLoading` in mobile
views ([#7700](https://github.com/elastic/eui/pull/7700))
- Fixed missing styles on header cells of `EuiDataGrid` that prevented
content text alignment styles to apply
([#7720](https://github.com/elastic/eui/pull/7720))
- Fixed `EuiFlexGroup` and `EuiFlexItem` `ref` prop typing to support
refs of the same type as the passed `component` type and allow
`displayName` to be defined for easy component naming when using
component wrappers like `styled()`
([#7724](https://github.com/elastic/eui/pull/7724))
---
Most of the code changes you'll see in this PR are caused by the recent
EuiFlex* changes making it generic. This, unfortunately, is something
that `styled()` doesn't always like. I replaced the failing usages of
`styled(EuiFlexGroup)` and `styled(EuiFlexItem)` to use `component` and
other native EuiFlex* props, resulting in the same output but being
better typed.
We plan to add more props to EuiFlex* components giving developers
control over properties like `flex-grow` and `flex-shring`, and reducing
the need for writing any custom CSS when using these components. This
should reduce the number of `styled()` wrappers needed even further
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
## Value List Items Modal Window
Experimental flag: **valueListItemsModal**
it's temporarily true and will be set to false, before merge
2aafe007-734f-4c0e-b542-5eca229e310d
Added a new modal window that lets users interact with value lists
directly. This modal supports viewing, searching, adding, deleting,
updating, and uploading items.
Where to find the modal window:
- Value list popup
- Exception editing and viewing on both the rule page and shared
exceptions management page
Permissions:
Add, edit, delete, and upload buttons are hidden for read-only users.
The modal link is not shown to users without read permissions.
### Changes to API
I added optional **refresh** flag for list items API, because we want to
see the changes in UI, when editing list items
### How to review
All new components is here -
`x-pack/plugins/security_solution/public/value_list/`
New hooks - `packages/kbn-securitysolution-list-hooks/`
API calls - `packages/kbn-securitysolution-list-api`
Actual API - `x-pack/plugins/lists/server/routes`
There also some props drilling into exceptions package, which is not
ideal, please let me know if you have better ideas
[test plan](https://github.com/elastic/security-team/pull/9128)
---------
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
## Summary
Keep whitespace for render exception values
Related - https://github.com/elastic/kibana/issues/106003
Before, if there was space in the exception value, and the user would
paste it, they would have different values
1660604a-d726-4552-81cd-6309de4a3ce8
After
bc386d6f-a5b8-4dbb-8c2b-dbfe18b4e5e1
---------
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
## Summary
- [x] Adds updated warning messaging for trusted apps entries that use
wildcards `*?` with the "IS" operator
- [x] Three different warnings: callout, individual entry item warnings
and a final confirmation modal when the user tries to add a trusted app
with ineffective IS / wildcard combination etnry.
- [x] Unit tests
# Screenshots
<img width="829" alt="image"
src="c7beec62-a249-4535-ac0b-34f9be57f542">
<img width="1649" alt="image"
src="22f38f1b-7e6b-4b69-8d03-4d74d8674fa6">
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
## Summary
Add the `sideEffects` meta to packages without side effects to optimize
tree-shaking on browser-side bundles.
Notes:
- it mostly impacts the `securitySolution` app (almost 2mb reduction)
- it's not always beneficial for all apps, some apps gain some weight,
likely related to the way webpack optimizes the chunks, but I feel like
it's still overall beneficial (don't hesitate to say if you think
otherwise)
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
`v90.0.0`⏩`v91.0.0-backport.0`
⚠️ While this upgrade pings many teams and has a large code diff, **the
majority of the changes are snapshots or tests-related** and do not
touch source code, so should theoretically only need a code review and
not dedicated QA.
The changes in EUI that required a large swathe of these updates are:
- **EuiPopover** removed an extra unnecessary `<div>` wrapper on its
anchors, which affected many snapshots and a few CSS overrides, which
should have been updated
- **EuiButtonGroup** now renders `<button>` elements instead of `<input
type="radio">` elements for single selection, which affected both
snapshots and E2E tests
- **EuiSuperDatePicker**'s absolute date input now requires an `Enter`
keypress when parsing dates (affected E2E tests)
- **EuiComboBox**, when rendered with `singleSelection={{ plainText:
'true' }}`, no longer renders a pill (i.e. text). This combobox type now
behaves more like an `EuiFieldText`, where the selection is rendered via
input `value` instead. This affected a high amount of E2E tests (both
FTR and Cypress), both in terms of updating assertions and changing
selections, but should **not** significantly affect user experience -
see https://github.com/elastic/eui/pull/7332 for more.
---
##
[`v91.0.0-backport.0`](https://github.com/elastic/eui/tree/v91.0.0-backport.0)
**This is a backport release only intended for use by Kibana.**
- Added `esqlVis`, `pipeBreaks`, and `pipeNoBreaks` icon glyphs.
- `EuiSelectable` now allows configurable text truncation via
`listProps.truncationProps`
([#7388](https://github.com/elastic/eui/pull/7388))
- `EuiTextTruncate` now supports a new `calculationDelayMs` prop for
working around font loading or layout shifting scenarios
([#7388](https://github.com/elastic/eui/pull/7388))
**Bug fixes**
- Fixed a bug with `EuiSelectable`s with custom `truncationProps`, where
scrollbar widths were not being accounted for
([#7392](https://github.com/elastic/eui/pull/7392))
## [`91.0.0`](https://github.com/elastic/eui/tree/v91.0.0)
- Updated the background color of `EuiPopover`s in dark mode to increase
visibility & contrast against other page/panel backgrounds
([#7310](https://github.com/elastic/eui/pull/7310))
- Memoized `EuiDataGrid` to prevent unneeded re-renders
([#7324](https://github.com/elastic/eui/pull/7324))
- Added a configurable `role` prop to `EuiAccordion`
([#7326](https://github.com/elastic/eui/pull/7326))
- Added a configurable `role` prop to `EuiGlobalToastList`
([#7328](https://github.com/elastic/eui/pull/7328))
- For greater flexibility, `EuiSuperDatePicker` now allows users to
paste ISO 8601, RFC 2822, and Unix timestamps in the `Absolute` tab
input, in addition to timestamps in the `dateFormat` prop
([#7331](https://github.com/elastic/eui/pull/7331))
- Plain text `EuiComboBox`es now behave more like a normal text
field/input. Backspacing will no longer delete the entire value, and
selected values can now be double clicked and copied.
([#7332](https://github.com/elastic/eui/pull/7332))
- `EuiDataGrid`'s display settings popover now allows users to clear the
"Lines per row" input before typing in a new number
([#7338](https://github.com/elastic/eui/pull/7338))
- Improved the UX of `EuiSuperDatePicker`'s Absolute tab for users
manually typing in timestamps
([#7341](https://github.com/elastic/eui/pull/7341))
- Updated `EuiI18n`s with multiple `tokens` to accept dynamic `values`
([#7341](https://github.com/elastic/eui/pull/7341))
**Bug fixes**
- Fixed `EuiComboBox`'s `onSearchChange` callback to pass the correct
`hasMatchingOptions` value
([#7334](https://github.com/elastic/eui/pull/7334))
- Fixed an `EuiSelectableTemplateSitewide` bug where the `popoverButton`
behavior would break if passed a non-DOM React wrapper
([#7339](https://github.com/elastic/eui/pull/7339))
**Deprecations**
- `EuiPopover`: deprecated `anchorClassName`. Use `className` instead
([#7311](https://github.com/elastic/eui/pull/7311))
- `EuiPopover`: deprecated `buttonRef`. Use `popoverRef` instead
([#7311](https://github.com/elastic/eui/pull/7311))
- `EuiPopover`: removed extra `.euiPopover__anchor` div wrapper. Target
`.euiPopover` instead if necessary
([#7311](https://github.com/elastic/eui/pull/7311))
- Deprecated `EuiButtonGroup`'s `name` prop. This can safely be removed.
([#7325](https://github.com/elastic/eui/pull/7325))
**Breaking changes**
- Removed deprecated `euiPaletteComplimentary` - use
`euiPaletteComplementary` Instead
([#7333](https://github.com/elastic/eui/pull/7333))
**Accessibility**
- Updated `type="single"` `EuiButtonGroup`s to render standard buttons
instead of radio buttons under the hood, per recent a11y recommendations
([#7325](https://github.com/elastic/eui/pull/7325))
- `EuiAccordion` now defaults to a less screenreader-noisy `group` role
instead of `region`. If your accordion contains significant enough
content to be a document landmark role, you may re-configure it back to
`region`. ([#7326](https://github.com/elastic/eui/pull/7326))
- Reduced screen reader noisiness when sorting `EuiDataGrid` columns via
toolbar ([#7327](https://github.com/elastic/eui/pull/7327))
- `EuiGlobalToastList` now defaults to a `log` role. If your toasts will
always require immediate user action, consider (with caution) using the
`alert` role instead.
([#7328](https://github.com/elastic/eui/pull/7328))
**CSS-in-JS conversions**
- Updated `$euiFontFamily` and `$euiCodeFontFamily` to match Emotion
fonts ([#7332](https://github.com/elastic/eui/pull/7332))
---------
Co-authored-by: Cee Chen <constance.chen@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
## Summary
Removes `testing-library/dom` from dependencies. As all the utilities
from`dom` are available already in `testing-library/react`, there's no
need to have both `dom` and `react` libraries available in our
package.json.
Following the [@testing-library/react
documentation:](https://testing-library.com/docs/react-testing-library/intro)
> [React Testing
Library](https://github.com/testing-library/react-testing-library)
builds on top of DOM Testing Library by adding APIs for working with
React components.
Let's just import everything from `testing-library/react`, this way we
won't need to worry about inconsistencies between `testing-library/dom`
we have in our `package.json` and the one that is
`testing-library/react` dependency.
EUI `88.2.0` ➡️ `88.3.0`
## [`88.3.0`](https://github.com/elastic/eui/tree/v88.3.0)
- `EuiGlobalToastList` now shows a "Clear all" button by default once
above a certain number of toasts (defaults to 3). This threshold is
configurable with the `showClearAllButtonAt` prop
([#7111](https://github.com/elastic/eui/pull/7111))
- Added an optional `onClearAllToasts` callback to `EuiGlobalToastList`
([#7111](https://github.com/elastic/eui/pull/7111))
- Added the `value`, `onChange`, and `onCancel` props that allow
`EuiInlineEdit` to be used as a controlled component
([#7157](https://github.com/elastic/eui/pull/7157))
- Added `grabOmnidirectional`, `transitionLeftIn`, `transitionLeftOut`,
`transitionTopIn`, and `transitionTopOut` icon glyphs.
([#7168](https://github.com/elastic/eui/pull/7168))
**Bug fixes**
- Fixed `EuiInlineEdit` components to correctly spread `...rest`
attributes to the parent wrapper
([#7157](https://github.com/elastic/eui/pull/7157))
- Fixed `EuiListGroupItem` to correctly render the `extraAction` button
when `showToolTip` is also passed
([#7159](https://github.com/elastic/eui/pull/7159))
**Dependency updates**
- Updated `@hello-pangea/dnd` to v16.3.0
([#7125](https://github.com/elastic/eui/pull/7125))
- Updated `@types/lodash` to v4.14.198
([#7126](https://github.com/elastic/eui/pull/7126))
**Accessibility**
- `EuiAccordion` now correctly respects reduced motion settings
([#7161](https://github.com/elastic/eui/pull/7161))
- `EuiAccordion` now shows a focus outline to keyboard users around its
revealed children on open
([#7161](https://github.com/elastic/eui/pull/7161))
**CSS-in-JS conversions**
- Converted `EuiSplitPanel` to Emotion
([#7172](https://github.com/elastic/eui/pull/7172))
⚠️ As a quick heads up, serverless tests appear to have been extremely
flake/failure-prone the last couple weeks, particularly Cypress tests.
We've evaluated the listed failures and fixed ones that were related to
changes in this PR, and we're relatively confident the remaining
failures are not related to changes from EUI. Please let us know if you
think this is not the case.
---------
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Cee Chen <constance.chen@elastic.co>
Co-authored-by: Jon <jon@elastic.co>
Major changes in this PR:
## Removal of `.euiAccordionForm` classNames
EUI is moving away from providing global `classNames` styles for
components - where possible, we want to provide props as opposed to
styles. As part of our ongoing Emotion conversion, we have removed the
following `EuiAccordion`-specific classes:
- `.euiAccordionForm` (replaced with `borders="horizontal"`)
- `.euiAccordionForm__button` (replaced with `buttonProps={{
paddingSize: 'm' }}`)
- `.euiAccordionForm__title` styles - this was only removing text
underlines on hover. If still desired, re-add this behavior with custom
CSS.
- `.euiAccordionForm__extraAction` - there was 1 usage of this in Kibana
in Watcher, which was converted to one-off custom inline Emotion CSS
instead.
This change accounts for the first 3-4 commits in the PR. ⚠️ If your
team was one of the 4-5 teams affected by this change, we would greatly
appreciate your help QAing the UI and ensuring it looks as desired/the
same as before.
## Fixed `EuiHeader` affordance
The Sass `euiHeaderAffordForFixed` mixin has been deprecated and
replaced by a global `--euiFixedHeadersOffset` CSS variable. This
variable updates independently and dynamically based on the number of
fixed headers on the page, and is usable by both Sass and Emotion. All
underlying EUI components that need to account for fixed headers (such
as flyouts and page sidebars/templates) have been updated to consume
this new variable.
This change cleans up a great deal of Sass code, and is incidentally
extremely timely with serverless efforts (as serverless has only one
fixed header and the classic Kibana chrome has two).
This change constitutes a majority of the commits in this PR, which
involve removing various fixed Sass header variables and replacing them
with the new CSS variable. I strongly recommend [reviewing changes by
commit if
possible](https://github.com/elastic/kibana/pull/165790/commits) to see
any associated changes that make sense together with any of your touched
file(s). ⚠️ If your team was affected by this change (primarily due to
custom header layouts), your help would be greatly appreciated QAing
your app to ensure no UI regressions in that regard have occurred.
---
`v88.1.0`⏩ `v88.2.0`
## [`88.2.0`](https://github.com/elastic/eui/tree/v88.2.0)
- Added a new `EuiTextTruncate` component, which provides custom
truncation options beyond native CSS
([#7116](https://github.com/elastic/eui/pull/7116))
- Fixed-positioned `EuiHeader`s now set a global CSS
`--euiFixedHeadersOffset` variable, which updates dynamically based on
the number of fixed headers on the page.
([#7144](https://github.com/elastic/eui/pull/7144))
- `EuiFlyout`s now dynamically set their position, height, and mask
based on the number of fixed headers on the page.
([#7144](https://github.com/elastic/eui/pull/7144))
- Sticky-positioned `EuiPageSidebar`s now dynamically set their position
and height based on the number of fixed headers on the page. This can
still be overridden via the `sticky.offset` prop if needed.
([#7144](https://github.com/elastic/eui/pull/7144))
- `EuiPageTemplate` now dynamically offsets content from any fixed
headers on the page. This can still be overridden via the `offset` prop
if needed. ([#7144](https://github.com/elastic/eui/pull/7144))
- Updated `EuiAccordion` with a new `borders` prop
([#7154](https://github.com/elastic/eui/pull/7154))
- Updated `EuiAccordion` with a new `buttonProps.paddingSize` prop
([#7154](https://github.com/elastic/eui/pull/7154))
**Deprecations**
- Deprecated the Sass `euiHeaderAffordForFixed` mixin. Use the new
global CSS `var(--euiFixedHeadersOffset)` variable instead.
([#7144](https://github.com/elastic/eui/pull/7144))
**CSS-in-JS conversions**
- Except for generic CSS utilities, EUI is moving away from providing
global `classNames` that are component-specific. As part of this effort,
we have removed the following `EuiAccordion`-specific classes:
([#7154](https://github.com/elastic/eui/pull/7154))
- Removed `.euiAccordionForm` styles. Use the `borders="horizontal"`
prop instead
- Removed `.euiAccordionForm__button` styles. Use the `buttonProps={{
paddingSize: 'm' }}` prop instead
- Removed `.euiAccordionForm__extraAction` styles. Convert this to your
own custom CSS if necessary.
- Removed `.euiAccordionForm__title` styles. Convert this to your own
custom CSS if necessary.
---------
Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
## Summary
`eui@77.2.2` ⏩ `eui@79.0.1`
🦴 The primary changes in this upgrade are around the deprecated
`EuiLoadingContent` being removed in favor of `EuiSkeletonText`.
- Most instances have been a [direct swap of
usage](327626a7be),
but [some replacements were a bit more
opinionated](e6ceb36a75)
as I saw them as potential to take advantage of `EuiSkeletonText`'s
syntactical sugar and screen reader announcements for when state
switches to loaded.
---
## [`79.0.1`](https://github.com/elastic/eui/tree/v79.0.1)
**Bug fixes**
- Fixed broken push `EuiFlyout` behavior
([#6764](https://github.com/elastic/eui/pull/6764))
## [`79.0.0`](https://github.com/elastic/eui/tree/v79.0.0)
- Updated all `EuiSkeleton` components with new props that allow for
more control over screen reader live announcements:
`announceLoadingStatus`, `announceLoadedStatus`, and `ariaLiveProps`
([#6752](https://github.com/elastic/eui/pull/6752))
- Improved keyboard accessibility in `EuiPageHeader` by ensuring the
right side menu items come into focus from left to right.
([#6753](https://github.com/elastic/eui/pull/6753))
**Breaking changes**
- Removed deprecated `EuiLoadingContent`. Use the `EuiSkeleton`
components instead. ([#6754](https://github.com/elastic/eui/pull/6754))
## [`78.0.0`](https://github.com/elastic/eui/tree/v78.0.0)
- Improved the contrast ratio of `EuiCheckbox`, `EuiRadio`, and
`EuiSwitch` in their unchecked states to meet WCAG AA guidelines.
([#6729](https://github.com/elastic/eui/pull/6729))
- Added React Testing Library `*ByTestSubject` custom commands to
`within()`. RTL utilities can be imported from
`@elastic/eui/lib/test/rtl`.
([#6737](https://github.com/elastic/eui/pull/6737))
- Updated `EuiAvatar` to support a new letter `casing` prop that allow
customizing text capitalization
([#6739](https://github.com/elastic/eui/pull/6739))
- Updated `EuiFocusTrap` to support the `gapMode` prop configuration
(now defaults to `padding`)
([#6744](https://github.com/elastic/eui/pull/6744))
**Bug fixes**
- Fixed inconsistency in `EuiSearchBar`'s AND/OR semantics between DSL
and query string generation
([#6717](https://github.com/elastic/eui/pull/6717))
- Fixed `EuiFieldNumber`'s native browser validity detection causing
extra unnecessary rerenders
([#6741](https://github.com/elastic/eui/pull/6741))
- Fixed the `scrollLock` property on `EuiFocusTrap` (and other
components using `EuiFocusTrap`, such as `EuiFlyout` and `EuiModal`) to
no longer block scrolling on nested portalled content, such as combobox
dropdowns ([#6744](https://github.com/elastic/eui/pull/6744))
**Breaking changes**
- `EuiAvatar`s with the default `user` type will now default to
capitalizing all initials in uppercase
([#6739](https://github.com/elastic/eui/pull/6739))
---------
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
## Summary
Adds the following:
- Add the option to duplicate from the shared exception list management
actions dropdowns
- User can select to include exception items with expired TTL
- User can select to not include exception items with expired TTL
- Cypress tests added for both options
👋 Hi all - the biggest breaking change of this PR is around two icon
type changes/renames.
1. ⚠️ **The `alert` icon is now named `warning`**
- <img width="103" alt=""
src="https://user-images.githubusercontent.com/549407/223561599-8913e88c-676f-47cd-aaed-81b64783bd81.png"
align="middle">
- This change should have been automatically converted on your behalf by
the EUI team, **but if for some reason** we missed making this
conversion in this PR and your icon(s) are now broken, please ping us or
let us know in this PR (or fix yourself after this PR merges).
- In some cases, teams were using this icon for error messages,
alongside the `danger` color. In those cases, we opinionatedly changed
those icon usages to the new `error` icon instead of using the old
alert/warning icon.
2. 🛑 **The `crossInACircleFilled` icon has been removed, and a new
`error` icon added**
- <img width="84" alt=""
src="https://user-images.githubusercontent.com/549407/223561892-4406bdf6-1a55-49ac-85ad-3a11eb7c090d.png"
align="middle">
- The conversion for this breaking change was not straightforward. This
was the path we used to determine what to change `crossInACircleFilled`
usages to:
- If the icon was associated with errors or error messages, we changed
it to the new `error` icon.
- If a "delete" action was associated with this icon, we changed it to
the `trash` icon instead.
- If a "clear" action was associated with this icon, we changed it to
just the `cross` icon, or in some cases `minusInCircleFilled` (if used
alongside `plusInCircleFilled`).
- Again, if we made a mistake during this conversion or missed your
plugin, please feel free to ping us.
## Summary
`eui@75.1.2` ⏩ `eui@76.0.2`
## [`76.0.2`](https://github.com/elastic/eui/tree/v76.0.2)
**Bug fixes**
- Added a legacy `alert` alias for the `warning` `EuiIcon` type
([#6640](https://github.com/elastic/eui/pull/6640))
## [`76.0.1`](https://github.com/elastic/eui/tree/v76.0.1)
**Bug fixes**
- Fixed broken icons on all `isInvalid` form controls
([#6629](https://github.com/elastic/eui/pull/6629))
## [`76.0.0`](https://github.com/elastic/eui/tree/v76.0.0)
- Added `pivot` glyph to `EuiIcon`
([#6605](https://github.com/elastic/eui/pull/6605))
- Added the `displayHeaderCellProps` API to `EuiDataGrid`'s columns,
which allows passing custom props directly to column header cells
([#6609](https://github.com/elastic/eui/pull/6609))
- Added the new `headerCellProps`/`footerCellProps` APIs to
`EuiDataGrid`'s control columns, which allows passing custom props
directly to control column header or footer cells
([#6609](https://github.com/elastic/eui/pull/6609))
- Added a new `footerCellRender` API to `EuiDataGrid`'s control columns,
which allows completely customizing control column rendering (previously
rendered an empty cell)
([#6609](https://github.com/elastic/eui/pull/6609))
- Updated the styling of nested ordered lists in `EuiText` to align with
GitHub's list style, which is a popular format used in Markdown or MDX
formatting ([#6615](https://github.com/elastic/eui/pull/6615))
- Added a margin-bottom property exclusively to the direct child `ul`
and `ol` elements of the `EuiText` component
([#6615](https://github.com/elastic/eui/pull/6615))
- Fix issue with badges appearing within an `EuiBadgeGroup`, where the
CSS rule to override the `margin-inline-start` was not being applied
correctly due to the order of appearance in the CSS rules
([#6618](https://github.com/elastic/eui/pull/6618))
**Bug fixes**
- Fixed `EuiDataGrid` footer control columns rendering with cell
expansion popovers when they should not have been
([#6609](https://github.com/elastic/eui/pull/6609))
- Fixed an `EuiSkipLink` bug where main content loading in
progressively/dynamically after the skip link rendered was not being
correctly focused ([#6613](https://github.com/elastic/eui/pull/6613))
**Breaking changes**
- Renamed `EuiIcon`'s `alert` to `warning`
([#6608](https://github.com/elastic/eui/pull/6608))
- Removed `EuiIcon`'s `crossInACircleFilled` in favor of `error`
([#6608](https://github.com/elastic/eui/pull/6608))
---------
Co-authored-by: Davey Holler <daveyholler@hey.com>
Co-authored-by: Constance Chen <constance.chen@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Jon <jon@elastic.co>
## Summary
Addresses https://github.com/elastic/kibana/issues/145717
Updated the all exceptions lists view to account for different possible
states (empty search, loading, no lists) using an existing component.
## Dearest Reviewers 👋
I've been working on this branch with @mistic and @tylersmalley and
we're really confident in these changes. Additionally, this changes code
in nearly every package in the repo so we don't plan to wait for reviews
to get in before merging this. If you'd like to have a concern
addressed, please feel free to leave a review, but assuming that nobody
raises a blocker in the next 24 hours we plan to merge this EOD pacific
tomorrow, 12/22.
We'll be paying close attention to any issues this causes after merging
and work on getting those fixed ASAP. 🚀
---
The operations team is not confident that we'll have the time to achieve
what we originally set out to accomplish by moving to Bazel with the
time and resources we have available. We have also bought ourselves some
headroom with improvements to babel-register, optimizer caching, and
typescript project structure.
In order to make sure we deliver packages as quickly as possible (many
teams really want them), with a usable and familiar developer
experience, this PR removes Bazel for building packages in favor of
using the same JIT transpilation we use for plugins.
Additionally, packages now use `kbn_references` (again, just copying the
dx from plugins to packages).
Because of the complex relationships between packages/plugins and in
order to prepare ourselves for automatic dependency detection tools we
plan to use in the future, this PR also introduces a "TS Project Linter"
which will validate that every tsconfig.json file meets a few
requirements:
1. the chain of base config files extended by each config includes
`tsconfig.base.json` and not `tsconfig.json`
1. the `include` config is used, and not `files`
2. the `exclude` config includes `target/**/*`
3. the `outDir` compiler option is specified as `target/types`
1. none of these compiler options are specified: `declaration`,
`declarationMap`, `emitDeclarationOnly`, `skipLibCheck`, `target`,
`paths`
4. all references to other packages/plugins use their pkg id, ie:
```js
// valid
{
"kbn_references": ["@kbn/core"]
}
// not valid
{
"kbn_references": [{ "path": "../../../src/core/tsconfig.json" }]
}
```
5. only packages/plugins which are imported somewhere in the ts code are
listed in `kbn_references`
This linter is not only validating all of the tsconfig.json files, but
it also will fix these config files to deal with just about any
violation that can be produced. Just run `node scripts/ts_project_linter
--fix` locally to apply these fixes, or let CI take care of
automatically fixing things and pushing the changes to your PR.
> **Example:** [`64e93e5`
(#146212)](64e93e5806)
When I merged main into my PR it included a change which removed the
`@kbn/core-injected-metadata-browser` package. After resolving the
conflicts I missed a few tsconfig files which included references to the
now removed package. The TS Project Linter identified that these
references were removed from the code and pushed a change to the PR to
remove them from the tsconfig.json files.
## No bazel? Does that mean no packages??
Nope! We're still doing packages but we're pretty sure now that we won't
be using Bazel to accomplish the 'distributed caching' and 'change-based
tasks' portions of the packages project.
This PR actually makes packages much easier to work with and will be
followed up with the bundling benefits described by the original
packages RFC. Then we'll work on documentation and advocacy for using
packages for any and all new code.
We're pretty confident that implementing distributed caching and
change-based tasks will be necessary in the future, but because of
recent improvements in the repo we think we can live without them for
**at least** a year.
## Wait, there are still BUILD.bazel files in the repo
Yes, there are still three webpack bundles which are built by Bazel: the
`@kbn/ui-shared-deps-npm` DLL, `@kbn/ui-shared-deps-src` externals, and
the `@kbn/monaco` workers. These three webpack bundles are still created
during bootstrap and remotely cached using bazel. The next phase of this
project is to figure out how to get the package bundling features
described in the RFC with the current optimizer, and we expect these
bundles to go away then. Until then any package that is used in those
three bundles still needs to have a BUILD.bazel file so that they can be
referenced by the remaining webpack builds.
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
eui@70.4.0 ⏩ eui@71.0.0
---
## [`71.0.0`](https://github.com/elastic/eui/tree/v71.0.0)
- Implemented new `EuiRange` and `EuiDualRange` designs where the
`levels` are now on top of the tracks
([#6092](https://github.com/elastic/eui/pull/6092))
- Added `discuss` and `dotInCircle` glyphs to `EuiIcon`
([#6434](https://github.com/elastic/eui/pull/6434))
- Added `article` glyph to `EuiIcon`
([#6437](https://github.com/elastic/eui/pull/6437))
- Changed the `EuiProvider` usage warnings to not rely on development
mode. ([#6451](https://github.com/elastic/eui/pull/6451))
**Breaking changes**
- `EuiDualRange` now explicitly requires both `min` and `max` via props
types, to match `EuiRange`
([#6092](https://github.com/elastic/eui/pull/6092))
- `EuiRange` and `EuiDualRange`'s `compressed` size no longer impacts
track or level sizes, but continues to compress tick and input sizes.
([#6092](https://github.com/elastic/eui/pull/6092))
- Removed all variables for the following components from EUI's theme
JSON files: ([#6443](https://github.com/elastic/eui/pull/6443))
- `euiCollapsibleNav*`
- `euiColorPicker*`
- `euiContextMenu*`
- `euiControlBar*`
- `euiDataGrid* `(except for z-indices and cell padding sizes)
- `euiDatePicker*`
- `euiSuperDatePicker*`
- `euiDragAndDrop*`
- `euiEuiEmptyPrompt*`
- `euiFilePicker*`
- `euiRange*`
- `euiHeaderLinks*`
- `euiKeyPad*`
- `euiMarkdownEditor*`
- `euiResizable*`
- `euiSelectable*`
- `euiSideNav*`
- `euiStep*`
- `euiSuggest*`
- `euiTable*` (except for color variables)
- `euiTooltip*`
- `euiButtonFontWeight`, `euiButtonDefaultTransparency`, and
`euiButtonMinWidth`
- If you were importing any of the above removed JSON variables, we
strongly recommend using generic color or sizing variables from
`useEuiTheme()` instead.
([#6443](https://github.com/elastic/eui/pull/6443))
**CSS-in-JS conversions**
- Converted `EuiRange` and `EuiDualRange` to Emotion; Removed
`$euiRangeThumbRadius`
([#6092](https://github.com/elastic/eui/pull/6092))
- Added a new `logicalStyles` utility that automatically converts all
non-logical properties in a `style` object to their corresponding
logical properties ([#6426](https://github.com/elastic/eui/pull/6426))
- Added a new `logicalShorthandCSS` utility that automatically converts
`margin`, `padding`, and other 4-sided shorthands to their corresponding
logical properties ([#6429](https://github.com/elastic/eui/pull/6429))
- Added a new `logicalBorderRadiusCSS` utility that automatically
converts `border-radius` to corresponding logical properties
([#6429](https://github.com/elastic/eui/pull/6429))
Co-authored-by: Constance Chen <constance.chen@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
## Summary
- Continuing from [PR](https://github.com/elastic/kibana/pull/146121) to
apply the same changes to the `Add to Shared Lists`.
- Fix showing the number of Linked rules correctly => in `route.ts` use
the `list.namespaceType` instead of namespaceTypes array
- Apply docs comment on the text
- Use the HeaderMenu item from the `kbn` package for the `Number of
Linked rules` menu
- Allow displaying the HeaderMenu without iconType
- Update snapshots and add tests in HeaderMenu
