Add a custom page to repository, what to use? servlet? or any AUI components

Bitbucket Development Bitbucket Server
1

I’m trying to add a custom page once a button is clicked on a repository and then load the response from API call which I’ll be making using javascript (client-side) on it. I was wondering if I have to use servlet or if using AUI component page Page - AUI Documentation will serve the purpose?

image
image1754×512 26.1 KB

Any thoughts? I’m using Bitbucket Server and trying to achieve this using plugin framework.

2

@madamczak - Any thoughts?

3

You can discover plugin-points buy loading the page with the Web Fragments query parameters ?web.items&web.panels&web.sections and see which sections and panels are available.

2 Likes
4

The screen you posted looks more like Bitbucket Cloud than Server/DC version.

If you want to add a new page with a custom URL then the servlet is a way to go:

Bitbucket includes a few custom page layout (page decoarators) that you can use:

If you want to extend only part of Bitbucket UI by adding e.g. new panel, then you can use the suggested link to read more about WebFragments.

5

@madamczak - Yeh, the screenshot is of Bitbucket cloud, however, I’m trying to add a custom page on Bitbucket Server. Let me give it a try with plugin-decorators. Thank you.

6

@madamczak -

I don’t find any place/area using webfragments to add a web panel. I want a panel/page to be added where you see ‘this is the symlink target’ in the screenshot i.e. file view. and rest controls would remain as is like Edit, Rawfile, Source View, etc.

image
image1888×968 64 KB

I want my own context to load on the below-highlighted area, the way the content gets changes when ‘Diff to previous’ button is clicked.

image
image1903×658 32.1 KB

  1. I believe if I go with Servlet, it will add a new page and won’t fit the file view, it will remove the controls/button like raw file, edit, blame, Diff to previous
  2. When I follow the example Repository decorator from Bitbucket I see it adds a new page (using servlet)

Is there any way to add a new panel/page to the existing file view within the browser?

7

The selected UI box is called a file view or a diff view, depending on the state. As far as I’m aware there is no official API you can use to extend it.

8

@madamczak - How about using a file handler? I’m not sure whether that will serve my purpose. Bitbucket Server Developer Documentation -

I tried though adding an example given on above URL, but looks like I’m missing something to import as it is showing error at"required(‘feature/file-content/file-handlers’)"

here is the javascript code

AJS.toInit(function() {
    AJS.$("#dialog-show-button").click(function(e) {

        e.preventDefault();

        //import HandlerRegistry from 'bitbucket/internal/util/handler-registry';
        //import object from 'bitbucket/internal/util/object';


        console.log("Start of Plugin");
        alert("hey darling, love you!");

        function MyView(options) {
            var $element = $('<div/>');
            $container.append($element);        
            return {
                destroy: function() {
                    $element.remove();
                },
                extraClasses: 'my-class something-else'
            };
        }      
        
        var myFileHandler = {
            weight: 400,
            handle: function(options) {
                console.log("I'm in handle")
                if (options.fileChange.path.extension === 'txt') {
                    return new MyView(options);
                } else if (options.fileChange.path.extension === 'txt2') {
                    return $.Deferred().reject('File extension not supported');
                }
            }
        };

        console.log("before register");
        require('feature/file-content/file-handlers').register(myFileHandler);
             
        
    });
});

atlassian-plugin.xml

  <web-panel key="my-panel" location="bitbucket.web.repository.browse.filebrowser.before">
    <resource name="view" type="velocity" location="/templates/new.vm" />
  </web-panel>

Error in console, and I dont find any relevant information when I google.

image
image945×105 7.04 KB

I’m adding a button at the repo level and trying to trigger that JS script on click.

image
image864×509 9.01 KB

Sorry if I’m deviating from my original question, I’m trying to render the content of files (from repo) with extension .properties which has key-value pair, and then apply additional logic to hyper link keys.

Can you please suggest?

9

@madamczak - I see API listed as other API “Web Resource context” *https://developer.atlassian.com/server/bitbucket/reference/web-resource-contexts/) which let you render custom data through css/javascript to the core pages, and the context available for file/diff view - “bitbucket.page.repository.fileContent”. I hope this will help in my use case.

I tried though adding the web-resource only with the above context and the javascript which just outputs using document.write but I get a weird view on file/diff file of any file from the repository, I have raised that under another issue.