Add JQL validation to a text field

I’m building my own report page, and I would like to place a text field where the user could add some JQL expressions to refine search and show the data in my report.
I’m using Custom UI with Atlassian Design Kit

You may take a look at this package:

Thanks @m.herrmann , I will have a look at it

I had a look at it and works great, but if i want to use it with Server.
How do i get autocomplete information?
Is there a similar endpoint for server: /rest/api/2/jql/autocompletedata

We use it in the server environment and both getInitialData and getSuggestions have a URL Parameter. We just call the given REST API and return the result.
In case of getInitialData, we return it like that:

return {
	jqlFields: response.visibleFieldNames,
	jqlFunctions: response.visibleFunctionNames,
};

Thanks @n.herrmann.
I found out that Jira 8.x doesn’t have that endpoint. I will have to wait for Jira update

@MarceloMella
That is strange, as it’s working for us in Jira 8. The Endpoint is, which uses GET instead of POST:
https://docs.atlassian.com/software/jira/docs/api/REST/8.0.0/#api/2/jql/autocompletedata
You just need to map the response as descriped above

Yes @m.herrmann , POST method is available in Cloud but not Server.
Now i’m getting the correct response, thank you

Now i’m retrieving the correct information.
My code is:

const getInitialData = async (url) => {
  // console.log("URL1: ", url);
  const response = await fetch(url, {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
    // body: JSON.stringify({ includeCollapsedFields: true })
  });
  const data = response.json();

  return {
    jqlFields: data.visibleFieldNames,
    jqlFunctions: data.visibleFunctionNames,
  };
};

const getSuggestions = async (url) => {
  console.log("URL2: ", url);
  const response = await fetch(url);
  return response.json();
};

const MyJQLEditor = () => {
  const autocompleteProvider = useAutocompleteProvider('my-app', getInitialData, getSuggestions);

  const onSearch = useCallback((jql) => {
    // Do some action on search    
  }, []);

  return (
    <JQLEditor
      analyticsSource={'my-app'}
      query={''}
      onSearch={onSearch}
      autocompleteProvider={autocompleteProvider}
      locale={"es"}
    />
  );
};

But URL2 is not being printed and my text field is greyed.
I’m getting this error in console log:

LoaderError: Failed to load module 
    at batch.js?locale=en-US:6:579987
    at Qi (batch.js?locale=en-US:6:340891)
    at ea (batch.js?locale=en-US:6:341660)
    at Object.useState (batch.js?locale=en-US:6:345713)
    at t.useState (batch.js?locale=en-US:6:435714)

Now that you mentioned it, I remember a lot of debugging which I tried to suppress…
Can you check the following methods in your context (in case you are working in an iframe)

  • “abc”.startsWith
  • JSON.stringify

Both should use the native variants instead of a custom variant. JSON.stringify may be overwritten in a gadget iframe, while startsWith is overwritten in case Insight is installed (for most of the DC licenses I think).

Bug Ticket with possible workaround for startsWith:
https://jira.atlassian.com/browse/JSDSERVER-12026

Both methods seem to work as expected
image

To give more context.
This is my velocity file:

<html>
    <head>
        $webResourceManager.requireResource("com.atlassian.auiplugin:aui-spinner")
        $webResourceManager.requireResourcesForContext("mapa-calor")
        <title>$i18n.getText("mendelfields.heat-map.label")</title>
        <meta name="decorator" content="atl.general"/>
        <meta name="MapaCalorContext" content="$!{MapaCalorContext}"/>

    </head>
    <body>
        <div id="mendelfieldserver-mapacalor">
            <aui-spinner size="medium"></aui-spinner>
        </div>
    </body>
</html>

And i’m replacing the

with a REACT application that is importing JQL Editor.
When i check the JQL Editor component by itself outside Jira, it works.

That will be hard to find. You may check the startsWith method at the time when you init the jql editor using a debugger.
What I did to find the issue with the startsWith method was to use a debugger to compare the variant in the jira system with the outside variant.
The alternative would be to put your UI into an iframe, which will make your addon more resistant to what other plugins may inject into Javascript/CSS. But this approach may take some time as you need to solve other issues (include needed Jira Resources, AJS Context / Methods may relay on some meta tags)

Any suggestion in how to debug the startsWith?

Try to move my REACT App would be complicated, cause i pass lot of information in the Context.

if you put a breakpoint into the following method, you get into the point where I found my issue:
Parser.prototype.bumpIf
(Chrome Developer Tools, Tab “Sources”, Search Code (ctrl + shift + f) “Parser.prototype.bumpIf”. From there you can check the CallStack
In my case “Parser.prototype.parseTag” worked differently in debugger on both cases (in jira and without)