Making Client side extension that append custom HTML to comment and task on PR page

[Nam Le]

Hello, I would like ask about Client-side Extension development of Bitbucket, but I haven't looked thoroughly at the API Reference so I'm unsure if this is possible.

Is it possible to create an custom extension with following behavior: whenever someone create a task / comment on a Pull request page, it will append a customized <select>that user can pick (with predefined options) and when user finishes editing, it will modify the comment depending on the <select> value ?

Also, is it possible to just enable this extension in certain projects of the whole server ? Our organization has multiple projects, but only some projects want this functionality.

Thanks.

[Maciej Adamczak · Accepted solution]

Hi Nam,

I'm not sure if I fully understand the use case but let me try to answer your questions. I think you can use the "bitbucket.ui.pullrequest.comment.extra" extension point that can render a custom HTML "panel" below each comment. When a new comment/task is created the new panel will be created for it.

 it will modify the comment depending on the <select> value

That part is not supported by CSE. You would have to update the comment content using e.g. REST PUT request to the comment resource: 
- https://developer.atlassian.com/server/bitbucket/reference/rest-api/
- https://docs.atlassian.com/bitbucket-server/rest/7.7.1/bitbucket-rest.html#idp326

Here is the link to the documentation of CSE Panel API: https://developer.atlassian.com/server/framework/clientside-extensions/reference/api/panel-api/

Please check how to enable the discovery mode to get more information about the supported extension points: https://developer.atlassian.com/server/framework/clientside-extensions/guides/introduction/discovering-extension-points/

You can start building your plugin using the plugin template: https://bitbucket.org/atlassianlabs/bitbucket-client-side-extensions-template

 Also, is it possible to just enable this extension in certain projects of the whole server ? Our organization has multiple projects, but only some projects want this functionality.

For that, you could create a custom REST resource that can accept the repository slug as a param or as a part of the resource URL. Your custom REST resource would have to return a value if the extension is enabled or not. Optionally, you could create the configuration page under the repository settings where you can enable support for your plugin.

Then, from the Bitbucket extension, you could use the server module or native fetch API to request for that information. The extension context contains a repository entity and you can use it to get repository slug that you can use to construct a request.

Once you have the response you can use the updateAttirbutes function from the extension API and update the disabled attribute. Here is an example pseudo-code:

import { PanelExtension } from '@atlassian/clientside-extensions';

/**
 * @clientside-extension
 *
 * @extension-point bitbucket.ui.pullrequest.comment.extra
 * @condition class com.example.ContextAwareCondition
 */
export default PanelExtension.factory((pluginApi, context) => {
    const { repository, project } = context;
    const repoSlug = repostiory.slug;
    const projectKey = project.key;

    // Send REST request to check if the extension should be enabled for the current project and repository
    fetch(`${AJS.contextPath()}/your-plugin-rest-endopoint-url/${projectKey}/${repoSlug}/status`, {
      headers: {
         'Content-Type': 'application/json'
      }
    }).then(r => r.json())
    .then(response => {
       // If the repository is configured toggle the extension
       if (response.enabled) {
          pluginApi.updateAttributes({
              hidden: false,
          });
       }
    });

    return {
        hidden: true, // Hide extension by default
        onAction: (panelApi) => { 
           panelApi.onMount(container) {
              // do something with container
              container.innerHTML = '<p>My plugin</p>';
           });
        },
    };
});

Thanks,

Maciej Adamczak
Atlassian Developer

[Nam Le]

Thanks a lot for your help.