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,
});
};