Skip to content

Custom Plugin

dbeaver-devops edited this page Dec 9, 2024 · 1 revision

Table of contents

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.

CloudBeaver Documentation

User Guide

Installation

Configuration

CloudBeaver AWS

CloudBeaver Enterprise Edition

Deployment

Clone this wiki locally