Alternative diff view plugin

Bitbucket Development Bitbucket Server
,
1

Hello!
I am trying to implement a plugin to provide an alternative diff view for a certain file types during pull requests. I am trying to achieve something similar to this BPMN model diffing | demo.bpmn.io. But I am stuck. My requirements are the following:

  1. As the alternative view is graphical, I need to have a large dialog window (close to full screen) or a full page for it.
  2. The graphical view requires several 3rd party css files and some custom javascript code.
  3. I need to be able to switch between the classical diff view and the new one.
  4. As there are not so many files of the type I need the alternative view for, I would like to show the views “toggle” button based on the currently reviewed file type.

I tried to use CSE for the purpose. First I went with the ModalExtension placing it at the only available extension point for the PR Diff page: bitbucket.ui.pullrequest.diff.toolbar. And I put my javascript code in modalApi.onMount(). It worked fine but there are two major problems: 1) I cannot figure how can I apply my css files to the dialog, 2) The maximum size of the dialog set with modalApi.setWidth(“x-large”); is way too small for my purpose, I need to have it much bigger.

The only other possible solution with CSE seams to be the PageExtension. But there is the same problem: I don’t understand how can one add some custom css to the page.

I looked at Plugin modules and have not found anything suitable for my purposes among them either.

Could someone point me to the right direction please?

2

Solved the issue with servlet + web resources. But the solution uses the separate page to display the custom diff.

1 Like
3

Hi @YaroslavRudykh, I’m glad that you managed to figure out how to use the CSE and servlets.

I don’t understand how can one add some custom css to the page.

With webpack, there are multiple ways you can load and use CSS on the page. The most common solution would be using css-loader and importing the css files directly into your page extension JS file e.g.:

// my-extension-file.js
import './my-styles.css';

/**
 * @clientside-extension
 * @extension-point example.extension.point
 * @label "My page"
 * @page-url /my-page
 * @page-title "My page"
 */
export default PageExtension.factory(container => {
    // attach content to the container

    container.innerHTML = '<div class="my-css-class">My new page!</div>';
});

/* my-styles.css */ 
.my-css-class {
  background: blue;
}

This is only a simplified example code. The webpack with WRM plugin should create the bundle for you and instrument the WRM to load the CSS files.

Thanks,
Maciej