Adds integration with Kogito functionalities to be able to run in a VSCode extension

[thiagoelg]

All commits here should probably be squashed.

TODO:

• Merge with main;
• Figure out how to pass process.env.KAOTO_API when building the lib;
  • Solved by defining process.env.KAOTO_API in webpack.config.js at vscode-kaoto.
• Fix problems after new React Flow version

[kahboom]

@thiagoelg did you want for me to review this already or wait until the other tasks are checked off? and thanks btw! :)

[codecov-commenter]

Codecov Report

Merging #750 (b613d55) into main (b0f9825) will decrease coverage by 0.22%.
The diff coverage is 50.00%.

@@            Coverage Diff             @@
##             main     #750      +/-   ##
==========================================
- Coverage   42.70%   42.47%   -0.23%     
==========================================
  Files          45       45              
  Lines        1344     1363      +19     
  Branches      277      280       +3     
==========================================
+ Hits          574      579       +5     
- Misses        727      741      +14     
  Partials       43       43              

Impacted Files	Coverage Δ
src/components/Visualization.tsx	55.69% <ø> (-0.56%)	⬇️
src/components/import.ts	4.54% <ø> (ø)
src/store/settingsStore.tsx	71.42% <ø> (ø)
src/utils/index.ts	42.85% <16.66%> (-10.48%)	⬇️
src/store/integrationJsonStore.tsx	26.41% <55.55%> (+2.50%)	⬆️
src/components/Catalog.tsx	56.25% <100.00%> (ø)
src/components/MiniCatalog.tsx	58.33% <100.00%> (+1.81%)	⬆️
src/components/PlusButtonEdge.tsx	47.82% <100.00%> (-2.18%)	⬇️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[thiagoelg]

@kahboom feel free to review :)

But right now there seems to be a problem with the new version of React Flow that you might be able to help me with.
Running Kaoto UI by itself works fine, but running it inside VSCode makes it so the canvas is not interactable, and clicking and dragging are not responsive.

(The gif doesn't show clicks, but I was trying to click and drag)

This seems like a CSS problem, but I wasn't able to find the source of the problem so far.

[thiagoelg]

Ok, I think I fixed it... seems like importing CSS from inside a local CSS file works better for the VSCode extension (something related to how webpack resolve these files)

[kahboom]

Glad to hear that @thiagoelg , if you run into any other problems let me know.

[thiagoelg]

Hey @kahboom, I think this is finally finished! 🎉
Let me know if there's something that could be different or if I missed anything, thanks!

Oh, and about publishing, I don't think I can do that by myself, It'll have to be done after merging the PR, let me know if you need any help.

[kahboom]

@thiagoelg this looks great, I reviewed it but I'm wondering, what is the easiest way to test it?

[thiagoelg]

@thiagoelg this looks great, I reviewed it but I'm wondering, what is the easiest way to test it?

Probably via the VSCode extension, there are some instructions in this PR: KaotoIO/vscode-kaoto#30

Testing VSCode extensions is a bit tricky, let me know if something doesn't work or if you need any help. I could probably send a built .vsix file too if necessary

[kahboom]

@thiagoelg - Tiny change request, after that it'd be good to squash the commits. Then we're good to go!

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[kahboom]

Great work @thiagoelg 🥳 🎉