Kibana 7.10 custom plugin grayed out in dashboard

[ssimmons (Stacey Simmons)]

I've create a test plugin for Kibana 7.10 using logic from a 7.8 plugin. It works fine when I create a visualization using the custom plugin. However, when I add the visualization to a dashboard everything is grayed out and I cannot click on the buttons. Is there some config setting I need to set for my plugin in 7.10 to allow it to work within the dashboard? No error messages are displayed in the console. Here is a screenshot of the visualization:

And here it is loaded in a dashboard:

[wylie (Wylie Conlon)]

This is part of the loading state of the embeddable. So your embeddable should set loading = false to get full color, on the EmbeddableOutput that it provides.

[ssimmons (Stacey Simmons)]

I'm currently not using an embeddable object. Can you point me to an example 7.10 plugin that uses this?

[wylie (Wylie Conlon)]

So you've registered a custom visualization instead. You have two options:

1. createBaseVisualization if you are providing a toExpressionAst. Your expression is supposed to indicate that it's done rendering using the handlers.
2. createReactVisualization if you are using a custom React renderer

[ssimmons (Stacey Simmons)]

Yes, I'm creating a React visualization like this:

export class ExprExamplePlugin implements Plugin<ExprExamplePluginSetup, ExprExamplePluginStart> {
   public setup(core: CoreSetup, setupDeps: SetupDependencies) {
      setupDeps.visualizations.createReactVisualization({
         name: 'test_plugin',
         title: 'Test Plugin',
         icon: visIcon,
         description: 'Test plugin',
         visConfig: {
           component: Visualization,
           defaults: {
           }
         },
         editorConfig: {
           optionsTemplate: Editor,
         },
         requestHandler: 'none'
      });
   }

   public start() { }
   public stop() { }
}

[wylie (Wylie Conlon)]

Does your Visualization component call the renderComplete prop when it renders?

[ssimmons (Stacey Simmons)]

No it does not. I'm assuming that is causing the issue? Do you have some source code example that shows where/how to properly call that prop?

[ssimmons (Stacey Simmons)]

Thanks for your help. I got it working by adding the following functions:

componentDidMount() {
   this.props.renderComplete();
 }

componentDidUpdate() {
   this.props.renderComplete();
 }

[wylie (Wylie Conlon)]

I had to dig around the Kibana source code to figure that out. If you can think of a good place to document this then we'd appreciate a Github issue or pull request