@@ -13,7 +13,7 @@ import { v4 as uuidv4 } from 'uuid';
1313import type { CoreStart } from '@kbn/core/public' ;
1414import type { UsageCollectionStart } from '@kbn/usage-collection-plugin/public' ;
1515import type { Storage } from '@kbn/kibana-utils-plugin/public' ;
16- import { EuiButtonIcon } from '@elastic/eui' ;
16+ import { EuiButtonIcon , EuiToolTip } from '@elastic/eui' ;
1717import { FavoritesClient , StardustWrapper } from '@kbn/content-management-favorites-public' ;
1818import { FAVORITES_LIMIT as ESQL_STARRED_QUERIES_LIMIT } from '@kbn/content-management-favorites-common' ;
1919import { type QueryHistoryItem , getTrimmedQuery } from '../history_local_storage' ;
@@ -206,8 +206,8 @@ export class EsqlStarredQueriesService {
206206 >
207207 { /* show startdust effect only after starring the query and not on the initial load */ }
208208 < StardustWrapper active = { isStarred && trimmedQueryString === this . queryToAdd } >
209- < EuiButtonIcon
210- title = {
209+ < EuiToolTip
210+ content = {
211211 isStarred
212212 ? i18n . translate ( 'esqlEditor.query.querieshistory.removeFavoriteTitle' , {
213213 defaultMessage : 'Remove ES|QL query from Starred' ,
@@ -216,35 +216,39 @@ export class EsqlStarredQueriesService {
216216 defaultMessage : 'Add ES|QL query to Starred' ,
217217 } )
218218 }
219- className = { ! isStarred ? 'cm-favorite-button--empty' : '' }
220- aria-label = {
221- isStarred
222- ? i18n . translate ( 'esqlEditor.query.querieshistory.removeFavoriteTitle' , {
223- defaultMessage : 'Remove ES|QL query from Starred' ,
224- } )
225- : i18n . translate ( 'esqlEditor.query.querieshistory.addFavoriteTitle' , {
226- defaultMessage : 'Add ES|QL query to Starred' ,
227- } )
228- }
229- iconType = { isStarred ? 'starFill' : 'star' }
230- disabled = { ! isStarred && this . checkIfStarredQueriesLimitReached ( ) }
231- onClick = { async ( ) => {
232- this . queryToEdit = trimmedQueryString ;
233- if ( isStarred ) {
234- // show the discard modal only if the user has not dismissed it
235- if ( ! this . storage . get ( STARRED_QUERIES_DISCARD_KEY ) ) {
236- this . discardModalVisibility$ . next ( true ) ;
219+ disableScreenReaderOutput
220+ >
221+ < EuiButtonIcon
222+ className = { ! isStarred ? 'cm-favorite-button--empty' : '' }
223+ aria-label = {
224+ isStarred
225+ ? i18n . translate ( 'esqlEditor.query.querieshistory.removeFavoriteTitle' , {
226+ defaultMessage : 'Remove ES|QL query from Starred' ,
227+ } )
228+ : i18n . translate ( 'esqlEditor.query.querieshistory.addFavoriteTitle' , {
229+ defaultMessage : 'Add ES|QL query to Starred' ,
230+ } )
231+ }
232+ iconType = { isStarred ? 'starFill' : 'star' }
233+ disabled = { ! isStarred && this . checkIfStarredQueriesLimitReached ( ) }
234+ onClick = { async ( ) => {
235+ this . queryToEdit = trimmedQueryString ;
236+ if ( isStarred ) {
237+ // show the discard modal only if the user has not dismissed it
238+ if ( ! this . storage . get ( STARRED_QUERIES_DISCARD_KEY ) ) {
239+ this . discardModalVisibility$ . next ( true ) ;
240+ } else {
241+ await this . removeStarredQuery ( item . queryString ) ;
242+ }
237243 } else {
238- await this . removeStarredQuery ( item . queryString ) ;
244+ this . queryToAdd = trimmedQueryString ;
245+ await this . addStarredQuery ( item ) ;
246+ this . queryToAdd = '' ;
239247 }
240- } else {
241- this . queryToAdd = trimmedQueryString ;
242- await this . addStarredQuery ( item ) ;
243- this . queryToAdd = '' ;
244- }
245- } }
246- data-test-subj = "ESQLFavoriteButton"
247- />
248+ } }
249+ data-test-subj = "ESQLFavoriteButton"
250+ />
251+ </ EuiToolTip >
248252 </ StardustWrapper >
249253 </ TooltipWrapper >
250254 ) ;
0 commit comments