[TSVB] [Markdown] markdown section do not render after change data parameter (#41576) (#41661)

* [TSVB] [Markdown] markdown section do not render after change data parameter * fix grammar
2025-04-24 17:59:23 -04:00 · 2019-07-22 17:20:22 +03:00 · 2019-07-22 17:20:22 +03:00 · 7add0a62c1
commit 7add0a62c1
parent e6a665f488
13 changed files with 47 additions and 73 deletions
--- a/src/legacy/core_plugins/metrics/public/components/index_pattern.js
+++ b/src/legacy/core_plugins/metrics/public/components/index_pattern.js
@ -17,6 +17,7 @@
 * under the License.
 */

+import { get } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
@ -44,7 +45,7 @@ import { i18n } from '@kbn/i18n';
 import { TIME_RANGE_DATA_MODES, TIME_RANGE_MODE_KEY } from '../../common/timerange_data_modes';
 import { PANEL_TYPES } from '../../common/panel_types';
 import { isTimerangeModeEnabled } from '../lib/check_ui_restrictions';
-import { UIRestrictionsContext } from '../contexts/ui_restriction_context';
+import { VisDataContext } from '../contexts/vis_data_context';

 const RESTRICT_FIELDS = [ES_TYPES.DATE];

@ -72,7 +73,7 @@ export const IndexPattern = ({ fields, prefix, onChange, disabled, model: _model
  const intervalName = `${prefix}interval`;
  const dropBucketName = `${prefix}drop_last_bucket`;
  const updateControlValidity = useContext(FormValidationContext);
-  const uiRestrictions = useContext(UIRestrictionsContext);
+  const uiRestrictions = get(useContext(VisDataContext), 'uiRestrictions');

  const timeRangeOptions = [
    {
--- a/src/legacy/core_plugins/metrics/public/components/markdown_editor.js
+++ b/src/legacy/core_plugins/metrics/public/components/markdown_editor.js
@ -35,25 +35,6 @@ import { EuiText, EuiCodeBlock, EuiSpacer, EuiTitle, EuiCodeEditor } from '@elas
 import { FormattedMessage } from '@kbn/i18n/react';

 export class MarkdownEditor extends Component {
-  state = {
-    visData: null,
-  };
-  subscription = null;
-
-  componentDidMount() {
-    if (this.props.visData$) {
-      this.subscription = this.props.visData$.subscribe(visData => {
-        this.setState({ visData });
-      });
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-    }
-  }
-
  handleChange = value => {
    this.props.onChange({ markdown: value });
  };
@ -69,11 +50,12 @@ export class MarkdownEditor extends Component {
  }

  render() {
-    const { visData } = this.state;
+    const { visData, model, dateFormat } = this.props;
+
    if (!visData) {
      return null;
    }
-    const { model, dateFormat } = this.props;
+
    const series = _.get(visData, `${model.id}.series`, []);
    const variables = convertSeriesToVars(series, model, dateFormat, this.props.getConfig);
    const rows = [];
@ -228,5 +210,5 @@ MarkdownEditor.propTypes = {
  onChange: PropTypes.func,
  model: PropTypes.object,
  dateFormat: PropTypes.string,
-  visData$: PropTypes.object,
+  visData: PropTypes.object,
 };
--- a/src/legacy/core_plugins/metrics/public/components/panel_config.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config.js
@ -18,7 +18,6 @@
 */
 import PropTypes from 'prop-types';
 import React, { useState, useEffect } from 'react';
-import { get } from 'lodash';
 import { TimeseriesPanelConfig as timeseries } from './panel_config/timeseries';
 import { MetricPanelConfig as metric } from './panel_config/metric';
 import { TopNPanelConfig as topN } from './panel_config/top_n';
@ -27,7 +26,7 @@ import { GaugePanelConfig as gauge } from './panel_config/gauge';
 import { MarkdownPanelConfig as markdown } from './panel_config/markdown';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { FormValidationContext } from '../contexts/form_validation_context';
-import { UIRestrictionsContext } from '../contexts/ui_restriction_context';
+import { VisDataContext } from '../contexts/vis_data_context';

 const types = {
  timeseries,
@ -45,16 +44,14 @@ export function PanelConfig(props) {
  const { model } = props;
  const Component = types[model.type];
  const [formValidationResults] = useState({});
-  const [uiRestrictions, setUIRestrictions] = useState(null);
+  const [visData, setVisData] = useState({});

  useEffect(() => {
    model.isModelInvalid = !checkModelValidity(formValidationResults);
  });

  useEffect(() => {
-    const visDataSubscription = props.visData$.subscribe(visData =>
-      setUIRestrictions(get(visData, 'uiRestrictions', null))
-    );
+    const visDataSubscription = props.visData$.subscribe((visData = {}) => setVisData(visData));

    return function cleanup() {
      visDataSubscription.unsubscribe();
@ -68,9 +65,9 @@ export function PanelConfig(props) {
  if (Component) {
    return (
      <FormValidationContext.Provider value={updateControlValidity}>
-        <UIRestrictionsContext.Provider value={uiRestrictions}>
+        <VisDataContext.Provider value={visData}>
          <Component {...props} />
-        </UIRestrictionsContext.Provider>
+        </VisDataContext.Provider>
      </FormValidationContext.Provider>
    );
  }
--- a/src/legacy/core_plugins/metrics/public/components/panel_config/gauge.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config/gauge.js
@ -116,7 +116,6 @@ class GaugePanelConfigUi extends Component {
          limit={1}
          model={this.props.model}
          name={this.props.name}
-          visData$={this.props.visData$}
          onChange={this.props.onChange}
        />
      );
@ -349,7 +348,6 @@ GaugePanelConfigUi.propTypes = {
  fields: PropTypes.object,
  model: PropTypes.object,
  onChange: PropTypes.func,
-  visData$: PropTypes.object,
 };

 export const GaugePanelConfig = injectI18n(GaugePanelConfigUi);
--- a/src/legacy/core_plugins/metrics/public/components/panel_config/markdown.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config/markdown.js
@ -47,6 +47,7 @@ import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import { Storage } from 'ui/storage';
 import { data } from 'plugins/data/setup';
 import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
+import { VisDataContext } from './../../contexts/vis_data_context';
 const { QueryBarInput } = data.query.ui;
 const localStorage = new Storage(window.localStorage);

@ -112,7 +113,11 @@ class MarkdownPanelConfigUi extends Component {
    });
    let view;
    if (selectedTab === 'markdown') {
-      view = <MarkdownEditor {...this.props} />;
+      view = (
+        <VisDataContext.Consumer>
+          {visData => <MarkdownEditor visData={visData} {...this.props} />}
+        </VisDataContext.Consumer>
+      );
    } else if (selectedTab === 'data') {
      view = (
        <SeriesEditor
@ -120,7 +125,6 @@ class MarkdownPanelConfigUi extends Component {
          fields={this.props.fields}
          model={this.props.model}
          name={this.props.name}
-          visData$={this.props.visData$}
          onChange={this.props.onChange}
        />
      );
@ -327,7 +331,6 @@ MarkdownPanelConfigUi.propTypes = {
  model: PropTypes.object,
  onChange: PropTypes.func,
  dateFormat: PropTypes.string,
-  visData$: PropTypes.object,
 };

 export const MarkdownPanelConfig = injectI18n(MarkdownPanelConfigUi);
--- a/src/legacy/core_plugins/metrics/public/components/panel_config/metric.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config/metric.js
@ -81,7 +81,6 @@ export class MetricPanelConfig extends Component {
          limit={2}
          model={this.props.model}
          name={this.props.name}
-          visData$={this.props.visData$}
          onChange={this.props.onChange}
        />
      );
@ -194,5 +193,4 @@ MetricPanelConfig.propTypes = {
  fields: PropTypes.object,
  model: PropTypes.object,
  onChange: PropTypes.func,
-  visData$: PropTypes.object,
 };
--- a/src/legacy/core_plugins/metrics/public/components/panel_config/table.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config/table.js
@ -173,7 +173,6 @@ export class TablePanelConfig extends Component {
            fields={this.props.fields}
            model={this.props.model}
            name={this.props.name}
-            visData$={this.props.visData$}
            onChange={this.props.onChange}
          />
        </div>
@ -291,5 +290,4 @@ TablePanelConfig.propTypes = {
  fields: PropTypes.object,
  model: PropTypes.object,
  onChange: PropTypes.func,
-  visData$: PropTypes.object,
 };
--- a/src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config/timeseries.js
@ -144,7 +144,6 @@ class TimeseriesPanelConfigUi extends Component {
          fields={this.props.fields}
          model={this.props.model}
          name={this.props.name}
-          visData$={this.props.visData$}
          onChange={this.props.onChange}
        />
      );
@ -400,7 +399,6 @@ TimeseriesPanelConfigUi.propTypes = {
  fields: PropTypes.object,
  model: PropTypes.object,
  onChange: PropTypes.func,
-  visData$: PropTypes.object,
 };

 export const TimeseriesPanelConfig = injectI18n(TimeseriesPanelConfigUi);
--- a/src/legacy/core_plugins/metrics/public/components/panel_config/top_n.js
+++ b/src/legacy/core_plugins/metrics/public/components/panel_config/top_n.js
@ -84,7 +84,6 @@ export class TopNPanelConfig extends Component {
          fields={this.props.fields}
          model={this.props.model}
          name={this.props.name}
-          visData$={this.props.visData$}
          onChange={this.props.onChange}
        />
      );
@ -249,5 +248,4 @@ TopNPanelConfig.propTypes = {
  fields: PropTypes.object,
  model: PropTypes.object,
  onChange: PropTypes.func,
-  visData$: PropTypes.object,
 };
--- a/src/legacy/core_plugins/metrics/public/components/series.js
+++ b/src/legacy/core_plugins/metrics/public/components/series.js
@ -28,6 +28,7 @@ import { TableSeries as table } from './vis_types/table/series';
 import { GaugeSeries as gauge } from './vis_types/gauge/series';
 import { MarkdownSeries as markdown } from './vis_types/markdown/series';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { VisDataContext } from '../contexts/vis_data_context';

 const lookup = {
  top_n: topN,
@ -76,29 +77,33 @@ export class Series extends Component {
    const { panel } = this.props;
    const Component = lookup[panel.type];

-    const params = {
-      className: this.props.className,
-      disableAdd: this.props.disableAdd,
-      disableDelete: this.props.disableDelete,
-      fields: this.props.fields,
-      name: this.props.name,
-      onAdd: this.props.onAdd,
-      onChange: this.handleChange,
-      onClone: this.props.onClone,
-      onDelete: this.props.onDelete,
-      model: this.props.model,
-      panel: this.props.panel,
-      selectedTab: this.state.selectedTab,
-      style: this.props.style,
-      switchTab: this.switchTab,
-      toggleVisible: this.toggleVisible,
-      togglePanelActivation: this.togglePanelActivation,
-      visible: this.state.visible,
-      dragHandleProps: this.props.dragHandleProps,
-      indexPatternForQuery: panel.index_pattern || panel.default_index_pattern,
-    };
    return Boolean(Component) ? (
-      <Component {...params} />
+      <VisDataContext.Consumer>
+        {visData => (
+          <Component
+            className={this.props.className}
+            disableAdd={this.props.disableAdd}
+            uiRestrictions={visData.uiRestrictions}
+            disableDelete={this.props.disableDelete}
+            fields={this.props.fields}
+            name={this.props.name}
+            onAdd={this.props.onAdd}
+            onChange={this.handleChange}
+            onClone={this.props.onClone}
+            onDelete={this.props.onDelete}
+            model={this.props.model}
+            panel={this.props.panel}
+            selectedTab={this.state.selectedTab}
+            style={this.props.style}
+            switchTab={this.switchTab}
+            toggleVisible={this.toggleVisible}
+            togglePanelActivation={this.togglePanelActivation}
+            visible={this.state.visible}
+            dragHandleProps={this.props.dragHandleProps}
+            indexPatternForQuery={panel.index_pattern || panel.default_index_pattern}
+          />
+        )}
+      </VisDataContext.Consumer>
    ) : (
      <FormattedMessage
        id="tsvb.seriesConfig.missingSeriesComponentDescription"
@ -125,6 +130,5 @@ Series.propTypes = {
  onDelete: PropTypes.func,
  model: PropTypes.object,
  panel: PropTypes.object,
-  visData$: PropTypes.object,
  dragHandleProps: PropTypes.object,
 };
--- a/src/legacy/core_plugins/metrics/public/components/series_editor.js
+++ b/src/legacy/core_plugins/metrics/public/components/series_editor.js
@ -101,7 +101,6 @@ export class SeriesEditor extends Component {
                  onChange={doc => handleChange(this.props, doc)}
                  onClone={() => this.handleClone(row)}
                  onDelete={() => handleDelete(this.props, row)}
-                  visData$={this.props.visData$}
                  model={row}
                  panel={model}
                  dragHandleProps={provided.dragHandleProps}
@ -128,5 +127,4 @@ SeriesEditor.propTypes = {
  model: PropTypes.object,
  name: PropTypes.string,
  onChange: PropTypes.func,
-  visData$: PropTypes.object,
 };
--- a/src/legacy/core_plugins/metrics/public/contexts/ui_restriction_context.js
+++ b/src/legacy/core_plugins/metrics/public/contexts/ui_restriction_context.js
@ -19,4 +19,4 @@

 import React from 'react';

-export const UIRestrictionsContext = React.createContext();
+export const VisDataContext = React.createContext({});
--- a/test/functional/apps/visualize/_tsvb_markdown.ts
+++ b/test/functional/apps/visualize/_tsvb_markdown.ts
@ -37,8 +37,7 @@ export default function({ getPageObjects }: FtrProviderContext) {
    });
  }

-  // FAILING: https://github.com/elastic/kibana/issues/41452
-  describe.skip('visual builder', function describeIndexTests() {
+  describe('visual builder', function describeIndexTests() {
    describe('markdown', () => {
      before(async () => {
        await visualBuilder.resetPage();