diff --git a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_header.tsx b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_header.tsx index 05d84142e6e34..4f3d7bb0b6763 100644 --- a/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_header.tsx +++ b/src/legacy/core_plugins/embeddable_api/public/np_ready/public/lib/panel/panel_header/panel_header.tsx @@ -17,12 +17,14 @@ * under the License. */ import { i18n } from '@kbn/i18n'; -import { EuiContextMenuPanelDescriptor, EuiBadge } from '@elastic/eui'; +import { EuiContextMenuPanelDescriptor, EuiBadge, EuiIcon, EuiToolTip } from '@elastic/eui'; import classNames from 'classnames'; import React from 'react'; import { PanelOptionsMenu } from './panel_options_menu'; import { Action } from '../../actions'; import { IEmbeddable } from '../../embeddables'; +import { VisualizeEmbeddable } from '../../../../../../../kibana/public/visualize/embeddable/visualize_embeddable'; +import { VISUALIZE_EMBEDDABLE_TYPE } from '../../../../../../../kibana/public/visualize/embeddable/constants'; export interface PanelHeaderProps { title?: string; @@ -47,6 +49,12 @@ function renderBadges(badges: Action[], embeddable: IEmbeddable) { )); } +function isVisualizeEmbeddable( + embeddable: IEmbeddable | VisualizeEmbeddable +): embeddable is VisualizeEmbeddable { + return embeddable.type === VISUALIZE_EMBEDDABLE_TYPE; +} + export function PanelHeader({ title, isViewMode, @@ -75,6 +83,16 @@ export function PanelHeader({ ); } + let viewDescr = ''; + if (isVisualizeEmbeddable(embeddable)) { + const vd = (embeddable as VisualizeEmbeddable).getVisualizationDescription(); + if (vd) { + viewDescr = vd; + } + } else { + viewDescr = ''; + } + return (
{showTitle ? `${title} ` : ''} {renderBadges(badges, embeddable)} + {viewDescr !== '' ? ( + + + + ) : ( + '' + )}
{ - const onSave = ({ newTitle, newCopyOnSave, isTitleDuplicateConfirmed, onTitleDuplicate }) => { + const onSave = ({ newTitle, newCopyOnSave, isTitleDuplicateConfirmed, onTitleDuplicate, newDescription }) => { const currentTitle = savedVis.title; savedVis.title = newTitle; savedVis.copyOnSave = newCopyOnSave; + savedVis.description = newDescription; const saveOptions = { confirmOverwrite: false, isTitleDuplicateConfirmed, @@ -219,6 +220,7 @@ function VisEditor( showCopyOnSave={savedVis.id ? true : false} objectType="visualization" confirmButtonLabel={confirmButtonLabel} + description={savedVis.description} />); showSaveModal(saveModal); } diff --git a/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts b/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts index 6aa0a08d88cbb..48d5dc178ff31 100644 --- a/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts +++ b/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts @@ -119,6 +119,10 @@ export class VisualizeEmbeddable extends Embeddable ) }, + { + field: 'description', + name: intl.formatMessage({ + id: 'kbn.dashboard.listing.table.descriptionColumnName', + defaultMessage: 'Description', + }), + sortable: true, + render: (field, record) => ( + + {record.description} + + ) + }, ]; return tableColumns; diff --git a/src/plugins/kibana_react/public/saved_objects/__snapshots__/saved_object_save_modal.test.tsx.snap b/src/plugins/kibana_react/public/saved_objects/__snapshots__/saved_object_save_modal.test.tsx.snap index af1fb5f647daf..92e3f752cb633 100644 --- a/src/plugins/kibana_react/public/saved_objects/__snapshots__/saved_object_save_modal.test.tsx.snap +++ b/src/plugins/kibana_react/public/saved_objects/__snapshots__/saved_object_save_modal.test.tsx.snap @@ -50,6 +50,27 @@ exports[`SavedObjectSaveModal should render matching snapshot 1`] = ` value="Saved Object title" /> + + } + labelType="label" + > + + diff --git a/src/plugins/kibana_react/public/saved_objects/saved_object_save_modal.tsx b/src/plugins/kibana_react/public/saved_objects/saved_object_save_modal.tsx index 4d4e429417085..3887f8998af09 100644 --- a/src/plugins/kibana_react/public/saved_objects/saved_object_save_modal.tsx +++ b/src/plugins/kibana_react/public/saved_objects/saved_object_save_modal.tsx @@ -31,17 +31,20 @@ import { EuiOverlayMask, EuiSpacer, EuiSwitch, + EuiTextArea, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; import { EuiText } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { VISUALIZE_EMBEDDABLE_TYPE } from '../../../../legacy/core_plugins/kibana/public/visualize/embeddable/constants'; export interface OnSaveProps { newTitle: string; newCopyOnSave: boolean; isTitleDuplicateConfirmed: boolean; onTitleDuplicate: () => void; + newDescription: string; } interface Props { @@ -61,6 +64,7 @@ interface State { isTitleDuplicateConfirmed: boolean; hasTitleDuplicate: boolean; isLoading: boolean; + visualizationDescription: string; } export class SavedObjectSaveModal extends React.Component { @@ -70,6 +74,7 @@ export class SavedObjectSaveModal extends React.Component { isTitleDuplicateConfirmed: false, hasTitleDuplicate: false, isLoading: false, + visualizationDescription: this.props.description ? this.props.description : '', }; public render() { @@ -97,7 +102,7 @@ export class SavedObjectSaveModal extends React.Component { {this.renderDuplicateTitleCallout()} - {this.props.description && ( + {this.props.objectType !== VISUALIZE_EMBEDDABLE_TYPE && this.props.description && ( {this.props.description} @@ -125,6 +130,8 @@ export class SavedObjectSaveModal extends React.Component { /> + {this.renderViewDescription()} + {this.props.options} @@ -145,6 +152,36 @@ export class SavedObjectSaveModal extends React.Component { ); } + private renderViewDescription = () => { + if (this.props.objectType !== VISUALIZE_EMBEDDABLE_TYPE) { + return; + } + + return ( + + } + > + + + ); + }; + + private onDescriptionChange = (event: React.ChangeEvent) => { + this.setState({ + visualizationDescription: event.target.value, + }); + }; + private onTitleDuplicate = () => { this.setState({ isLoading: false, @@ -168,6 +205,7 @@ export class SavedObjectSaveModal extends React.Component { newCopyOnSave: this.state.copyOnSave, isTitleDuplicateConfirmed: this.state.isTitleDuplicateConfirmed, onTitleDuplicate: this.onTitleDuplicate, + newDescription: this.state.visualizationDescription, }); };