Automation for Jira: Using custom conditions in the If / else block

We developed a new Condition for Automation for Jira for a client. The condition works nicely on its own.
It checks the current Jira instances base URL against a list of regex patterns and only continues if one or more of the patterns match.

Things start to break when inserting the condition into an if / else block. We got the following error in the Dev tools:

Uncaught TypeError: r.getRenderer(...).renderDetailedInline is not a function
    at t.value (batch.js:380)
    at ce (batch.js:223)
    at qg (batch.js:222)
    at hi (batch.js:229)
    at Qg (batch.js:269)
    at Rg (batch.js:270)
    at Sc (batch.js:283)
    at Z (batch.js:281)
    at ah (batch.js:284)
    at xf (batch.js:165)

Therefore we implemented the renderDetailedInline() method in our Component. As I understand it, one has to return a rendered view of your component like so:

renderDetailedInline: (config) => {
   return <EnvironmentInlineConditionConfig config={config}/>;
}

This works fine at first, but now we get a different error:

react-dom.min.js:157 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

This error occurs when interacting with the component in the if/else block. It now displays, but when we add new regular expressions it starts to break.

The 3 causes listed here are not the source of the error as far as I can tell. The Components I am using don’t hold any state, which is why I am very confused as to why I am getting this error. Previously my component used to have a state, but I rebuilt it after getting this error message.

What would really help is if somebody were to provide a working example of a condition, which does not break the if/else condition.
What could also really help is if somebody were to explain, what the renderDetailedInline-function is supposed to provide and why we do not get a dom element provided, like in the renderDetailed-function.

2 Likes

Hi @PaulErpenstein!
We are currently facing the same problem you had last year. Did you find a fix to this?

I noticed that rendering basic HTML does not raise the Invalid hook call error but for evident reasons, we wanted to render the whole condition.

Any insight is greatly appreciated.

Kind regards,

To whoever faces the same issue, we’ve managed to find a solution.

The source of our problem was that the react and react-dom packaged with our Webpack came into conflict with the one used within the CodeBarrel solution.
It works fine in all other renders because we used our own packages react-dom to render the components.

renderDetailed: (config, context, containerEl) => {
  ReactDOM.render(<ConditionConfig config={config}/>, containerEl);
}

In the render[...]Inline methods (that aren’t documented in any way), you don’t receive anything other than a config object, albeit a bit changed (more details below).
The approach we used is as follows:

renderDetailedInline: (config) => <ConditionConfig config={config}/>

And unless you do the following, this will fail as per the OP.

To fix the issue

  1. In your Webpack configuration, you need to mark react and react-dom as externals. This means they won’t be part of your package and are considered “provided”.
externals: {
	'react': 'window.React', // Case matters here
	'react-dom' : 'window.ReactDOM' // Case matters here
},
  1. Specifically for the renderDetailedInline, you need to use another approach to update the configuration values.
    Normally the only documentation we have states you need to use window.CodeBarrel.Automation.updateComponentValue(config, newConfigValues); but this function does nothing in this case.
    When rendering inline, the config object has an additional method called onValueUpdated. After a lot of playing around, we managed to find out that that is the method to call with the new configuration values as its only parameters. So instead you should call config.onValueUpdated(newConfigValues);

And voilĂ , you can now create conditions that work in the if/else blocks.

4 Likes