Hi folks,
We are pleased to announce the availability of the second Early Access Program (EAP) release of Bitbucket Server 7.0.
Please see the following post for details:
https://community.developer.atlassian.com/t/announcement-bitbucket-server-7-0-eap2-release
@madamczak Hello,
I believe I have the same problem as @rlander:
Uncaught (in promise) Error: bitbucket/util/state.getPullRequest is not available on this page.
We’re developing an add-on which, among other things, adds new tab to the pull request details page.
We’ve used “web-item” in atlassian-plugin.xml to add it, which worked good in BB <7.0.0:
This tab stopped to appear in BB 7.0.1.
It wouldn’t be much of a problem if PR information will be still accessible through bitbucket/util/state.getPullRequest, bit it’s not and it’s not immediately clear how to achieve same behavior via client-side extensions (CSE).
Also, CSE examples seems to rely on React, but we use Vue for our frontend side of the add-on, and it’s not clear how to use CSE with Vue or is it possible at all.
I would welcome any advice.
Hi @StanislavSeletskiy, let me try to answer some of your questions:
We’re developing an add-on which, among other things, adds a new tab to the pull request details page.
The old web-item is no longer supported, sorry for that. For now, we don’t have an extension point as a replacement. Let me talk with our dev team next week and I will get back to you with the answer if we will add a new extension point in the upcoming version of Bitbucket.
It wouldn’t be much of a problem if PR information will be still accessible through
bitbucket/util/state.getPullRequest, bit it’s not and it’s not immediately clear how to achieve same behavior via client-side extensions (CSE).
We strongly recommend avoiding querying and mutating the browser DOM HTML elements. With the new implementation of the pull request page, we can’t guarantee that any DOM change will be persistent. You should stick to the extension points that are the supported API on the pull request page.
Also, CSE examples seems to rely on React, but we use Vue for our frontend side of the add-on, and it’s not clear how to use CSE with Vue or is it possible at all.
As the extension developer, you are not tight to use React. You can use Vanilla JS if you want. Most of the extension points requires from you using passing only the attributes object:
The panel type extension, on the other hand, allows you to use the DOM node reference and render your own HTML into it:
For now, we do support the panel extension type only in bitbucket.ui.pullrequest.comment.extra extension point. If we decide to add a new extension point to pull requests tabs, this would be a panel type.
You could use React together with Atlaskit components if you want but that’s not a requirement. You are more than welcome to use Vue if that’s your preferred framework.
Thanks,
Maciej
We use this web-item heavily at SpaceX. Please ensure that webitem is supported or provide an alternative, or we’ll just have to continue hacking the UI to get it to do the basic things we need. 
Thank you for such comprehensive reply!
There are another web-item extensions which we currently use (they still work in BB 7).
So, to let you know, here is a list of another candidates for the future extension points:
Screenshots available there:
https://marketplace.atlassian.com/apps/1222085/self-hosted-ci-cd-snake-ci
Please, also check screenshots for our other add-on which extends PR list/view interface:
Hey @StanislavSeletskiy, apologies for the late response. The old Client Web Fragments and old web-items in other locations are still supported with 7.0. We do plan to deprecate and migrate them to Client-Side extensions at some point, but we don’t have any specific date yet when this will happen. We don’t plan to remove them during 7.x lifecycle completely which means we will not break your plugin before releasing the 8.0.
Hello,
I supplemented a column to the pull request page’s “Commit” tab by defining a lient-web-panel. The way to do this is documented in: Adding commit metadata.
<client-web-panel key="bitbucket-tagdetails-showNotesOnCommitView" name="Notes panel on Commit View page"
location="bitbucket.commit.related-entities" weight="2000">
<resource type="soy" name="view"
location="jh.atlassian.stash.stash-tagdetails:bitbucket-tagdetails-resources/jh.atlassian.bitbucket.tagdetails.notesPlaceholderOnCommitView"/>
</client-web-panel>
This doesn’t work anymore in BB7. How to achieve this (without react or other frameworks)?
Best regards, Johannes
Hi @gldog, the bitbucket.commit.related-entities Client Web Panel works only on the commit view page and its a part of the Client Web Fragments plugin system.
On the pull request page, you will have to use the Client-side Extensions. To add a new column into the commits table you need to use the bitbucket.ui.pullrequest.commits.table.column.after extension point.
Please check the official documentation and a plugin template that includes examples of how to use the new CSE system:
Let me know if that helps or if you have any more questions.
Thanks,
Maciej
Hello, do you have a Javascript example how to use bitbucket.ui.pullrequest.commits.table.column.after ?
Please take a look at the mentioned plugin template: Bitbucket
You can find the example code of the client-side extension that is using bitbucket.ui.pullrequest.commits.table.column.after extension point here:
https://bitbucket.org/atlassianlabs/bitbucket-client-side-extensions-template/src/master/src/my-app/extensions/pull-request/commits-table-column-extension.js
If you start the plugin template and create a pull request, you can toggle displaying extension point with the ?extensions URL param, e.g.:
http://localhost:7990/bitbucket/projects/PROJECT_1/repos/rep_1/pull-requests/1/overview?extensions
Next, if you click to the “Commits” tab in the pull request, you should see both example button and the interactive Extension Info Point (blue bubble):
Thanks,
Maciej
Hello,
I’m having issues with “bitbucket.ui.pullrequest.diff.toolbar” section extension. It loads fine when opening the page with URL directly to Diff page, but when opening overview and then switching to Diff tab it won’t work without page refresh, am i missing something?
I’m using client side extension without webpack
<web-item key="diff-edit-button" section="bitbucket.ui.pullrequest.diff.toolbar">
<label key="" />
</web-item>
<web-resource key="pull-request-edit-button-resources">
<resource type="download" name="edit-button.js" location="/static/edit-button.js"/>
<context>bitbucket.ui.pullrequest.diff.toolbar</context>
</web-resource>
Hi @rytis, welcome to the dev community. From what I can see you have the button with the “Edit” label but your web-item doesn’t provide that label. Is there any chance that your JS file edit-button.js is manually registering the extension? Can you share the content with me, please?
I wasn’t able to reproduce that behaviour with a webpack plugin. Let me try to check that without webpack.
Thanks,
Maciej
@madamczak, Thanks for the quick response!
Yes, edit-button.js is registering client side extension.
define('plugin/pr-buttons-cse-factory', [
'@atlassian/clientside-extensions-registry'
], function(registry) {
function editButtonFactory(extensionAPI, context) {
return {
type: 'link',
label: 'Edit',
onAction: function(){},
link: "https://www.google.com/"
};
}
registry.registerExtension('plugin-key:diff-edit-button', editButtonFactory);
});
AJS.$(function() {
require('plugin/pr-buttons-cse-factory');
});
Hi @rytis, thanks for more the answer. I was able to reproduce that problem once and I’ve created a public bug issue: [BSERV-12283] The Client-side extension is not rendering - Create and track feature requests for Atlassian products.
Can you provide me with more details like if you have any errors in the browser console or network tab? Maybe you have some application logs that might help us with finding the root cause?
There are no errors in console nor the logs. Seems like extension is simply not getting registered on the web-item that is in the section which is not loaded on initial page.
Is there any outcome if the PR tab will be brought back? I’m completely stuck on how to add an additional section to the PR page without fiddling around with DOM manipulation (which I do not want to do).
Ho @stipx, the question has been answered in a different post:
Additionally, I’ve created a public issue you can watch: https://jira.atlassian.com/browse/BSERV-12328
Any example code you can share?
Thanks in advance.
Cheers.