console icon for custom resources

ekeren commented 1 month ago

Use Case

You can now decide which icon is going to be seen on wing console

Notice that in the following image:

We are missing information to what is a dynamoDb and what is python lambda.

Proposed Solution

Have some standards for icons of resources, using thenode.display mechanism

Implementation Notes

Notice that we need this to work on winglibgs as well, so we need to make sure files are packed.

We can also decide to go extra lean and implemented this with a base64 version of an SVG

this.display.iconBase64 = "PD94bWwgdmVyc2lvbj0iMS4wIiBlODc2NjQ4IC04Ny4yNzY5NDUsMjguMjA2NzI4IC04Ni43MTQ0NDUsMjcuNzM3OTcxIEMgLTg2LjE1MTk0OCwyNy4yNjkyMyAtODUuMzQzMzU3LDI3LjAzNDg1NiAtODQuMjg4NjY4LDI3LjAzNDg0NyBDIC04My44MDgyMDQsMjcuMDM0ODU2IC04My4zMTQwNjUsMjcuMDcwOTg4IC04Mi44MDYyNDgsMjcuMTQzMjQ1IEMgLTgyLjI5ODQ0MywyNy4yMTU1MTkgLTgxLjc3MzA1NCwyNy4zMjM5MTcgLTgxLjIzMDA3OSwyNy40Njg0NCBMIC04MS4yMzAwNzksMjcuNDY4NDQgeiIgaWQ9InRleHQyMzMxIiB0cmFuc2Zvcm09Im1hdHJpeCgwLCAtMC44OTMyMTUsIDEuMTE5NTUsIDAsIDAsIDApIi8+Cjwvc3ZnPg=="

But I think that an external svg file is preferred (we just need to make sure it is packed)

Component

No response

Community Notes

Please vote by adding a 👍 reaction to the issue to help us prioritize.
If you are interested to work on this issue, please leave a comment.
If this issue is labeled needs-discussion, it means the spec has not been finalized yet. Please reach out on the #dev channel in the Wing Discord.

polamoros commented 1 month ago

As @ainvoner proposed, I would add support for heroicons (the ones we already use in the console).

To use them, you would define the icon as follows:

import cloud;

let bucket = new cloud.Bucket();

// icon id from https://heroicons.com/
nodeof(bucket).icon = "inbox-stack";

ainvoner commented 1 month ago

@polamoros

if we are not able to import the requested icon - fallback to our default
use display.color if provided for the Icon color as well. (if not provided, fallback to default)
make sure you are handling icon changes in the Explorer tree and the Map (on is solid and one not)

ekeren commented 1 month ago

Great suggestion ❤️

polamoros commented 1 month ago

here is a working example

bring cloud;

let bucket = new cloud.Bucket();
nodeof(bucket).icon = "academic-cap";
nodeof(bucket).color = "red";

bring cloud;

let bucket = new cloud.Bucket();
nodeof(bucket).icon = "invalid icon";
nodeof(bucket).color = "invalid color";

also working for custom resources

ekeren commented 1 month ago

@polamoros / @ainvoner , what would you use for python lambda?

I couldn't find anything in hercoicons that looks like this

(Maybe giving it the option to create an SVG in base64 is a good low hanging fruit failover)?

ainvoner commented 1 month ago

I would use the lightning of cloud.Function in a different color than our default in the Python lambda custom resource

ekeren commented 1 month ago

lightning of cloud.Function in a fuchsia color

Good idea, @eladcon fyi

monadabot commented 1 month ago

Congrats! :rocket: This was released in Wing 0.74.23.

winglang / wing