Hello Experts, I am trying to develop a JIRA issue widget (to appear along-side an issue).

[Chandra B]

The plugin would show some charts/graphs related to the issue. I have a pure-web (html/JS) version of the intended UI developed in ReactJS. I can build/bundle this as HTML/CSS/JS code that can run on any browser.

1. Insert my rectangular window (the bundle described above)
2. This should run the code and produce the charts/graphs
3. All of my interactions with charts must work (it should as its Javascript)

I have a barebones plugin that emits a line of text :

src/main/resources/templates/my-test-plugin-webpanel.vm
    <div class="ghx-container">
      <table class="aui">
        <tbody>
          This is where ReactJs code should render
        </tbody>
      </table>
    </div>

[I picked this up from an example I read online]

Questions:

1. Has anyone achieved something like this before? (i.e Build using a JS framework and embed inside a plugin)?
2. If yes, can you share some pointers/examples for such an approach?
3. I have read about AUI (and react-AUI). It is unclear on whether I need to use AUI library for developing plugins.
4. Is there a good example of a plugin that uses Javascript to render inside the window? An example of an issues plugin would be great.

thanks!
Chandrabhanu

[Kubilay Karpat [Snapbytes] · Accepted solution]

Hi Chandra,

Welcome to the community. If you have already built your JS code you can simply inject it to JIRA UI by using Web Resource module. However you might want to follow a more structured approach. Good news is that there are some quite good materials on this topic. Please have a look at following:

• https://developer.atlassian.com/blog/2016/06/jira-add-on-dev-2016-part-1/ A good article about using JS builders + React in JIRA in a plugin project
• https://www.atlassian.com/atlascamp/2017/archives/build-addons/server-add-ons-for-front-end-developers A great presentation on using Atlassian web resource web pack plugin so that you won't have to define your dependencies twice in atlassian-plugin.xml. (Also another bunch of many useful information on front-end development. Presenter shares many links to example repositories I suggest you to take a look at all of them)
• https://developer.atlassian.com/server/jira/platform/extending-inline-edit-for-jira-plugins/ Apart from using any JS framework you have to listen the JS events triggered by JIRA. This is how do you know that you HTML code inserted to the issues. Especially pay attention to second code block in the page which shows and example web-panel code. 

For you questions:

1. We are currently working on a similar topic but we do not have anything product-ready yet.
2. I hope that those materials would be helpful for you
3. AUI is a JS framework that comes bundled with JIRA Server. It provides many useful components that shares the same look & feel with Atlassian products.
   AtlasKit on the other hand is a bundle of React components which very looks like AUI components. But don't confuse them with AUI because you can use AtlasKit components in any React application since they are written without any Atlassian dependencies.
   It is a good idea to use AtlasKit if you are already developing with React.
4. Examples in the articles I shared can give you clues on this matter.
   
   

Best, Kubilay

[Chandra B]

Hi Kubilay,

Thank you for your prompt response. I had already checked https://developer.atlassian.com/blog/2016/06/jira-add-on-dev-2016-part-1/  but I couldn't find a complete example that I could use. As a newbie, I am looking for a simple ReactJS HelloWorld example that I can refer to and build on.

Thanks!

Chandrabhanu

[Kubilay Karpat [Snapbytes]]

Hi Chandra,

As far as I know there is no such an example code with React.js for server. But I suppose it should be as simple as giving an root element (HTML element of your custom field, issue panel etc.) retrieved in NEW_CONTENT_ADDED listener to main React initializer.

Best!