[TSVB] [Markdown] markdown section do not render after change data parameter

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 = [
     {

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

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

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

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,15 +113,18 @@ 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
           colorPicker={false}
           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);

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

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

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}
         />
       );
@@ -396,7 +395,6 @@ TimeseriesPanelConfigUi.propTypes = {
   fields: PropTypes.object,
   model: PropTypes.object,
   onChange: PropTypes.func,
-  visData$: PropTypes.object,
 };
 
 export const TimeseriesPanelConfig = injectI18n(TimeseriesPanelConfigUi);

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

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

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

src/legacy/core_plugins/metrics/public/contexts/ui_restriction_context.js → src/legacy/core_plugins/metrics/public/contexts/vis_data_context.js

@@ -19,4 +19,4 @@
 
 import React from 'react';
 
-export const UIRestrictionsContext = React.createContext();
+export const VisDataContext = React.createContext({});

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();