[Visualize] Adds an info icon tip to the update button (#101469)

* [Visualize] Adds an info tooltip to the update button

* Add iconTip to the visEditor update button

* Move to the left and change the icon

* Update test

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Stratoula Kalafateli 2021-06-23 17:52:15 +03:00 committed by GitHub
parent 91295fddd7
commit a96eaa480f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -7,7 +7,14 @@
*/
import React, { useCallback, useState } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiButton, EuiButtonEmpty, EuiToolTip } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiButton,
EuiButtonEmpty,
EuiToolTip,
EuiIconTip,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import useDebounce from 'react-use/lib/useDebounce';
@ -84,19 +91,32 @@ function DefaultEditorControls({
</EuiButton>
</EuiToolTip>
) : (
<EuiButton
data-test-subj="visualizeEditorRenderButton"
disabled={!isDirty}
fill
iconType="play"
onClick={applyChanges}
size="s"
>
<FormattedMessage
id="visDefaultEditor.sidebar.updateChartButtonLabel"
defaultMessage="Update"
/>
</EuiButton>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
<EuiFlexItem grow={false}>
<EuiIconTip
content={i18n.translate('visDefaultEditor.sidebar.updateInfoTooltip', {
defaultMessage: 'CTRL + Enter is a shortcut for Update.',
})}
type="keyboardShortcut"
color="subdued"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
data-test-subj="visualizeEditorRenderButton"
disabled={!isDirty}
fill
iconType="play"
onClick={applyChanges}
size="s"
>
<FormattedMessage
id="visDefaultEditor.sidebar.updateChartButtonLabel"
defaultMessage="Update"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
)}
</EuiFlexItem>
</EuiFlexGroup>