Updating icons for disabled and closed statuses resources

[Rajat-Sahrawat]

What It Does
Adds visual decoration for closed and disabled statuses for local files, local transactions and programs. Also updated visual consistency for icons for task states- running, suspended and dispatched.

How to Test
change status for the mentioned resources to see the updated icons

Review Checklist
I certify that I have:

• tested my changes
• added/updated automated tests
• updated the changelog
• followed the contribution guidelines

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 36.53846% with 132 lines in your changes missing coverage. Please review.

Project coverage is 28.55%. Comparing base (61f57a8) to head (041e948).

Files with missing lines	Patch %	Lines
packages/vsce/src/extension.ts	9.09%	10 Missing ⚠️
...trees/CICSCombinedTrees/CICSCombinedProgramTree.ts	22.22%	7 Missing ⚠️
...rc/trees/CICSCombinedTrees/CICSCombinedTaskTree.ts	22.22%	7 Missing ⚠️
...trees/CICSCombinedTrees/CICSCombinedLibraryTree.ts	25.00%	6 Missing ⚠️
...ees/CICSCombinedTrees/CICSCombinedLocalFileTree.ts	25.00%	6 Missing ⚠️
...rees/CICSCombinedTrees/CICSCombinedPipelineTree.ts	25.00%	6 Missing ⚠️
.../CICSCombinedTrees/CICSCombinedTCPIPServiceTree.ts	25.00%	6 Missing ⚠️
...s/CICSCombinedTrees/CICSCombinedTransactionTree.ts	25.00%	6 Missing ⚠️
.../trees/CICSCombinedTrees/CICSCombinedURIMapTree.ts	25.00%	6 Missing ⚠️
...es/CICSCombinedTrees/CICSCombinedWebServiceTree.ts	25.00%	6 Missing ⚠️
... and 24 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #207      +/-   ##
==========================================
+ Coverage   28.25%   28.55%   +0.30%     
==========================================
  Files         146      147       +1     
  Lines        4987     5032      +45     
  Branches      869      881      +12     
==========================================
+ Hits         1409     1437      +28     
- Misses       3578     3595      +17     

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

[davenice]

A few screenshots to give an idea. Visually looking great to me.

[davenice]

Hey @almightyrush - please rebase on main and resolve the conflict with extension.ts 👍

[davenice]

I like the icons and the code looks good.

The test coverage less so...

A couple of things I've been thinking:

1. Every icon ends .dark.svg or .light.svg so I'm wondering if we pass the 'root' of the icon name in and push that part down lower ... would that make things better? I think it might.
2. An option for unit testing is we split into a method that generates the filename which we can easily verify with text comparison, and then we could check the file exists on disk. But maybe it's just as easy to have it return a file and verify it matches the file instance we were expecting.

What do you think, @almightyrush ? A bunch of this is refactor but we have added some new function so....

[almightyrush]

Hi @davenice,
I have refactored the iconUtils file. Also have written unit test cases for it. 👍🏼

[davenice]

This looks good!

Thoughts for future PRs in this area...

1. A test that goes through each option and verifies that the right files exist on disk
2. I think we can simplify the logic a little bit now for local file in particular where we append -disabled or -closed rather than having all the nested ternary ifs we could just say "filename is local-file ... if we're disabled append -disabled, if we're closed append -closed". That's not a must-do for this PR in my eyes - just an idea that we could work on that logic in future.

discovered functional issue

[davenice]

On testing, I'm seeing the light image being used in the dark theme and vice versa - would be good to work out why. Sorry...!

[almightyrush]

On testing, I'm seeing the light image being used in the dark theme and vice versa - would be good to work out why. Sorry...!

Thanks for finding it out @davenice 👌🏽
It was a small confusion and it got missed by me while refactoring😛.

light: join(__dirname, "..", "resources", "imgs", iconFileName + "-dark.svg"),
dark: join(__dirname, "..", "resources", "imgs", iconFileName + "-light.svg"),

Here the dark.svg means the icon is of dark colour which will be used for light theme.
And I got confused here thinking the icons are dark.svg used for dark theme and vice versa.
Reverted the below changes with the above one.

light: join(__dirname, "..", "resources", "imgs", iconFileName + "-light.svg"),
dark: join(__dirname, "..", "resources", "imgs", iconFileName + "-dark.svg"),

[AndrewTwydell]

Couple of notes / questions left of the PR, and I will manually test with all status possibilities with all resource types too 👍🏼

[davenice]

My concerns are addressed - i'll just cancel my approval until those couple of small bits Andrew mentioned are decided on one way or the other.

[davenice]

In fact I'll leave my review and we'll just wait for Andrew to add his. None of those bits are absolute dealbreakers, just improvements!

[AndrewTwydell]

Looks great, works great, nice improvements 😎

[davenice]

@zFernand0 - would be good to have a nod from you or someone on the ZE side!