Atlaskit component usage in JIRA Server custom addon

Jira Development Jira Server
, , , ,
9

@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.

9 Likes