maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

added submit to customize panel modal so that enter button works (#95704)

Browse source
This commit is contained in:
Devon Thomson 2021-03-30 14:26:03 -04:00 committed by GitHub
parent f21417660a
commit 738425932f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 77 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_modal.tsx
View file

@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
import React, { Component } from 'react';
import React, { Component, FormEvent } from 'react';
import {
EuiFormRow,
@ -72,80 +72,87 @@ export class CustomizePanelModal extends Component<CustomizePanelProps, State> {
<EuiFocusTrap clickOutsideDisables={true} initialFocus={'.panelTitleInputText'}>
<EuiOutsideClickDetector onOutsideClick={this.props.cancel}>
<div role="dialog" aria-modal="true" aria-labelledby={titleId} className="euiModal__flex">
<EuiModalHeader>
<EuiModalHeaderTitle data-test-subj="customizePanelTitle">
<h2 id={titleId}>Customize panel</h2>
</EuiModalHeaderTitle>
</EuiModalHeader>
<form
onSubmit={(event: FormEvent) => {
event.preventDefault();
this.save();
}}
>
<EuiModalHeader>
<EuiModalHeaderTitle data-test-subj="customizePanelTitle">
<h2 id={titleId}>Customize panel</h2>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiFormRow>
<EuiSwitch
checked={!this.state.hideTitle}
data-test-subj="customizePanelHideTitle"
id="hideTitle"
label={
<FormattedMessage
defaultMessage="Show panel title"
id="embeddableApi.customizePanel.modal.showTitle"
/>
}
onChange={this.onHideTitleToggle}
/>
</EuiFormRow>
<EuiFormRow
label={i18n.translate(
'embeddableApi.customizePanel.modal.optionsMenuForm.panelTitleFormRowLabel',
{
defaultMessage: 'Panel title',
}
)}
>
<EuiFieldText
id="panelTitleInput"
className="panelTitleInputText"
data-test-subj="customEmbeddablePanelTitleInput"
name="min"
type="text"
disabled={this.state.hideTitle}
value={this.state.title || ''}
onChange={(e) => this.setState({ title: e.target.value })}
aria-label={i18n.translate(
'embeddableApi.customizePanel.modal.optionsMenuForm.panelTitleInputAriaLabel',
<EuiModalBody>
<EuiFormRow>
<EuiSwitch
checked={!this.state.hideTitle}
data-test-subj="customizePanelHideTitle"
id="hideTitle"
label={
<FormattedMessage
defaultMessage="Show panel title"
id="embeddableApi.customizePanel.modal.showTitle"
/>
}
onChange={this.onHideTitleToggle}
/>
</EuiFormRow>
<EuiFormRow
label={i18n.translate(
'embeddableApi.customizePanel.modal.optionsMenuForm.panelTitleFormRowLabel',
{
defaultMessage: 'Enter a custom title for your panel',
defaultMessage: 'Panel title',
}
)}
append={
<EuiButtonEmpty
data-test-subj="resetCustomEmbeddablePanelTitle"
onClick={this.reset}
disabled={this.state.hideTitle}
>
<FormattedMessage
id="embeddableApi.customizePanel.modal.optionsMenuForm.resetCustomDashboardButtonLabel"
defaultMessage="Reset"
/>
</EuiButtonEmpty>
}
/>
</EuiFormRow>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={() => this.props.cancel()}>
<FormattedMessage
id="embeddableApi.customizePanel.modal.cancel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
>
<EuiFieldText
id="panelTitleInput"
className="panelTitleInputText"
data-test-subj="customEmbeddablePanelTitleInput"
name="min"
type="text"
disabled={this.state.hideTitle}
value={this.state.title || ''}
onChange={(e) => this.setState({ title: e.target.value })}
aria-label={i18n.translate(
'embeddableApi.customizePanel.modal.optionsMenuForm.panelTitleInputAriaLabel',
{
defaultMessage: 'Enter a custom title for your panel',
}
)}
append={
<EuiButtonEmpty
data-test-subj="resetCustomEmbeddablePanelTitle"
onClick={this.reset}
disabled={this.state.hideTitle}
>
<FormattedMessage
id="embeddableApi.customizePanel.modal.optionsMenuForm.resetCustomDashboardButtonLabel"
defaultMessage="Reset"
/>
</EuiButtonEmpty>
}
/>
</EuiFormRow>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={() => this.props.cancel()}>
<FormattedMessage
id="embeddableApi.customizePanel.modal.cancel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
<EuiButton data-test-subj="saveNewTitleButton" onClick={this.save} fill>
<FormattedMessage
id="embeddableApi.customizePanel.modal.saveButtonTitle"
defaultMessage="Save"
/>
</EuiButton>
</EuiModalFooter>
<EuiButton data-test-subj="saveNewTitleButton" onClick={this.save} fill>
<FormattedMessage
id="embeddableApi.customizePanel.modal.saveButtonTitle"
defaultMessage="Save"
/>
</EuiButton>
</EuiModalFooter>
</form>
</div>
</EuiOutsideClickDetector>
</EuiFocusTrap>