Konflux UI

UI for Konflux

Contributing

We welcome contributions! Please read our Contributing Guidelines to get started. If you find a bug or want to request a feature, feel free to open an issue as well.

Setting up development environment

This project contains a DevContainer which has all dependencies for developing Konflux UI pre-installed. You can find out more information for how to configure your environment to use the DevContainer in the included README.md.

Manual installation

If you do not want to or cannot use the DevContainer, you can also setup the repository yourself.

Prerequisites:

• Node.js version >= 20
• Corepack enabled (included with Node.js 20+)

Note: This project uses Yarn Berry (v4.x) as the package manager. The correct Yarn version is automatically managed via the packageManager field in package.json and Corepack.

A step by step series of examples that tell you how to get a development environment running:

1. Clone the repository

2. Enable Corepack (required for Yarn Berry)

   corepack enable
   

   On some systems you may need sudo corepack enable

3. Install dependencies

   yarn install
   

4. Run the app in development mode

   yarn start
   

Running with Konflux-ci

By default, the UI uses the stage cluster for API calls. However, if you want to run the UI with a local Konflux deployment, follow the steps below.

1. Follow the guide at https://github.com/konflux-ci/konflux-ci to deploy Konflux locally (use branch: new-ui)

2. Once you have Konflux deployed, make the following changes to your .env file:

# .env

+ AUTH_URL=https://127.0.0.1:9443/
+ REGISTRATION_URL=https://127.0.0.1:9443/
+ PROXY_URL=https://127.0.0.1:9443/
+ PROXY_WEBSOCKET_URL=wss://127.0.0.1:9443
- AUTH_URL= https://konflux-ui.apps.stone-stg-rh01.l2vh.p1.openshiftapps.com/
- REGISTRATION_URL=https://konflux-ui.apps.stone-stg-rh01.l2vh.p1.openshiftapps.com/
- PROXY_URL=https://konflux-ui.apps.stone-stg-rh01.l2vh.p1.openshiftapps.com/
- PROXY_WEBSOCKET_URL=wss://konflux-ui.apps.stone-stg-rh01.l2vh.p1.openshiftapps.com/

3. Update your webpack.dev.config.js file with the following changes:

@@ webpack.dev.config.js:14 @@
    historyApiFallback: true,
    hot: true,
    server: 'https',
    proxy: [
      {
+        context: (path) => path.includes('/oauth2/') || path.includes('/idp/'),
-        context: (path) => path.includes('/oauth2/'),
        target: process.env.AUTH_URL,
        secure: false,
        changeOrigin: true,
+        autoRewrite: true,
-        autoRewrite: false,
        toProxy: true,
        headers: {
          'X-Forwarded-Host': `localhost:${DEV_SERVER_PORT}`,
        },
        onProxyRes: (proxyRes) => {
          const location = proxyRes.headers['location'];
          if (location) {
            proxyRes.headers['location'] = location.replace(
+              'localhost:9443',
+              `localhost:${DEV_SERVER_PORT}`,
-              'konflux-ui.apps.stone-stg-rh01.l2vh.p1.openshiftapps.com%2Foauth2',
-              `localhost:${DEV_SERVER_PORT}/oauth2`,
            );
          }
        },

Available Scripts

In the project directory, you can run:

• yarn build: Builds the app for production using webpack with the production configuration file.
• yarn start: Runs the app in development mode. Opens the app in your default browser.
• yarn test: Runs unit tests using jest.
• yarn coverage: Runs the test suite with coverage report.
• yarn lint: Runs both TypeScript and SASS linting.
• yarn lint:ts: Lints TypeScript files.
• yarn lint:sass: Lints SASS files.

Built With

• Webpack - Module bundler
• Jest - Testing framework
• ESLint - TypeScript linting
• Stylelint - SASS linting