Add tree elements including the devfile commands in component views

[mohitsuman]

Currently the components views only mentions the component name with the status if dev mode is running or not. We need to add a tree view to every component mentioning the devfile commands present.

Reference image attached:

[vrubezhny]

@mohitsuman @datho7561 I cannot find an icon for "Run Component Command"-like menu item. Do we have any svg-image available that is suitable for this kind of command?

[datho7561]

Don't know if you've already seen this, but here is the list of the built in icons you can use without needing to add an SVG to the extension: https://code.visualstudio.com/api/references/icons-in-labels. I think the debug-start or notebook-execute icons are close enough to what we need. What do you think Mohit?

[vrubezhny]

I found that other icons like "Refresh" or "Plus" are taken from the https://mui.com/material-ui/material-icons/ pack and I found the https://mui.com/material-ui/material-icons/?query=start&selected=PlayCircleOutline icon there which looks exactly as the issue image shows.

But I have a little problem while I'm trying to use this icon from this icon pack - it's not shown when added to a command on the tree item - there is a placeholder, I can click and run the associated command - but he icon itself is not displayed. An SVG image (when I tried to use it) was working fine.

[datho7561]

How are you including this .svg? By default, VS Code only knows about these icons, so the way to include other icons is to pass the relative path to the .svg. You could pass the relative path to the copy of the icon in node_modules, but then when you build the extension for release using vsce package, the file won't be there, since the icon pack dependency is only included in development dependencies. The best way to include that icon would be to include a copy of the svg somewhere in images, then reference that copy.

[vrubezhny]

@datho7561 I wasn't including any new svg icons, I just took the existing one for testing purpose and used it in package.json as the following:

{
	"command": "openshift.component.commands.command.run",
	"title": "Run Command",
	"category": "OpenShift",
	"icon": {
		"light": "images/title/light/icon-login.svg",
		"dark": "images/title/dark/icon-login.svg"
	}
},

and this was working fine until I changed "icon" : ... to:

{
	...
	"icon": "$(PlayCircleOutline)"
},
```
however it looks like other definitions are using `$(refresh)` and  `$(plus)` - and they work fine

[vrubezhny]

I found that I was wrongly referencing the icons and icons are not look like taken from https://mui.com/material-ui/material-icons/

So, $(debug-start) works for me but... it's green:

Doesn't look like coincide with the current "clack&white"-like icons color scheme, does it?