Default Kamelet Icon Too Big

[kahboom]

When we create a Kamelet, the icon that is produced (Kaoto icon) is massive in the Source Code Editor. We should compress it or show a different icon, as this affects the user experience (they need to do a lot of scrolling to get to the actual code).

How to reproduce:

1. Go to Settings
2. Change DSL to Kamelet
3. Add some steps
4. Deploy
5. Refresh Kaoto
6. Go back to Settings. Ensure DSL is set to KameletBinding.
7. Open Catalog
8. Select newly created Kamelet from above
9. Switch to Source Code Editor
10. See SVG content in code editor

[Delawen]

Do we want to do this on the frontend or on the backend? On the backend I already reduced the blob, but being an image as a blob it will still be big...

[kahboom]

@Delawen actually you're right, maybe this should just be done on the backend. Maybe we could find a better, smaller SVG for the icon? I'm not too sure

[Delawen]

Even the smallest simpler icon would be... big

And what when I want to add my own icon that is big but is the one I want?

[Delawen]

What we are using are base64 encoded images. So anything, even the simplest square, will be at least a couple lines long.

[Delawen]

Can we collapse long lines in the editor? Or not wrapping the blob?

[mmelko]

My current "fix" is just to focus on the last line so user don't need to scroll down manually. I've tried several things with word wrapping disabled but I had a problem with inconsistent rendering and also we might have other elements (descriptions) that could be long too and disabled wrapping might be inconvenient in this case.

When we will have some global panel setting for the flow, we can add icon there. Auto icon could be added only if no icon was specified by user and during (creation/deployment) time. WDYT?

[Delawen]

I think we need some UX help here. The size of that line is never going to be reduced, so we need to find a way to show it without being a problem.

[Delawen]

@Mdenisco

[apupier]

by default:

User can collapse the line: