[Graph] Replace Fontawesome with EUI + Maki icons

[dej611]

Summary

Fixes #160232

This PR removes completely FontAwesome from the Graph plugin and replace its usage with mostly EUI + few Maki icons.
As for the Google icon, @MichaelMarcialis do you think we should just have a custom SVG icon within the Graph app?

Here's a list of the replaced icons, but if I forgot anything let me know:

• Created generic IconRenderer component to abstract away the package type from the rendering
  • Add logic for color switch based on background color
• Replace icons in graph visualization
  • Replace with EUI icons
  • Replace with Maki icons
  • Add prevName to recover old saved graph SO
  • Fix selection preview icon
  • For the at and key icons it needs to wait for a new EUI release with at & key Icon Glyphs eui#6934
• Replace drill down icons
  • Replace with EUI icons
  • Replace with Maki icons
  • Find a substitute for Google icon
  • Add prevName to recover old saved graph SO
• App toolbars
  • Replace app toolbar icons with EUI icons
    • Changed blocked list icon from ban to filterIgnore
  • Replace styling icon + color swatches
    • The EUI dot icon was too small, so switches to rect icons
  • Replace merge icons on link selection
  • Replace group/ungroup icons with fold/unfold
  • Custom drilldowns
• Removed LegacyIcon
  • Replaced usage in various places

New icons within field configuration + graph visualization

New toolbar with blocked icon changed

New group/ungroup icons

Selection with icons preview

Panel with color styling open

Custom drilldowns (note Google icon has been replaced with a magnifier icon)

Link selection

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.

When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:

Risk	Probability	Severity	Mitigation/Notes
Multiple Spaces—unexpected behavior in non-default Kibana Space.	Low	High	Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces.
Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks.	High	Low	Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure.
Code should gracefully handle cases when feature X or plugin Y are disabled.	Medium	High	Unit tests will verify that any feature flag or plugin combination still results in our service operational.
See more potential risk examples

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[MichaelMarcialis]

As for the Google icon, @MichaelMarcialis do you think we should just have a custom SVG icon within the Graph app?

Yes. Since EUI longer allows for the addition of external logos as part of its icon offering, that approach would be best.

[dej611]

As for the Google icon, @MichaelMarcialis do you think we should just have a custom SVG icon within the Graph app?

Yes. Since EUI longer allows for the addition of external logos as part of its icon offering, that approach would be best.

Rather than implement a custom icon, what if we remove the problem by replacing the Google icon completely for a more generic Search EUI icon?

[dej611]

Ok, talked with the team and replaced for now the Google icon with the more generic Search icon:

Let me know what do you think of it @MichaelMarcialis

Also, fixes a sass issue triggered when I removed the legacy icon component. Now drilldown icons should work back ok again.

[MichaelMarcialis]

Let me know what do you think of it @MichaelMarcialis

Making the icon more general purpose and switching to the EUI search icon glyph makes sense to me. 👍

[elasticmachine]

Pinging @elastic/kibana-graph (Feature:Graph)

[elasticmachine]

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)

[MichaelMarcialis]

Thanks, @dej611! This looks great. I left a few small questions and suggestions for you below.

I also noticed that the new key and at icons are missing. Am I correct in saying that this will fix itself as soon as EUI is updated to the latest in Kibana's main branch?

Assuming that's correct, I'll approve now to avoid holding you up further.

[MichaelMarcialis]

Would eyeClosed be a better icon choice for this action (to avoid making users think that it is adding a filter to the unified search interface)? In doing so, perhaps it would also make sense to change all references of "blocking" selections to "hiding" instead. Thoughts?

[dej611]

In Graph there's no unified search interface, even tho it looks pretty similar. And there's currently no concept of "filter" as for the rest of Kibana, the closest thing to a "filter" is actually this Blocklist thing, but it's like a negative filter only.
Nonetheless I have nothing against the icon change, and probably in the long run (if we ever going to add the unified search interface to Graph) will be a more consistent choice. So 👍 for me.

[MichaelMarcialis]

Same as previous question. Would it be better to use eyeClosed here instead and change all references of "block" to "hide"?

[dej611]

You mean change also the Blocklist to something like Hidden list as part of this?

[MichaelMarcialis]

Yeah, exactly. Something like "Hidden list" or "Hidden vertices".

[dej611]

I've created a follow up issue to track this: #162297

[dej611]

also noticed that the new key and at icons are missing. Am I correct in saying that this will fix itself as soon as EUI is updated to the latest in Kibana's main branch?

Correct.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 92ccb36

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
graph	282	270	-12

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
graph	458.4KB	407.4KB	-50.9KB

Unknown metric groups

async chunk count

id	before	after	diff
graph	3	2	-1

miscellaneous assets size

id	before	after	diff
graph	1.1MB	161.8KB	-928.6KB

History

• 💛 Build #143313 was flaky 5e93791
• 💔 Build #143307 failed d625ff5
• 💔 Build #143286 failed 4521e78
• 💚 Build #143099 succeeded c591417
• 💔 Build #143092 failed 4efdff0

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[stratoula]

This looks fantastic and removes 50KB from the bundle! LGTM!

[dej611]

This looks fantastic and removes 50KB from the bundle! LGTM!

Have you checked the static assets table? :D

[stratoula]

Wooooooooooow! I didn't!!