Konveyor Editor Extensions

Build and Test Status

Branch	Last Merge CI	Nightly CI
main

This repository contains the assets and source code for editor extensions.

Editor Extensions for Konveyor

This project is a VS Code extension designed to assist with migrating and modernizing applications using Konveyor. The extension includes a web-based UI built with Vite and an extension backend bundled with Webpack.

Getting Started

To set up and run the extension, follow the steps below.

Prerequisites

Ensure that you have the following installed:

• Node.js (LTS version recommended - see .nvmrc for the version used by the project)
• npm
• Visual Studio Code

Installation

1. Clone the repository:

   git clone https://github.com/konveyor/editor-extensions
   cd editor-extensions

2. Install the dependencies for both the extension and the web UI:

   npm install

3. Download the necessary assets to run the Kai server:

   npm run collect-assets

Running the Extension in Development Mode

Once you've installed all dependencies, and downloaded the runtime assets, you can run the extension in development mode by following these steps:

Press the F5 key inside Visual Studio Code to open a new Extension Development Host window.

This command starts the npm run dev script, performing the following actions:

• Compiles the shared code in watch mode
• Starts the Vite dev server for the webview UI
• Compiles the vscode extension in watch mode (to automatically rebuild the extension on file changes)

Note: The extension requires vscode to be open on a workspace. It will not be visible in the Extension Development Host window until you open a folder.

Inside the Extension Development Host window, press Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open the Command Palette and type View: Show Konveyor to open the Konveyor UI within the host.

Watch Mode

If you want to run the extension in watch mode separately:

Use the following npm command to run the extension and webview UI in watch mode:

npm run dev

Linting and formatting code

The eslint and prettier packages are used across the repo to standardize formatting and enforce some code conventions. At npm install time, a git pre-commit hook is setup by husky that will run lint-staged when git commit is run. This will run eslint and prettier rule and formatting against any staged changes. Keeping these steps automated at git commit time helps ensure consistent formatting and fewer linting fails in CI.

Building the Extension into a vsix archive that can be installed to vscode

To build the extension and generate a vsix, run the following commands:

npm run build
npm run collect-assets
npm run dist
npm run package

These command:

• Compiles the shared, webview-ui and vcsode sources using Vite and Webpack
• Download all of the runtime assets required
• Copy everything needed for the vsix to the dist/ folder
• Package the contents of dist/ into a vsix archive

When packaging is complete, the vsix will be dist/konveyor-ai-0.1.0.vsix (version number will match the vscode/package.json version number).

Downloading the extension's runtime assets

The extension requires a few assets to be downloaded and available to function. While preparing the dev environment, or when packaging, the extension will download GitHub release asset and extract the necessary component.

The core components needed to support the kai json-rpc server:

• kai json-rpc server → The json-rpc server itself manages code analysis and creating genAI solution.

• jdt.ls → The Java Language Server used by the analyzer.

• jdt.ls bundle → To support the use of jdt.ls by the analyzer, the Konveyor java-analyzer-bundle is used.

• opensource labels file → A maven index file of open source libraries used by the analyzer.

• rulesets → Base set of Konveyor's static code analysis rules to drive analysis.

All of these components are downloaded and unpacked into the correct place by the collect-assets.js script. There are cli parameters to override the default configuration values. The assets can be downloaded from a GitHub release, or for a GitHub action workflow artifacts.

The base use case to download everything from the default release locations:

npm run collect-assets

To download from a specific release v01.0-special.0:

npm run collect-assets -- --release-tag=v0.1.0-special.0

To download from a release in a fork of the kai repository:

npm run collect-assets -- \
    --org=myUserName1 \
    --repo=kaiForked \
    --release=v0.1.2

To download from the latest successful build workflow on the head of the main branch of the kai repository:

GITHUB_TOKEN=$(gh auth token) npm run collect-assets -- --use-workflow-artifacts

GITHUB_TOKEN for collect-assets

Using a GITHUB_TOKEN is good to avoid rate limiting when downloading from the releases, and to allow the download of workflow artifacts. Workflow artifacts may only be downloaded by a user who is logged in to GitHub. The REST api verifies the user as logged in using a bearer token. The collect-asset script will send the bearer token as long as it is set in the GITHUB_TOKEN environment variable.

There are a few common ways to get your token:

• Use the gh command line tool to login. Once logged in, the command gh auth token will show your token. The bash command to use the workflow artifacts as the download source uses this as the source for the bearer token.

• Open the Tokens page on GitHub and generate a new token.

  • For new tokens, only the Public repositories "Read-only access to public repositories" access is needed.

  • For classic tokens, only the public_repo scope is needed.

Project Structure

The project uses a number of npm workspaces to organize the code.

Project workspaces:

• extra-types
  Extra TypeScript types useful in our projects (i.e. make types on [].filter(Boolean) act nicely).

• shared
  Contains the types and code shared between the workspaces, especially types and actions that bridge vscode extension code to the webview code.

• vscode
  The main vscode extension sources. Webpack is used to transpile and package the extension. In dev mode, webviews are dynamically incorporated via the vite dev server. In build mode, webview packaged code is copied in place and accessed statically.

• webview-ui
  Webview UI sources built with React and PatternFly. Vite is used to transpile and package the views.

Non workspace folders:

• docs
  Project documentation, roadmaps and wireframes.

• scripts
  Javascript scripts used to setup the environment, build, and package the project.

Contributing

Please read our Contributing Guide before submitting a pull request.

Code of Conduct

This project follows the Konveyor Code of Conduct.

License

See LICENSE file for details.