How to render a soy template(from servlet) to wep-panel to display custom warning message

Bitbucket Development Bitbucket Server
1

Hello,

Am new to plugin development, I have a requirement as stated below.

Requirements:

we have enabled custom merge-check hook, which checks the pull-request and merge button is enabled if the checks are passed/accepted or reject with reason if the checks are failed/rejected as shown below.

bitbucket-merge-check-warning-message

Now there was a request to display this reject reasons as a banner in the pull request instead of the default warning from merge button.

Kindly help me in understanding how to do this.

I have gone through https://developer.atlassian.com/server/framework/atlassian-sdk/web-panel-plugin-module/

But not able to understand how to provide my soy template that rendered through a servlet to the web-panel.

Please provide any example if possible for rendering soy template on web-panel.

Thanks!

Natesan S

2

@madamczak can you lease help me in this one

3

I don’t know what version of Bitbucket DC you are using, but I would assume the latest.

In this case, you can add the ?web.items&web.fragments&web.sections&extensions query to the end of the URL on the page you are browsing to discover available plugin and extensions points:

Depending if this is the CSE extension point or Web-Panel plugin point, you can create your custom extension/plugin.

Thanks,
Maciej

4

@madamczak , I was able to create a web-panel, but I was not able to load javascript for the web-panel, Please suggest me how to load prmc.js

atlassian-plugin.xml

<?xml version="1.0" encoding="UTF-8"?> ${project.description} ${project.version} images/pluginIcon.png images/pluginLogo.png 
<!-- add our web resources -->
<web-resource key="pull-request-merge-check-resources" name="pull-request-merge-check Web Resources">
    <resource type="download" name="prmc.css" location="css/prmc.css"/>
    <resource type="download" name="prmc.js" location="js/prmc.js"/>
    <resource type="download" name="images" location="images"/>
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <dependency>com.atlassian.auiplugin:soy</dependency>
    <dependency>com.atlassian.auiplugin:aui-banner</dependency>
    <context>prmc</context>
</web-resource>

<web-panel key="prmc-web-panel-banner" weight="10" location="bitbucket.web.repository.banner">
    <description>
        Web panel component used to handle the display of the pull request banner
    </description>
    <context-provider class="com.viavi.wireless.bitbucket.provider.MyContextProvider" />
    <resource name="view" type="soy" location="${atlassian.plugin.key}:prmc-soy/bitbucket.hook.prmc.myTemplate1"/>
</web-panel>

<client-resource key="prmc-soy" name="Plugin Service Soy Templates">
    <directory location="/templates">
        <include>/**/*.soy</include>
    </directory>
    <context>prmc</context>
    <!--        very important to include this line here !!!-->
    <dependency>com.atlassian.bitbucket.server.bitbucket-web:server-soy-templates</dependency>
</client-resource>

<repository-hook key="pull-request-merge-check-hook" name="Pull Request Merge Check Hook"
                 class="bitbucket.hook.prmc.PullRequestMergeCheckHook">
    <description key="pull-request-merge-check-hook.description">
        Plugin to validate Pull Request Description</description>
    <scopes>
        <scope>project</scope>
        <scope>repository</scope>
    </scopes>
    <config-form name="Pull Request Merge Check" key="pull-request-merge-check-hook-config">
        <view>bitbucket.hook.prmc.pullrequestmergecheckhook.view</view>
        <directory location="/static/"/>
    </config-form>
</repository-hook>

prmc.js

alert(“I’m an alert box!”)
AJS.$(document).ready(function() {
alert(“doc text from html”)
console.log(“doc text from html”)
AJS.log(‘doc text from html’);
});
AJS.toInit(function(){
alert(“Main page JS!”)
AJS.log(‘Main page JS Controller initializing …, contextPath=’ + AJS.contextPath());
});

5

There are different ways to load the JS file, or rather, the web-resource on the page.

You can change the value of <context>prmc</context> in your web-resource definition to match the context of the pull request page that is bitbucket.page.pullRequest.detail in Bitbucket 7+
https://developer.atlassian.com/server/bitbucket/reference/web-resource-contexts/

6

@madamczak , Thanks a lot for the help js got loaded using your suggestion on the banner. Can you please help me in rendering same message displayed in banner into pop-up(dialog2).
We are investigating which one would be better option in end user perspective.
I have used below , but didn’t worked - kind request to help me out here

I want to use same context-provider used in last message to load message to soy template instead of servlet on the (pop-up dialog2)

atlassian-plugin.xml

<?xml version="1.0" encoding="UTF-8"?> ${project.description} ${project.version} images/pluginIcon.png images/pluginLogo.png 
<!-- add our i18n resource -->
<resource type="i18n" name="i18n" location="prmc"/>

<!-- add our web resources -->
<web-resource key="pull-request-merge-check-resources" name="pull-request-merge-check Web Resources">
    <resource type="download" name="prmc.css" location="css/prmc.css"/>
    <resource type="download" name="prmc.js" location="js/prmc.js"/>
    <resource type="download" name="images" location="images"/>
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <dependency>com.atlassian.auiplugin:soy</dependency>
    <dependency>com.atlassian.auiplugin:aui-dialog2</dependency>
    <context>bitbucket.page.pullRequest.detail</context>
</web-resource>

<!-- to bind plugin's page to Web Item: atl.admin/admin-support-section on BB UI Administration page -->
<web-item key="prmc-web-panel-web-item" i18n-name-key="prmc-web-panel-web-item.name" section="bitbucket.page.pullRequest.detail" weight="1000">
    <propertyValue key="prmc-web-panel-web-item.propertyValue">PRMC plugin</propertyValue>
    <label key="prmc-web-panel-web-item.label"/>
    <tooltip>PRMC</tooltip>
    <description>
        Web panel component used to handle the display of the pull request banner
    </description>
    <context-provider class="bitbucket.provider.MyContextProvider" />
    <!--        <resource name="view" type="soy" location="${project.groupId}.${project.artifactId}:pull-request-merge-check/bitbucket.plugin.popup.myTemplate1"/>-->
    <resource name="view" type="soy" location="${atlassian.plugin.key}:prmc-soy/bitbucket.plugin.popup.myTemplate1"/>
</web-item>

<client-resource key="prmc-soy" name="Plugin Jira Cache Service Soy Templates">
    <directory location="/templates">
        <include>/**/*.soy</include>
    </directory>
    <context>prmc</context>
    <!--        very important to include this line here !!!-->
    <dependency>com.atlassian.bitbucket.server.bitbucket-web:server-soy-templates</dependency>
</client-resource>

<repository-hook key="pull-request-merge-check-hook" name="Pull Request Merge Check Hook"
                 class="bitbucket.hook.prmc.PullRequestMergeCheckHook">
    <description key="pull-request-merge-check-hook.description">
        Plugin to validate the pre-sub link in the Pull Request Description</description>
    <scopes>
        <scope>project</scope>
        <scope>repository</scope>
    </scopes>
    <config-form name="Pull Request Merge Check" key="pull-request-merge-check-hook-config">
        <view>bitbucket.hook.prmc.pullrequestmergecheckhook.view</view>
        <directory location="/static/"/>
    </config-form>
</repository-hook>