Jira Cloud plugin converted to Server

Jira Development Jira Server
1

Hi, I am porting one of my cloud plugins to run as a P2 plugin. If I can run my pages in an IFrame it would make life a lot simpler for supporting two platforms. In my searches I have noticed the Atlassian Connect JS repository. Has anyone managed to use this in Jira server and if so how do you use the JS files (connect-host.js and iframe.js) to get the AP functionality working.

Thanks
Paul

1 Like
2

@Paul given that the P2 infrastructure really differs from connect I would not recommend trying to merge these two. The best way to share a code base is:

  1. share static resources, more specifically create a front-end which only consumes data from an API.
  2. recreate the API (both in terms of endpoints and DTO output) you have for Connect in P2 (which can also be shared code if your connect API is written in Java
  3. Minimize the dependencies on private API or features that are specific to server products.

By doing this you can achieve 90%+ code sharing between connect and P2 environments. The only differences would potentially be velocity placeholders / spring scanner components / atlassian-plugin.xml entries.

3

Hi @remie, my thinking was that my html classes, ids and javascript were created in isolated iframes with no chance of conflicts. Now I’ll need to rename a lot of these, which will probably then have to be back ported to the cloud to keep them the same. For this plugin over 50% of the complexity is in the velocity templates and javascript so any help in this area would be handy.

As you suggested I am planning on reusing all of the endpoints and Java classes.

Thanks
Paul

4

@Paul the best way to avoid element ID’s on html and use CSS modules for classes, where the class name is replaced by a generic hash.

For my add-ons, I use VueJS (you can also use React) components with included HTML templates and modularised CSS. My velocity templates are limited to placeholders. For instance, a regular page would be

$webResourceManager.requireResourcesForContext("myContext")

<html>
    <body>
        <router-view></router-view>
    </body>
</html>

Where is a placeholder used by Vue-Router. Vue will then use my routing definitions (based on URL paths) to load the correct component.

This velocity template is referenced in the atlassian-plugin.xml like this:

<webwork1 key="myActions" name="${project.name} - WebWork Actions" roles-required="use">
  <actions>
    <action name="com.atlassian.jira.web.action.JiraWebActionSupport" alias="myAlias">
      <view name="success">${resources.dir}/template.vm</view>
    </action>
  </actions>
</webwork1>

or if you want to add a web-panel:

<web-panel key="myPanel" name="myPanel" location="webpanels.admin.summary.right-panels" weight="161">
  <label key="My Panel" />
  <resource name="view" type="velocity" location="${resources.dir}/template.vm" />
</web-panel>

The VueJS static resources are bundled using WebPack and included as a single resource:

<resource type="download" name="myResources.js" location="${resources.dir}/static/myResources.js">
  <property key="content-type" value="text/javascript"/>
</resource>

Hope this helps!