[7.0.0] Kibana plugin development sidebar problems

[Fabio-sama (Fabio)]

Hi there,

I'm trying to develop a simple Kibana plugin using the React framework (library, to be precise).

Now, I'm not a React expert and I'm having problems with a couple of minor tasks.

1. When I generate a plugin using the plugin generator and I specify the title of the plugin in the index.js file, I can find the new tab in the main sidebar BUT I cannot find a way to put a logo (either one of the Kibana EuiIcon or a custom svg logo) next to the write. Where (which file and portion of code) do I have to specify which logo to be seen in the navbar?

2. Generating the plugin, I noticed the arrow to Collapse/Expand the sidebar at the bottom of the sidebar disappeared. Why did it happen and how can I reinsert it?

Just to make it clear what I am talking about, I'll post here the image of the original Kibana 7.0 interface (where you can see the collapse/expand arrow) and then the image of the Kibana 7.0 interface with my added plugin (where you can see the missing icon and the disappeared collapse/expand arrow).

ORIGINAL

CUSTOM WITH MY SAMPLE PLUGIN

Also, in this case I wanted to add a new tab and it came for free with the plugin generator. What if I wanted to make an additional visualization and so visualize my custom icon only at visualization creation time?
Is there any reliable resource where to find such info?

Thank you so much!

[lukas (Lukas Olson)]

Since the APIs are still changing, there isn't really a great single place to find info about plugin development.

The icon can be set in the uiExports section of your index.js. Do you mind providing what you've got there so far?

Here's an example: https://github.com/elastic/kibana/blob/57d5afb6a34a7248dead1fc3d198f1d407387bd9/src/legacy/core_plugins/timelion/index.ts#L60

[Fabio-sama (Fabio)]

Hi there,

thank you for the prompt reply.

Ok, the euiIconType worked but I cannot find a way to use a custom svg.
I tried putting a sample svg file into the public/ folder and then typing icon: './public/AJ_Digital_Camera.svg' but it didn't load anything in the sidebar.

How can I solve it?

Sure I can share the code. Here's my index.js:

export default function (kibana) {
  return new kibana.Plugin({
    require: ['elasticsearch'],
    name: 'my_sample_plugin',
    uiExports: {
      app: {
        title: 'My Sample Plugin',
        description: 'testing sample plugin',
        main: 'plugins/my_sample_plugin/app',
        // euiIconType: 'grokApp'
        icon: './public/AJ_Digital_Camera.svg',
      },
    },

    config(Joi) {
      return Joi.object({
        enabled: Joi.boolean().default(true),
      }).default();
    },
  });
}

Where should I put the custom svg file and where/how should I write its path?

Do I have to do any kind of import to use it?

Thanks!

[lukas (Lukas Olson)]

Could you try putting it in your plugins/my_sample_plugin/ directory and then linking to it from there?

Like

icon; 'plugins/my_sample_plugin/AJ_Digital_Camera.svg'?

[Fabio-sama (Fabio)]

Hi!

Well, apart from the fact I was only able to do it if developing a plugin with version >= 7.2, since previously the plugin generator generates the plugin folder my_sample_plugin inside the kibana-extra folder which is a sibling of the kibana folder (so I do not actually have the plugins/my_sample_plugin folder at development time, do I?).

But even starting a new project (plugin development) with the 7.3 version (so having the my_sample_plugin folder been created inside the kibana/plugins/ folder) I still cannot see anything putting icon: 'plugins/my_sample_plugin/AJ_Digital_Camera.svg' inside the index.json and the svg file inside kibana/plugins/my_sample_plugin/ folder.

What am I doing wrong?

P.S. generating a plugin with the 7.3 version I initially see a king of custom write (2 letters) as custom icon but I cannot figure out where they are coming from. Let's say my plugin name is kt_mixed_stuff and the title Kt Mixed Stuff I see the icon KM when launching the plugin without specifying any icon in the index.json.

[ylasri (Yassine LASRI)]

icon should be under public folder
I use this and it's working

    main: 'plugins/plugin_name/plugin_app_name',
    icon: 'plugins/plugin_name/icon/icon.svg'

icon.svg need to be putted inside plugins/plugin_name/public/icon/

Hope this can help

[Fabio-sama (Fabio)]

@ylasri

plugin_name

It works flawlessly (in 7.3)! Thank you so much!
I guess it's not very intuitive the fact the the path you are referring to in icon: path does not coincide with the actual path.

Thank you!