[EuiIcon] - Error using the type 'download'

[nicolapagni]

Hi guys,

I'm using "@elastic/eui": "^24.0.0".
I've tryed to use this icon as action of an EuiBasicTable.
The following a snippet of code I used:

        actions: [
          {
            name: "Open",
            description: "View this report",
            icon: "inspect",
            type: "icon",
            isPrimary: true,
            onClick: onView,
            "data-test-subj": "action-open",
          },
          {
            name: "Download",
            description: "Download this report",
            icon: "**download**",
            type: "icon",
            isPrimary: true,
            onClick: onDownload,
            "data-test-subj": "action-download",
          },
          ....
]

But as you can see the icon doesn't rendered correctly.

Thanks in advance,
Nicola

[snide]

Are you using this within Kibana or in something separate?

[nicolapagni]

I'm using It inside a kibana plugin.
Every icon works fine, the only one I've notice the problem is this 'download'

[chandlerprall]

Two thoughts:

The code snippet you provided has icon: "**download**", which would be incorrect. I don't know if you added the asterisks for emphasis, or if that is actually the code in use. The string would need to be "download".

Second, It's possible that while you've specified a version of EUI with the download icon, the dynamic import nature of the icon is relying on an older version of EUI within Kibana to access it.

If icon: "download" does not work, I can dig in further.

[elizabetdev]

Hi @nicolapagni,
I also couldn't replicate the issue. I'm able to use the download icon with the EuiBasicTable. See the example: https://codesandbox.io/s/table-download-action-rvxs6

I also notice that you're using the icon as icon: "**download**", did you put the asterisks just to try to make the code bold, or are you actually using it this way?

The right code should be icon: "download",.

[nicolapagni]

Sorry for the asterisks, I've clicked on the bold button from git.
In my code there is exactly download.

Following the tip's @chandlerprall I reload the entire node_module and then run yarn install from scratch.
The result is the same and I really don't undestand what the problem can be...

From google dev_tools console I can see this error:

Failed prop type: Invalid prop actions[1] supplied to CollapsedItemActions.
1 is the index of the download action.

Seeing the code of @miukimiu It seems the same..
Trying to use only 2 actions just for don't create the CollapsedItemActions, but also in this case I see the error.

uhmmm

[nicolapagni]

For safety, inside /node_modulers/@elastic/eui folder where I can find the definition of the download icon ?

[snide]

Just to give you some warning. I'm almost certain that Kibana will only use the EUI defined in it's root package.json file. We have an upgrade on the way in the next week, and at that point you should be able to use v24 in master.

Using different versions of EUI in Kibana at the same time is not something we currently support.

If you're in a hurry remember that EuiIcon can accept custom svg files. You mgiht want to just import that file directly till the upgrade happens.

[nicolapagni]

@snide so what you said is since kibana 7.6.2 uses @elastic/eui 18.x.x, custom plugins (should or must) use the same version?

To use 24.x.x I need to change the kibana version?

[snide]

@snide so what you said is since kibana 7.6.2 uses @elastic/eui 18.x.x, custom plugins (should or must) use the same version?

To use 24.x.x I need to change the kibana version?

Yes. And that's because EUI is globally used across kibana at a CSS layer as a giant blob. This is a known weakness in our build systems in kibana.