Custom plugin

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:

1. Create Plugin Folder

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

2. Copy Configuration Files

• Copy the following files from any existing package into your plugin folder:
  • .gitignore
  • package.json
  • tsconfig.json

3. 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.

4. Update tsconfig.json

• Remove the references section from tsconfig.json.

5. Create Source Files

• Inside your plugin folder, create a src folder.
• Add two files in src:
  1. index.ts
  2. manifest.ts
• Export the manifest from index.ts:

  export * from './manifest.js';

6. 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:

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;
       }
     }
   },
 });
}
}

import { createAction } from '@cloudbeaver/core-view';
export const ACTION_HELLO_WORLD = createAction('hello-world', {
 label: 'Hello world!',
});

7. Register the Service

Register your service in manifest.ts like this:

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

8. 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,
];

9. Run commands

In /webapp, run:

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

Now, your button should appear in the top bar and log "Hello, World!" when clicked.