github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ES|QL] Vertical align expand icon in history component (#207042)

Browse source 
## Summary

Closes https://github.com/elastic/kibana/issues/204072

Aligns in top the expandable icon in the history component

<img width="1675" alt="image"
src="https://github.com/user-attachments/assets/0a2a98ae-759f-408e-9a30-dd0c7f884153"
/>


It also fixes a small bug. When the query was expanded and the user
resized the window, the icon was vanished.
This commit is contained in:
Stratoula Kalafateli 2025-01-21 10:10:47 +01:00 • committed by GitHub
parent 8b97ad0b13
commit 4a6891ff9f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.test.tsx
View file

@ -78,6 +78,7 @@ describe('Starred and History queries components', () => {
field: 'queryString',
name: 'Query',
render: expect.anything(),
css: expect.anything(),
},
{
'data-test-subj': 'timeRan',
@ -120,6 +121,7 @@ describe('Starred and History queries components', () => {
field: 'queryString',
name: 'Query',
render: expect.anything(),
css: expect.anything(),
},
{
'data-test-subj': 'timeRan',
@ -171,6 +173,7 @@ describe('Starred and History queries components', () => {
field: 'queryString',
name: 'Query',
render: expect.anything(),
css: expect.anything(),
},
{
actions: [],

9
src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx
View file

@ -194,6 +194,11 @@ export const getTableColumns = (
name: i18n.translate('esqlEditor.query.recentQueriesColumnLabel', {
defaultMessage: 'Query',
}),
css: css`
.euiTableCellContent {
align-items: flex-start;
}
`,
render: (queryString: QueryHistoryItem['queryString']) => (
<QueryColumn
queryString={queryString}
@ -408,9 +413,9 @@ export function QueryColumn({
useEffect(() => {
if (containerRef.current) {
const textIsOverlapping = containerRef.current.offsetWidth < containerRef.current.scrollWidth;
setIsExpandable(textIsOverlapping);
setIsExpandable(textIsOverlapping || isRowExpanded);
}
}, [containerWidth]);
}, [containerWidth, isRowExpanded, queryString]);
return (
<>