Add tree elements including the devfile commands in component views #…

[vrubezhny]

…2811

Fixes: #2811

[codecov]

Codecov Report

Patch coverage: 6.94% and project coverage change: -0.34% ⚠️

Comparison is base (e9d81fa) 32.78% compared to head (7d55c8c) 32.44%.
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3114      +/-   ##
==========================================
- Coverage   32.78%   32.44%   -0.34%     
==========================================
  Files          74       74              
  Lines        4987     5048      +61     
  Branches      947      954       +7     
==========================================
+ Hits         1635     1638       +3     
- Misses       3352     3410      +58     

Files Changed	Coverage Δ
src/odo/command.ts	20.32% <0.00%> (-0.34%)	⬇️
src/componentsView.ts	27.58% <7.14%> (-27.42%)	⬇️
src/openshift/component.ts	18.30% <7.14%> (-0.27%)	⬇️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[datho7561]

Works pretty well!

Two things I noticed:

• All of the items in the Components view (including the word "Commands" and each of the commands) all have the same icon. I think it would be nice if each of the commands had an icon that represents a command (maybe terminal-view-icon ?). I don't think that the word "Commands" needs an icon.
• If I modify the devfile.yaml for the component by adding a new command (add this under .commands):

- exec:
    commandLine: echo "hello, world!"
    component: tools
  id: hello-world

Then I refresh the components view, the component isn't updated to have the new command. I have to restart VS Code for it to appear. I think we should reread the content of the file when the user manually refresh.

[vrubezhny]

• All of the items in the Components view (including the word "Commands" and each of the commands) all have the same icon. I think it would be nice if each of the commands had an icon that represents a command (maybe terminal-view-icon ?). I don't think that the word "Commands" needs an icon.

Yes, that needs to be fixed.

• If I modify the devfile.yaml for the component by adding a new command (add this under .commands):
  Then I refresh the components view, the component isn't updated to have the new command.

The commands (and actually as well as the list of components) are cached. And this is still a question for me - do we have an event or something like this that I can listen to in order to invalidate the caches when a component is added/removed/changed?

[vrubezhny]

@datho7561 Fixed the PR as follows:

• Changed the icons (no more icon for Components, used terminal-view-icon icon for a Command)
• Refresh Components View now clears the cached components thus forcing the Components to be reloaded
  Screencast from 2023-08-22 03-00-23.webm

[datho7561]

Here are some resources for writing the UI tests:

We have an existing tests for the DevfileRegistries section, which is a TreeView: ./test/ui/suite/devfileRegistries.ts

The UI testing framework has the following API to add folders to the workspace: https://github.com/redhat-developer/vscode-extension-tester/wiki#opening-files-and-folders.

We have some existing components created under ./test/fixtures/components. Unfortunately, it looks like VS Code's test fixture mechanism doesn't work with the UI tests, so you will need to add the folder using the API I mentioned.

For the integration tests, in ./src/test/integration/command.test.ts there is the method text('dev()', ... that starts a component in dev mode. You can use a similar method in a setup step, then run a test case that runs odo run and checks that it works.

[vrubezhny]

Here are some resources for writing the UI tests:
...

Thanks. I'll take a look at these tests

For the integration tests, in ./src/test/integration/command.test.ts there is the method text('dev()', ... that starts a component in dev mode. You can use a similar method in a setup step, then run a test case that runs odo run and checks that it works.

This is almost exactly what I'm trying to do (I''m just not added it to setup step, but tried to run dev() right inside of my test case.
The test suite creates a local component from devfile and uses its location as componentLocation... Normally OS Tools runs dev() for a component in a terminal started with "current working directory" pointing to component path in workspace. Test doesn't specify any CWD when starting a terminal. And nothing changes when I try using the component's componentLocation I always get:

Error: Command failed: "/home/jeremy/projects/vscode-openshift-tools/source/vscode-openshift-tools/out/tools/linux/odo" run build-image
 ✗  unable to get pod for component my-test-component: pod not found for the selector: component=my-test-component. Please check the command 'odo dev' is runnin

It looks like pod is really cannot be identified by this location - neither the project nor component names present in component location path - the server just has nothing related to this componentLocation path...

[datho7561]

Looks good and works well. Thanks, Victor!