Custom Plugin

Overview

This guide explains how to create a custom plugin for CloudBeaver. It walks you through the process of adding a simple button to the application's top bar.

Creating a custom plugin

Follow these steps to create a custom plugin that adds a button to the top bar and logs Hello, World! to the console.

Create plugin folder

• Inside /webapp/packages, create a folder with your desired name, e.g., plugin-hello-world.

Copy configuration files

• Copy the following files from any existing package into your plugin folder:

  • .gitignore
  • package.json
  • tsconfig.json

Update package.json

• Open package.json and update the name field to your plugin's name, @cloudbeaver/plugin-hello-world.

• Remove the dependencies and devDependencies sections.

Update tsconfig.json

• Remove the references section from tsconfig.json.

Create source files

• Inside your plugin folder, create a src folder.
• Add two files in src:
  • index.ts
  • manifest.ts

• Export the manifest from index.ts:

  export * from './manifest.js';
  

Create a service

• Create a service to add the button.
• It should:
  • Be an injectable class.
  • Extend the Bootstrap class.
• Add a register method and implement the button-adding logic.

Example service:

import { Bootstrap, injectable } from '@cloudbeaver/core-di';
import { ActionService, MenuService } from '@cloudbeaver/core-view';
import { MENU_APP_ACTIONS } from '@cloudbeaver/plugin-top-app-bar';
import { ACTION_HELLO_WORLD } from './ACTION_HELLO_WORLD.js';

@injectable()
export class HelloWorldService extends Bootstrap {
  constructor(
    private readonly actionService: ActionService,
    private readonly menuService: MenuService,
  ) {
    super();
  }

  override register(): void {
    this.menuService.addCreator({
      menus: [MENU_APP_ACTIONS],
      getItems: (context, items) => [...items, ACTION_HELLO_WORLD],
    });

    this.actionService.addHandler({
      id: 'hello-world-handler',
      actions: [ACTION_HELLO_WORLD],
      handler: (context, action) => {
        switch (action) {
          case ACTION_HELLO_WORLD: {
            console.log('Hello, World!');
            break;
          }
        }
      },
    });
  }
}

Create the ACTION_HELLO_WORLD file:

import { createAction } from '@cloudbeaver/core-view';

export const ACTION_HELLO_WORLD = createAction('hello-world', {
  label: 'Hello, world!',
});

Register the service

Register your service in manifest.ts:

import type { PluginManifest } from '@cloudbeaver/core-di';

export const helloWorldPlugin: PluginManifest = {
  info: {
    name: 'Hello World Plugin',
  },
  providers: [() => import('./HelloWorldService.js').then(m => m.HelloWorldService)],
};

Connect plugin to product

Open /webapp/packages/product-default/index.ts and include your new plugin:

import { helloWorldPlugin } from '@cloudbeaver/plugin-hello-world';

const PLUGINS: PluginManifest[] = [
  ...existingPlugins,
  helloWorldPlugin,
];

Run commands

In /webapp, run:

yarn run update-ts-references
yarn
yarn run update-ts-references

Final result

Your button should now appear in the top bar and log Hello, World! to the console when clicked.