diff --git a/package.json b/package.json index d392bbe42b074..8df800e90f83e 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,7 @@ "@elastic/ecs": "^8.11.1", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.5.1", - "@elastic/eui": "93.0.0", + "@elastic/eui": "93.1.1", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", diff --git a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap index 50b4b74b0f3e5..87f13bee8f7c9 100644 --- a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap +++ b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap @@ -383,7 +383,6 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiTourStepIndicator.isActive": "active", "euiTourStepIndicator.isComplete": "complete", "euiTourStepIndicator.isIncomplete": "incomplete", - "euiTreeView.ariaLabel": [Function], "euiTreeView.listNavigationInstructions": "You can quickly navigate this list using arrow keys.", }, } diff --git a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx index a8c4db74ba406..58f057e2fedcc 100644 --- a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx +++ b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx @@ -1737,11 +1737,6 @@ export const getEuiContextMapping = (): EuiTokensObject => { values: { status, number }, description: 'Screen reader text describing the state of a tour step', }), - 'euiTreeView.ariaLabel': ({ nodeLabel, ariaLabel }: EuiValues) => - i18n.translate('core.euiTreeView.ariaLabel', { - defaultMessage: '{nodeLabel} child of {ariaLabel}', - values: { nodeLabel, ariaLabel }, - }), 'euiTreeView.listNavigationInstructions': i18n.translate( 'core.euiTreeView.listNavigationInstructions', { diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index 6b1be5c45934a..319d66567336b 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -85,7 +85,7 @@ 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.5.1': ['Elastic License 2.0'], - '@elastic/eui@93.0.0': ['SSPL-1.0 OR Elastic License 2.0'], + '@elastic/eui@93.1.1': ['SSPL-1.0 OR Elastic License 2.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@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause) diff --git a/x-pack/plugins/apm/public/components/shared/unified_search_bar/index.tsx b/x-pack/plugins/apm/public/components/shared/unified_search_bar/index.tsx index 0e2c3d7bd02cb..8ffd8061ee8d5 100644 --- a/x-pack/plugins/apm/public/components/shared/unified_search_bar/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/unified_search_bar/index.tsx @@ -229,7 +229,7 @@ export function UnifiedSearchBar({ const onRefreshChange = ({ isPaused, refreshInterval, - }: OnRefreshChangeProps) => { + }: Partial) => { const existingQueryParams = toQuery(location.search); const updatedQueryParams = { ...existingQueryParams, diff --git a/x-pack/plugins/kubernetes_security/common/translations.ts b/x-pack/plugins/kubernetes_security/common/translations.ts index a2eb4c17a5984..7ccf59c9f3bb5 100644 --- a/x-pack/plugins/kubernetes_security/common/translations.ts +++ b/x-pack/plugins/kubernetes_security/common/translations.ts @@ -49,6 +49,12 @@ export const TREE_NAVIGATION_LOADING = i18n.translate( defaultMessage: 'Loading', } ); +export const TREE_NAVIGATION_EMPTY = i18n.translate( + 'xpack.kubernetesSecurity.treeNavigation.empty', + { + defaultMessage: 'No data available', + } +); export const TREE_NAVIGATION_SHOW_MORE = (name: string) => i18n.translate('xpack.kubernetesSecurity.treeNavigation.loadMore', { values: { name }, diff --git a/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/index.test.tsx b/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/index.test.tsx index 125ff6702e2a8..7752ba8d96e51 100644 --- a/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/index.test.tsx +++ b/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/index.test.tsx @@ -56,7 +56,6 @@ describe('DynamicTreeView component', () => { }, }, ]} - aria-label="Logical Tree View" onSelect={(selectionDepth, key, type) => {}} {...props} /> diff --git a/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/index.tsx b/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/index.tsx index bfc6f1803c2a3..6527e290c5903 100644 --- a/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/index.tsx +++ b/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/index.tsx @@ -5,9 +5,9 @@ * 2.0. */ -import React, { useEffect, useState, useRef, MouseEvent, KeyboardEvent, useMemo } from 'react'; +import React, { useEffect, useState, useRef, KeyboardEvent, useMemo } from 'react'; import { - EuiIcon, + EuiTreeView, EuiText, EuiI18n, EuiScreenReaderOnly, @@ -15,9 +15,14 @@ import { keys, EuiLoadingSpinner, EuiToolTip, + useEuiTheme, } from '@elastic/eui'; +// @ts-expect-error style types not defined, but they exist +import { euiTreeViewStyles } from '@elastic/eui/lib/components/tree_view/tree_view.styles'; + import { TREE_NAVIGATION_LOADING, + TREE_NAVIGATION_EMPTY, TREE_NAVIGATION_SHOW_MORE, } from '../../../../common/translations'; import { useFetchDynamicTreeView } from './hooks'; @@ -64,17 +69,17 @@ export const DynamicTreeView = ({ onSelect, selected = '', expanded = true, - ...props + onKeyDown, }: DynamicTreeViewProps) => { const styles = useStyles(depth); + const euiStyles = euiTreeViewStyles(useEuiTheme()); + const euiTreeViewCss = [euiStyles.euiTreeView, euiStyles.default]; const { indexPattern, setNoResults, setTreeNavSelection } = useTreeViewContext(); const { data, fetchNextPage, isFetchingNextPage, hasNextPage, isLoading } = useFetchDynamicTreeView(query, tree[depth].key, indexPattern, expanded); - const ariaLabel = props['aria-label']; - const onLoadMoreKeydown = (event: React.KeyboardEvent) => { switch (event.key) { case keys.ARROW_DOWN: { @@ -135,17 +140,7 @@ export const DynamicTreeView = ({ }, [data?.pages]); return ( - - {isLoading && ( -
- - {TREE_NAVIGATION_LOADING} -
- )} + @@ -232,10 +239,8 @@ const DynamicTreeViewItem = ({ selected, expanded, query, - ...props }: DynamicTreeViewItemProps) => { const isLastNode = depth === tree.length - 1; - const styles = useStyles(depth); const buttonRef = useRef>({}); const handleSelect = () => { @@ -254,17 +259,10 @@ const DynamicTreeViewItem = ({ }; const onButtonToggle = () => { - if (!isLastNode && !isExpanded) { - onToggleExpand(); - } - handleSelect(); - }; - - const onArrowToggle = (event: MouseEvent) => { - disableEventDefaults(event); if (!isLastNode) { onToggleExpand(); } + handleSelect(); }; // Enable keyboard navigation @@ -303,73 +301,44 @@ const DynamicTreeViewItem = ({ } }; - const isSelected = useMemo(() => { - return ( - selected === - Object.entries({ - ...selectionDepth, - [tree[depth].type]: aggData.key, - ...(tree[depth].type === 'clusterId' && - aggData.key_as_string && { - clusterName: aggData.key_as_string, - }), - }) - .map(([k, v]) => `${k}.${v}`) - .join() - ); - }, [aggData.key, aggData.key_as_string, depth, selected, selectionDepth, tree]); - const clusterLevel = BREADCRUMBS_CLUSTER_TREE_VIEW_LEVELS[tree[depth].type]; return ( -
  • - -
    onChildrenKeydown(event, aggData.key.toString())} - > - {!isLastNode && ( - - )} -
    -
    • + } + buttonRef={(el: HTMLButtonElement) => (buttonRef.current[aggData.key] = el)} + data-test-subj={expanded ? BUTTON_TEST_ID : ''} + > + {!isLastNode && ( + + onChildrenKeydown(event, aggData.key.toString()) + } + /> + )} + ); }; diff --git a/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/styles.ts b/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/styles.ts index 08d782e31e72e..fc2a9c2a42bea 100644 --- a/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/styles.ts +++ b/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/styles.ts @@ -7,75 +7,64 @@ import { useMemo } from 'react'; import { CSSObject } from '@emotion/react'; -import { transparentize } from '@elastic/eui'; import { useEuiTheme } from '../../../hooks'; export const useStyles = (depth: number) => { const { euiTheme } = useEuiTheme(); const cached = useMemo(() => { - const { size, colors } = euiTheme; + const { size, colors, border } = euiTheme; - const loadMoreButtonWrapper: CSSObject = { + const loadMoreButton: CSSObject = { position: 'relative', textAlign: 'center', width: `calc(100% + ${depth * 24}px)`, marginLeft: `-${depth * 24}px`, - '&:after': { + '&::after': { content: `''`, position: 'absolute', top: '50%', width: '100%', - border: `1px dashed ${colors.mediumShade}`, + border: `${border.width.thin} dashed ${colors.mediumShade}`, left: 0, }, + '&:hover, &:focus': { + backgroundColor: 'transparent', + }, + '.euiTreeView__nodeLabel': { + width: '100%', + }, }; - const loadMoreButton: CSSObject = { + const loadMoreBadge: CSSObject = { position: 'relative', cursor: 'pointer', zIndex: 2, + '.euiBadge__content': { + gap: size.xs, + }, }; - const loadMoreText: CSSObject = { - marginRight: size.s, - }; - const loadMoreTextLeft: CSSObject = { - marginLeft: size.s, - }; - const leafNodeButton: CSSObject = { - marginLeft: size.l, - width: `calc(100% - ${size.l})`, - paddingLeft: 0, - }; - const labelIcon: CSSObject = { - marginRight: size.s, - marginLeft: size.s, - }; - - const treeViewWrapper = (expanded: boolean): CSSObject => ({ - display: !expanded ? 'none' : 'inherit', - '.euiTreeView__node--selected > .euiTreeView__nodeInner': { - backgroundColor: transparentize(colors.darkestShade, 0.1), + const nonInteractiveItem: CSSObject = { + pointerEvents: 'none', + '&:hover, &:focus': { + backgroundColor: 'transparent', }, - '.euiTreeView__node--expanded': { - maxHeight: '100%', + }; + const euiTreeViewWrapper: CSSObject = { + ul: { + marginLeft: '0 !important', + fontSize: 'inherit', }, - '.euiTreeView__nodeInner .euiToolTipAnchor': { - maxWidth: '100%', - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - wordWrap: 'normal', + // Override default EUI max-height - `DynamicTreeView` has its own scrolling container + '.euiTreeView__node': { + maxBlockSize: 'none', }, - }); + }; return { loadMoreButton, - loadMoreButtonWrapper, - loadMoreText, - loadMoreTextLeft, - leafNodeButton, - labelIcon, - treeViewWrapper, + loadMoreBadge, + nonInteractiveItem, + euiTreeViewWrapper, }; }, [euiTheme, depth]); diff --git a/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/types.ts b/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/types.ts index dfc51b72516a3..835aa397ebadb 100644 --- a/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/types.ts +++ b/x-pack/plugins/kubernetes_security/public/components/tree_view_container/dynamic_tree_view/types.ts @@ -5,6 +5,7 @@ * 2.0. */ +import { KeyboardEventHandler } from 'react'; import { QueryDslQueryContainerBool, KubernetesCollectionMap, DynamicTree } from '../../../types'; export type DynamicTreeViewProps = { @@ -19,12 +20,14 @@ export type DynamicTreeViewProps = { clusterName?: string ) => void; hasSelection?: boolean; - 'aria-label': string; selected?: string; expanded?: boolean; + onKeyDown?: KeyboardEventHandler | undefined; }; -export type DynamicTreeViewItemProps = Required> & { +export type DynamicTreeViewItemProps = Required< + Omit +> & { onToggleExpand: any; aggData: any; isExpanded: boolean; diff --git a/x-pack/plugins/kubernetes_security/public/components/tree_view_container/tree_nav/index.tsx b/x-pack/plugins/kubernetes_security/public/components/tree_view_container/tree_nav/index.tsx index 213bbcfeccbfe..9060cb8e46b87 100644 --- a/x-pack/plugins/kubernetes_security/public/components/tree_view_container/tree_nav/index.tsx +++ b/x-pack/plugins/kubernetes_security/public/components/tree_view_container/tree_nav/index.tsx @@ -66,10 +66,6 @@ export const TreeNav = () => { [logicalTreeViewPrefix, treeNavTypePrefix] ); - const selectedLabel = useMemo(() => { - return options.find((opt) => opt.id === toggleIdSelected)!.label; - }, [options, toggleIdSelected]); - const handleTreeViewSwitch = useCallback( (id: string, value: TreeViewKind) => { setToggleIdSelected(id); @@ -124,7 +120,6 @@ export const TreeNav = () => { { const newSelectionDepth = { diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 05aff9e3894de..f0d6a87421536 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -566,7 +566,6 @@ "core.euiTableHeaderCell.titleTextWithDesc": "{innerText}; {description}", "core.euiTablePagination.rowsPerPageOption": "{rowsPerPage} lignes", "core.euiTourStepIndicator.ariaLabel": "Étape {number} {status}", - "core.euiTreeView.ariaLabel": "{nodeLabel} enfant de {ariaLabel}", "core.savedObjects.deprecations.unknownTypes.message": "{objectCount, plural, one {# objet} many {# objets} other {# objets}} avec des types inconnus {objectCount, plural, one {a été trouvé} many {sont introuvables} other {ont été trouvés}} dans les index système Kibana. La mise à niveau avec des types savedObject inconnus n'est plus compatible. Pour assurer la réussite des mises à niveau à l'avenir, réactivez les plug-ins ou supprimez ces documents dans les indices de Kibana", "core.statusPage.loadStatus.serverStatusCodeErrorMessage": "Échec de requête du statut du serveur avec le code de statut {responseStatus}", "core.statusPage.metricsTiles.columns.heapUsedHeader": "Tas utilisé sur {heapTotal}", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index ae652805fe475..ce5c3ecacf146 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -580,7 +580,6 @@ "core.euiTableHeaderCell.titleTextWithDesc": "{innerText}; {description}", "core.euiTablePagination.rowsPerPageOption": "{rowsPerPage}行", "core.euiTourStepIndicator.ariaLabel": "ステップ{number}{status}", - "core.euiTreeView.ariaLabel": "{ariaLabel}の{nodeLabel}子", "core.savedObjects.deprecations.unknownTypes.message": "Kibanaシステムインデックスで不明なタイプの{objectCount, plural, other {#個のオブジェクト}}{objectCount, plural, other {が}}見つかりました。不明なsavedObject型のアップグレードはサポートされていません。今後アップグレードが成功することを保証するには、プラグインを再有効化するか、これらのドキュメントをKibanaインデックスから削除してください", "core.statusPage.loadStatus.serverStatusCodeErrorMessage": "サーバーステータスのリクエストに失敗しました。ステータスコード：{responseStatus}", "core.statusPage.metricsTiles.columns.heapUsedHeader": "{heapTotal}中使用済みのヒープ", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index f51c0039ff8c9..66efeb901623c 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -580,7 +580,6 @@ "core.euiTableHeaderCell.titleTextWithDesc": "{innerText}; {description}", "core.euiTablePagination.rowsPerPageOption": "{rowsPerPage} 行", "core.euiTourStepIndicator.ariaLabel": "第 {number} 步{status}", - "core.euiTreeView.ariaLabel": "{ariaLabel} 的 {nodeLabel} 子对象", "core.savedObjects.deprecations.unknownTypes.message": "在 Kibana 系统索引中有{objectCount, plural, other {有}}{objectCount, plural, other {# 个对象}}的类型未知。不再支持使用未知的已保存对象类型进行升级。为确保未来成功升级，请重新启用插件，或从 Kibana 索引中删除这些文档", "core.statusPage.loadStatus.serverStatusCodeErrorMessage": "无法使用状态代码 {responseStatus} 请求服务器状态", "core.statusPage.metricsTiles.columns.heapUsedHeader": "已使用堆数（共 {heapTotal} 个）", diff --git a/yarn.lock b/yarn.lock index e25b72cb6707c..554c59dd14174 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1744,10 +1744,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@93.0.0": - version "93.0.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-93.0.0.tgz#43ba256d94f3d3acddee23427c9fa5285a43d7e4" - integrity sha512-Q5gY9roWZsB1At0rxG5d9M5P7+J4hfv8fzvuqNHoVjIxbeibHRCSq2TtOQcSUjhKE5Tu/BIZijzuYX8vITGaSQ== +"@elastic/eui@93.1.1": + version "93.1.1" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-93.1.1.tgz#03c9667456664978c3477abef52afd6aceb48ebf" + integrity sha512-YnmNST8PmgAyeahDFTUTpToiBAc6gOyK/RSSqx6NTxCmUCwXnV7Oog9TUHlQ8tYGLjfFXrAja6Msy0X2VuxHOA== dependencies: "@hello-pangea/dnd" "^16.3.0" "@types/lodash" "^4.14.198"