Atlaskit component usage in JIRA Server custom addon

Is it possible to use atlaskit react components into a Server ? I would like to use them to create a dashboard gadget;

Sample of the dynamic-table that I would like to use:

https://aui-cdn.atlassian.com/atlaskit/registry/dynamic-table/latest/index.html

Any addon sample or experiences about this?

Hi! You can actually do this if you really want, but keep in mind that it comes with an overhead. In short, it means that you will have to create a bundle.js which includes ReactJS, AtlasKit and other dependencies and add this bundle to the atlassian-plugin.xml as a resource (make sure that it is available in the classpath).

The reason you will need to take care of dependencies yourself is because Jira server does not automatically include ReactJS.

The clear benefit is that you will be able to not only use AtlasKit, but also stay away from Velocity templates. In combination with the REST plugin module, you would be able to create an add-on without having to use server-side rendering components such as ContextProviders or WebActions and Velocity templates.

2 Likes

Hi there,

Thanks for your answer, but, is there any example for a Jira server add-on? Including project sctructure, build steps, etc

Thanks in advance

There is a blog post series that covers using webpack and ReactJS in P2 development. It covers all the pieces you will need to use AtlasKit in a server product.

5 Likes

Check https://github.com/mailru/jira-plugins-groovy , it may be what you’re looking for.

Recently I found a great example that uses ReacjJS to share front-end resources across a Server and Cloud app.

https://bitbucket.org/arijea/simultaneous/src/master/

@remie,

I know that it’s been a year since your last response, but I would like to thank your answer. I was able to implement my solution without having to deal with velocity!

Unfortunately it was a really specific need from an company and I can’t share the results.

Cheers

1 Like

Hello,

I have implemented same example with react and Jira server its working well, but I am stucked with react routing , I am using react dom routing but its not working I can rendered react component based on if condition but react routing not working , If you have any idea @italo.qualisoni please share with me

1 Like

@PoonamGokani personally I wouldn’t use React Router together with Jira Server, unless you have an app which is completely separate from the Jira Server UI.

What I do is use a single velocity template for all app entry points:

$webResourceManager.requireResourcesForContext("your-context")

<div id="$params.get("moduleId")">
    <span class="aui-icon aui-icon-wait">Loading...</span>
</div>

Then I combine this with a generic context provider:

    private Map<String, String> params;

    @Override
    public void init(Map<String, String> params) throws PluginParseException
    {
        this.params = params;
    }

    @Override
    public Map<String, Object> getContextMap(Map<String, Object> context)
    {
        context.put("params", params);
        return context;
    }

And I add this to the atlassian-plugin.xml like this:

    <web-panel key="my-panel" name="My Panel" location="webpanels.admin.summary.right-panels">
        <label key="My Panel" />
        <resource name="view" type="velocity" location="${resources.dir}/static.vm" />
        <context-provider class="com.example.ContextProvider">
            <param name="moduleId" value="MyReactModule" />
        </context-provider>
    </web-panel>

Now, in my front-end project, I have the following entry point index.ts:

const modules: Array<EntryPoint<Props>> = container.getAll(Injectables.EntryPoint);

// Register application entrypoints for rendering
modules.forEach((entrypoint) => {
  const selector = entrypoint.selector || `#${entrypoint.name}`;
  document.arrive(selector, (elm: Element) => {
      ReactDOM.render(entrypoint.getElement(props), elm);
  });
});

As you can see, I use Typescript with InversifyJS. The React Modules (or in this example called EntryPoints) are defined in inversify.config.tsx:

import { Panel, PanelProps } from './modules/WebPanel/index';

container.bind<EntryPoint<PanelProps>>(Injectables.EntryPoint).toConstantValue({
  name: 'MyReactModule',
  getElement: (props: PanelProps) => <Panel {...props} />,
});

So how does this work? The velocity template will tell the web resource manager to include my front-end application and it will create a container DIV element with a specific module ID. On page load, the front-end application will register a MutationObserver to the document which will wait for specific elements to show up on the page (in this example, an element with ID ‘MyReactModule’). When the element is found, the React module/micro-application is rendered.

This will allow you with a very modular approach to creating a React/AtlasKit based front-end for Jira Server.

3 Likes