Skip to content

Commit d2b6936

Browse files
[Discover] Fix issue with actions column header size (elastic#235227)
## Summary This PR fixes the bug with showing "Actions" header column name even if there was no space and info icon would fit better. It uses the EuiResizeObserver to get the dimentions of the action column and decide if we should show icon or full text. Resolves: elastic#234647 ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels.
1 parent 9e64dd9 commit d2b6936

File tree

1 file changed

+31
-23
lines changed
  • src/platform/packages/shared/kbn-unified-data-table/src/components/custom_control_columns/actions_column

1 file changed

+31
-23
lines changed

src/platform/packages/shared/kbn-unified-data-table/src/components/custom_control_columns/actions_column/actions_header.tsx

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,28 @@
77
* License v3.0 only", or the "Server Side Public License, v 1".
88
*/
99

10-
import React, { useLayoutEffect, useRef, useState } from 'react';
11-
import { EuiIconTip, EuiScreenReaderOnly } from '@elastic/eui';
10+
import React, { useCallback, useState } from 'react';
11+
import {
12+
type EuiResizeObserverProps,
13+
EuiIconTip,
14+
EuiResizeObserver,
15+
EuiScreenReaderOnly,
16+
} from '@elastic/eui';
1217
import { css } from '@emotion/react';
1318
import { i18n } from '@kbn/i18n';
1419
import ColumnHeaderTruncateContainer from '../../column_header_truncate_container';
1520

1621
export const ActionsHeader = ({ maxWidth }: { maxWidth: number }) => {
17-
const textRef = useRef<HTMLSpanElement>(null);
1822
const [showText, setShowText] = useState(false);
1923

20-
useLayoutEffect(() => {
21-
if (!textRef.current) return;
22-
const textWidth = textRef.current.getBoundingClientRect().width;
23-
setShowText(textWidth < maxWidth);
24-
}, [textRef, maxWidth, setShowText]);
24+
const measure: EuiResizeObserverProps['onResize'] = useCallback(
25+
(dimensions) => {
26+
if (!dimensions) return;
27+
28+
setShowText(dimensions.width < maxWidth);
29+
},
30+
[maxWidth]
31+
);
2532

2633
const actionsText = i18n.translate('unifiedDataTable.controlColumnsActionHeader', {
2734
defaultMessage: 'Actions',
@@ -40,25 +47,26 @@ export const ActionsHeader = ({ maxWidth }: { maxWidth: number }) => {
4047
<span data-test-subj="unifiedDataTable_actionsColumnHeaderText">{actionsText}</span>
4148
) : (
4249
<EuiIconTip
43-
iconProps={{
44-
'data-test-subj': 'unifiedDataTable_actionsColumnHeaderIcon',
45-
}}
50+
iconProps={{ 'data-test-subj': 'unifiedDataTable_actionsColumnHeaderIcon' }}
4651
type="info"
4752
content={actionsText}
4853
/>
4954
)}
50-
{/* Hidden measurement span */}
51-
<span
52-
ref={textRef}
53-
css={css`
54-
position: absolute;
55-
visibility: hidden;
56-
white-space: nowrap;
57-
pointer-events: none;
58-
`}
59-
>
60-
{actionsText}
61-
</span>
55+
<EuiResizeObserver onResize={measure}>
56+
{(resizeRef) => (
57+
<span
58+
ref={resizeRef}
59+
css={css`
60+
position: absolute;
61+
visibility: hidden;
62+
white-space: nowrap;
63+
pointer-events: none;
64+
`}
65+
>
66+
{actionsText}
67+
</span>
68+
)}
69+
</EuiResizeObserver>
6270
</ColumnHeaderTruncateContainer>
6371
);
6472
};

0 commit comments

Comments
 (0)