Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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

Nam Le I'm New Here Nov 04, 2020

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.

1 answer

1 accepted

0 votes
Answer accepted

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 I'm New Here Nov 05, 2020

Thanks a lot for your help.

Like Maciej Adamczak likes this

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Bitbucket

Powering DevOps with Bitbucket Server & Data Center

Hi everyone, The Cloud team recently announced 12 new DevOps features that help developers ship better code, faster   ! While we’re all excited about the new improvements to Bitbucket ...

2,589 views 1 9
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you