diff --git a/package.json b/package.json index 626096ac9ceba..37a78bdbfca2f 100644 --- a/package.json +++ b/package.json @@ -128,8 +128,8 @@ "@elastic/ecs": "^9.0.0", "@elastic/elasticsearch": "9.1.1", "@elastic/ems-client": "8.6.3", - "@elastic/eui": "110.0.0", - "@elastic/eui-theme-borealis": "5.1.0", + "@elastic/eui": "111.0.0", + "@elastic/eui-theme-borealis": "5.2.0", "@elastic/filesaver": "1.1.2", "@elastic/kibana-d3-color": "npm:@elastic/kibana-d3-color@2.0.1", "@elastic/monaco-esql": "^3.1.11", diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js index d885470c919fd..64423c96858fe 100644 --- a/packages/kbn-babel-preset/styled_components_files.js +++ b/packages/kbn-babel-preset/styled_components_files.js @@ -23,7 +23,6 @@ module.exports = { /src[\/\\]platform[\/\\]packages[\/\\]private[\/\\]kbn-ui-shared-deps-npm[\/\\]/, /src[\/\\]platform[\/\\]packages[\/\\]private[\/\\]kbn-ui-shared-deps-src[\/\\]/, - /x-pack[\/\\]platform[\/\\]packages[\/\\]shared[\/\\]kbn-elastic-assistant[\/\\]impl[\/\\]assistant[\/\\]assistant_overlay[\/\\]index.tsx/, /x-pack[\/\\]platform[\/\\]packages[\/\\]shared[\/\\]kbn-elastic-assistant[\/\\]impl[\/\\]assistant[\/\\]settings[\/\\]assistant_settings.tsx/, /x-pack[\/\\]platform[\/\\]packages[\/\\]shared[\/\\]kbn-elastic-assistant[\/\\]impl[\/\\]data_anonymization_editor[\/\\]context_editor[\/\\]get_columns[\/\\]index.tsx/, /x-pack[\/\\]platform[\/\\]plugins[\/\\]shared[\/\\]fleet[\/\\]public[\/\\]applications[\/\\]fleet[\/\\]components[\/\\]fleet_server_instructions[\/\\]components[\/\\]fleet_server_hosts_form.tsx/, diff --git a/src/core/packages/i18n/browser-internal/src/__snapshots__/i18n_service.test.tsx.snap b/src/core/packages/i18n/browser-internal/src/__snapshots__/i18n_service.test.tsx.snap index a47e473c4a186..654590e3be03c 100644 --- a/src/core/packages/i18n/browser-internal/src/__snapshots__/i18n_service.test.tsx.snap +++ b/src/core/packages/i18n/browser-internal/src/__snapshots__/i18n_service.test.tsx.snap @@ -127,6 +127,9 @@ exports[`#start() returns \`Context\` component 1`] = ` \\"euiFlyout.screenReaderModalDialog\\": \\"You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.\\", \\"euiFlyout.screenReaderNonModalDialog\\": \\"You are in a non-modal dialog. To close the dialog, press Escape.\\", \\"euiFlyout.screenReaderFocusTrapShards\\": \\"You can still continue tabbing through other global page landmarks.\\", + \\"euiFlyoutMenu.back\\": \\"Back\\", + \\"euiFlyoutMenu.history\\": \\"History\\", + \\"euiFlyoutManaged.defaultTitle\\": \\"Unknown Flyout\\", \\"euiForm.addressFormErrors\\": \\"Please address the highlighted errors.\\", \\"euiFormControlLayoutClearButton.label\\": \\"Clear input\\", \\"euiFormControlLayoutDelimited.delimiterLabel\\": \\"to\\", diff --git a/src/core/packages/i18n/browser-internal/src/i18n_eui_mapping.tsx b/src/core/packages/i18n/browser-internal/src/i18n_eui_mapping.tsx index 17c186b8f44a2..39e7577d70acb 100644 --- a/src/core/packages/i18n/browser-internal/src/i18n_eui_mapping.tsx +++ b/src/core/packages/i18n/browser-internal/src/i18n_eui_mapping.tsx @@ -799,6 +799,15 @@ export const getEuiContextMapping = (): EuiTokensObject => { defaultMessage: 'You can still continue tabbing through other global page landmarks.', } ), + 'euiFlyoutMenu.back': i18n.translate('core.euiFlyoutMenu.back', { + defaultMessage: 'Back', + }), + 'euiFlyoutMenu.history': i18n.translate('core.euiFlyoutMenu.history', { + defaultMessage: 'History', + }), + 'euiFlyoutManaged.defaultTitle': i18n.translate('core.euiFlyoutManaged.defaultTitle', { + defaultMessage: 'Unknown Flyout', + }), 'euiForm.addressFormErrors': i18n.translate('core.euiForm.addressFormErrors', { defaultMessage: 'Please address the highlighted errors.', }), diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index 3f68475b7e50a..8fb1f4a74961a 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -92,8 +92,8 @@ export const LICENSE_OVERRIDES = { 'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint '@elastic/ems-client@8.6.3': ['Elastic License 2.0'], - '@elastic/eui@110.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], - '@elastic/eui-theme-borealis@5.1.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], + '@elastic/eui@111.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], + '@elastic/eui-theme-borealis@5.2.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'], 'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry 'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary '@bufbuild/protobuf@2.5.2': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause) diff --git a/src/platform/packages/shared/kbn-unified-metrics-grid/src/components/flyout/hooks/use_flyout_a11y.tsx b/src/platform/packages/shared/kbn-unified-metrics-grid/src/components/flyout/hooks/use_flyout_a11y.tsx index 8117876d639e6..11f8c863aaffa 100644 --- a/src/platform/packages/shared/kbn-unified-metrics-grid/src/components/flyout/hooks/use_flyout_a11y.tsx +++ b/src/platform/packages/shared/kbn-unified-metrics-grid/src/components/flyout/hooks/use_flyout_a11y.tsx @@ -15,7 +15,7 @@ import useUnmount from 'react-use/lib/useUnmount'; export const useFlyoutA11y = ({ isXlScreen }: { isXlScreen: boolean }) => { const descriptionId = useGeneratedHtmlId(); const [triggerEl] = useState(document.activeElement); - const [flyoutEl, setFlyoutEl] = useState(); + const [flyoutEl, setFlyoutEl] = useState(null); // Auto-focus push flyout on open or when switching to XL screen useEffect(() => { diff --git a/src/platform/packages/shared/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap b/src/platform/packages/shared/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap index 709d05bb228c3..d627ed9b22938 100644 --- a/src/platform/packages/shared/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap +++ b/src/platform/packages/shared/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap @@ -52,7 +52,7 @@ exports[`WithSolutionNav renders wrapped component 1`] = ` } pageSideBarProps={ Object { - "className": "kbnSolutionNav__sidebar css-ausb9j-WithSolutionNavStyles", + "className": "kbnSolutionNav__sidebar css-2s1djh-WithSolutionNavStyles", "hasEmbellish": true, "minWidth": undefined, "paddingSize": "none", @@ -113,7 +113,7 @@ exports[`WithSolutionNav with children 1`] = ` } pageSideBarProps={ Object { - "className": "kbnSolutionNav__sidebar css-ausb9j-WithSolutionNavStyles", + "className": "kbnSolutionNav__sidebar css-2s1djh-WithSolutionNavStyles", "hasEmbellish": true, "minWidth": undefined, "paddingSize": "none", diff --git a/src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap b/src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap index 08abcc7e20f36..bb6b6594b7339 100644 --- a/src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap +++ b/src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`VisLegend Component Legend closed should match the snapshot 1`] = `"
"`; +exports[`VisLegend Component Legend closed should match the snapshot 1`] = `"
"`; -exports[`VisLegend Component Legend open should match the snapshot 1`] = `"
"`; +exports[`VisLegend Component Legend open should match the snapshot 1`] = `"
"`; diff --git a/src/platform/plugins/shared/data_view_editor/public/open_editor.tsx b/src/platform/plugins/shared/data_view_editor/public/open_editor.tsx index 2703ee04572e3..579b07681c081 100644 --- a/src/platform/plugins/shared/data_view_editor/public/open_editor.tsx +++ b/src/platform/plugins/shared/data_view_editor/public/open_editor.tsx @@ -92,10 +92,6 @@ export const getEditorOpener = { hideCloseButton: true, size: 'l', - // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term - maskProps: { - style: 'z-index: 1004', // we need this flyout to be above the timeline flyout (which has a z-index of 1003) - }, 'aria-labelledby': 'dataViewEditorFlyoutTitle', } ); diff --git a/src/platform/plugins/shared/data_view_field_editor/public/open_editor.tsx b/src/platform/plugins/shared/data_view_field_editor/public/open_editor.tsx index 6fd529bb6e3c9..1d05002b384d6 100644 --- a/src/platform/plugins/shared/data_view_field_editor/public/open_editor.tsx +++ b/src/platform/plugins/shared/data_view_field_editor/public/open_editor.tsx @@ -242,11 +242,6 @@ export const getFieldEditorOpener = flyout.close(); } }, - maskProps: { - className: 'indexPatternFieldEditorMaskOverlay', - // // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term - style: 'z-index: 1004', // we need this flyout to be above the timeline flyout (which has a z-index of 1003) - }, } ); diff --git a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_flyout/use_flyout_a11y.tsx b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_flyout/use_flyout_a11y.tsx index 18cc98fb94b89..503ee836bfa93 100644 --- a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_flyout/use_flyout_a11y.tsx +++ b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_flyout/use_flyout_a11y.tsx @@ -15,7 +15,7 @@ import useUnmount from 'react-use/lib/useUnmount'; export const useFlyoutA11y = ({ isXlScreen }: { isXlScreen: boolean }) => { const descriptionId = useGeneratedHtmlId(); const [triggerEl] = useState(document.activeElement); - const [flyoutEl, setFlyoutEl] = useState(); + const [flyoutEl, setFlyoutEl] = useState(null); // Auto-focus push flyout on open or when switching to XL screen useEffect(() => { diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.tsx index afd7c7f683ffa..f4c82147c3a9d 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.tsx @@ -11,7 +11,6 @@ import { EuiFlyoutResizable } from '@elastic/eui'; import useEvent from 'react-use/lib/useEvent'; import { css } from '@emotion/react'; -import { createGlobalStyle } from 'styled-components'; import type { ShowAssistantOverlayProps } from '../../assistant_context'; import { useAssistantContext } from '../../assistant_context'; import { Assistant, CONVERSATION_SIDE_PANEL_WIDTH } from '..'; @@ -23,17 +22,6 @@ import { const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0; -/** - * Modal container for Elastic AI Assistant conversations, receiving the page contents as context, plus whatever - * component currently has focus and any specific context it may provide through the SAssInterface. - */ - -export const UnifiedTimelineGlobalStyles = createGlobalStyle` - body:has(.timeline-portal-overlay-mask) .euiOverlayMask { - z-index: 1003 !important; - } -`; - export const AssistantOverlay = React.memo(() => { const spaceId = useAssistantSpaceId(); const [isModalVisible, setIsModalVisible] = useState(false); @@ -118,6 +106,8 @@ export const AssistantOverlay = React.memo(() => { ); useEvent('keydown', onKeyDown); + const flyoutRef = useRef(null); + // Modal control functions const cleanupAndCloseModal = useCallback(() => { setIsModalVisible(false); @@ -144,8 +134,6 @@ export const AssistantOverlay = React.memo(() => { }); }, []); - const flyoutRef = useRef(); - if (!isModalVisible) return null; return ( @@ -172,7 +160,6 @@ export const AssistantOverlay = React.memo(() => { setChatHistoryVisible={toggleChatHistory} /> - ); }); diff --git a/x-pack/platform/plugins/shared/cases/public/components/create/flyout/create_case_flyout.tsx b/x-pack/platform/plugins/shared/cases/public/components/create/flyout/create_case_flyout.tsx index 70c39d439f769..f9999bd127788 100644 --- a/x-pack/platform/plugins/shared/cases/public/components/create/flyout/create_case_flyout.tsx +++ b/x-pack/platform/plugins/shared/cases/public/components/create/flyout/create_case_flyout.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useMemo } from 'react'; +import React from 'react'; import { css } from '@emotion/react'; import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle, useEuiTheme } from '@elastic/eui'; @@ -41,15 +41,10 @@ export const CreateCaseFlyout = React.memo( onSuccess, observables = [], }) => { + const { euiTheme } = useEuiTheme(); const handleCancel = onClose || noop; const handleOnSuccess = onSuccess || noop; - const { euiTheme } = useEuiTheme(); - const maskProps = useMemo( - () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003) - [euiTheme.levels.flyout] - ); - return ( <> @@ -58,8 +53,6 @@ export const CreateCaseFlyout = React.memo( tour-step="create-case-flyout" aria-label={i18n.CREATE_CASE_LABEL} data-test-subj="create-case-flyout" - // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term - maskProps={maskProps} > diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/list_page/components/create_agent_policy.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/list_page/components/create_agent_policy.tsx index f7a6246643401..3acfddbfe5b13 100644 --- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/list_page/components/create_agent_policy.tsx +++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/list_page/components/create_agent_policy.tsx @@ -199,8 +199,14 @@ export const CreateAgentPolicyFlyout: React.FunctionComponent = ({ ); + // ref={null} is needed to fix styled-components' ref prop type return ( - onClose()} {...restOfProps} maxWidth={MAX_FLYOUT_WIDTH}> + onClose()} + {...restOfProps} + maxWidth={MAX_FLYOUT_WIDTH} + ref={null} + > {header} {body} {footer} diff --git a/x-pack/platform/plugins/shared/osquery/public/live_queries/form/query_details_flyout.tsx b/x-pack/platform/plugins/shared/osquery/public/live_queries/form/query_details_flyout.tsx index 7eb51a0a890c5..e68ac837e8c1d 100644 --- a/x-pack/platform/plugins/shared/osquery/public/live_queries/form/query_details_flyout.tsx +++ b/x-pack/platform/plugins/shared/osquery/public/live_queries/form/query_details_flyout.tsx @@ -14,9 +14,8 @@ import { EuiPortal, EuiSpacer, EuiTitle, - useEuiTheme, } from '@elastic/eui'; -import React, { useMemo } from 'react'; +import React from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; interface QueryDetailsFlyoutProps { @@ -27,64 +26,46 @@ interface QueryDetailsFlyoutProps { onClose: () => void; } -const QueryDetailsFlyoutComponent: React.FC = ({ action, onClose }) => { - const { euiTheme } = useEuiTheme(); - const maskProps = useMemo( - () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003) - [euiTheme.levels.flyout] - ); - - return ( - - - - -

- -

- - - - - - - - - - {action.id} - - - - - - - - - - {action.query} - - - - - - - ); -}; +const QueryDetailsFlyoutComponent: React.FC = ({ action, onClose }) => ( + + + + +

+ +

+ + + + + + + + + + {action.id} + + + + + + + + + + {action.query} + + + + + + +); export const QueryDetailsFlyout = React.memo(QueryDetailsFlyoutComponent); diff --git a/x-pack/platform/plugins/shared/security/public/authentication/login/__snapshots__/login_page.test.tsx.snap b/x-pack/platform/plugins/shared/security/public/authentication/login/__snapshots__/login_page.test.tsx.snap index 1f8791771d0cb..4b12b65950756 100644 --- a/x-pack/platform/plugins/shared/security/public/authentication/login/__snapshots__/login_page.test.tsx.snap +++ b/x-pack/platform/plugins/shared/security/public/authentication/login/__snapshots__/login_page.test.tsx.snap @@ -295,7 +295,7 @@ exports[`LoginPage enabled form state renders as expected when loginHelp is set exports[`LoginPage page renders as expected 1`] = `
- + + /> + diff --git a/x-pack/platform/plugins/shared/security/public/authentication/overwritten_session/__snapshots__/overwritten_session_page.test.tsx.snap b/x-pack/platform/plugins/shared/security/public/authentication/overwritten_session/__snapshots__/overwritten_session_page.test.tsx.snap index 086f00d5162d8..be6d92b517a2c 100644 --- a/x-pack/platform/plugins/shared/security/public/authentication/overwritten_session/__snapshots__/overwritten_session_page.test.tsx.snap +++ b/x-pack/platform/plugins/shared/security/public/authentication/overwritten_session/__snapshots__/overwritten_session_page.test.tsx.snap @@ -2,7 +2,7 @@ exports[`OverwrittenSessionPage renders as expected 1`] = `
- -

- child -

- + + +

+ child +

+ + diff --git a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap index 54429a13515e2..9d048dd543701 100644 --- a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap +++ b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap @@ -37,7 +37,7 @@ exports[` renders without crashing 1`] = ` "extraSlow": "500ms", "fast": "150ms", "normal": "250ms", - "resistance": "cubic-bezier(.694, .0482, .335, 1)", + "resistance": "cubic-bezier(.32, .72, 0, 1)", "slow": "350ms", }, "base": 16, @@ -2456,133 +2456,13 @@ exports[` renders without crashing 1`] = ` - SecuredFeature { + + renders without crashing 1`] = ` ], "primaryFeaturePrivileges": Array [ PrimaryFeaturePrivilege { - "actions": Array [ - "*", - ], + "actions": Array [], "config": Object { "app": Array [ "app", @@ -2680,9 +2558,7 @@ exports[` renders without crashing 1`] = ` "id": "all", }, PrimaryFeaturePrivilege { - "actions": Array [ - "read", - ], + "actions": Array [], "config": Object { "app": Array [ "app", @@ -2702,26 +2578,152 @@ exports[` renders without crashing 1`] = ` "subFeaturePrivileges": Array [], "subFeatures": Array [], }, - }, - "global": Map {}, - "spaces": Map {}, + ] + } + kibanaPrivileges={ + KibanaPrivileges { + "feature": Map { + "feature1" => SecuredFeature { + "config": Object { + "app": Array [ + "app", + ], + "category": Object { + "id": "foo", + "label": "foo", + }, + "id": "feature1", + "name": "Feature 1", + "privileges": Object { + "all": Object { + "app": Array [ + "app", + ], + "savedObject": Object { + "all": Array [ + "foo", + ], + "read": Array [], + }, + "ui": Array [ + "app-ui", + ], + }, + "read": Object { + "app": Array [ + "app", + ], + "savedObject": Object { + "all": Array [], + "read": Array [], + }, + "ui": Array [ + "app-ui", + ], + }, + }, + }, + "minimalPrimaryFeaturePrivileges": Array [ + PrimaryFeaturePrivilege { + "actions": Array [], + "config": Object { + "app": Array [ + "app", + ], + "savedObject": Object { + "all": Array [ + "foo", + ], + "read": Array [], + }, + "ui": Array [ + "app-ui", + ], + }, + "id": "minimal_all", + }, + PrimaryFeaturePrivilege { + "actions": Array [], + "config": Object { + "app": Array [ + "app", + ], + "savedObject": Object { + "all": Array [], + "read": Array [], + }, + "ui": Array [ + "app-ui", + ], + }, + "id": "minimal_read", + }, + ], + "primaryFeaturePrivileges": Array [ + PrimaryFeaturePrivilege { + "actions": Array [ + "*", + ], + "config": Object { + "app": Array [ + "app", + ], + "savedObject": Object { + "all": Array [ + "foo", + ], + "read": Array [], + }, + "ui": Array [ + "app-ui", + ], + }, + "id": "all", + }, + PrimaryFeaturePrivilege { + "actions": Array [ + "read", + ], + "config": Object { + "app": Array [ + "app", + ], + "savedObject": Object { + "all": Array [], + "read": Array [], + }, + "ui": Array [ + "app-ui", + ], + }, + "id": "read", + }, + ], + "securedSubFeatures": Array [], + "subFeaturePrivileges": Array [], + "subFeatures": Array [], + }, + }, + "global": Map {}, + "spaces": Map {}, + } } - } - onChange={[MockFunction]} - role={ - Object { - "elasticsearch": Object { - "cluster": Array [ - "manage", - ], - "indices": Array [], - "run_as": Array [], - }, - "kibana": Array [], - "name": "", + onChange={[MockFunction]} + role={ + Object { + "elasticsearch": Object { + "cluster": Array [ + "manage", + ], + "indices": Array [], + "run_as": Array [], + }, + "kibana": Array [], + "name": "", + } } - } - /> + /> + diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_exceptions/components/add_exception_flyout/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_exceptions/components/add_exception_flyout/index.tsx index 8c5d348f4c828..436f578e10874 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_exceptions/components/add_exception_flyout/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_exceptions/components/add_exception_flyout/index.tsx @@ -19,7 +19,6 @@ import { EuiSpacer, EuiText, EuiTitle, - useEuiTheme, useGeneratedHtmlId, } from '@elastic/eui'; @@ -113,12 +112,6 @@ export const AddExceptionFlyout = memo(function AddExceptionFlyout({ onCancel, onConfirm, }: AddExceptionFlyoutProps) { - const { euiTheme } = useEuiTheme(); - const maskProps = useMemo( - () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003) - [euiTheme.levels.flyout] - ); - const [showConfirmModal, setShowConfirmModal] = useState(false); const { isLoading, indexPatterns, getExtendedFields } = useFetchIndexPatterns(rules); const [isSubmitting, submitNewExceptionItems] = useAddNewExceptionItems(); @@ -520,8 +513,6 @@ export const AddExceptionFlyout = memo(function AddExceptionFlyout({ onClose={handleCloseFlyout} data-test-subj="addExceptionFlyout" aria-labelledby={exceptionFlyoutTitleId} - // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term - maskProps={maskProps} > = ({ onClose, ecsData, }) => { - const { euiTheme } = useEuiTheme(); - const maskProps = useMemo( - () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003) - [euiTheme.levels.flyout] - ); - const { services: { osquery }, } = useKibana(); @@ -70,13 +63,7 @@ const OsqueryFlyoutComponent: React.FC = ({ if (osquery?.OsqueryAction) { return ( - +

{ACTION_OSQUERY}

diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/take_action_button.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/take_action_button.tsx index 7f317c2c437aa..bf58ecb0b00f5 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/take_action_button.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/take_action_button.tsx @@ -8,7 +8,7 @@ import type { FC } from 'react'; import React, { useCallback, useMemo, useState } from 'react'; import { useExpandableFlyoutApi } from '@kbn/expandable-flyout'; -import { EuiFlyout, useEuiTheme } from '@elastic/eui'; +import { EuiFlyout } from '@elastic/eui'; import { find } from 'lodash/fp'; import { useBasicDataFromDetailsData } from '../hooks/use_basic_data_from_details_data'; import type { Status } from '../../../../../common/api/detection_engine'; @@ -53,12 +53,6 @@ interface AlertSummaryData { * Take action button in the panel footer */ export const TakeActionButton: FC = () => { - const { euiTheme } = useEuiTheme(); - const maskProps = useMemo( - () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003) - [euiTheme] - ); - const { closeFlyout } = useExpandableFlyoutApi(); const { dataFormattedForFieldBrowser, dataAsNestedObject, refetchFlyoutData, scopeId } = useDocumentDetailsContext(); @@ -186,12 +180,7 @@ export const TakeActionButton: FC = () => { )} {isAddEventFilterModalOpen && dataAsNestedObject != null && ( - + )} {isOsqueryFlyoutOpenWithAgentId && dataAsNestedObject != null && ( @@ -204,8 +193,7 @@ export const TakeActionButton: FC = () => { )} {isHostIsolationPanelOpen && ( - // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term - + ((props) => { - const { euiTheme } = useEuiTheme(); - const maskProps = useMemo( - () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003) - [euiTheme] - ); - const [showActionLogFlyout, setShowActionLogFlyout] = useState(false); const toggleActionLog = useCallback(() => { setShowActionLogFlyout((prevState) => { @@ -58,8 +51,6 @@ export const ActionLogButton = memo((p paddingSize="l" aria-labelledby={responderActionLogFlyoutTitleId} data-test-subj="responderActionLogFlyout" - // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term - maskProps={maskProps} > diff --git a/x-pack/solutions/security/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx b/x-pack/solutions/security/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx index b0741b7c84cd9..07c966cad4ef5 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/management/components/page_overlay/page_overlay.tsx @@ -33,9 +33,7 @@ const OverlayRootContainer = styled.div` border-left: 1px solid ${({ theme: { eui } }) => eui.euiColorLightestShade}; - z-index: ${({ theme: { eui } }) => - eui.euiZFlyout + - 3}; // we need to have this response div rendered above the timeline flyout (with z-index at 1002) + z-index: ${({ theme: { eui } }) => eui.euiZFlyout}; background-color: ${({ theme: { eui } }) => eui.euiColorEmptyShade}; diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx index 9ba3310864122..3ae14ccdf3b36 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx @@ -29,8 +29,7 @@ export const usePaneStyles = () => { bottom: var(--kbn-layout--application-bottom, 0px); // TODO EUI: add color with transparency background: ${transparentize(euiTheme.colors.ink, 0.5)}; - z-index: ${(euiTheme.levels.flyout as number) + - 2}; // this z-index needs to be between the documentFlyout (set at 1001) and the timelineFlyout (set at 1003) + z-index: ${euiTheme.levels.maskBelowHeader}; ${euiCanAnimate} { animation: ${euiAnimFadeIn} ${euiTheme.animation.fast} ease-in; diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/esql/styles.tsx b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/esql/styles.tsx index 48fae738c4b63..201b3ce8c03e7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/esql/styles.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/esql/styles.tsx @@ -27,9 +27,6 @@ export const TimelineESQLGlobalStyles = createGlobalStyle` .esqlInlineDocumentationFlyout { z-index: 1003 !important; } - .euiOverlayMask { - z-index: 1002 !important; - } } // TODO this should be removed when we change the ES|QL tab to be our own component instead of Discover (hopefully 8.15) diff --git a/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/create_runtime_field.ts b/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/create_runtime_field.ts index 5e42580d60373..474795a409204 100644 --- a/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/create_runtime_field.ts +++ b/x-pack/solutions/security/test/security_solution_cypress/cypress/screens/create_runtime_field.ts @@ -7,6 +7,6 @@ export const CREATE_FIELD_BUTTON = '[data-test-subj="create-field"]'; -export const RUNTIME_FIELD_INPUT = '.indexPatternFieldEditorMaskOverlay [data-test-subj="input"]'; +export const RUNTIME_FIELD_INPUT = '.indexPatternFieldEditorFlyout [data-test-subj="input"]'; export const SAVE_FIELD_BUTTON = '[data-test-subj="fieldSaveButton"]'; diff --git a/yarn.lock b/yarn.lock index 05143007e95ac..8efa9353aa3e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2624,29 +2624,29 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-2.6.0.tgz#e1d72f3969049dd07ca96736119c08e7ac24f748" integrity sha512-XWCgM8TkpMDcX8OX8v0ocm0zI2cuxbRrGVtMcSFqLN8VWP/7JjVuw8Dg1Jo3cvMqXK/2YbfcREgzuCqvPD28+w== -"@elastic/eui-theme-borealis@5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-5.1.0.tgz#43fed047fd2770622a72987b74f0c2e020d21046" - integrity sha512-M+J7AkruSLrjWyNYTmU2rpZ4g1h93tdQ1DANq3K/SD+xR76NLufuJOOhi6ELHWo1FiHWVM4GsnndrbW5aJrD5A== +"@elastic/eui-theme-borealis@5.2.0": + version "5.2.0" + resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-5.2.0.tgz#e73aabdb6f9a54fd819b1de97e692dbdb72c3864" + integrity sha512-1EwwqseJ3IymCVKvk04rUN7pt4YWhS9U3rKFm8+jzqH2k3gwuDaWeVdzhOAMWdTOhrIfwFov8Gu7hpCYRZ0VOQ== dependencies: - "@elastic/eui-theme-common" "7.1.0" + "@elastic/eui-theme-common" "7.2.0" chroma-js "^2.4.2" -"@elastic/eui-theme-common@7.1.0": - version "7.1.0" - resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-7.1.0.tgz#d349389f4b14d8a666c9352ec85a5a17c9771e6d" - integrity sha512-o5h3ph8N3izD+tQOu/KM2kB0jRfzb8+nZwKWnCKkpA9jmm2hBf8QCC51MWtj69pUpsJah3YFSz6WlYVAOuF+iA== +"@elastic/eui-theme-common@7.2.0": + version "7.2.0" + resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-7.2.0.tgz#caf3800d2faca3c69c0beea0afb8684007071580" + integrity sha512-vN8g7znFnhkjHJU1XYHuYZUwXtb9G7EdgqAGj+/jjrcnvmbJiOU1vU9lHMH8MaHkPnWVmk5aBcV3B+yRu06qrQ== dependencies: "@types/lodash" "^4.14.202" chroma-js "^2.4.2" lodash "^4.17.21" -"@elastic/eui@110.0.0": - version "110.0.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-110.0.0.tgz#2baeb804e5124b1c88577d7b9b03fdbbcfcdf7a8" - integrity sha512-mzq9NTrJNkkTp7d+zV8wX8NeiqivczwfthZlV/dIjW2qCTH1eU3B7gT5c28qrymynvD9Jp6zy/EtK8MnEzB4ng== +"@elastic/eui@111.0.0": + version "111.0.0" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-111.0.0.tgz#e9f27ed57e966af9b9507f294ce6c40fb8f7c5f4" + integrity sha512-FqXSLqiVUYrk+yuxjEV1hUTqf0RxyKC299iFfc027+s/yUp7D39T/eBpig67HxvC3i4yYctuQiOHjry41cv3xA== dependencies: - "@elastic/eui-theme-common" "7.1.0" + "@elastic/eui-theme-common" "7.2.0" "@elastic/prismjs-esql" "^1.1.2" "@hello-pangea/dnd" "^16.6.0" "@types/lodash" "^4.14.202" @@ -2679,6 +2679,7 @@ unified "^9.2.2" unist-util-visit "^2.0.3" url-parse "^1.5.10" + use-sync-external-store "^1.6.0" uuid "^8.3.0" vfile "^4.2.1" @@ -33811,10 +33812,10 @@ use-sync-external-store@1.2.2: resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9" integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw== -use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0, use-sync-external-store@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz#adbc795d8eeb47029963016cefdf89dc799fcebc" - integrity sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw== +use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0, use-sync-external-store@^1.4.0, use-sync-external-store@^1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d" + integrity sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w== use@^2.0.0: version "2.0.2"