github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Upgrade EUI to v34.3.0 (#101334)

Browse source 
* eui to v34.1.0

* styled-components types

* src snapshot updates

* x-pack snapshot updates

* eui to v34.2.0

* styled-components todo

* src snapshot updates

* x-pack snapshot updates

* jest test updates

* collapsible_nav

* Hard-code global nav width for bottom bar’s (for now)

* Update to eui v34.3.0

* flyout unmock

* src flyout snapshots

* remove duplicate euioverlaymask

* xpack flyout snapshots

* remove unused import

* sidenavprops

* attr updates

* trial: flyout ownfocus

* remove unused

* graph selector

* jest

* jest

* flyout ownFocus

* saved objects flyout

* console welcome flyout

* timeline flyout

* clean up

* visible

* colorpicker data-test-subj

* selectors

* selector

* ts

* selector

* snapshot

* Fix `use_security_solution_navigation` TS error

* cypress

Co-authored-by: cchaos <caroline.horn@elastic.co>
Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
This commit is contained in:
Greg Thompson 2021-06-23 15:10:34 -05:00 • committed by GitHub
parent 2366683209
commit 136d361703
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
90 changed files with 5071 additions and 5417 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -103,7 +103,7 @@
"@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.13",
"@elastic/ems-client": "7.14.0",
"@elastic/eui": "33.0.0",
"@elastic/eui": "34.3.0",
"@elastic/filesaver": "1.1.2",
"@elastic/good": "^9.0.1-kibana3",
"@elastic/maki": "6.3.0",

3933
src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap generated
View file

File diff suppressed because it is too large Load diff

1123
src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap generated
View file

File diff suppressed because it is too large Load diff

4
src/core/public/chrome/ui/header/collapsible_nav.test.tsx
View file

@ -16,10 +16,6 @@ import { httpServiceMock } from '../../../http/http_service.mock';
import { ChromeRecentlyAccessedHistoryItem } from '../../recently_accessed';
import { CollapsibleNav } from './collapsible_nav';
jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
htmlIdGenerator: () => () => 'mockId',
}));
const { kibana, observability, security, management } = DEFAULT_APP_CATEGORIES;
function mockLink({ title = 'discover', category }: Partial<ChromeNavLink>) {

2
src/core/public/chrome/ui/header/header.test.tsx
View file

@ -99,7 +99,7 @@ describe('Header', () => {
act(() => isLocked$.next(true));
component.update();
expect(component.find('nav[aria-label="Primary"]').exists()).toBeTruthy();
expect(component.find('[data-test-subj="collapsibleNav"]').exists()).toBeTruthy();
expect(component).toMatchSnapshot();
act(() =>

2
src/core/public/chrome/ui/header/header.tsx
View file

@ -87,6 +87,7 @@ export function Header({
const isVisible = useObservable(observables.isVisible$, false);
const isLocked = useObservable(observables.isLocked$, false);
const [isNavOpen, setIsNavOpen] = useState(false);
const [navId] = useState(htmlIdGenerator()());
const breadcrumbsAppendExtension = useObservable(breadcrumbsAppendExtension$);
if (!isVisible) {
@ -99,7 +100,6 @@ export function Header({
}
const toggleCollapsibleNavRef = createRef<HTMLButtonElement & { euiAnimate: () => void }>();
const navId = htmlIdGenerator()();
const className = classnames('hide-for-sharing', 'headerGlobalNav');
const Breadcrumbs = (

4
src/core/public/overlays/flyout/__snapshots__/flyout_service.test.tsx.snap generated
View file

@ -26,7 +26,7 @@ Array [
]
`;
exports[`FlyoutService openFlyout() renders a flyout to the DOM 2`] = `"<div data-eui=\\"EuiFocusTrap\\"><div role=\\"dialog\\" class=\\"euiFlyout euiFlyout--medium euiFlyout--paddingLarge\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton\\" type=\\"button\\" aria-label=\\"Close this dialog\\" data-test-subj=\\"euiFlyoutCloseButton\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button><div class=\\"kbnOverlayMountWrapper\\"><span>Flyout content</span></div></div></div>"`;
exports[`FlyoutService openFlyout() renders a flyout to the DOM 2`] = `"<div data-eui=\\"EuiFlyout\\" role=\\"dialog\\"><button type=\\"button\\" data-test-subj=\\"euiFlyoutCloseButton\\"></button><div class=\\"kbnOverlayMountWrapper\\"><span>Flyout content</span></div></div>"`;
exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 1`] = `
Array [
@ -59,4 +59,4 @@ Array [
]
`;
exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"<div data-eui=\\"EuiFocusTrap\\"><div role=\\"dialog\\" class=\\"euiFlyout euiFlyout--medium euiFlyout--paddingLarge\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton\\" type=\\"button\\" aria-label=\\"Close this dialog\\" data-test-subj=\\"euiFlyoutCloseButton\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button><div class=\\"kbnOverlayMountWrapper\\"><span>Flyout content 2</span></div></div></div>"`;
exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"<div data-eui=\\"EuiFlyout\\" role=\\"dialog\\"><button type=\\"button\\" data-test-subj=\\"euiFlyoutCloseButton\\"></button><div class=\\"kbnOverlayMountWrapper\\"><span>Flyout content 2</span></div></div>"`;

2
src/core/public/styles/_base.scss
View file

@ -26,7 +26,7 @@
}
.euiBody--collapsibleNavIsDocked .euiBottomBar {
margin-left: $euiCollapsibleNavWidth;
margin-left: 320px; // Hard-coded for now -- @cchaos
}
// Temporary fix for EuiPageHeader with a bottom border but no tabs or padding

2
src/plugins/console/public/application/components/welcome_panel.tsx
View file

@ -27,7 +27,7 @@ interface Props {
export function WelcomePanel(props: Props) {
return (
<EuiFlyout onClose={props.onDismiss} data-test-subj="welcomePanel" size="s">
<EuiFlyout onClose={props.onDismiss} data-test-subj="welcomePanel" size="s" ownFocus={false}>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>

8
src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap generated
View file

@ -603,7 +603,7 @@ exports[`DashboardEmptyScreen renders correctly with readonly mode 1`] = `
}
>
<EuiPageBody>
<main
<div
className="euiPageBody euiPageBody--borderRadiusNone"
>
<EuiPageContent
@ -675,7 +675,7 @@ exports[`DashboardEmptyScreen renders correctly with readonly mode 1`] = `
</div>
</EuiPanel>
</EuiPageContent>
</main>
</div>
</EuiPageBody>
</div>
</EuiPage>
@ -950,7 +950,7 @@ exports[`DashboardEmptyScreen renders correctly with view mode 1`] = `
}
>
<EuiPageBody>
<main
<div
className="euiPageBody euiPageBody--borderRadiusNone"
>
<EuiPageContent
@ -1035,7 +1035,7 @@ exports[`DashboardEmptyScreen renders correctly with view mode 1`] = `
</div>
</EuiPanel>
</EuiPageContent>
</main>
</div>
</EuiPageBody>
</div>
</EuiPage>

30
src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap generated
View file

@ -176,27 +176,27 @@ exports[`Inspector Data View component should render empty state 1`] = `
<div
className="euiEmptyPrompt"
>
<EuiTitle
size="m"
>
<h2
className="euiTitle euiTitle--medium"
>
<FormattedMessage
defaultMessage="No data available"
id="data.inspector.table.noDataAvailableTitle"
values={Object {}}
>
No data available
</FormattedMessage>
</h2>
</EuiTitle>
<EuiTextColor
color="subdued"
>
<span
className="euiTextColor euiTextColor--subdued"
>
<EuiTitle
size="m"
>
<h2
className="euiTitle euiTitle--medium"
>
<FormattedMessage
defaultMessage="No data available"
id="data.inspector.table.noDataAvailableTitle"
values={Object {}}
>
No data available
</FormattedMessage>
</h2>
</EuiTitle>
<EuiSpacer
size="m"
>

4
src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.test.tsx
View file

@ -144,7 +144,9 @@ describe('Discover flyout', function () {
expect(props.setExpandedDoc.mock.calls[0][0]._id).toBe('4');
});
it('allows navigating with arrow keys through documents', () => {
// EuiFlyout is mocked in Jest environments.
// EUI team to reinstate `onKeyDown`: https://github.com/elastic/eui/issues/4883
it.skip('allows navigating with arrow keys through documents', () => {
const props = getProps();
const component = mountWithIntl(<DiscoverGridFlyout {...props} />);
findTestSubject(component, 'docTableDetailsFlyout').simulate('keydown', { key: 'ArrowRight' });

22
src/plugins/discover/public/application/components/source_viewer/__snapshots__/source_viewer.test.tsx.snap generated
View file

@ -147,27 +147,27 @@ exports[`Source Viewer component renders error state 1`] = `
/>
</EuiIcon>
<EuiSpacer
size="s"
size="m"
>
<div
className="euiSpacer euiSpacer--s"
className="euiSpacer euiSpacer--m"
/>
</EuiSpacer>
<EuiTitle
size="m"
>
<h2
className="euiTitle euiTitle--medium"
>
An Error Occurred
</h2>
</EuiTitle>
<EuiTextColor
color="subdued"
>
<span
className="euiTextColor euiTextColor--subdued"
>
<EuiTitle
size="m"
>
<h2
className="euiTitle euiTitle--medium"
>
An Error Occurred
</h2>
</EuiTitle>
<EuiSpacer
size="m"
>

8
src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/__snapshots__/url.test.tsx.snap generated
View file

@ -153,7 +153,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<input
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
class="euiFieldText"
data-test-subj="urlEditorUrlTemplate"
id="generated-id"
@ -164,7 +164,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
</div>
<div
class="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
<a
class="euiLink euiLink--primary"
@ -216,7 +216,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<input
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
class="euiFieldText"
data-test-subj="urlEditorLabelTemplate"
id="generated-id"
@ -227,7 +227,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
</div>
<div
class="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
<a
class="euiLink euiLink--primary"

2
src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/__snapshots__/header.test.tsx.snap generated
View file

@ -76,7 +76,7 @@ exports[`Header should render a different name, prompt, and beta tag if provided
label="Beta"
>
<span
className="euiBetaBadge"
className="euiBetaBadge euiBetaBadge--hollow"
title="Beta"
>
Beta

98
src/plugins/index_pattern_management/public/components/field_editor/components/scripting_call_outs/__snapshots__/warning_call_out.test.tsx.snap generated
View file

@ -140,62 +140,72 @@ exports[`ScriptingWarningCallOut should render normally 1`] = `
</span>
</div>
<EuiText
color="default"
size="s"
>
<div
className="euiText euiText--small"
>
<EuiText
size="s"
<EuiTextColor
color="default"
component="div"
>
<div
className="euiText euiText--small"
className="euiTextColor euiTextColor--default"
>
<p>
<FormattedMessage
defaultMessage="For greater flexibility and Painless script support, use {runtimeDocs}."
id="indexPatternManagement.scriptedFieldsDeprecatedBody"
values={
Object {
"runtimeDocs": <EuiLink
target="_blank"
>
<FormattedMessage
defaultMessage="runtime fields"
id="indexPatternManagement.warningCallOutLabel.runtimeLink"
values={Object {}}
/>
</EuiLink>,
}
}
<EuiText
size="s"
>
<div
className="euiText euiText--small"
>
<span>
For greater flexibility and Painless script support, use
<EuiLink
target="_blank"
<p>
<FormattedMessage
defaultMessage="For greater flexibility and Painless script support, use {runtimeDocs}."
id="indexPatternManagement.scriptedFieldsDeprecatedBody"
values={
Object {
"runtimeDocs": <EuiLink
target="_blank"
>
<FormattedMessage
defaultMessage="runtime fields"
id="indexPatternManagement.warningCallOutLabel.runtimeLink"
values={Object {}}
/>
</EuiLink>,
}
}
>
<button
className="euiLink euiLink--primary"
disabled={false}
type="button"
>
<FormattedMessage
defaultMessage="runtime fields"
id="indexPatternManagement.warningCallOutLabel.runtimeLink"
values={Object {}}
<span>
For greater flexibility and Painless script support, use
<EuiLink
target="_blank"
>
<span>
runtime fields
</span>
</FormattedMessage>
</button>
</EuiLink>
.
</span>
</FormattedMessage>
</p>
<button
className="euiLink euiLink--primary"
disabled={false}
type="button"
>
<FormattedMessage
defaultMessage="runtime fields"
id="indexPatternManagement.warningCallOutLabel.runtimeLink"
values={Object {}}
>
<span>
runtime fields
</span>
</FormattedMessage>
</button>
</EuiLink>
.
</span>
</FormattedMessage>
</p>
</div>
</EuiText>
</div>
</EuiText>
</EuiTextColor>
</div>
</EuiText>
</div>

1
src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap generated
View file

@ -329,6 +329,7 @@ exports[`InspectorPanel should render as expected 1`] = `
>
<div
className="euiFlyoutBody__overflow"
tabIndex={0}
>
<div
className="euiFlyoutBody__overflowContent"

18
src/plugins/kibana_react/public/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap generated
View file

@ -59,6 +59,12 @@ exports[`KibanaPageTemplateSolutionNav accepts EuiSideNavProps 1`] = `
},
]
}
mobileBreakpoints={
Array [
"xs",
"s",
]
}
mobileTitle={
<h2>
<FormattedMessage
@ -135,6 +141,12 @@ exports[`KibanaPageTemplateSolutionNav renders 1`] = `
},
]
}
mobileBreakpoints={
Array [
"xs",
"s",
]
}
mobileTitle={
<h2>
<FormattedMessage
@ -215,6 +227,12 @@ exports[`KibanaPageTemplateSolutionNav renders with icon 1`] = `
},
]
}
mobileBreakpoints={
Array [
"xs",
"s",
]
}
mobileTitle={
<h2>
<KibanaPageTemplateSolutionNavAvatar

2
src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
View file

@ -17,7 +17,7 @@ import {
KibanaPageTemplateSolutionNavAvatarProps,
} from './solution_nav_avatar';
export type KibanaPageTemplateSolutionNavProps = EuiSideNavProps<{}> & {
export type KibanaPageTemplateSolutionNavProps = Partial<EuiSideNavProps<{}>> & {
/**
* Name of the solution, i.e. "Observability"
*/

51
src/plugins/presentation_util/public/components/labs/labs_flyout.tsx
View file

@ -20,7 +20,6 @@ import {
EuiFlexItem,
EuiFlexGroup,
EuiIcon,
EuiOverlayMask,
} from '@elastic/eui';
import { SolutionName, ProjectStatus, ProjectID, Project, EnvironmentName } from '../../../common';
@ -124,30 +123,32 @@ export const LabsFlyout = (props: Props) => {
);
return (
<EuiOverlayMask onClick={() => onClose()} headerZindexLocation="below">
<EuiFlyout onClose={onClose} hideCloseButton={true}>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>
<EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
<EuiFlexItem grow={false}>
<EuiIcon type="beaker" size="l" />
</EuiFlexItem>
<EuiFlexItem>{strings.getTitleLabel()}</EuiFlexItem>
</EuiFlexGroup>
</h2>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText size="s" color="subdued">
<p>{strings.getDescriptionMessage()}</p>
</EuiText>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<ProjectList {...{ projects, solutions, onStatusChange }} />
</EuiFlyoutBody>
{footer}
</EuiFlyout>
</EuiOverlayMask>
<EuiFlyout
onClose={onClose}
hideCloseButton={true}
maskProps={{ headerZindexLocation: 'below' }}
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>
<EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
<EuiFlexItem grow={false}>
<EuiIcon type="beaker" size="l" />
</EuiFlexItem>
<EuiFlexItem>{strings.getTitleLabel()}</EuiFlexItem>
</EuiFlexGroup>
</h2>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText size="s" color="subdued">
<p>{strings.getDescriptionMessage()}</p>
</EuiText>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<ProjectList {...{ projects, solutions, onStatusChange }} />
</EuiFlyoutBody>
{footer}
</EuiFlyout>
);
};

26
src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/intro.test.tsx.snap generated
View file

@ -47,20 +47,30 @@ exports[`Intro component renders correctly 1`] = `
</span>
</div>
<EuiText
color="default"
size="s"
>
<div
className="euiText euiText--small"
>
<div>
<FormattedMessage
defaultMessage="Modifying objects is for advanced users only. Object properties are not validated and invalid objects could cause errors, data loss, or worse. Unless someone with intimate knowledge of the code told you to be in here, you probably shouldn’t be."
id="savedObjectsManagement.view.howToModifyObjectDescription"
values={Object {}}
<EuiTextColor
color="default"
component="div"
>
<div
className="euiTextColor euiTextColor--default"
>
Modifying objects is for advanced users only. Object properties are not validated and invalid objects could cause errors, data loss, or worse. Unless someone with intimate knowledge of the code told you to be in here, you probably shouldn’t be.
</FormattedMessage>
</div>
<div>
<FormattedMessage
defaultMessage="Modifying objects is for advanced users only. Object properties are not validated and invalid objects could cause errors, data loss, or worse. Unless someone with intimate knowledge of the code told you to be in here, you probably shouldn’t be."
id="savedObjectsManagement.view.howToModifyObjectDescription"
values={Object {}}
>
Modifying objects is for advanced users only. Object properties are not validated and invalid objects could cause errors, data loss, or worse. Unless someone with intimate knowledge of the code told you to be in here, you probably shouldn’t be.
</FormattedMessage>
</div>
</div>
</EuiTextColor>
</div>
</EuiText>
</div>

160
src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/not_found_errors.test.tsx.snap generated
View file

@ -49,29 +49,39 @@ exports[`NotFoundErrors component renders correctly for index-pattern type 1`] =
</span>
</div>
<EuiText
color="default"
size="s"
>
<div
className="euiText euiText--small"
>
<div>
<FormattedMessage
defaultMessage="The index pattern associated with this object no longer exists."
id="savedObjectsManagement.view.indexPatternDoesNotExistErrorMessage"
values={Object {}}
<EuiTextColor
color="default"
component="div"
>
<div
className="euiTextColor euiTextColor--default"
>
The index pattern associated with this object no longer exists.
</FormattedMessage>
</div>
<div>
<FormattedMessage
defaultMessage="If you know what this error means, go ahead and fix it — otherwise click the delete button above."
id="savedObjectsManagement.view.howToFixErrorDescription"
values={Object {}}
>
If you know what this error means, go ahead and fix it — otherwise click the delete button above.
</FormattedMessage>
</div>
<div>
<FormattedMessage
defaultMessage="The index pattern associated with this object no longer exists."
id="savedObjectsManagement.view.indexPatternDoesNotExistErrorMessage"
values={Object {}}
>
The index pattern associated with this object no longer exists.
</FormattedMessage>
</div>
<div>
<FormattedMessage
defaultMessage="If you know what this error means, go ahead and fix it — otherwise click the delete button above."
id="savedObjectsManagement.view.howToFixErrorDescription"
values={Object {}}
>
If you know what this error means, go ahead and fix it — otherwise click the delete button above.
</FormattedMessage>
</div>
</div>
</EuiTextColor>
</div>
</EuiText>
</div>
@ -128,29 +138,39 @@ exports[`NotFoundErrors component renders correctly for index-pattern-field type
</span>
</div>
<EuiText
color="default"
size="s"
>
<div
className="euiText euiText--small"
>
<div>
<FormattedMessage
defaultMessage="A field associated with this object no longer exists in the index pattern."
id="savedObjectsManagement.view.fieldDoesNotExistErrorMessage"
values={Object {}}
<EuiTextColor
color="default"
component="div"
>
<div
className="euiTextColor euiTextColor--default"
>
A field associated with this object no longer exists in the index pattern.
</FormattedMessage>
</div>
<div>
<FormattedMessage
defaultMessage="If you know what this error means, go ahead and fix it — otherwise click the delete button above."
id="savedObjectsManagement.view.howToFixErrorDescription"
values={Object {}}
>
If you know what this error means, go ahead and fix it — otherwise click the delete button above.
</FormattedMessage>
</div>
<div>
<FormattedMessage
defaultMessage="A field associated with this object no longer exists in the index pattern."
id="savedObjectsManagement.view.fieldDoesNotExistErrorMessage"
values={Object {}}
>
A field associated with this object no longer exists in the index pattern.
</FormattedMessage>
</div>
<div>
<FormattedMessage
defaultMessage="If you know what this error means, go ahead and fix it — otherwise click the delete button above."
id="savedObjectsManagement.view.howToFixErrorDescription"
values={Object {}}
>
If you know what this error means, go ahead and fix it — otherwise click the delete button above.
</FormattedMessage>
</div>
</div>
</EuiTextColor>
</div>
</EuiText>
</div>
@ -207,29 +227,39 @@ exports[`NotFoundErrors component renders correctly for search type 1`] = `
</span>
</div>
<EuiText
color="default"
size="s"
>
<div
className="euiText euiText--small"
>
<div>
<FormattedMessage
defaultMessage="The saved search associated with this object no longer exists."
id="savedObjectsManagement.view.savedSearchDoesNotExistErrorMessage"
values={Object {}}
<EuiTextColor
color="default"
component="div"
>
<div
className="euiTextColor euiTextColor--default"
>
The saved search associated with this object no longer exists.
</FormattedMessage>
</div>
<div>
<FormattedMessage
defaultMessage="If you know what this error means, go ahead and fix it — otherwise click the delete button above."
id="savedObjectsManagement.view.howToFixErrorDescription"
values={Object {}}
>
If you know what this error means, go ahead and fix it — otherwise click the delete button above.
</FormattedMessage>
</div>
<div>
<FormattedMessage
defaultMessage="The saved search associated with this object no longer exists."
id="savedObjectsManagement.view.savedSearchDoesNotExistErrorMessage"
values={Object {}}
>
The saved search associated with this object no longer exists.
</FormattedMessage>
</div>
<div>
<FormattedMessage
defaultMessage="If you know what this error means, go ahead and fix it — otherwise click the delete button above."
id="savedObjectsManagement.view.howToFixErrorDescription"
values={Object {}}
>
If you know what this error means, go ahead and fix it — otherwise click the delete button above.
</FormattedMessage>
</div>
</div>
</EuiTextColor>
</div>
</EuiText>
</div>
@ -286,21 +316,31 @@ exports[`NotFoundErrors component renders correctly for unknown type 1`] = `
</span>
</div>
<EuiText
color="default"
size="s"
>
<div
className="euiText euiText--small"
>
<div />
<div>
<FormattedMessage
defaultMessage="If you know what this error means, go ahead and fix it — otherwise click the delete button above."
id="savedObjectsManagement.view.howToFixErrorDescription"
values={Object {}}
<EuiTextColor
color="default"
component="div"
>
<div
className="euiTextColor euiTextColor--default"
>
If you know what this error means, go ahead and fix it — otherwise click the delete button above.
</FormattedMessage>
</div>
<div />
<div>
<FormattedMessage
defaultMessage="If you know what this error means, go ahead and fix it — otherwise click the delete button above."
id="savedObjectsManagement.view.howToFixErrorDescription"
values={Object {}}
>
If you know what this error means, go ahead and fix it — otherwise click the delete button above.
</FormattedMessage>
</div>
</div>
</EuiTextColor>
</div>
</EuiText>
</div>

3
src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/flyout.test.tsx.snap generated
View file

@ -2,6 +2,7 @@
exports[`Flyout conflicts should allow conflict resolution 1`] = `
<EuiFlyout
data-test-subj="importSavedObjectsFlyout"
onClose={[MockFunction]}
size="s"
>
@ -277,6 +278,7 @@ exports[`Flyout conflicts should allow conflict resolution 2`] = `
exports[`Flyout legacy conflicts should allow conflict resolution 1`] = `
<EuiFlyout
data-test-subj="importSavedObjectsFlyout"
onClose={[MockFunction]}
size="s"
>
@ -548,6 +550,7 @@ Array [
exports[`Flyout should render import step 1`] = `
<EuiFlyout
data-test-subj="importSavedObjectsFlyout"
onClose={[MockFunction]}
size="s"
>

2
src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx
View file

@ -960,7 +960,7 @@ export class Flyout extends Component<FlyoutProps, FlyoutState> {
}
return (
<EuiFlyout onClose={close} size="s">
<EuiFlyout onClose={close} size="s" data-test-subj="importSavedObjectsFlyout">
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>

4
src/plugins/vis_type_timeseries/public/application/components/color_picker.test.tsx
View file

@ -36,7 +36,7 @@ describe('ColorPicker', () => {
const props = { ...defaultProps, value: '#68BC00' };
component = mount(<ColorPicker {...props} />);
component.find('.tvbColorPicker button').simulate('click');
const input = findTestSubject(component, 'topColorPickerInput');
const input = findTestSubject(component, 'euiColorPickerInput_top');
expect(input.props().value).toBe('#68BC00');
});
@ -44,7 +44,7 @@ describe('ColorPicker', () => {
const props = { ...defaultProps, value: 'rgba(85,66,177,1)' };
component = mount(<ColorPicker {...props} />);
component.find('.tvbColorPicker button').simulate('click');
const input = findTestSubject(component, 'topColorPickerInput');
const input = findTestSubject(component, 'euiColorPickerInput_top');
expect(input.props().value).toBe('85,66,177,1');
});

2
src/plugins/visualizations/public/components/__snapshots__/visualization_noresults.test.js.snap generated
View file

@ -14,7 +14,7 @@ exports[`VisualizationNoResults should render according to snapshot 1`] = `
data-euiicon-type="visualizeApp"
/>
<div
class="euiSpacer euiSpacer--s"
class="euiSpacer euiSpacer--m"
/>
<span
class="euiTextColor euiTextColor--subdued"

1
test/accessibility/apps/management.ts
View file

@ -82,6 +82,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
it('Edit field type', async () => {
await PageObjects.settings.clickEditFieldFormat();
await a11y.testAppSnapshot();
await PageObjects.settings.clickCloseEditFieldFormatFlyout();
});
it('Advanced settings', async () => {

8
test/functional/apps/management/_import_objects.ts
View file

@ -419,14 +419,16 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
'index-pattern-test-1'
);
await testSubjects.click('pagination-button-next');
const flyout = await testSubjects.find('importSavedObjectsFlyout');
await (await flyout.findByTestSubject('pagination-button-next')).click();
await PageObjects.savedObjects.setOverriddenIndexPatternValue(
'missing-index-pattern-7',
'index-pattern-test-2'
);
await testSubjects.click('pagination-button-previous');
await (await flyout.findByTestSubject('pagination-button-previous')).click();
const selectedIdForMissingIndexPattern1 = await testSubjects.getAttribute(
'managementChangeIndexSelection-missing-index-pattern-1',
@ -435,7 +437,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
expect(selectedIdForMissingIndexPattern1).to.eql('f1e4c910-a2e6-11e7-bb30-233be9be6a20');
await testSubjects.click('pagination-button-next');
await (await flyout.findByTestSubject('pagination-button-next')).click();
const selectedIdForMissingIndexPattern7 = await testSubjects.getAttribute(
'managementChangeIndexSelection-missing-index-pattern-7',

4
test/functional/page_objects/settings_page.ts
View file

@ -739,6 +739,10 @@ export class SettingsPageObject extends FtrService {
await this.testSubjects.click('editFieldFormat');
}
async clickCloseEditFieldFormatFlyout() {
await this.testSubjects.click('euiFlyoutCloseButton');
}
async associateIndexPattern(oldIndexPatternId: string, newIndexPatternTitle: string) {
await this.find.clickByCssSelector(
`select[data-test-subj="managementChangeIndexSelection-${oldIndexPatternId}"] >

2
test/functional/page_objects/visual_builder_page.ts
View file

@ -563,7 +563,7 @@ export class VisualBuilderPageObject extends FtrService {
public async checkColorPickerPopUpIsPresent(): Promise<void> {
this.log.debug(`Check color picker popup is present`);
await this.testSubjects.existOrFail('colorPickerPopover', { timeout: 5000 });
await this.testSubjects.existOrFail('euiColorPickerPopover', { timeout: 5000 });
}
public async changePanelPreview(nth: number = 0): Promise<void> {

15
x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/ResponsiveFlyout.tsx
View file

@ -5,10 +5,21 @@
* 2.0.
*/
import { ReactNode } from 'react';
import { StyledComponent } from 'styled-components';
import { EuiFlyout } from '@elastic/eui';
import { euiStyled } from '../../../../../../../../../../src/plugins/kibana_react/common';
import {
euiStyled,
EuiTheme,
} from '../../../../../../../../../../src/plugins/kibana_react/common';
export const ResponsiveFlyout = euiStyled(EuiFlyout)`
// TODO: EUI team follow up on complex types and styled-components `styled`
// https://github.com/elastic/eui/issues/4855
export const ResponsiveFlyout: StyledComponent<
typeof EuiFlyout,
EuiTheme,
{ children?: ReactNode }
> = euiStyled(EuiFlyout)`
width: 100%;
@media (min-width: 800px) {

17
x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot generated
View file

@ -116,20 +116,13 @@ exports[`Storyshots components/Assets/AssetManager no assets 1`] = `
size="xxl"
/>
<div
className="euiSpacer euiSpacer--s"
className="euiSpacer euiSpacer--m"
/>
<span
className="euiTextColor euiTextColor--subdued"
<h2
className="euiTitle euiTitle--xsmall"
>
<h2
className="euiTitle euiTitle--xsmall"
>
Import your assets to get started
</h2>
<div
className="euiSpacer euiSpacer--m"
/>
</span>
Import your assets to get started
</h2>
</div>
</div>
</div>

32
x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot generated
View file

@ -80,7 +80,7 @@ exports[`Storyshots components/Elements/CustomElementModal with description 1`]
className="euiFormControlLayout__childrenWrapper"
>
<input
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
className="euiFieldText canvasCustomElementForm__name"
data-test-subj="canvasCustomElementForm-name"
id="generated-id"
@ -95,7 +95,7 @@ exports[`Storyshots components/Elements/CustomElementModal with description 1`]
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
40 characters remaining
</div>
@ -119,7 +119,7 @@ exports[`Storyshots components/Elements/CustomElementModal with description 1`]
className="euiFormRow__fieldWrapper"
>
<textarea
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
className="euiTextArea euiTextArea--resizeVertical"
data-test-subj="canvasCustomElementForm-description"
id="generated-id"
@ -131,7 +131,7 @@ exports[`Storyshots components/Elements/CustomElementModal with description 1`]
/>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
83 characters remaining
</div>
@ -389,7 +389,7 @@ exports[`Storyshots components/Elements/CustomElementModal with image 1`] = `
className="euiFormControlLayout__childrenWrapper"
>
<input
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
className="euiFieldText canvasCustomElementForm__name"
data-test-subj="canvasCustomElementForm-name"
id="generated-id"
@ -404,7 +404,7 @@ exports[`Storyshots components/Elements/CustomElementModal with image 1`] = `
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
40 characters remaining
</div>
@ -428,7 +428,7 @@ exports[`Storyshots components/Elements/CustomElementModal with image 1`] = `
className="euiFormRow__fieldWrapper"
>
<textarea
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
className="euiTextArea euiTextArea--resizeVertical"
data-test-subj="canvasCustomElementForm-description"
id="generated-id"
@ -440,7 +440,7 @@ exports[`Storyshots components/Elements/CustomElementModal with image 1`] = `
/>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
100 characters remaining
</div>
@ -695,7 +695,7 @@ exports[`Storyshots components/Elements/CustomElementModal with name 1`] = `
className="euiFormControlLayout__childrenWrapper"
>
<input
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
className="euiFieldText canvasCustomElementForm__name"
data-test-subj="canvasCustomElementForm-name"
id="generated-id"
@ -710,7 +710,7 @@ exports[`Storyshots components/Elements/CustomElementModal with name 1`] = `
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
32 characters remaining
</div>
@ -734,7 +734,7 @@ exports[`Storyshots components/Elements/CustomElementModal with name 1`] = `
className="euiFormRow__fieldWrapper"
>
<textarea
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
className="euiTextArea euiTextArea--resizeVertical"
data-test-subj="canvasCustomElementForm-description"
id="generated-id"
@ -746,7 +746,7 @@ exports[`Storyshots components/Elements/CustomElementModal with name 1`] = `
/>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
100 characters remaining
</div>
@ -996,7 +996,7 @@ exports[`Storyshots components/Elements/CustomElementModal with title 1`] = `
className="euiFormControlLayout__childrenWrapper"
>
<input
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
className="euiFieldText canvasCustomElementForm__name"
data-test-subj="canvasCustomElementForm-name"
id="generated-id"
@ -1011,7 +1011,7 @@ exports[`Storyshots components/Elements/CustomElementModal with title 1`] = `
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
40 characters remaining
</div>
@ -1035,7 +1035,7 @@ exports[`Storyshots components/Elements/CustomElementModal with title 1`] = `
className="euiFormRow__fieldWrapper"
>
<textarea
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
className="euiTextArea euiTextArea--resizeVertical"
data-test-subj="canvasCustomElementForm-description"
id="generated-id"
@ -1047,7 +1047,7 @@ exports[`Storyshots components/Elements/CustomElementModal with title 1`] = `
/>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
100 characters remaining
</div>

10
x-pack/plugins/canvas/public/components/datasource/__stories__/__snapshots__/datasource_component.stories.storyshot generated
View file

@ -39,9 +39,13 @@ exports[`Storyshots components/datasource/DatasourceComponent datasource with ex
<div
className="euiText euiText--small"
>
<p>
The datasource has an argument controlled by an expression. Use the expression editor to modify the datasource.
</p>
<div
className="euiTextColor euiTextColor--default"
>
<p>
The datasource has an argument controlled by an expression. Use the expression editor to modify the datasource.
</p>
</div>
</div>
</div>
</div>

2059
x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot generated
View file

File diff suppressed because it is too large Load diff

12
x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot generated
View file

@ -94,16 +94,16 @@ exports[`Storyshots components/SavedElementsModal no custom elements 1`] = `
size="xxl"
/>
<div
className="euiSpacer euiSpacer--s"
className="euiSpacer euiSpacer--m"
/>
<h2
className="euiTitle euiTitle--small"
>
Add new elements
</h2>
<span
className="euiTextColor euiTextColor--subdued"
>
<h2
className="euiTitle euiTitle--small"
>
Add new elements
</h2>
<div
className="euiSpacer euiSpacer--m"
/>

4
x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/pdf_panel.stories.storyshot generated
View file

@ -37,7 +37,7 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu/PDFPanel default 1`] = `
>
<button
aria-checked={false}
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
aria-labelledby="generated-id"
className="euiSwitch__button"
data-test-subj="reportModeToggle"
@ -80,7 +80,7 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu/PDFPanel default 1`] = `
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
Remove borders and footer logo
</div>

10
x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__snapshots__/settings.test.tsx.snap generated
View file

@ -294,7 +294,7 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
class="euiFormControlLayout__childrenWrapper"
>
<input
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
class="euiFieldText euiFieldText--compressed"
id="generated-id"
type="text"
@ -304,7 +304,7 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
</div>
<div
class="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
Use shorthand notation, like 30s, 10m, or 1h
</div>
@ -585,7 +585,7 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
>
<button
aria-checked="false"
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
aria-labelledby="generated-id"
class="euiSwitch__button"
data-test-subj="hideToolbarSwitch"
@ -623,7 +623,7 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
</div>
<div
class="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
Hide the toolbar when the mouse is not within the Canvas?
</div>
@ -640,4 +640,4 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
</div>
`;
exports[`<Settings /> can navigate Toolbar Settings, closes when activated 3`] = `"<div><div data-eui=\\"EuiFocusTrap\\"><div class=\\"euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--top\\" tabindex=\\"0\\" aria-live=\\"off\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-describedby=\\"generated-id\\" style=\\"top: -16px; left: -22px; z-index: 2000;\\"><div class=\\"euiPopover__panelArrow euiPopover__panelArrow--top\\" style=\\"left: 10px; top: 0px;\\"></div><p id=\\"generated-id\\" class=\\"euiScreenReaderOnly\\">You are in a dialog. To close this dialog, hit escape.</p><div><div class=\\"euiContextMenu\\" style=\\"height: 0px;\\"><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft\\" tabindex=\\"0\\"><div class=\\"euiContextMenuPanelTitle\\"><span class=\\"euiContextMenu__itemLayout\\">Settings</span></div><div><div><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"play\\" class=\\"euiContextMenu__icon\\" color=\\"inherit\\"></span><span class=\\"euiContextMenuItem__text\\">Auto Play</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"boxesHorizontal\\" class=\\"euiContextMenu__icon\\" color=\\"inherit\\"></span><span class=\\"euiContextMenuItem__text\\">Toolbar</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button></div></div></div><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft\\" tabindex=\\"0\\"><button class=\\"euiContextMenuPanelTitle\\" type=\\"button\\" data-test-subj=\\"contextMenuPanelTitleButton\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenu__text\\">Toolbar</span></span></button><div><div><div style=\\"padding: 16px;\\"><div class=\\"euiFormRow\\" id=\\"generated-id-row\\"><div class=\\"euiFormRow__fieldWrapper\\"><div class=\\"euiSwitch\\"><button id=\\"generated-id\\" aria-checked=\\"true\\" class=\\"euiSwitch__button\\" role=\\"switch\\" type=\\"button\\" aria-labelledby=\\"generated-id\\" data-test-subj=\\"hideToolbarSwitch\\" name=\\"toolbarHide\\" aria-describedby=\\"generated-id-help\\"><span class=\\"euiSwitch__body\\"><span class=\\"euiSwitch__thumb\\"></span><span class=\\"euiSwitch__track\\"><span data-euiicon-type=\\"cross\\" class=\\"euiSwitch__icon\\"></span><span data-euiicon-type=\\"check\\" class=\\"euiSwitch__icon euiSwitch__icon--checked\\"></span></span></span></button><span class=\\"euiSwitch__label\\" id=\\"generated-id\\">Hide Toolbar</span></div><div class=\\"euiFormHelpText euiFormRow__text\\" id=\\"generated-id-help\\">Hide the toolbar when the mouse is not within the Canvas?</div></div></div></div></div></div></div></div></div></div></div></div>"`;
exports[`<Settings /> can navigate Toolbar Settings, closes when activated 3`] = `"<div><div data-eui=\\"EuiFocusTrap\\"><div class=\\"euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--top\\" tabindex=\\"0\\" aria-live=\\"off\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-describedby=\\"generated-id\\" style=\\"top: -16px; left: -22px; z-index: 2000;\\"><div class=\\"euiPopover__panelArrow euiPopover__panelArrow--top\\" style=\\"left: 10px; top: 0px;\\"></div><p id=\\"generated-id\\" class=\\"euiScreenReaderOnly\\">You are in a dialog. To close this dialog, hit escape.</p><div><div class=\\"euiContextMenu\\" style=\\"height: 0px;\\"><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft\\" tabindex=\\"0\\"><div class=\\"euiContextMenuPanelTitle\\"><span class=\\"euiContextMenu__itemLayout\\">Settings</span></div><div><div><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"play\\" class=\\"euiContextMenu__icon\\" color=\\"inherit\\"></span><span class=\\"euiContextMenuItem__text\\">Auto Play</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"boxesHorizontal\\" class=\\"euiContextMenu__icon\\" color=\\"inherit\\"></span><span class=\\"euiContextMenuItem__text\\">Toolbar</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button></div></div></div><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft\\" tabindex=\\"0\\"><button class=\\"euiContextMenuPanelTitle\\" type=\\"button\\" data-test-subj=\\"contextMenuPanelTitleButton\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenu__text\\">Toolbar</span></span></button><div><div><div style=\\"padding: 16px;\\"><div class=\\"euiFormRow\\" id=\\"generated-id-row\\"><div class=\\"euiFormRow__fieldWrapper\\"><div class=\\"euiSwitch\\"><button id=\\"generated-id\\" aria-checked=\\"true\\" class=\\"euiSwitch__button\\" role=\\"switch\\" type=\\"button\\" aria-labelledby=\\"generated-id\\" data-test-subj=\\"hideToolbarSwitch\\" name=\\"toolbarHide\\" aria-describedby=\\"generated-id-help-0\\"><span class=\\"euiSwitch__body\\"><span class=\\"euiSwitch__thumb\\"></span><span class=\\"euiSwitch__track\\"><span data-euiicon-type=\\"cross\\" class=\\"euiSwitch__icon\\"></span><span data-euiicon-type=\\"check\\" class=\\"euiSwitch__icon euiSwitch__icon--checked\\"></span></span></span></button><span class=\\"euiSwitch__label\\" id=\\"generated-id\\">Hide Toolbar</span></div><div class=\\"euiFormHelpText euiFormRow__text\\" id=\\"generated-id-help-0\\">Hide the toolbar when the mouse is not within the Canvas?</div></div></div></div></div></div></div></div></div></div></div></div>"`;

12
x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/autoplay_settings.stories.storyshot generated
View file

@ -101,7 +101,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
className="euiFormControlLayout__childrenWrapper"
>
<input
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
className="euiFieldText euiFieldText--compressed"
id="generated-id"
onBlur={[Function]}
@ -114,7 +114,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
Use shorthand notation, like 30s, 10m, or 1h
</div>
@ -264,7 +264,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
className="euiFormControlLayout__childrenWrapper"
>
<input
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
className="euiFieldText euiFieldText--compressed"
id="generated-id"
onBlur={[Function]}
@ -277,7 +277,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
Use shorthand notation, like 30s, 10m, or 1h
</div>
@ -427,7 +427,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
className="euiFormControlLayout__childrenWrapper"
>
<input
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
className="euiFieldText euiFieldText--compressed"
id="generated-id"
onBlur={[Function]}
@ -440,7 +440,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
Use shorthand notation, like 30s, 10m, or 1h
</div>

12
x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/toolbar_settings.stories.storyshot generated
View file

@ -34,7 +34,7 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: off 1`
>
<button
aria-checked={false}
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
aria-labelledby="generated-id"
className="euiSwitch__button"
data-test-subj="hideToolbarSwitch"
@ -78,7 +78,7 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: off 1`
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
Hide the toolbar when the mouse is not within the Canvas?
</div>
@ -122,7 +122,7 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: on 1`]
>
<button
aria-checked={true}
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
aria-labelledby="generated-id"
className="euiSwitch__button"
data-test-subj="hideToolbarSwitch"
@ -166,7 +166,7 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: on 1`]
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
Hide the toolbar when the mouse is not within the Canvas?
</div>
@ -210,7 +210,7 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings contextual 1`] =
>
<button
aria-checked={false}
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
aria-labelledby="generated-id"
className="euiSwitch__button"
data-test-subj="hideToolbarSwitch"
@ -254,7 +254,7 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings contextual 1`] =
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
Hide the toolbar when the mouse is not within the Canvas?
</div>

2
x-pack/plugins/data_visualizer/public/application/common/components/filebeat_config_flyout/filebeat_config_flyout.tsx
View file

@ -64,7 +64,7 @@ export const FilebeatConfigFlyout: FC<Props> = ({
}, [username, index, ingestPipelineId, results]);
return (
<EuiFlyout onClose={closeFlyout} hideCloseButton size={'m'}>
<EuiFlyout onClose={closeFlyout} hideCloseButton size={'m'} ownFocus={false}>
<EuiFlyoutBody>
<EuiFlexGroup>
<Contents value={fileBeatConfig} username={username} index={index} />

1
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/personal_dashboard_sidebar/private_sources_sidebar.tsx
View file

@ -43,7 +43,6 @@ export const PrivateSourcesSidebar = () => {
return (
<>
<ViewContentHeader title={PAGE_TITLE} description={PAGE_DESCRIPTION} />
{/* @ts-expect-error: TODO, uncomment this once EUI 34.x lands in Kibana & `mobileBreakpoints` is a valid prop */}
{id && <EuiSideNav items={navItems} mobileBreakpoints={[]} />}
</>
);

11
x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/list_page/components/create_agent_policy.tsx
View file

@ -5,7 +5,9 @@
* 2.0.
*/
import type { ReactNode } from 'react';
import React, { useState } from 'react';
import type { StyledComponent } from 'styled-components';
import styled from 'styled-components';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
@ -29,7 +31,13 @@ import type { NewAgentPolicy, AgentPolicy } from '../../../../types';
import { useCapabilities, useStartServices, sendCreateAgentPolicy } from '../../../../hooks';
import { AgentPolicyForm, agentPolicyFormValidation } from '../../components';
const FlyoutWithHigherZIndex = styled(EuiFlyout)`
// TODO: EUI team follow up on complex types and styled-components `styled`
// https://github.com/elastic/eui/issues/4855
const FlyoutWithHigherZIndex: StyledComponent<
typeof EuiFlyout,
{},
{ children?: ReactNode }
> = styled(EuiFlyout)`
z-index: ${(props) => props.theme.eui.euiZLevel5};
`;
@ -39,6 +47,7 @@ interface Props extends EuiFlyoutProps {
export const CreateAgentPolicyFlyout: React.FunctionComponent<Props> = ({
onClose,
as,
...restOfProps
}) => {
const { notifications } = useStartServices();

144
x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap generated
View file

@ -314,89 +314,99 @@ exports[`extend index management ilm summary extension should return extension w
</span>
</div>
<EuiText
color="default"
size="s"
>
<div
className="euiText euiText--small"
>
illegal_argument_exception
:
setting [index.lifecycle.rollover_alias] for index [testy3] is empty or not defined
<EuiSpacer
size="s"
<EuiTextColor
color="default"
component="div"
>
<div
className="euiSpacer euiSpacer--s"
/>
</EuiSpacer>
<EuiPopover
anchorPosition="downCenter"
button={
<EuiButtonEmpty
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Stack trace"
id="xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.stackTraceButton"
values={Object {}}
/>
</EuiButtonEmpty>
}
closePopover={[Function]}
display="inlineBlock"
hasArrow={true}
id="stackPopover"
isOpen={false}
ownFocus={true}
panelPaddingSize="m"
>
<div
className="euiPopover euiPopover--anchorDownCenter"
id="stackPopover"
className="euiTextColor euiTextColor--default"
>
<div
className="euiPopover__anchor"
illegal_argument_exception
:
setting [index.lifecycle.rollover_alias] for index [testy3] is empty or not defined
<EuiSpacer
size="s"
>
<EuiButtonEmpty
onClick={[Function]}
>
<button
className="euiButtonEmpty euiButtonEmpty--primary"
disabled={false}
<div
className="euiSpacer euiSpacer--s"
/>
</EuiSpacer>
<EuiPopover
anchorPosition="downCenter"
button={
<EuiButtonEmpty
onClick={[Function]}
type="button"
>
<EuiButtonContent
className="euiButtonEmpty__content"
iconSide="left"
iconSize="m"
textProps={
Object {
"className": "euiButtonEmpty__text",
}
}
<FormattedMessage
defaultMessage="Stack trace"
id="xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.stackTraceButton"
values={Object {}}
/>
</EuiButtonEmpty>
}
closePopover={[Function]}
display="inlineBlock"
hasArrow={true}
id="stackPopover"
isOpen={false}
ownFocus={true}
panelPaddingSize="m"
>
<div
className="euiPopover euiPopover--anchorDownCenter"
id="stackPopover"
>
<div
className="euiPopover__anchor"
>
<EuiButtonEmpty
onClick={[Function]}
>
<span
className="euiButtonContent euiButtonEmpty__content"
<button
className="euiButtonEmpty euiButtonEmpty--primary"
disabled={false}
onClick={[Function]}
type="button"
>
<span
className="euiButtonEmpty__text"
<EuiButtonContent
className="euiButtonEmpty__content"
iconSide="left"
iconSize="m"
textProps={
Object {
"className": "euiButtonEmpty__text",
}
}
>
<FormattedMessage
defaultMessage="Stack trace"
id="xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.stackTraceButton"
values={Object {}}
<span
className="euiButtonContent euiButtonEmpty__content"
>
Stack trace
</FormattedMessage>
</span>
</span>
</EuiButtonContent>
</button>
</EuiButtonEmpty>
</div>
<span
className="euiButtonEmpty__text"
>
<FormattedMessage
defaultMessage="Stack trace"
id="xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.stackTraceButton"
values={Object {}}
>
Stack trace
</FormattedMessage>
</span>
</span>
</EuiButtonContent>
</button>
</EuiButtonEmpty>
</div>
</div>
</EuiPopover>
</div>
</EuiPopover>
</EuiTextColor>
</div>
</EuiText>
</div>

15
x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_table.test.tsx.snap generated
View file

@ -58,16 +58,16 @@ exports[`policy table should show empty state when there are not any policies 1`
data-euiicon-type="managementApp"
/>
<div
class="euiSpacer euiSpacer--s"
class="euiSpacer euiSpacer--m"
/>
<h1
class="euiTitle euiTitle--medium"
>
Create your first index lifecycle policy
</h1>
<span
class="euiTextColor euiTextColor--subdued"
>
<h1
class="euiTitle euiTitle--medium"
>
Create your first index lifecycle policy
</h1>
<div
class="euiSpacer euiSpacer--m"
/>
@ -82,9 +82,6 @@ exports[`policy table should show empty state when there are not any policies 1`
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="euiSpacer euiSpacer--s"
/>
<button
class="euiButton euiButton--primary euiButton--fill"
data-test-subj="createPolicyButton"

22
x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx
View file

@ -6,7 +6,8 @@
*/
import React from 'react';
import { shallow } from 'enzyme';
import { ReactWrapper, shallow } from 'enzyme';
import { act } from 'react-dom/test-utils';
import { mountWithIntl } from '@kbn/test/jest';
import { EuiDataGrid } from '@elastic/eui';
import { IAggType, IFieldFormat } from 'src/plugins/data/public';
@ -83,6 +84,13 @@ function copyData(data: LensMultiTable): LensMultiTable {
return JSON.parse(JSON.stringify(data));
}
async function waitForWrapperUpdate(wrapper: ReactWrapper) {
await act(async () => {
await new Promise((r) => setTimeout(r, 0));
});
wrapper.update();
}
describe('DatatableComponent', () => {
let onDispatchEvent: jest.Mock;
@ -149,7 +157,7 @@ describe('DatatableComponent', () => {
).toMatchSnapshot();
});
test('it invokes executeTriggerActions with correct context on click on top value', () => {
test('it invokes executeTriggerActions with correct context on click on top value', async () => {
const { args, data } = sampleArgs();
const wrapper = mountWithIntl(
@ -173,6 +181,8 @@ describe('DatatableComponent', () => {
wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('focus');
await waitForWrapperUpdate(wrapper);
wrapper.find('[data-test-subj="lensDatatableFilterOut"]').first().simulate('click');
expect(onDispatchEvent).toHaveBeenCalledWith({
@ -192,7 +202,7 @@ describe('DatatableComponent', () => {
});
});
test('it invokes executeTriggerActions with correct context on click on timefield', () => {
test('it invokes executeTriggerActions with correct context on click on timefield', async () => {
const { args, data } = sampleArgs();
const wrapper = mountWithIntl(
@ -216,6 +226,8 @@ describe('DatatableComponent', () => {
wrapper.find('[data-test-subj="dataGridRowCell"]').at(1).simulate('focus');
await waitForWrapperUpdate(wrapper);
wrapper.find('[data-test-subj="lensDatatableFilterFor"]').first().simulate('click');
expect(onDispatchEvent).toHaveBeenCalledWith({
@ -235,7 +247,7 @@ describe('DatatableComponent', () => {
});
});
test('it invokes executeTriggerActions with correct context on click on timefield from range', () => {
test('it invokes executeTriggerActions with correct context on click on timefield from range', async () => {
const data: LensMultiTable = {
type: 'lens_multitable',
tables: {
@ -298,6 +310,8 @@ describe('DatatableComponent', () => {
wrapper.find('[data-test-subj="dataGridRowCell"]').at(0).simulate('focus');
await waitForWrapperUpdate(wrapper);
wrapper.find('[data-test-subj="lensDatatableFilterFor"]').first().simulate('click');
expect(onDispatchEvent).toHaveBeenCalledWith({

96
x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap generated
View file

@ -1417,19 +1417,29 @@ exports[`UploadLicense should display an error when ES says license is expired 1
</span>
</div>
<EuiText
color="default"
size="s"
>
<div
className="euiText euiText--small"
>
<ul>
<li
className="euiForm__error"
key="0"
<EuiTextColor
color="default"
component="div"
>
<div
className="euiTextColor euiTextColor--default"
>
The supplied license has expired.
</li>
</ul>
<ul>
<li
className="euiForm__error"
key="0"
>
The supplied license has expired.
</li>
</ul>
</div>
</EuiTextColor>
</div>
</EuiText>
</div>
@ -2149,19 +2159,29 @@ exports[`UploadLicense should display an error when ES says license is invalid 1
</span>
</div>
<EuiText
color="default"
size="s"
>
<div
className="euiText euiText--small"
>
<ul>
<li
className="euiForm__error"
key="0"
<EuiTextColor
color="default"
component="div"
>
<div
className="euiTextColor euiTextColor--default"
>
The supplied license is not valid for this product.
</li>
</ul>
<ul>
<li
className="euiForm__error"
key="0"
>
The supplied license is not valid for this product.
</li>
</ul>
</div>
</EuiTextColor>
</div>
</EuiText>
</div>
@ -2881,19 +2901,29 @@ exports[`UploadLicense should display an error when submitting invalid JSON 1`]
</span>
</div>
<EuiText
color="default"
size="s"
>
<div
className="euiText euiText--small"
>
<ul>
<li
className="euiForm__error"
key="0"
<EuiTextColor
color="default"
component="div"
>
<div
className="euiTextColor euiTextColor--default"
>
Error encountered uploading license: Check your license file.
</li>
</ul>
<ul>
<li
className="euiForm__error"
key="0"
>
Error encountered uploading license: Check your license file.
</li>
</ul>
</div>
</EuiTextColor>
</div>
</EuiText>
</div>
@ -3613,19 +3643,29 @@ exports[`UploadLicense should display error when ES returns error 1`] = `
</span>
</div>
<EuiText
color="default"
size="s"
>
<div
className="euiText euiText--small"
>
<ul>
<li
className="euiForm__error"
key="0"
<EuiTextColor
color="default"
component="div"
>
<div
className="euiTextColor euiTextColor--default"
>
Error encountered uploading license: Can not upgrade to a production license unless TLS is configured or security is disabled
</li>
</ul>
<ul>
<li
className="euiForm__error"
key="0"
>
Error encountered uploading license: Can not upgrade to a production license unless TLS is configured or security is disabled
</li>
</ul>
</div>
</EuiTextColor>
</div>
</EuiText>
</div>

335
x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_edit/edit_action_flyout.tsx
View file

@ -22,7 +22,6 @@ import {
EuiFlyoutHeader,
EuiForm,
EuiFormRow,
EuiOverlayMask,
EuiSelect,
EuiTitle,
} from '@elastic/eui';
@ -129,188 +128,180 @@ export const EditActionFlyout: FC<Required<EditAction>> = ({ closeFlyout, item }
};
return (
<EuiOverlayMask>
<EuiFlyout
onClose={closeFlyout}
hideCloseButton
aria-labelledby="analyticsEditFlyoutTitle"
data-test-subj="mlAnalyticsEditFlyout"
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2 id="analyticsEditFlyoutTitle">
{i18n.translate('xpack.ml.dataframe.analyticsList.editFlyoutTitle', {
defaultMessage: 'Edit {jobId}',
values: {
jobId,
<EuiFlyout
onClose={closeFlyout}
hideCloseButton
aria-labelledby="analyticsEditFlyoutTitle"
data-test-subj="mlAnalyticsEditFlyout"
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2 id="analyticsEditFlyoutTitle">
{i18n.translate('xpack.ml.dataframe.analyticsList.editFlyoutTitle', {
defaultMessage: 'Edit {jobId}',
values: {
jobId,
},
})}
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiForm>
<EuiFormRow
label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.allowLazyStartLabel',
{
defaultMessage: 'Allow lazy start',
}
)}
>
<EuiSelect
aria-label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.allowLazyStartAriaLabel',
{
defaultMessage: 'Update allow lazy start.',
}
)}
data-test-subj="mlAnalyticsEditFlyoutAllowLazyStartInput"
options={[
{
value: 'true',
text: i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.allowLazyStartTrueValue',
{
defaultMessage: 'True',
}
),
},
})}
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiForm>
<EuiFormRow
label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.allowLazyStartLabel',
{
defaultMessage: 'Allow lazy start',
}
)}
>
<EuiSelect
aria-label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.allowLazyStartAriaLabel',
{
defaultMessage: 'Update allow lazy start.',
}
)}
data-test-subj="mlAnalyticsEditFlyoutAllowLazyStartInput"
options={[
{
value: 'true',
text: i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.allowLazyStartTrueValue',
{
defaultMessage: 'True',
}
),
},
{
value: 'false',
text: i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.allowLazyStartFalseValue',
{
defaultMessage: 'False',
}
),
},
]}
value={allowLazyStart}
onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
setAllowLazyStart(e.target.value)
}
/>
</EuiFormRow>
<EuiFormRow
label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.descriptionLabel',
{
defaultMessage: 'Description',
}
)}
>
<EuiFieldText
data-test-subj="mlAnalyticsEditFlyoutDescriptionInput"
value={description}
onChange={(e) => setDescription(e.target.value)}
aria-label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.descriptionAriaLabel',
{
defaultMessage: 'Update the job description.',
}
)}
/>
</EuiFormRow>
<EuiFormRow
helpText={
state !== DATA_FRAME_TASK_STATE.STOPPED &&
i18n.translate('xpack.ml.dataframe.analyticsList.editFlyout.modelMemoryHelpText', {
defaultMessage: 'Model memory limit cannot be edited until the job has stopped.',
})
value: 'false',
text: i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.allowLazyStartFalseValue',
{
defaultMessage: 'False',
}
),
},
]}
value={allowLazyStart}
onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
setAllowLazyStart(e.target.value)
}
label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.modelMemoryLimitLabel',
/>
</EuiFormRow>
<EuiFormRow
label={i18n.translate('xpack.ml.dataframe.analyticsList.editFlyout.descriptionLabel', {
defaultMessage: 'Description',
})}
>
<EuiFieldText
data-test-subj="mlAnalyticsEditFlyoutDescriptionInput"
value={description}
onChange={(e) => setDescription(e.target.value)}
aria-label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.descriptionAriaLabel',
{
defaultMessage: 'Model memory limit',
defaultMessage: 'Update the job description.',
}
)}
/>
</EuiFormRow>
<EuiFormRow
helpText={
state !== DATA_FRAME_TASK_STATE.STOPPED &&
i18n.translate('xpack.ml.dataframe.analyticsList.editFlyout.modelMemoryHelpText', {
defaultMessage: 'Model memory limit cannot be edited until the job has stopped.',
})
}
label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.modelMemoryLimitLabel',
{
defaultMessage: 'Model memory limit',
}
)}
isInvalid={mmlValidationError !== undefined}
error={mmlValidationError}
>
<EuiFieldText
data-test-subj="mlAnalyticsEditFlyoutmodelMemoryLimitInput"
isInvalid={mmlValidationError !== undefined}
error={mmlValidationError}
>
<EuiFieldText
data-test-subj="mlAnalyticsEditFlyoutmodelMemoryLimitInput"
isInvalid={mmlValidationError !== undefined}
readOnly={state !== DATA_FRAME_TASK_STATE.STOPPED}
value={modelMemoryLimit}
onChange={(e) => setModelMemoryLimit(e.target.value)}
aria-label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.modelMemoryLimitAriaLabel',
{
defaultMessage: 'Update the model memory limit.',
}
)}
/>
</EuiFormRow>
<EuiFormRow
helpText={
state !== DATA_FRAME_TASK_STATE.STOPPED &&
i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.maxNumThreadsHelpText',
{
defaultMessage:
'Maximum number of threads cannot be edited until the job has stopped.',
}
)
}
label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.maxNumThreadsLabel',
readOnly={state !== DATA_FRAME_TASK_STATE.STOPPED}
value={modelMemoryLimit}
onChange={(e) => setModelMemoryLimit(e.target.value)}
aria-label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.modelMemoryLimitAriaLabel',
{
defaultMessage: 'Maximum number of threads',
defaultMessage: 'Update the model memory limit.',
}
)}
isInvalid={maxNumThreads === 0}
error={
maxNumThreads === 0 &&
i18n.translate('xpack.ml.dataframe.analyticsList.editFlyout.maxNumThreadsError', {
defaultMessage: 'The minimum value is 1.',
})
/>
</EuiFormRow>
<EuiFormRow
helpText={
state !== DATA_FRAME_TASK_STATE.STOPPED &&
i18n.translate('xpack.ml.dataframe.analyticsList.editFlyout.maxNumThreadsHelpText', {
defaultMessage:
'Maximum number of threads cannot be edited until the job has stopped.',
})
}
label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.maxNumThreadsLabel',
{
defaultMessage: 'Maximum number of threads',
}
>
<EuiFieldNumber
aria-label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.maxNumThreadsAriaLabel',
{
defaultMessage:
'Update the maximum number of threads to be used by the analysis.',
}
)}
data-test-subj="mlAnalyticsEditFlyoutMaxNumThreadsLimitInput"
onChange={(e) =>
setMaxNumThreads(e.target.value === '' ? undefined : +e.target.value)
)}
isInvalid={maxNumThreads === 0}
error={
maxNumThreads === 0 &&
i18n.translate('xpack.ml.dataframe.analyticsList.editFlyout.maxNumThreadsError', {
defaultMessage: 'The minimum value is 1.',
})
}
>
<EuiFieldNumber
aria-label={i18n.translate(
'xpack.ml.dataframe.analyticsList.editFlyout.maxNumThreadsAriaLabel',
{
defaultMessage:
'Update the maximum number of threads to be used by the analysis.',
}
step={1}
min={1}
readOnly={state !== DATA_FRAME_TASK_STATE.STOPPED}
value={maxNumThreads}
/>
</EuiFormRow>
</EuiForm>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
{i18n.translate('xpack.ml.dataframe.analyticsList.editFlyoutCancelButtonText', {
defaultMessage: 'Cancel',
})}
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
data-test-subj="mlAnalyticsEditFlyoutUpdateButton"
onClick={onSubmit}
fill
isDisabled={updateButtonDisabled}
>
{i18n.translate('xpack.ml.dataframe.analyticsList.editFlyoutUpdateButtonText', {
defaultMessage: 'Update',
})}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
</EuiOverlayMask>
)}
data-test-subj="mlAnalyticsEditFlyoutMaxNumThreadsLimitInput"
onChange={(e) =>
setMaxNumThreads(e.target.value === '' ? undefined : +e.target.value)
}
step={1}
min={1}
readOnly={state !== DATA_FRAME_TASK_STATE.STOPPED}
value={maxNumThreads}
/>
</EuiFormRow>
</EuiForm>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
{i18n.translate('xpack.ml.dataframe.analyticsList.editFlyoutCancelButtonText', {
defaultMessage: 'Cancel',
})}
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
data-test-subj="mlAnalyticsEditFlyoutUpdateButton"
onClick={onSubmit}
fill
isDisabled={updateButtonDisabled}
>
{i18n.translate('xpack.ml.dataframe.analyticsList.editFlyoutUpdateButtonText', {
defaultMessage: 'Update',
})}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
);
};

54
x-pack/plugins/monitoring/public/components/no_data/__snapshots__/checker_errors.test.js.snap generated
View file

@ -22,33 +22,37 @@ Array [
<div
class="euiText euiText--small"
>
<p>
There were some errors encountered in trying to check Elasticsearch settings. You need administrator rights to check the settings and, if needed, to enable the monitoring collection setting.
</p>
<dl
class="euiDescriptionList euiDescriptionList--row"
<div
class="euiTextColor euiTextColor--default"
>
<dt
class="euiDescriptionList__title"
<p>
There were some errors encountered in trying to check Elasticsearch settings. You need administrator rights to check the settings and, if needed, to enable the monitoring collection setting.
</p>
<dl
class="euiDescriptionList euiDescriptionList--row"
>
403 Forbidden
</dt>
<dd
class="euiDescriptionList__description"
>
no access for you
</dd>
<dt
class="euiDescriptionList__title"
>
500 Internal Server Error
</dt>
<dd
class="euiDescriptionList__description"
>
An internal server error occurred
</dd>
</dl>
<dt
class="euiDescriptionList__title"
>
403 Forbidden
</dt>
<dd
class="euiDescriptionList__description"
>
no access for you
</dd>
<dt
class="euiDescriptionList__title"
>
500 Internal Server Error
</dt>
<dd
class="euiDescriptionList__description"
>
An internal server error occurred
</dd>
</dl>
</div>
</div>
</div>,
]

8
x-pack/plugins/monitoring/public/components/no_data/__snapshots__/no_data.test.js.snap generated
View file

@ -9,7 +9,7 @@ exports[`NoData should show a default message if reason is unknown 1`] = `
>
No monitoring data found.
</h1>
<main
<div
class="euiPageBody euiPageBody--borderRadiusNone euiPageBody--restrictWidth-custom"
style="max-width:600px"
>
@ -87,7 +87,7 @@ exports[`NoData should show a default message if reason is unknown 1`] = `
</span>
</button>
</div>
</main>
</div>
</div>
`;
@ -100,7 +100,7 @@ exports[`NoData should show text next to the spinner while checking a setting 1`
>
No monitoring data found.
</h1>
<main
<div
class="euiPageBody euiPageBody--borderRadiusNone euiPageBody--restrictWidth-custom"
style="max-width:600px"
>
@ -178,6 +178,6 @@ exports[`NoData should show text next to the spinner while checking a setting 1`
</span>
</button>
</div>
</main>
</div>
</div>
`;

4
x-pack/plugins/monitoring/public/components/page_loading/__snapshots__/page_loading.test.js.snap generated
View file

@ -5,7 +5,7 @@ exports[`PageLoading should show a simple page loading component 1`] = `
class="euiPage euiPage--paddingMedium euiPage--grow"
style="height:calc(100vh - 50px)"
>
<main
<div
class="euiPageBody euiPageBody--borderRadiusNone"
>
<div
@ -37,6 +37,6 @@ exports[`PageLoading should show a simple page loading component 1`] = `
</div>
</div>
</div>
</main>
</div>
</div>
`;

2
x-pack/plugins/observability/public/components/app/cases/create/flyout.test.tsx
View file

@ -49,7 +49,7 @@ describe('CreateCaseFlyout', () => {
</EuiThemeProvider>
);
wrapper.find('.euiFlyout__closeButton').first().simulate('click');
wrapper.find(`[data-test-subj='euiFlyoutCloseButton']`).first().simulate('click');
expect(onCloseFlyout).toBeCalled();
});
});

10
x-pack/plugins/observability/public/components/app/cases/create/flyout.tsx
View file

@ -5,8 +5,8 @@
* 2.0.
*/
import React, { memo } from 'react';
import styled from 'styled-components';
import React, { memo, ReactNode } from 'react';
import styled, { StyledComponent } from 'styled-components';
import { EuiFlyout, EuiFlyoutHeader, EuiTitle, EuiFlyoutBody } from '@elastic/eui';
import * as i18n from '../translations';
@ -20,7 +20,11 @@ export interface CreateCaseModalProps {
onSuccess: (theCase: Case) => Promise<void>;
}
const StyledFlyout = styled(EuiFlyout)`
// TODO: EUI team follow up on complex types and styled-components `styled`
// https://github.com/elastic/eui/issues/4855
const StyledFlyout: StyledComponent<typeof EuiFlyout, {}, { children?: ReactNode }> = styled(
EuiFlyout
)`
${({ theme }) => `
z-index: ${theme.eui.euiZModal};
`}

10
x-pack/plugins/observability/public/components/shared/page_template/page_template.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiSideNavItemType, ExclusiveUnion } from '@elastic/eui';
import { EuiSideNavItemType } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { useMemo } from 'react';
import { matchPath, useLocation } from 'react-router-dom';
@ -28,13 +28,9 @@ export type WrappedPageTemplateProps = Pick<
| 'pageContentProps'
| 'pageHeader'
| 'restrictWidth'
| 'template'
| 'isEmptyState'
> &
// recreate the exclusivity of bottomBar-related props
ExclusiveUnion<
{ template?: 'default' } & Pick<KibanaPageTemplateProps, 'bottomBar' | 'bottomBarProps'>,
{ template: KibanaPageTemplateProps['template'] }
>;
>;
export interface ObservabilityPageTemplateDependencies {
currentAppId$: Observable<string | undefined>;

18
x-pack/plugins/reporting/public/components/__snapshots__/screen_capture_panel_content.test.tsx.snap generated
View file

@ -64,7 +64,7 @@ exports[`ScreenCapturePanelContent properly renders a view with "canvas" layout
className="euiFormRow__fieldWrapper"
>
<EuiSwitch
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
checked={false}
data-test-subj="reportModeToggle"
id="generated-id"
@ -84,7 +84,7 @@ exports[`ScreenCapturePanelContent properly renders a view with "canvas" layout
>
<button
aria-checked={false}
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
aria-labelledby="generated-id"
className="euiSwitch__button"
data-test-subj="reportModeToggle"
@ -148,11 +148,12 @@ exports[`ScreenCapturePanelContent properly renders a view with "canvas" layout
</EuiSwitch>
<EuiFormHelpText
className="euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
key="0"
>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
<FormattedMessage
defaultMessage="Remove borders and footer logo"
@ -503,7 +504,7 @@ exports[`ScreenCapturePanelContent properly renders a view with "print" layout o
className="euiFormRow__fieldWrapper"
>
<EuiSwitch
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
checked={false}
data-test-subj="usePrintLayout"
id="generated-id"
@ -523,7 +524,7 @@ exports[`ScreenCapturePanelContent properly renders a view with "print" layout o
>
<button
aria-checked={false}
aria-describedby="generated-id-help"
aria-describedby="generated-id-help-0"
aria-labelledby="generated-id"
className="euiSwitch__button"
data-test-subj="usePrintLayout"
@ -587,11 +588,12 @@ exports[`ScreenCapturePanelContent properly renders a view with "print" layout o
</EuiSwitch>
<EuiFormHelpText
className="euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
key="0"
>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
id="generated-id-help-0"
>
<FormattedMessage
defaultMessage="Uses multiple pages, showing at most 2 visualizations per page"

380
x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap generated
View file

@ -36,161 +36,68 @@ Array [
ownFocus={true}
size="s"
>
<EuiWindowEvent
event="keydown"
handler={[Function]}
/>
<EuiOverlayMask
headerZindexLocation="below"
onClick={[Function]}
<div
data-eui="EuiFlyout"
data-test-subj="reportInfoFlyout"
role="dialog"
>
<Portal
containerInfo={
<div
class="euiOverlayMask euiOverlayMask--belowHeader"
/>
}
<button
data-test-subj="euiFlyoutCloseButton"
onClick={[Function]}
type="button"
/>
</EuiOverlayMask>
<EuiFocusTrap
clickOutsideDisables={false}
>
<div
data-eui="EuiFocusTrap"
<EuiFlyoutHeader
hasBorder={true}
>
<div
aria-labelledby="flyoutTitle"
className="euiFlyout euiFlyout--small euiFlyout--paddingLarge"
data-test-subj="reportInfoFlyout"
role="dialog"
tabIndex={0}
className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<EuiI18n
default="Close this dialog"
token="euiFlyout.closeAriaLabel"
<EuiTitle
size="m"
>
<EuiButtonIcon
aria-label="Close this dialog"
className="euiFlyout__closeButton"
color="text"
data-test-subj="euiFlyoutCloseButton"
iconType="cross"
onClick={[Function]}
<h2
className="euiTitle euiTitle--medium"
id="flyoutTitle"
>
<button
aria-label="Close this dialog"
className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
data-test-subj="euiFlyoutCloseButton"
disabled={false}
onClick={[Function]}
type="button"
>
<EuiIcon
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
size="m"
type="cross"
>
<span
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
size="m"
/>
</EuiIcon>
</button>
</EuiButtonIcon>
</EuiI18n>
<EuiFlyoutHeader
hasBorder={true}
>
<div
className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<EuiTitle
size="m"
>
<h2
className="euiTitle euiTitle--medium"
id="flyoutTitle"
>
Unable to fetch report info
</h2>
</EuiTitle>
</div>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<div
className="euiFlyoutBody"
>
<div
className="euiFlyoutBody__overflow"
>
<div
className="euiFlyoutBody__overflowContent"
>
<EuiText>
<div
className="euiText euiText--medium"
>
Could not fetch the job info
</div>
</EuiText>
</div>
</div>
</div>
</EuiFlyoutBody>
Unable to fetch report info
</h2>
</EuiTitle>
</div>
</div>
</EuiFocusTrap>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<div
className="euiFlyoutBody"
>
<div
className="euiFlyoutBody__overflow"
tabIndex={0}
>
<div
className="euiFlyoutBody__overflowContent"
>
<EuiText>
<div
className="euiText euiText--medium"
>
Could not fetch the job info
</div>
</EuiText>
</div>
</div>
</div>
</EuiFlyoutBody>
</div>
</EuiFlyout>,
<div
aria-labelledby="flyoutTitle"
className="euiFlyout euiFlyout--small euiFlyout--paddingLarge"
data-eui="EuiFlyout"
data-test-subj="reportInfoFlyout"
role="dialog"
tabIndex={0}
>
<EuiI18n
default="Close this dialog"
token="euiFlyout.closeAriaLabel"
>
<EuiButtonIcon
aria-label="Close this dialog"
className="euiFlyout__closeButton"
color="text"
data-test-subj="euiFlyoutCloseButton"
iconType="cross"
onClick={[Function]}
>
<button
aria-label="Close this dialog"
className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
data-test-subj="euiFlyoutCloseButton"
disabled={false}
onClick={[Function]}
type="button"
>
<EuiIcon
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
size="m"
type="cross"
>
<span
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
size="m"
/>
</EuiIcon>
</button>
</EuiButtonIcon>
</EuiI18n>
<button
data-test-subj="euiFlyoutCloseButton"
onClick={[Function]}
type="button"
/>
<EuiFlyoutHeader
hasBorder={true}
>
@ -215,6 +122,7 @@ Array [
>
<div
className="euiFlyoutBody__overflow"
tabIndex={0}
>
<div
className="euiFlyoutBody__overflowContent"
@ -243,159 +151,66 @@ Array [
ownFocus={true}
size="s"
>
<EuiWindowEvent
event="keydown"
handler={[Function]}
/>
<EuiOverlayMask
headerZindexLocation="below"
onClick={[Function]}
<div
data-eui="EuiFlyout"
data-test-subj="reportInfoFlyout"
role="dialog"
>
<Portal
containerInfo={
<div
class="euiOverlayMask euiOverlayMask--belowHeader"
/>
}
<button
data-test-subj="euiFlyoutCloseButton"
onClick={[Function]}
type="button"
/>
</EuiOverlayMask>
<EuiFocusTrap
clickOutsideDisables={false}
>
<div
data-eui="EuiFocusTrap"
<EuiFlyoutHeader
hasBorder={true}
>
<div
aria-labelledby="flyoutTitle"
className="euiFlyout euiFlyout--small euiFlyout--paddingLarge"
data-test-subj="reportInfoFlyout"
role="dialog"
tabIndex={0}
className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<EuiI18n
default="Close this dialog"
token="euiFlyout.closeAriaLabel"
<EuiTitle
size="m"
>
<EuiButtonIcon
aria-label="Close this dialog"
className="euiFlyout__closeButton"
color="text"
data-test-subj="euiFlyoutCloseButton"
iconType="cross"
onClick={[Function]}
<h2
className="euiTitle euiTitle--medium"
id="flyoutTitle"
>
<button
aria-label="Close this dialog"
className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
data-test-subj="euiFlyoutCloseButton"
disabled={false}
onClick={[Function]}
type="button"
>
<EuiIcon
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
size="m"
type="cross"
>
<span
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
size="m"
/>
</EuiIcon>
</button>
</EuiButtonIcon>
</EuiI18n>
<EuiFlyoutHeader
hasBorder={true}
>
<div
className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<EuiTitle
size="m"
>
<h2
className="euiTitle euiTitle--medium"
id="flyoutTitle"
>
Job Info
</h2>
</EuiTitle>
</div>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<div
className="euiFlyoutBody"
>
<div
className="euiFlyoutBody__overflow"
>
<div
className="euiFlyoutBody__overflowContent"
>
<EuiText>
<div
className="euiText euiText--medium"
/>
</EuiText>
</div>
</div>
</div>
</EuiFlyoutBody>
Job Info
</h2>
</EuiTitle>
</div>
</div>
</EuiFocusTrap>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<div
className="euiFlyoutBody"
>
<div
className="euiFlyoutBody__overflow"
tabIndex={0}
>
<div
className="euiFlyoutBody__overflowContent"
>
<EuiText>
<div
className="euiText euiText--medium"
/>
</EuiText>
</div>
</div>
</div>
</EuiFlyoutBody>
</div>
</EuiFlyout>,
<div
aria-labelledby="flyoutTitle"
className="euiFlyout euiFlyout--small euiFlyout--paddingLarge"
data-eui="EuiFlyout"
data-test-subj="reportInfoFlyout"
role="dialog"
tabIndex={0}
>
<EuiI18n
default="Close this dialog"
token="euiFlyout.closeAriaLabel"
>
<EuiButtonIcon
aria-label="Close this dialog"
className="euiFlyout__closeButton"
color="text"
data-test-subj="euiFlyoutCloseButton"
iconType="cross"
onClick={[Function]}
>
<button
aria-label="Close this dialog"
className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
data-test-subj="euiFlyoutCloseButton"
disabled={false}
onClick={[Function]}
type="button"
>
<EuiIcon
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
size="m"
type="cross"
>
<span
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
size="m"
/>
</EuiIcon>
</button>
</EuiButtonIcon>
</EuiI18n>
<button
data-test-subj="euiFlyoutCloseButton"
onClick={[Function]}
type="button"
/>
<EuiFlyoutHeader
hasBorder={true}
>
@ -420,6 +235,7 @@ Array [
>
<div
className="euiFlyoutBody__overflow"
tabIndex={0}
>
<div
className="euiFlyoutBody__overflowContent"

61
x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/privilege_summary/privilege_summary.tsx
View file

@ -12,7 +12,6 @@ import {
EuiFlyoutBody,
EuiFlyoutFooter,
EuiFlyoutHeader,
EuiOverlayMask,
EuiTitle,
} from '@elastic/eui';
import React, { Fragment, useState } from 'react';
@ -47,37 +46,39 @@ export const PrivilegeSummary = (props: Props) => {
/>
</EuiButtonEmpty>
{isOpen && (
<EuiOverlayMask headerZindexLocation="below">
<EuiFlyout onClose={() => setIsOpen(false)} size={flyoutSize}>
<EuiFlyoutHeader>
<EuiTitle size="m">
<h2>
<FormattedMessage
id="xpack.security.management.editRole.privilegeSummary.modalHeaderTitle"
defaultMessage="Privilege summary"
/>
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<PrivilegeSummaryTable
role={props.role}
spaces={props.spaces}
kibanaPrivileges={props.kibanaPrivileges}
canCustomizeSubFeaturePrivileges={props.canCustomizeSubFeaturePrivileges}
spacesApiUi={props.spacesApiUi}
/>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiButton onClick={() => setIsOpen(false)}>
<EuiFlyout
onClose={() => setIsOpen(false)}
size={flyoutSize}
maskProps={{ headerZindexLocation: 'below' }}
>
<EuiFlyoutHeader>
<EuiTitle size="m">
<h2>
<FormattedMessage
id="xpack.security.management.editRole.privilegeSummary.closeSummaryButtonText"
defaultMessage="Close"
id="xpack.security.management.editRole.privilegeSummary.modalHeaderTitle"
defaultMessage="Privilege summary"
/>
</EuiButton>
</EuiFlyoutFooter>
</EuiFlyout>
</EuiOverlayMask>
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<PrivilegeSummaryTable
role={props.role}
spaces={props.spaces}
kibanaPrivileges={props.kibanaPrivileges}
canCustomizeSubFeaturePrivileges={props.canCustomizeSubFeaturePrivileges}
spacesApiUi={props.spacesApiUi}
/>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiButton onClick={() => setIsOpen(false)}>
<FormattedMessage
id="xpack.security.management.editRole.privilegeSummary.closeSummaryButtonText"
defaultMessage="Close"
/>
</EuiButton>
</EuiFlyoutFooter>
</EuiFlyout>
)}
</Fragment>
);

116
x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/privilege_space_form.tsx
View file

@ -20,7 +20,6 @@ import {
EuiFlyoutHeader,
EuiForm,
EuiFormRow,
EuiOverlayMask,
EuiSpacer,
EuiText,
EuiTitle,
@ -93,64 +92,67 @@ export class PrivilegeSpaceForm extends Component<Props, State> {
public render() {
return (
<EuiOverlayMask headerZindexLocation="below">
<EuiFlyout onClose={this.closeFlyout} size="m" maxWidth={true}>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>
<EuiFlyout
onClose={this.closeFlyout}
size="m"
maxWidth={true}
maskProps={{ headerZindexLocation: 'below' }}
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>
<FormattedMessage
id="xpack.security.management.editRole.spacePrivilegeForm.modalTitle"
defaultMessage="Kibana privileges"
/>
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiErrorBoundary>{this.getForm()}</EuiErrorBoundary>
</EuiFlyoutBody>
<EuiFlyoutFooter>
{this.state.privilegeCalculator.hasSupersededInheritedPrivileges(
this.state.privilegeIndex
) && (
<Fragment>
<EuiCallOut
color="warning"
iconType="alert"
data-test-subj="spaceFormGlobalPermissionsSupersedeWarning"
title={
<FormattedMessage
id="xpack.security.management.editRole.spacePrivilegeForm.supersededWarningTitle"
defaultMessage="Superseded by global privileges"
/>
}
>
<FormattedMessage
id="xpack.security.management.editRole.spacePrivilegeForm.modalTitle"
defaultMessage="Kibana privileges"
id="xpack.security.management.editRole.spacePrivilegeForm.supersededWarning"
defaultMessage="Declared privileges are less permissive than configured global privileges. View the privilege summary to see effective privileges."
/>
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiErrorBoundary>{this.getForm()}</EuiErrorBoundary>
</EuiFlyoutBody>
<EuiFlyoutFooter>
{this.state.privilegeCalculator.hasSupersededInheritedPrivileges(
this.state.privilegeIndex
) && (
<Fragment>
<EuiCallOut
color="warning"
iconType="alert"
data-test-subj="spaceFormGlobalPermissionsSupersedeWarning"
title={
<FormattedMessage
id="xpack.security.management.editRole.spacePrivilegeForm.supersededWarningTitle"
defaultMessage="Superseded by global privileges"
/>
}
>
<FormattedMessage
id="xpack.security.management.editRole.spacePrivilegeForm.supersededWarning"
defaultMessage="Declared privileges are less permissive than configured global privileges. View the privilege summary to see effective privileges."
/>
</EuiCallOut>
<EuiSpacer size="s" />
</Fragment>
)}
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
iconType="cross"
onClick={this.closeFlyout}
flush="left"
data-test-subj={'cancelSpacePrivilegeButton'}
>
<FormattedMessage
id="xpack.security.management.editRole.spacePrivilegeForm.cancelButton"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>{this.getSaveButton()}</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
</EuiOverlayMask>
</EuiCallOut>
<EuiSpacer size="s" />
</Fragment>
)}
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
iconType="cross"
onClick={this.closeFlyout}
flush="left"
data-test-subj={'cancelSpacePrivilegeButton'}
>
<FormattedMessage
id="xpack.security.management.editRole.spacePrivilegeForm.cancelButton"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>{this.getSaveButton()}</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
);
}

34
x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap generated
View file

@ -58,33 +58,33 @@ exports[`<RolesGridPage /> renders permission denied if required 1`] = `
/>
</EuiIcon>
<EuiSpacer
size="s"
size="m"
>
<div
className="euiSpacer euiSpacer--s"
className="euiSpacer euiSpacer--m"
/>
</EuiSpacer>
<EuiTitle
size="m"
>
<h2
className="euiTitle euiTitle--medium"
>
<FormattedMessage
defaultMessage="You need permission to manage roles"
id="xpack.security.management.roles.deniedPermissionTitle"
values={Object {}}
>
You need permission to manage roles
</FormattedMessage>
</h2>
</EuiTitle>
<EuiTextColor
color="subdued"
>
<span
className="euiTextColor euiTextColor--subdued"
>
<EuiTitle
size="m"
>
<h2
className="euiTitle euiTitle--medium"
>
<FormattedMessage
defaultMessage="You need permission to manage roles"
id="xpack.security.management.roles.deniedPermissionTitle"
values={Object {}}
>
You need permission to manage roles
</FormattedMessage>
</h2>
</EuiTitle>
<EuiSpacer
size="m"
>

4
x-pack/plugins/security/server/__snapshots__/prompt_page.test.tsx.snap generated
View file

@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PromptPage renders as expected with additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/some/script1.js\\"></script><script src=\\"/mock-basepath/some/script2.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><main class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--s\\"></div><span class=\\"euiTextColor euiTextColor--subdued\\"><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiSpacer euiSpacer--s\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></main></div></body></html>"`;
exports[`PromptPage renders as expected with additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/some/script1.js\\"></script><script src=\\"/mock-basepath/some/script2.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></div></div></body></html>"`;
exports[`PromptPage renders as expected without additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><main class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--s\\"></div><span class=\\"euiTextColor euiTextColor--subdued\\"><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiSpacer euiSpacer--s\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></main></div></body></html>"`;
exports[`PromptPage renders as expected without additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></div></div></body></html>"`;

2
x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap generated
View file

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`UnauthenticatedPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><main class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--s\\"></div><span class=\\"euiTextColor euiTextColor--subdued\\"><h2 class=\\"euiTitle euiTitle--medium\\">We couldn&#x27;t log you in</h2><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>We hit an authentication error. Please check your credentials and try again. If you still can&#x27;t log in, contact your system administrator.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiSpacer euiSpacer--s\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" data-test-subj=\\"logInButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in</span></span></a></div></div></div></div></main></div></body></html>"`;
exports[`UnauthenticatedPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">We couldn&#x27;t log you in</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>We hit an authentication error. Please check your credentials and try again. If you still can&#x27;t log in, contact your system administrator.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" data-test-subj=\\"logInButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in</span></span></a></div></div></div></div></div></div></body></html>"`;

2
x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap generated
View file

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><main class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--s\\"></div><span class=\\"euiTextColor euiTextColor--subdued\\"><h2 class=\\"euiTitle euiTitle--medium\\">You do not have permission to access the requested page</h2><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>Either go back to the previous page or log in as a different user.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiSpacer euiSpacer--s\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/path/to/logout\\" rel=\\"noreferrer\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in as different user</span></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></main></div></body></html>"`;
exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">You do not have permission to access the requested page</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>Either go back to the previous page or log in as a different user.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/path/to/logout\\" rel=\\"noreferrer\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in as different user</span></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></body></html>"`;

4
x-pack/plugins/security_solution/cypress/integration/timelines/data_providers.spec.ts
View file

@ -12,7 +12,7 @@ import {
TIMELINE_DATA_PROVIDERS_ACTION_MENU,
IS_DRAGGING_DATA_PROVIDERS,
TIMELINE_FLYOUT_HEADER,
TIMELINE_BOTTOM_BAR_CONTAINER,
TIMELINE_FLYOUT,
} from '../../screens/timeline';
import { HOSTS_NAMES_DRAGGABLE } from '../../screens/hosts/all_hosts';
@ -47,7 +47,7 @@ describe('timeline data providers', () => {
it('renders the data provider of a host dragged from the All Hosts widget on the hosts page', () => {
dragAndDropFirstHostToTimeline();
openTimelineUsingToggle();
cy.get(`${TIMELINE_BOTTOM_BAR_CONTAINER} ${TIMELINE_DROPPED_DATA_PROVIDERS}`)
cy.get(`${TIMELINE_FLYOUT} ${TIMELINE_DROPPED_DATA_PROVIDERS}`)
.first()
.invoke('text')
.then((dataProviderText) => {

6
x-pack/plugins/security_solution/cypress/integration/timelines/pagination.spec.ts
View file

@ -6,13 +6,13 @@
*/
import {
TIMELINE_BOTTOM_BAR_CONTAINER,
TIMELINE_EVENT,
TIMELINE_EVENTS_COUNT_NEXT_PAGE,
TIMELINE_EVENTS_COUNT_PER_PAGE,
TIMELINE_EVENTS_COUNT_PER_PAGE_BTN,
TIMELINE_EVENTS_COUNT_PER_PAGE_OPTION,
TIMELINE_EVENTS_COUNT_PREV_PAGE,
TIMELINE_FLYOUT,
} from '../../screens/timeline';
import { cleanKibana } from '../../tasks/common';
@ -51,10 +51,10 @@ describe('Pagination', () => {
it('should be able to go to next / previous page', () => {
cy.intercept('POST', '/internal/bsearch').as('refetch');
cy.get(`${TIMELINE_BOTTOM_BAR_CONTAINER} ${TIMELINE_EVENTS_COUNT_NEXT_PAGE}`).first().click();
cy.get(`${TIMELINE_FLYOUT} ${TIMELINE_EVENTS_COUNT_NEXT_PAGE}`).first().click();
cy.wait('@refetch').its('response.statusCode').should('eq', 200);
cy.get(`${TIMELINE_BOTTOM_BAR_CONTAINER} ${TIMELINE_EVENTS_COUNT_PREV_PAGE}`).first().click();
cy.get(`${TIMELINE_FLYOUT} ${TIMELINE_EVENTS_COUNT_PREV_PAGE}`).first().click();
cy.wait('@refetch').its('response.statusCode').should('eq', 200);
});
});

8
x-pack/plugins/security_solution/cypress/screens/timeline.ts
View file

@ -177,9 +177,11 @@ export const TIMELINE_EVENTS_COUNT_PER_PAGE_BTN = '[data-test-subj="local-events
export const TIMELINE_EVENTS_COUNT_PER_PAGE_OPTION = (itemsPerPage: number) =>
`[data-test-subj="items-per-page-option-${itemsPerPage}"]`;
export const TIMELINE_EVENTS_COUNT_NEXT_PAGE = '[data-test-subj="pagination-button-next"]';
export const TIMELINE_EVENTS_COUNT_NEXT_PAGE =
'[data-test-subj="timeline"] [data-test-subj="pagination-button-next"]';
export const TIMELINE_EVENTS_COUNT_PREV_PAGE = '[data-test-subj="pagination-button-previous"]';
export const TIMELINE_EVENTS_COUNT_PREV_PAGE =
'[data-test-subj="timeline"] [data-test-subj="pagination-button-previous"]';
export const TIMELINE_FIELDS_BUTTON =
'[data-test-subj="timeline"] [data-test-subj="show-field-browser"]';
@ -236,7 +238,7 @@ export const TIMELINE_EDIT_MODAL_SAVE_BUTTON = '[data-test-subj="save-button"]';
export const TIMELINE_EXIT_FULL_SCREEN_BUTTON = '[data-test-subj="exit-full-screen"]';
export const TIMELINE_FLYOUT_WRAPPER = '[data-test-subj="flyout-pane-wrapper"]';
export const TIMELINE_FLYOUT_WRAPPER = '[data-test-subj="flyout-pane"]';
export const TIMELINE_FULL_SCREEN_BUTTON = '[data-test-subj="full-screen-active"]';

2
x-pack/plugins/security_solution/public/cases/components/create/flyout.test.tsx
View file

@ -50,7 +50,7 @@ describe('CreateCaseFlyout', () => {
</TestProviders>
);
wrapper.find('.euiFlyout__closeButton').first().simulate('click');
wrapper.find(`[data-test-subj='euiFlyoutCloseButton']`).first().simulate('click');
expect(onCloseFlyout).toBeCalled();
});
});

10
x-pack/plugins/security_solution/public/cases/components/create/flyout.tsx
View file

@ -5,8 +5,8 @@
* 2.0.
*/
import React, { memo } from 'react';
import styled from 'styled-components';
import React, { memo, ReactNode } from 'react';
import styled, { StyledComponent } from 'styled-components';
import { EuiFlyout, EuiFlyoutHeader, EuiTitle, EuiFlyoutBody } from '@elastic/eui';
import * as i18n from '../../translations';
@ -20,7 +20,11 @@ export interface CreateCaseModalProps {
onSuccess: (theCase: Case) => Promise<void>;
}
const StyledFlyout = styled(EuiFlyout)`
// TODO: EUI team follow up on complex types and styled-components `styled`
// https://github.com/elastic/eui/issues/4855
const StyledFlyout: StyledComponent<typeof EuiFlyout, {}, { children?: ReactNode }> = styled(
EuiFlyout
)`
${({ theme }) => `
z-index: ${theme.eui.euiZModal};
`}

2
x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_comments.tsx
View file

@ -106,7 +106,7 @@ export const AddExceptionComments = memo(function AddExceptionComments({
<EuiFlexGroup gutterSize={'none'}>
<EuiFlexItem grow={false}>
<MyAvatar
name={currentUser !== null ? currentUser.username.toUpperCase() ?? '' : ''}
name={currentUser != null ? currentUser.username.toUpperCase() ?? '' : ''}
size="l"
/>
</EuiFlexItem>

4
x-pack/plugins/security_solution/public/common/components/navigation/use_security_solution_navigation/index.test.tsx
View file

@ -177,7 +177,7 @@ describe('useSecuritySolutionNavigation', () => {
useSecuritySolutionNavigation()
);
const caseNavItem = result.current?.items[0].items?.find(
const caseNavItem = (result.current?.items || [])[0].items?.find(
(item) => item['data-test-subj'] === 'navigation-case'
);
expect(caseNavItem).toMatchInlineSnapshot(`
@ -204,7 +204,7 @@ describe('useSecuritySolutionNavigation', () => {
useSecuritySolutionNavigation()
);
const caseNavItem = result.current?.items[0].items?.find(
const caseNavItem = (result.current?.items || [])[0].items?.find(
(item) => item['data-test-subj'] === 'navigation-case'
);
expect(caseNavItem).toBeFalsy();

1
x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx
View file

@ -154,6 +154,7 @@ export const EndpointDetailsFlyout = memo(() => {
data-test-subj="endpointDetailsFlyout"
size="m"
paddingSize="l"
ownFocus={false}
>
{(show === 'policy_response' || show === 'isolate' || show === 'unisolate') && (
<EndpointDetailsFlyoutHeader hostname={hostDetails?.host?.hostname} />

11
x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap generated
View file

@ -34,15 +34,8 @@ exports[`TrustedAppsGrid renders correctly initially 1`] = `
<div
class="euiEmptyPrompt"
>
<span
class="euiTextColor euiTextColor--subdued"
>
<span>
No items found
</span>
<div
class="euiSpacer euiSpacer--m"
/>
<span>
No items found
</span>
</div>
</div>

11
x-pack/plugins/security_solution/public/timelines/components/flyout/index.tsx
View file

@ -9,7 +9,6 @@ import { i18n } from '@kbn/i18n';
import { EuiFocusTrap, EuiOutsideClickDetector } from '@elastic/eui';
import React, { useEffect, useMemo, useCallback, useState, useRef } from 'react';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import { AppLeaveHandler } from '../../../../../../../src/core/public';
import { TimelineId, TimelineStatus, TimelineTabs } from '../../../../common/types/timeline';
@ -19,12 +18,6 @@ import { FlyoutBottomBar } from './bottom_bar';
import { Pane } from './pane';
import { getTimelineShowStatusByIdSelector } from './selectors';
const Visible = styled.div<{ show?: boolean }>`
visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
`;
Visible.displayName = 'Visible';
interface OwnProps {
timelineId: TimelineId;
onAppLeave: (handler: AppLeaveHandler) => void;
@ -124,9 +117,7 @@ const FlyoutComponent: React.FC<OwnProps> = ({ timelineId, onAppLeave }) => {
<EuiOutsideClickDetector onOutsideClick={onOutsideClick}>
<>
<EuiFocusTrap disabled={!focusOwnership}>
<Visible show={show} data-test-subj="flyout-pane-wrapper">
<Pane timelineId={timelineId} />
</Visible>
<Pane timelineId={timelineId} visible={show} />
</EuiFocusTrap>
<FlyoutBottomBar activeTab={activeTab} timelineId={timelineId} showDataproviders={!show} />
</>

13
x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx
View file

@ -20,6 +20,7 @@ import { focusActiveTimelineButton } from '../../timeline/helpers';
interface FlyoutPaneComponentProps {
timelineId: TimelineId;
visible?: boolean;
}
const EuiFlyoutContainer = styled.div`
@ -31,7 +32,10 @@ const EuiFlyoutContainer = styled.div`
}
`;
const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({ timelineId }) => {
const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
timelineId,
visible = true,
}) => {
const dispatch = useDispatch();
const handleClose = useCallback(() => {
dispatch(timelineActions.showTimeline({ id: timelineId, show: false }));
@ -39,7 +43,10 @@ const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({ timelineId })
}, [dispatch, timelineId]);
return (
<EuiFlyoutContainer data-test-subj="flyout-pane">
<EuiFlyoutContainer
data-test-subj="flyout-pane"
style={{ visibility: visible ? 'visible' : 'hidden' }}
>
<EuiFlyout
aria-label={i18n.TIMELINE_DESCRIPTION}
className="timeline-flyout"
@ -47,6 +54,8 @@ const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({ timelineId })
hideCloseButton={true}
onClose={handleClose}
size="l"
ownFocus={false}
style={{ visibility: visible ? 'visible' : 'hidden' }}
>
<StatefulTimeline
renderCellValue={DefaultCellRenderer}

855
x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap generated
View file

@ -282,240 +282,195 @@ Array [
onClose={[Function]}
size="m"
>
<EuiWindowEvent
event="keydown"
handler={[Function]}
/>
<EuiFocusTrap
clickOutsideDisables={true}
<div
data-eui="EuiFlyout"
data-test-subj="timeline:details-panel:flyout"
role="dialog"
>
<div
data-eui="EuiFocusTrap"
<button
data-test-subj="euiFlyoutCloseButton"
onClick={[Function]}
type="button"
/>
<EventDetailsPanelComponent
browserFields={Object {}}
docValueFields={Array []}
expandedEvent={
Object {
"eventId": "my-id",
"indexName": "my-index",
}
}
handleOnEventClosed={[Function]}
isFlyoutView={true}
tabType="query"
timelineId="test"
>
<div
className="euiFlyout euiFlyout--medium euiFlyout--paddingLarge c0"
data-test-subj="timeline:details-panel:flyout"
role="dialog"
tabIndex={0}
<EuiFlyoutHeader
hasBorder={true}
>
<EuiI18n
default="Close this dialog"
token="euiFlyout.closeAriaLabel"
<div
className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<EuiButtonIcon
aria-label="Close this dialog"
className="euiFlyout__closeButton"
color="text"
data-test-subj="euiFlyoutCloseButton"
iconType="cross"
onClick={[Function]}
<ExpandableEventTitle
isAlert={false}
loading={true}
>
<button
aria-label="Close this dialog"
className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
data-test-subj="euiFlyoutCloseButton"
disabled={false}
onClick={[Function]}
type="button"
<Styled(EuiFlexGroup)
gutterSize="none"
justifyContent="spaceBetween"
wrap={true}
>
<EuiIcon
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
size="m"
type="cross"
>
<span
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
size="m"
/>
</EuiIcon>
</button>
</EuiButtonIcon>
</EuiI18n>
<EventDetailsPanelComponent
browserFields={Object {}}
docValueFields={Array []}
expandedEvent={
Object {
"eventId": "my-id",
"indexName": "my-index",
}
}
handleOnEventClosed={[Function]}
isFlyoutView={true}
tabType="query"
timelineId="test"
>
<EuiFlyoutHeader
hasBorder={true}
>
<div
className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<ExpandableEventTitle
isAlert={false}
loading={true}
>
<Styled(EuiFlexGroup)
gutterSize="none"
justifyContent="spaceBetween"
wrap={true}
>
<EuiFlexGroup
className="c1"
gutterSize="none"
justifyContent="spaceBetween"
wrap={true}
>
<div
className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c1"
>
<EuiFlexItem
grow={false}
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<EuiTitle
size="s"
/>
</div>
</EuiFlexItem>
</div>
</EuiFlexGroup>
</Styled(EuiFlexGroup)>
</ExpandableEventTitle>
</div>
</EuiFlyoutHeader>
<Styled(EuiFlyoutBody)>
<EuiFlyoutBody
className="c2"
>
<div
className="euiFlyoutBody c2"
<EuiFlexGroup
className="c1"
gutterSize="none"
justifyContent="spaceBetween"
wrap={true}
>
<div
className="euiFlyoutBody__overflow"
className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c1"
>
<div
className="euiFlyoutBody__overflowContent"
<EuiFlexItem
grow={false}
>
<ExpandableEvent
browserFields={Object {}}
detailsData={null}
event={
Object {
"eventId": "my-id",
"indexName": "my-index",
}
}
isAlert={false}
loading={true}
timelineId="test"
timelineTabType="flyout"
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<EuiLoadingContent
lines={10}
<EuiTitle
size="s"
/>
</div>
</EuiFlexItem>
</div>
</EuiFlexGroup>
</Styled(EuiFlexGroup)>
</ExpandableEventTitle>
</div>
</EuiFlyoutHeader>
<Styled(EuiFlyoutBody)>
<EuiFlyoutBody
className="c2"
>
<div
className="euiFlyoutBody c2"
>
<div
className="euiFlyoutBody__overflow"
tabIndex={0}
>
<div
className="euiFlyoutBody__overflowContent"
>
<ExpandableEvent
browserFields={Object {}}
detailsData={null}
event={
Object {
"eventId": "my-id",
"indexName": "my-index",
}
}
isAlert={false}
loading={true}
timelineId="test"
timelineTabType="flyout"
>
<EuiLoadingContent
lines={10}
>
<span
className="euiLoadingContent"
>
<span
className="euiLoadingContent__singleLine"
key="0"
>
<span
className="euiLoadingContent"
>
<span
className="euiLoadingContent__singleLine"
key="0"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="1"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="2"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="3"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="4"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="5"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="6"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="7"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="8"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="9"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
</span>
</EuiLoadingContent>
</ExpandableEvent>
</div>
</div>
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="1"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="2"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="3"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="4"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="5"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="6"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="7"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="8"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="9"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
</span>
</EuiLoadingContent>
</ExpandableEvent>
</div>
</EuiFlyoutBody>
</Styled(EuiFlyoutBody)>
</EventDetailsPanelComponent>
</div>
</div>
</EuiFocusTrap>
</div>
</div>
</EuiFlyoutBody>
</Styled(EuiFlyoutBody)>
</EventDetailsPanelComponent>
</div>
</EuiFlyout>
</Styled(EuiFlyout)>,
.c1 {
@ -554,249 +509,204 @@ Array [
onClose={[Function]}
size="m"
>
<EuiWindowEvent
event="keydown"
handler={[Function]}
/>
<EuiFocusTrap
clickOutsideDisables={true}
<div
data-eui="EuiFlyout"
data-test-subj="timeline:details-panel:flyout"
role="dialog"
>
<div
data-eui="EuiFocusTrap"
<button
data-test-subj="euiFlyoutCloseButton"
onClick={[Function]}
type="button"
/>
<EventDetailsPanelComponent
browserFields={Object {}}
docValueFields={Array []}
expandedEvent={
Object {
"eventId": "my-id",
"indexName": "my-index",
}
}
handleOnEventClosed={[Function]}
isFlyoutView={true}
tabType="query"
timelineId="test"
>
<div
className="euiFlyout euiFlyout--medium euiFlyout--paddingLarge c0"
data-test-subj="timeline:details-panel:flyout"
role="dialog"
tabIndex={0}
<EuiFlyoutHeader
hasBorder={true}
>
<EuiI18n
default="Close this dialog"
token="euiFlyout.closeAriaLabel"
<div
className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<EuiButtonIcon
aria-label="Close this dialog"
className="euiFlyout__closeButton"
color="text"
data-test-subj="euiFlyoutCloseButton"
iconType="cross"
onClick={[Function]}
<ExpandableEventTitle
isAlert={false}
loading={true}
>
<button
aria-label="Close this dialog"
className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
data-test-subj="euiFlyoutCloseButton"
disabled={false}
onClick={[Function]}
type="button"
<Styled(EuiFlexGroup)
gutterSize="none"
justifyContent="spaceBetween"
wrap={true}
>
<EuiIcon
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
size="m"
type="cross"
>
<span
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
size="m"
/>
</EuiIcon>
</button>
</EuiButtonIcon>
</EuiI18n>
<EventDetailsPanelComponent
browserFields={Object {}}
docValueFields={Array []}
expandedEvent={
Object {
"eventId": "my-id",
"indexName": "my-index",
}
}
handleOnEventClosed={[Function]}
isFlyoutView={true}
tabType="query"
timelineId="test"
>
<EuiFlyoutHeader
hasBorder={true}
>
<div
className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
>
<ExpandableEventTitle
isAlert={false}
loading={true}
>
<Styled(EuiFlexGroup)
gutterSize="none"
justifyContent="spaceBetween"
wrap={true}
>
<EuiFlexGroup
className="c1"
gutterSize="none"
justifyContent="spaceBetween"
wrap={true}
>
<div
className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c1"
>
<EuiFlexItem
grow={false}
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<EuiTitle
size="s"
/>
</div>
</EuiFlexItem>
</div>
</EuiFlexGroup>
</Styled(EuiFlexGroup)>
</ExpandableEventTitle>
</div>
</EuiFlyoutHeader>
<Styled(EuiFlyoutBody)>
<EuiFlyoutBody
className="c2"
>
<div
className="euiFlyoutBody c2"
<EuiFlexGroup
className="c1"
gutterSize="none"
justifyContent="spaceBetween"
wrap={true}
>
<div
className="euiFlyoutBody__overflow"
className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c1"
>
<div
className="euiFlyoutBody__overflowContent"
<EuiFlexItem
grow={false}
>
<ExpandableEvent
browserFields={Object {}}
detailsData={null}
event={
Object {
"eventId": "my-id",
"indexName": "my-index",
}
}
isAlert={false}
loading={true}
timelineId="test"
timelineTabType="flyout"
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<EuiLoadingContent
lines={10}
<EuiTitle
size="s"
/>
</div>
</EuiFlexItem>
</div>
</EuiFlexGroup>
</Styled(EuiFlexGroup)>
</ExpandableEventTitle>
</div>
</EuiFlyoutHeader>
<Styled(EuiFlyoutBody)>
<EuiFlyoutBody
className="c2"
>
<div
className="euiFlyoutBody c2"
>
<div
className="euiFlyoutBody__overflow"
tabIndex={0}
>
<div
className="euiFlyoutBody__overflowContent"
>
<ExpandableEvent
browserFields={Object {}}
detailsData={null}
event={
Object {
"eventId": "my-id",
"indexName": "my-index",
}
}
isAlert={false}
loading={true}
timelineId="test"
timelineTabType="flyout"
>
<EuiLoadingContent
lines={10}
>
<span
className="euiLoadingContent"
>
<span
className="euiLoadingContent__singleLine"
key="0"
>
<span
className="euiLoadingContent"
>
<span
className="euiLoadingContent__singleLine"
key="0"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="1"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="2"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="3"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="4"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="5"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="6"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="7"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="8"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="9"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
</span>
</EuiLoadingContent>
</ExpandableEvent>
</div>
</div>
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="1"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="2"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="3"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="4"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="5"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="6"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="7"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="8"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
<span
className="euiLoadingContent__singleLine"
key="9"
>
<span
className="euiLoadingContent__singleLineBackground"
/>
</span>
</span>
</EuiLoadingContent>
</ExpandableEvent>
</div>
</EuiFlyoutBody>
</Styled(EuiFlyoutBody)>
</EventDetailsPanelComponent>
</div>
</div>
</EuiFocusTrap>
</div>
</div>
</EuiFlyoutBody>
</Styled(EuiFlyoutBody)>
</EventDetailsPanelComponent>
</div>
</EuiFlyout>,
.c1 {
.c0 {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
margin-top: 8px;
}
.c2 .euiFlyoutBody__overflow {
.c1 .euiFlyoutBody__overflow {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -807,7 +717,7 @@ Array [
overflow: hidden;
}
.c2 .euiFlyoutBody__overflow .euiFlyoutBody__overflowContent {
.c1 .euiFlyoutBody__overflow .euiFlyoutBody__overflowContent {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
@ -815,54 +725,16 @@ Array [
padding: 4px 16px 50px;
}
.c0 {
z-index: 7000;
}
<div
className="euiFlyout euiFlyout--medium euiFlyout--paddingLarge c0"
data-eui="EuiFlyout"
data-test-subj="timeline:details-panel:flyout"
role="dialog"
tabIndex={0}
>
<EuiI18n
default="Close this dialog"
token="euiFlyout.closeAriaLabel"
>
<EuiButtonIcon
aria-label="Close this dialog"
className="euiFlyout__closeButton"
color="text"
data-test-subj="euiFlyoutCloseButton"
iconType="cross"
onClick={[Function]}
>
<button
aria-label="Close this dialog"
className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
data-test-subj="euiFlyoutCloseButton"
disabled={false}
onClick={[Function]}
type="button"
>
<EuiIcon
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
size="m"
type="cross"
>
<span
aria-hidden="true"
className="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
size="m"
/>
</EuiIcon>
</button>
</EuiButtonIcon>
</EuiI18n>
<button
data-test-subj="euiFlyoutCloseButton"
onClick={[Function]}
type="button"
/>
<EventDetailsPanelComponent
browserFields={Object {}}
docValueFields={Array []}
@ -893,13 +765,13 @@ Array [
wrap={true}
>
<EuiFlexGroup
className="c1"
className="c0"
gutterSize="none"
justifyContent="spaceBetween"
wrap={true}
>
<div
className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c1"
className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c0"
>
<EuiFlexItem
grow={false}
@ -920,13 +792,14 @@ Array [
</EuiFlyoutHeader>
<Styled(EuiFlyoutBody)>
<EuiFlyoutBody
className="c2"
className="c1"
>
<div
className="euiFlyoutBody c2"
className="euiFlyoutBody c1"
>
<div
className="euiFlyoutBody__overflow"
tabIndex={0}
>
<div
className="euiFlyoutBody__overflowContent"

10
x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx
View file

@ -5,10 +5,10 @@
* 2.0.
*/
import React, { useCallback, useMemo } from 'react';
import React, { useCallback, useMemo, ReactNode } from 'react';
import { useDispatch } from 'react-redux';
import { EuiFlyout, EuiFlyoutProps } from '@elastic/eui';
import styled from 'styled-components';
import styled, { StyledComponent } from 'styled-components';
import { timelineActions, timelineSelectors } from '../../store/timeline';
import { timelineDefaults } from '../../store/timeline/defaults';
import { BrowserFields, DocValueFields } from '../../../common/containers/source';
@ -18,7 +18,11 @@ import { EventDetailsPanel } from './event_details';
import { HostDetailsPanel } from './host_details';
import { NetworkDetailsPanel } from './network_details';
const StyledEuiFlyout = styled(EuiFlyout)`
// TODO: EUI team follow up on complex types and styled-components `styled`
// https://github.com/elastic/eui/issues/4855
const StyledEuiFlyout: StyledComponent<typeof EuiFlyout, {}, { children?: ReactNode }> = styled(
EuiFlyout
)`
z-index: ${({ theme }) => theme.eui.euiZLevel7};
`;

127
x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout.tsx
View file

@ -19,7 +19,6 @@ import {
EuiFlyoutBody,
EuiFlyoutFooter,
EuiFlyoutHeader,
EuiOverlayMask,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
@ -78,70 +77,68 @@ export const EditTransformFlyout: FC<EditTransformFlyoutProps> = ({ closeFlyout,
const isUpdateButtonDisabled = !state.isFormValid || !state.isFormTouched;
return (
<EuiOverlayMask>
<EuiFlyout
onClose={closeFlyout}
hideCloseButton
aria-labelledby="transformEditFlyoutTitle"
data-test-subj="transformEditFlyout"
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2 id="transformEditFlyoutTitle">
{i18n.translate('xpack.transform.transformList.editFlyoutTitle', {
defaultMessage: 'Edit {transformId}',
values: {
transformId: config.id,
},
<EuiFlyout
onClose={closeFlyout}
hideCloseButton
aria-labelledby="transformEditFlyoutTitle"
data-test-subj="transformEditFlyout"
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2 id="transformEditFlyoutTitle">
{i18n.translate('xpack.transform.transformList.editFlyoutTitle', {
defaultMessage: 'Edit {transformId}',
values: {
transformId: config.id,
},
})}
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody banner={<EditTransformFlyoutCallout />}>
<EditTransformFlyoutForm editTransformFlyout={[state, dispatch]} />
{errorMessage !== undefined && (
<>
<EuiSpacer size="m" />
<EuiCallOut
title={i18n.translate(
'xpack.transform.transformList.editTransformGenericErrorMessage',
{
defaultMessage:
'An error occurred calling the API endpoint to update transforms.',
}
)}
color="danger"
iconType="alert"
>
<p>{errorMessage}</p>
</EuiCallOut>
</>
)}
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
{i18n.translate('xpack.transform.transformList.editFlyoutCancelButtonText', {
defaultMessage: 'Cancel',
})}
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody banner={<EditTransformFlyoutCallout />}>
<EditTransformFlyoutForm editTransformFlyout={[state, dispatch]} />
{errorMessage !== undefined && (
<>
<EuiSpacer size="m" />
<EuiCallOut
title={i18n.translate(
'xpack.transform.transformList.editTransformGenericErrorMessage',
{
defaultMessage:
'An error occurred calling the API endpoint to update transforms.',
}
)}
color="danger"
iconType="alert"
>
<p>{errorMessage}</p>
</EuiCallOut>
</>
)}
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
{i18n.translate('xpack.transform.transformList.editFlyoutCancelButtonText', {
defaultMessage: 'Cancel',
})}
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
data-test-subj="transformEditFlyoutUpdateButton"
onClick={submitFormHandler}
fill
isDisabled={isUpdateButtonDisabled}
>
{i18n.translate('xpack.transform.transformList.editFlyoutUpdateButtonText', {
defaultMessage: 'Update',
})}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
</EuiOverlayMask>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
data-test-subj="transformEditFlyoutUpdateButton"
onClick={submitFormHandler}
fill
isDisabled={isUpdateButtonDisabled}
>
{i18n.translate('xpack.transform.transformList.editFlyoutUpdateButtonText', {
defaultMessage: 'Update',
})}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
);
};

1
x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.tsx
View file

@ -175,6 +175,7 @@ const AlertAdd = ({
aria-labelledby="flyoutAlertAddTitle"
size="m"
maxWidth={620}
ownFocus={false}
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s" data-test-subj="addAlertFlyoutTitle">

30
x-pack/plugins/uptime/public/components/monitor/ml/__snapshots__/license_info.test.tsx.snap generated
View file

@ -24,24 +24,28 @@ Array [
<div
class="euiText euiText--small"
>
<p>
In order to access duration anomaly detection, you have to be subscribed to an Elastic Platinum license.
</p>
<a
class="euiButton euiButton--primary"
href="/app/management/stack/license_management/home"
rel="noreferrer"
<div
class="euiTextColor euiTextColor--default"
>
<span
class="euiButtonContent euiButton__content"
<p>
In order to access duration anomaly detection, you have to be subscribed to an Elastic Platinum license.
</p>
<a
class="euiButton euiButton--primary"
href="/app/management/stack/license_management/home"
rel="noreferrer"
>
<span
class="euiButton__text"
class="euiButtonContent euiButton__content"
>
Start free 14-day trial
<span
class="euiButton__text"
>
Start free 14-day trial
</span>
</span>
</span>
</a>
</a>
</div>
</div>
</div>,
<div

207
x-pack/plugins/uptime/public/components/monitor/ml/__snapshots__/ml_flyout.test.tsx.snap generated
View file

@ -81,69 +81,60 @@ exports[`ML Flyout component renders without errors 1`] = `
exports[`ML Flyout component shows license info if no ml available 1`] = `
<div
data-eui="EuiFocusTrap"
data-eui="EuiFlyout"
data-test-subj="uptimeMLFlyout"
role="dialog"
>
<button
data-test-subj="euiFlyoutCloseButton"
type="button"
/>
<div
class="euiFlyout euiFlyout--small euiFlyout--paddingLarge"
data-test-subj="uptimeMLFlyout"
role="dialog"
tabindex="0"
class="euiFlyoutHeader"
>
<button
aria-label="Close this dialog"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
data-test-subj="euiFlyoutCloseButton"
type="button"
<h2
class="euiTitle euiTitle--medium"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
Enable anomaly detection
</h2>
<div
class="euiFlyoutHeader"
>
<h2
class="euiTitle euiTitle--medium"
>
Enable anomaly detection
</h2>
<div
class="euiSpacer euiSpacer--s"
/>
</div>
class="euiSpacer euiSpacer--s"
/>
</div>
<div
class="euiFlyoutBody"
>
<div
class="euiFlyoutBody"
class="euiFlyoutBody__overflow"
tabindex="0"
>
<div
class="euiFlyoutBody__overflow"
class="euiFlyoutBody__overflowContent"
>
<div
class="euiFlyoutBody__overflowContent"
class="euiCallOut euiCallOut--primary license-info-trial"
data-test-subj="uptimeMLLicenseInfo"
>
<div
class="euiCallOut euiCallOut--primary license-info-trial"
data-test-subj="uptimeMLLicenseInfo"
class="euiCallOutHeader"
>
<span
aria-hidden="true"
class="euiCallOutHeader__icon"
color="inherit"
data-euiicon-type="help"
/>
<span
class="euiCallOutHeader__title"
>
Start free 14-day trial
</span>
</div>
<div
class="euiText euiText--small"
>
<div
class="euiCallOutHeader"
>
<span
aria-hidden="true"
class="euiCallOutHeader__icon"
color="inherit"
data-euiicon-type="help"
/>
<span
class="euiCallOutHeader__title"
>
Start free 14-day trial
</span>
</div>
<div
class="euiText euiText--small"
class="euiTextColor euiTextColor--default"
>
<p>
In order to access duration anomaly detection, you have to be subscribed to an Elastic Platinum license.
@ -165,85 +156,85 @@ exports[`ML Flyout component shows license info if no ml available 1`] = `
</a>
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="euiText euiText--medium"
>
<p>
Here you can create a machine learning job to calculate anomaly scores on
</div>
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="euiText euiText--medium"
>
<p>
Here you can create a machine learning job to calculate anomaly scores on
response durations for Uptime Monitor. Once enabled, the monitor duration chart on the details page
will show the expected bounds and annotate the graph with anomalies. You can also potentially
identify periods of increased latency across geographical regions.
</p>
<p>
Once a job is created, you can manage it and see more details in the
<a
class="euiLink euiLink--primary"
href="/app/ml"
rel="noreferrer"
>
Machine Learning jobs management page
</a>
.
</p>
<p>
<em>
Note: It might take a few minutes for the job to begin calculating results.
</em>
</p>
</div>
<div
class="euiSpacer euiSpacer--l"
/>
</p>
<p>
Once a job is created, you can manage it and see more details in the
<a
class="euiLink euiLink--primary"
href="/app/ml"
rel="noreferrer"
>
Machine Learning jobs management page
</a>
.
</p>
<p>
<em>
Note: It might take a few minutes for the job to begin calculating results.
</em>
</p>
</div>
<div
class="euiSpacer euiSpacer--l"
/>
</div>
</div>
</div>
<div
class="euiFlyoutFooter"
>
<div
class="euiFlyoutFooter"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
<button
class="euiButtonEmpty euiButtonEmpty--primary"
type="button"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary"
type="button"
<span
class="euiButtonContent euiButtonEmpty__content"
>
<span
class="euiButtonContent euiButtonEmpty__content"
class="euiButtonEmpty__text"
>
<span
class="euiButtonEmpty__text"
>
Cancel
</span>
Cancel
</span>
</button>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
</span>
</button>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
data-test-subj="uptimeMLCreateJobBtn"
disabled=""
type="button"
>
<button
class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
data-test-subj="uptimeMLCreateJobBtn"
disabled=""
type="button"
<span
class="euiButtonContent euiButton__content"
>
<span
class="euiButtonContent euiButton__content"
class="euiButton__text"
>
<span
class="euiButton__text"
>
Create new job
</span>
Create new job
</span>
</button>
</div>
</span>
</button>
</div>
</div>
</div>

82
x-pack/plugins/uptime/public/components/monitor/ping_list/__snapshots__/expanded_row.test.tsx.snap generated
View file

@ -145,51 +145,55 @@ exports[`PingListExpandedRow renders link to docs if body is not recorded but it
<div
class="euiText euiText--small"
>
<dl
class="euiDescriptionList euiDescriptionList--row"
<div
class="euiTextColor euiTextColor--default"
>
<dt
class="euiDescriptionList__title"
<dl
class="euiDescriptionList euiDescriptionList--row"
>
Response Body
</dt>
<dd
class="euiDescriptionList__description"
>
<div
class="euiText euiText--medium"
<dt
class="euiDescriptionList__title"
>
Body size is 1MB.
</div>
<div
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium"
Response Body
</dt>
<dd
class="euiDescriptionList__description"
>
Body not recorded. Read our
<a
class="euiLink euiLink--primary"
href="https://www.elastic.co/guide/en/beats/heartbeat/current/configuration-heartbeat-options.html#monitor-http-response"
rel="noopener"
target="_blank"
<div
class="euiText euiText--medium"
>
docs
<span
aria-label="External link"
class="euiLink__externalIcon"
data-euiicon-type="popout"
/>
<span
class="euiScreenReaderOnly"
Body size is 1MB.
</div>
<div
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium"
>
Body not recorded. Read our
<a
class="euiLink euiLink--primary"
href="https://www.elastic.co/guide/en/beats/heartbeat/current/configuration-heartbeat-options.html#monitor-http-response"
rel="noopener"
target="_blank"
>
(opens in a new tab or window)
</span>
</a>
for more information on recording response bodies.
</div>
</dd>
</dl>
docs
<span
aria-label="External link"
class="euiLink__externalIcon"
data-euiicon-type="popout"
/>
<span
class="euiScreenReaderOnly"
>
(opens in a new tab or window)
</span>
</a>
for more information on recording response bodies.
</div>
</dd>
</dl>
</div>
</div>
</div>
</div>

10
x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_flyout.tsx
View file

@ -5,9 +5,9 @@
* 2.0.
*/
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef, ReactNode } from 'react';
import styled from 'styled-components';
import styled, { StyledComponent } from 'styled-components';
import {
EuiFlyout,
@ -49,7 +49,11 @@ export const RESPONSE_HEADERS = i18n.translate(
}
);
const FlyoutContainer = styled(EuiFlyout)`
// TODO: EUI team follow up on complex types and styled-components `styled`
// https://github.com/elastic/eui/issues/4855
const FlyoutContainer: StyledComponent<typeof EuiFlyout, {}, { children?: ReactNode }> = styled(
EuiFlyout
)`
z-index: ${(props) => props.theme.eui.euiZLevel5};
`;

2
x-pack/test/functional/apps/lens/lens_tagging.ts
View file

@ -107,7 +107,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
`tag-searchbar-option-${PageObjects.tagManagement.testSubjFriendly(lensTag)}`
);
// click elsewhere to close the filter dropdown
const searchFilter = await find.byCssSelector('main .euiFieldSearch');
const searchFilter = await find.byCssSelector('.euiPageBody .euiFieldSearch');
await searchFilter.click();
// wait until the table refreshes
await listingTable.waitUntilTableIsLoaded();

4
x-pack/test/functional/page_objects/graph_page.ts
View file

@ -201,7 +201,9 @@ export class GraphPageObject extends FtrService {
}
async getSearchFilter() {
const searchFilter = await this.find.allByCssSelector('main .euiFieldSearch');
const searchFilter = await this.find.allByCssSelector(
'[data-test-subj="graphLandingPage"] .euiFieldSearch'
);
return searchFilter[0];
}

4
x-pack/test/functional/page_objects/lens_page.ts
View file

@ -500,7 +500,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
await comboBox.setElement(formatInput, format);
},
async editDimensionColor(color: string) {
const colorPickerInput = await testSubjects.find('colorPickerAnchor');
const colorPickerInput = await testSubjects.find('~indexPattern-dimension-colorPicker');
await colorPickerInput.type(color);
await PageObjects.common.sleep(1000); // give time for debounced components to rerender
},
@ -873,7 +873,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
},
async assertColor(color: string) {
// TODO: target dimensionTrigger color element after merging https://github.com/elastic/kibana/pull/76871
await testSubjects.getAttribute('colorPickerAnchor', color);
await testSubjects.getAttribute('~indexPattern-dimension-colorPicker', color);
},
/**

4
x-pack/test/functional/page_objects/space_selector_page.ts
View file

@ -79,11 +79,11 @@ export class SpaceSelectorPageObject extends FtrService {
}
async clickColorPicker() {
await this.testSubjects.click('colorPickerAnchor');
await this.testSubjects.click('euiColorPickerAnchor');
}
async setColorinPicker(hexValue: string) {
await this.testSubjects.setValue('colorPickerAnchor', hexValue);
await this.testSubjects.setValue('euiColorPickerAnchor', hexValue);
}
async clickShowFeatures() {

5
x-pack/test/functional/page_objects/tag_management_page.ts
View file

@ -56,8 +56,7 @@ class TagModal extends FtrService {
await this.testSubjects.setValue('createModalField-name', fields.name);
}
if (fields.color !== undefined) {
// EuiColorPicker does not allow to specify data-test-subj for the colorpicker input
await this.testSubjects.setValue('colorPickerAnchor', fields.color);
await this.testSubjects.setValue('~createModalField-color', fields.color);
}
if (fields.description !== undefined) {
await this.testSubjects.click('createModalField-description');
@ -75,7 +74,7 @@ class TagModal extends FtrService {
async getFormValues(): Promise<Required<FillTagFormFields>> {
return {
name: await this.testSubjects.getAttribute('createModalField-name', 'value'),
color: await this.testSubjects.getAttribute('colorPickerAnchor', 'value'),
color: await this.testSubjects.getAttribute('~createModalField-color', 'value'),
description: await this.testSubjects.getAttribute('createModalField-description', 'value'),
};
}

2
x-pack/test/saved_object_tagging/functional/tests/dashboard_integration.ts
View file

@ -30,7 +30,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
);
}
// click elsewhere to close the filter dropdown
const searchFilter = await find.byCssSelector('main .euiFieldSearch');
const searchFilter = await find.byCssSelector('.euiPageBody .euiFieldSearch');
await searchFilter.click();
// wait until the table refreshes
await listingTable.waitUntilTableIsLoaded();

2
x-pack/test/saved_object_tagging/functional/tests/maps_integration.ts
View file

@ -30,7 +30,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
);
}
// click elsewhere to close the filter dropdown
const searchFilter = await find.byCssSelector('main .euiFieldSearch');
const searchFilter = await find.byCssSelector('.euiPageBody .euiFieldSearch');
await searchFilter.click();
};

2
x-pack/test/saved_object_tagging/functional/tests/visualize_integration.ts
View file

@ -30,7 +30,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
);
}
// click elsewhere to close the filter dropdown
const searchFilter = await find.byCssSelector('main .euiFieldSearch');
const searchFilter = await find.byCssSelector('.euiPageBody .euiFieldSearch');
await searchFilter.click();
// wait until the table refreshes
await listingTable.waitUntilTableIsLoaded();

25
yarn.lock
View file

@ -1436,10 +1436,10 @@
resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
"@elastic/eui@33.0.0":
version "33.0.0"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-33.0.0.tgz#525cf5ea6e6ab16c32bb09766e9c23806640240f"
integrity sha512-BQ6GJxKVaOF7Fm+IvH2iFeeGnepzygDr4xmmZ8PH2BEfrtkxzGP9YDpqmr/Drg5beVynJ3+72k1AEQT/JE6NTw==
"@elastic/eui@34.3.0":
version "34.3.0"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-34.3.0.tgz#5cd7d66c86d9644991c4391682f84824126361df"
integrity sha512-cUFh5H7Y95lzbsyRP1yL88mVVe5MAODOhV+O+8jYmuDQH6WrEiDhtSljTKfVYssbP7Bv+qFraVwyUj623dfr2w==
dependencies:
"@types/chroma-js" "^2.0.0"
"@types/lodash" "^4.14.160"
@ -1454,6 +1454,7 @@
chroma-js "^2.1.0"
classnames "^2.2.6"
lodash "^4.17.21"
mdast-util-to-hast "^10.0.0"
numeral "^2.0.6"
prop-types "^15.6.0"
react-ace "^7.0.5"
@ -19027,7 +19028,7 @@ mdast-util-from-markdown@^0.8.0:
parse-entities "^2.0.0"
unist-util-stringify-position "^2.0.0"
mdast-util-to-hast@10.0.1:
mdast-util-to-hast@10.0.1, mdast-util-to-hast@^10.0.0:
version "10.0.1"
resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-10.0.1.tgz#0cfc82089494c52d46eb0e3edb7a4eb2aea021eb"
integrity sha512-BW3LM9SEMnjf4HXXVApZMt8gLQWVNXc3jryK0nJu/rOXPOnlkUjmdkDlmxMirpbU9ILncGFIwLH/ubnWBbcdgA==
@ -19041,20 +19042,6 @@ mdast-util-to-hast@10.0.1:
unist-util-position "^3.0.0"
unist-util-visit "^2.0.0"
mdast-util-to-hast@^10.0.0:
version "10.0.0"
resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-10.0.0.tgz#744dfe7907bac0263398a68af5aba16d104a9a08"
integrity sha512-dRyAC5S4eDcIOdkz4jg0wXbUdlf+5YFu7KppJNHOsMaD7ql5bKIqVcvXYYkcrKjzUkfX8JsKFVMthsU8OWxQ+w==
dependencies:
"@types/mdast" "^3.0.0"
"@types/unist" "^2.0.0"
mdast-util-definitions "^4.0.0"
mdurl "^1.0.0"
unist-builder "^2.0.0"
unist-util-generated "^1.0.0"
unist-util-position "^3.0.0"
unist-util-visit "^2.0.0"
mdast-util-to-markdown@^0.6.0:
version "0.6.1"
resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-0.6.1.tgz#0e07d3f871e056bffc38a0cf50c7298b56d9e0d6"