@atlaskit/jql-editor 5.0.7 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/jql-editor
 
+## 5.1.0
+
+### Minor Changes
+
+- [#129443](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129443)
+  [`cea97763ee228`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cea97763ee228) -
+  Pass down validation error messages and extra IDs for a11y [GRAVITYAI-2553]
+
+## 5.0.8
+
+### Patch Changes
+
+- [#129314](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129314)
+  [`439b876d25b73`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/439b876d25b73) -
+  Improved error logging for editor transactions.
+
 ## 5.0.7
 
 ### Patch Changes

package/dist/cjs/analytics/util.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.useJqlEditorAnalytics = void 0;
 var _jqlEditorCommon = require("@atlaskit/jql-editor-common");
 var useJqlEditorAnalytics = exports.useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
-  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "5.0.7", _jqlEditorCommon.ANALYTICS_CHANNEL);
+  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "5.1.0", _jqlEditorCommon.ANALYTICS_CHANNEL);
 };

package/dist/cjs/state/index.js

@@ -452,10 +452,25 @@ var actions = exports.actions = {
         query = _getState7.query,
         editorState = _getState7.editorState,
         editorView = _getState7.editorView,
-        enableRichInlineNodes = _getState7.enableRichInlineNodes;
+        enableRichInlineNodes = _getState7.enableRichInlineNodes,
+        onDebugUnsafeMessage = _getState7.onDebugUnsafeMessage;
       var oldSelection = editorState.selection;
       var updatedQuery = (0, _documentText.getNodeText)(transaction.doc, 0, transaction.doc.content.size);
-      var updatedEditorState = editorState.apply(transaction);
+      var updatedEditorState;
+      try {
+        updatedEditorState = editorState.apply(transaction);
+      } catch (error) {
+        // We've observed several errors in Splunk from this step but we're unsure how to reproduce it. It seems to be some type of
+        // race condition where the transaction is applied to the editor state but the editor state is being updated in another transaction.
+        if (error instanceof RangeError && editorView) {
+          var message = "Error occurred trying to update editor state with the message: ".concat(error.message);
+          (0, _util.sendDebugMessage)(message, editorView, editorState, onDebugUnsafeMessage, {
+            stack: error.stack,
+            transaction: JSON.stringify(transaction)
+          });
+        }
+        throw error;
+      }
 
       // Update state in our editor view
       if (editorView) {

package/dist/cjs/ui/jql-editor-footer-content/jql-messages/errors/index.js

@@ -61,6 +61,65 @@ var useFormattedErrorMessage = function useFormattedErrorMessage() {
   }
   return null;
 };
+
+/**
+ * This function maps client side validation errors and external messages into a unified format
+ * This is so that the output of this function can then be processed in a unified manner by different renderers
+ *
+ * ------ REMOVE THE FOLLOWING COMMENTS WITH THE FG CLEANUP OF gravityai-2553-fix-jql-debugger-flicker -----
+ * Cloned from useFormattedErrorMessage. Differences are:
+ *  - return type is ExternalMessage[] instead of ReactNode
+ *  - Stripped rendering logic away (i.e. FormatMessages) to make the implementation modular
+ */
+var useErrorMessages = function useErrorMessages() {
+  var _useIntl3 = (0, _state.useIntl)(),
+    _useIntl4 = (0, _slicedToArray2.default)(_useIntl3, 1),
+    formatMessage = _useIntl4[0].formatMessage;
+  var _useJqlError3 = (0, _state.useJqlError)(),
+    _useJqlError4 = (0, _slicedToArray2.default)(_useJqlError3, 1),
+    jqlError = _useJqlError4[0];
+  var _useExternalMessages3 = (0, _state.useExternalMessages)(),
+    _useExternalMessages4 = (0, _slicedToArray2.default)(_useExternalMessages3, 1),
+    externalErrors = _useExternalMessages4[0].errors;
+  var _useStoreActions3 = (0, _state.useStoreActions)(),
+    _useStoreActions4 = (0, _slicedToArray2.default)(_useStoreActions3, 2),
+    externalErrorMessageViewed = _useStoreActions4[1].externalErrorMessageViewed;
+  var editorViewIsInvalid = (0, _useEditorViewIsInvalid.useEditorViewIsInvalid)();
+  (0, _react.useEffect)(function () {
+    // Emit a UI event whenever external errors has changed
+    externalErrorMessageViewed();
+  }, [externalErrorMessageViewed, externalErrors]);
+  if (!editorViewIsInvalid) {
+    return null;
+  }
+
+  /**
+   * Transform a string message to take the form of an ExternalMessage,
+   * so that we can reduce a bunch of conditionals when processing the output of useErrorMessages
+   */
+  var toExternalMessageShape = function toExternalMessageShape(message) {
+    return [{
+      type: 'error',
+      message: message
+    }];
+  };
+
+  // Prioritise client errors over external errors
+  if (jqlError instanceof _jqlAst.JQLSyntaxError) {
+    return toExternalMessageShape("".concat(jqlError.message, " ").concat(formatMessage(_messages2.messages.jqlErrorPosition, {
+      lineNumber: jqlError.line,
+      charPosition: jqlError.charPositionInLine + 1
+    })));
+  }
+  if (externalErrors.length > 0) {
+    return externalErrors;
+  }
+  if (jqlError !== null) {
+    return toExternalMessageShape(formatMessage(_messages.commonMessages.unknownError));
+  }
+  return null;
+};
+
 /**
  * This is a decorator component to include the editorTheme prop to the already passed list of props
  */
@@ -86,10 +145,41 @@ var ErrorMessages = exports.ErrorMessages = function ErrorMessages() {
   var _useScopedId3 = (0, _state.useScopedId)(_constants.JQL_EDITOR_VALIDATION_ID),
     _useScopedId4 = (0, _slicedToArray2.default)(_useScopedId3, 1),
     validationId = _useScopedId4[0];
-  var errorMessage = useFormattedErrorMessage();
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var errorMessages = (0, _platformFeatureFlags.fg)('gravityai-2553-fix-jql-debugger-flicker') ? useErrorMessages() : null;
+  var errorMessage = !(0, _platformFeatureFlags.fg)('gravityai-2553-fix-jql-debugger-flicker') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFormattedErrorMessage() : null;
   var _useCustomErrorCompon = (0, _state.useCustomErrorComponent)(),
     _useCustomErrorCompon2 = (0, _slicedToArray2.default)(_useCustomErrorCompon, 1),
     CustomErrorComponent = _useCustomErrorCompon2[0];
+  if ((0, _platformFeatureFlags.fg)('gravityai-2553-fix-jql-debugger-flicker')) {
+    var _childrenToRender = errorMessages != null ? /*#__PURE__*/_react.default.createElement(_format.MessageContainer, null, /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
+      testId: _constants.JQL_EDITOR_VALIDATION_ID
+    }, (0, _platformFeatureFlags.fg)('jql_editor_a11y') ? /*#__PURE__*/_react.default.createElement("span", {
+      role: "alert",
+      id: validationId
+    }, /*#__PURE__*/_react.default.createElement(_format.FormatMessages, {
+      messages: errorMessages
+    })) : /*#__PURE__*/_react.default.createElement("span", {
+      role: "alert",
+      "aria-describedby": editorId
+    }, /*#__PURE__*/_react.default.createElement(_format.FormatMessages, {
+      messages: errorMessages
+    })))) : null;
+
+    // Only render CustomErrorComponent if there is an errorMessage
+    if (errorMessages != null && CustomErrorComponent) {
+      return /*#__PURE__*/_react.default.createElement(CustomComponentDecoratedWithEditorTheme, {
+        testId: _constants.JQL_EDITOR_VALIDATION_ID,
+        editorId: editorId,
+        validationId: validationId,
+        Component: CustomErrorComponent,
+        errorMessages: (0, _format.extractMessageNodes)(errorMessages)
+      }, _childrenToRender);
+    }
+    return _childrenToRender;
+  }
   var childrenToRender = errorMessage != null ? /*#__PURE__*/_react.default.createElement(_format.MessageContainer, null, /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
     testId: _constants.JQL_EDITOR_VALIDATION_ID
   }, (0, _platformFeatureFlags.fg)('jql_editor_a11y') ? /*#__PURE__*/_react.default.createElement("span", {

package/dist/cjs/ui/jql-editor-footer-content/jql-messages/format/index.js

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MessageContainer = exports.FormatMessages = void 0;
+exports.extractMessageNodes = exports.MessageContainer = exports.FormatMessages = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useEditorTheme = require("../../../../hooks/use-editor-theme");
 var _styled = require("./styled");
 // Max number messages we want to show
@@ -20,6 +21,20 @@ var MessageContainer = exports.MessageContainer = function MessageContainer(_ref
 };
 var FormatMessages = exports.FormatMessages = function FormatMessages(_ref2) {
   var messages = _ref2.messages;
+  if ((0, _platformFeatureFlags.fg)('gravityai-2553-fix-jql-debugger-flicker')) {
+    var messageNodes = extractMessageNodes(messages);
+    if (messageNodes.length === 0) {
+      return null;
+    }
+    if (messageNodes.length === 1) {
+      return /*#__PURE__*/_react.default.createElement("span", null, messageNodes[0]);
+    }
+    return /*#__PURE__*/_react.default.createElement(_styled.MessageList, null, messageNodes.map(function (m, i) {
+      return /*#__PURE__*/_react.default.createElement("li", {
+        key: i
+      }, m);
+    }));
+  }
   if (messages.length === 0) {
     return null;
   }
@@ -31,4 +46,16 @@ var FormatMessages = exports.FormatMessages = function FormatMessages(_ref2) {
       key: i
     }, m.message);
   }));
+};
+
+/**
+ * This function was extracted from FormatMessages, so that the rendering is decoupled from the logic
+ * This is so that the extractMessageNodes can used elsewhere where rendering is delegated to a different renderer
+ *
+ * Simply put, this function only handles getting m.message, and limiting to MAX_MESSAGES
+ */
+var extractMessageNodes = exports.extractMessageNodes = function extractMessageNodes(messages) {
+  return messages.slice(0, MAX_MESSAGES).map(function (m) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, m.message);
+  });
 };

package/dist/es2019/analytics/util.js

@@ -1,4 +1,4 @@
 import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
 export const useJqlEditorAnalytics = analyticsSource => {
-  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.0.7", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.1.0", ANALYTICS_CHANNEL);
 };

package/dist/es2019/state/index.js

@@ -463,11 +463,26 @@ export const actions = {
       query,
       editorState,
       editorView,
-      enableRichInlineNodes
+      enableRichInlineNodes,
+      onDebugUnsafeMessage
     } = getState();
     const oldSelection = editorState.selection;
     const updatedQuery = getNodeText(transaction.doc, 0, transaction.doc.content.size);
-    const updatedEditorState = editorState.apply(transaction);
+    let updatedEditorState;
+    try {
+      updatedEditorState = editorState.apply(transaction);
+    } catch (error) {
+      // We've observed several errors in Splunk from this step but we're unsure how to reproduce it. It seems to be some type of
+      // race condition where the transaction is applied to the editor state but the editor state is being updated in another transaction.
+      if (error instanceof RangeError && editorView) {
+        const message = `Error occurred trying to update editor state with the message: ${error.message}`;
+        sendDebugMessage(message, editorView, editorState, onDebugUnsafeMessage, {
+          stack: error.stack,
+          transaction: JSON.stringify(transaction)
+        });
+      }
+      throw error;
+    }
 
     // Update state in our editor view
     if (editorView) {

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/errors/index.js

@@ -9,7 +9,7 @@ import { commonMessages } from '../../../../common/messages';
 import { useEditorThemeContext } from '../../../../hooks/use-editor-theme';
 import { useEditorViewIsInvalid } from '../../../../hooks/use-editor-view-is-invalid';
 import { useCustomErrorComponent, useExternalMessages, useIntl, useJqlError, useScopedId, useStoreActions } from '../../../../state';
-import { FormatMessages, MessageContainer } from '../format';
+import { extractMessageNodes, FormatMessages, MessageContainer } from '../format';
 import { messages } from './messages';
 const useFormattedErrorMessage = () => {
   const [{
@@ -46,6 +46,61 @@ const useFormattedErrorMessage = () => {
   }
   return null;
 };
+
+/**
+ * This function maps client side validation errors and external messages into a unified format
+ * This is so that the output of this function can then be processed in a unified manner by different renderers
+ *
+ * ------ REMOVE THE FOLLOWING COMMENTS WITH THE FG CLEANUP OF gravityai-2553-fix-jql-debugger-flicker -----
+ * Cloned from useFormattedErrorMessage. Differences are:
+ *  - return type is ExternalMessage[] instead of ReactNode
+ *  - Stripped rendering logic away (i.e. FormatMessages) to make the implementation modular
+ */
+const useErrorMessages = () => {
+  const [{
+    formatMessage
+  }] = useIntl();
+  const [jqlError] = useJqlError();
+  const [{
+    errors: externalErrors
+  }] = useExternalMessages();
+  const [, {
+    externalErrorMessageViewed
+  }] = useStoreActions();
+  const editorViewIsInvalid = useEditorViewIsInvalid();
+  useEffect(() => {
+    // Emit a UI event whenever external errors has changed
+    externalErrorMessageViewed();
+  }, [externalErrorMessageViewed, externalErrors]);
+  if (!editorViewIsInvalid) {
+    return null;
+  }
+
+  /**
+   * Transform a string message to take the form of an ExternalMessage,
+   * so that we can reduce a bunch of conditionals when processing the output of useErrorMessages
+   */
+  const toExternalMessageShape = message => [{
+    type: 'error',
+    message
+  }];
+
+  // Prioritise client errors over external errors
+  if (jqlError instanceof JQLSyntaxError) {
+    return toExternalMessageShape(`${jqlError.message} ${formatMessage(messages.jqlErrorPosition, {
+      lineNumber: jqlError.line,
+      charPosition: jqlError.charPositionInLine + 1
+    })}`);
+  }
+  if (externalErrors.length > 0) {
+    return externalErrors;
+  }
+  if (jqlError !== null) {
+    return toExternalMessageShape(formatMessage(commonMessages.unknownError));
+  }
+  return null;
+};
+
 /**
  * This is a decorator component to include the editorTheme prop to the already passed list of props
  */
@@ -69,8 +124,39 @@ const CustomComponentDecoratedWithEditorTheme = props => {
 export const ErrorMessages = () => {
   const [editorId] = useScopedId(JQL_EDITOR_INPUT_ID);
   const [validationId] = useScopedId(JQL_EDITOR_VALIDATION_ID);
-  const errorMessage = useFormattedErrorMessage();
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const errorMessages = fg('gravityai-2553-fix-jql-debugger-flicker') ? useErrorMessages() : null;
+  const errorMessage = !fg('gravityai-2553-fix-jql-debugger-flicker') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFormattedErrorMessage() : null;
   const [CustomErrorComponent] = useCustomErrorComponent();
+  if (fg('gravityai-2553-fix-jql-debugger-flicker')) {
+    const childrenToRender = errorMessages != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
+      testId: JQL_EDITOR_VALIDATION_ID
+    }, fg('jql_editor_a11y') ? /*#__PURE__*/React.createElement("span", {
+      role: "alert",
+      id: validationId
+    }, /*#__PURE__*/React.createElement(FormatMessages, {
+      messages: errorMessages
+    })) : /*#__PURE__*/React.createElement("span", {
+      role: "alert",
+      "aria-describedby": editorId
+    }, /*#__PURE__*/React.createElement(FormatMessages, {
+      messages: errorMessages
+    })))) : null;
+
+    // Only render CustomErrorComponent if there is an errorMessage
+    if (errorMessages != null && CustomErrorComponent) {
+      return /*#__PURE__*/React.createElement(CustomComponentDecoratedWithEditorTheme, {
+        testId: JQL_EDITOR_VALIDATION_ID,
+        editorId: editorId,
+        validationId: validationId,
+        Component: CustomErrorComponent,
+        errorMessages: extractMessageNodes(errorMessages)
+      }, childrenToRender);
+    }
+    return childrenToRender;
+  }
   const childrenToRender = errorMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
     testId: JQL_EDITOR_VALIDATION_ID
   }, fg('jql_editor_a11y') ? /*#__PURE__*/React.createElement("span", {

package/dist/es2019/ui/jql-editor-footer-content/jql-messages/format/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useEditorThemeContext } from '../../../../hooks/use-editor-theme';
 import { MessageContainer as MessageContainerStyled, MessageList } from './styled';
 
@@ -17,6 +18,18 @@ export const MessageContainer = ({
 export const FormatMessages = ({
   messages
 }) => {
+  if (fg('gravityai-2553-fix-jql-debugger-flicker')) {
+    const messageNodes = extractMessageNodes(messages);
+    if (messageNodes.length === 0) {
+      return null;
+    }
+    if (messageNodes.length === 1) {
+      return /*#__PURE__*/React.createElement("span", null, messageNodes[0]);
+    }
+    return /*#__PURE__*/React.createElement(MessageList, null, messageNodes.map((m, i) => /*#__PURE__*/React.createElement("li", {
+      key: i
+    }, m)));
+  }
   if (messages.length === 0) {
     return null;
   }
@@ -26,4 +39,14 @@ export const FormatMessages = ({
   return /*#__PURE__*/React.createElement(MessageList, null, messages.slice(0, MAX_MESSAGES).map((m, i) => /*#__PURE__*/React.createElement("li", {
     key: i
   }, m.message)));
+};
+
+/**
+ * This function was extracted from FormatMessages, so that the rendering is decoupled from the logic
+ * This is so that the extractMessageNodes can used elsewhere where rendering is delegated to a different renderer
+ *
+ * Simply put, this function only handles getting m.message, and limiting to MAX_MESSAGES
+ */
+export const extractMessageNodes = messages => {
+  return messages.slice(0, MAX_MESSAGES).map(m => /*#__PURE__*/React.createElement(React.Fragment, null, m.message));
 };

package/dist/esm/analytics/util.js

@@ -1,4 +1,4 @@
 import { ANALYTICS_CHANNEL, useJqlPackageAnalytics } from '@atlaskit/jql-editor-common';
 export var useJqlEditorAnalytics = function useJqlEditorAnalytics(analyticsSource) {
-  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.0.7", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "5.1.0", ANALYTICS_CHANNEL);
 };

package/dist/esm/state/index.js

@@ -445,10 +445,25 @@ export var actions = {
         query = _getState7.query,
         editorState = _getState7.editorState,
         editorView = _getState7.editorView,
-        enableRichInlineNodes = _getState7.enableRichInlineNodes;
+        enableRichInlineNodes = _getState7.enableRichInlineNodes,
+        onDebugUnsafeMessage = _getState7.onDebugUnsafeMessage;
       var oldSelection = editorState.selection;
       var updatedQuery = getNodeText(transaction.doc, 0, transaction.doc.content.size);
-      var updatedEditorState = editorState.apply(transaction);
+      var updatedEditorState;
+      try {
+        updatedEditorState = editorState.apply(transaction);
+      } catch (error) {
+        // We've observed several errors in Splunk from this step but we're unsure how to reproduce it. It seems to be some type of
+        // race condition where the transaction is applied to the editor state but the editor state is being updated in another transaction.
+        if (error instanceof RangeError && editorView) {
+          var message = "Error occurred trying to update editor state with the message: ".concat(error.message);
+          sendDebugMessage(message, editorView, editorState, onDebugUnsafeMessage, {
+            stack: error.stack,
+            transaction: JSON.stringify(transaction)
+          });
+        }
+        throw error;
+      }
 
       // Update state in our editor view
       if (editorView) {

package/dist/esm/ui/jql-editor-footer-content/jql-messages/errors/index.js

@@ -12,7 +12,7 @@ import { commonMessages } from '../../../../common/messages';
 import { useEditorThemeContext } from '../../../../hooks/use-editor-theme';
 import { useEditorViewIsInvalid } from '../../../../hooks/use-editor-view-is-invalid';
 import { useCustomErrorComponent, useExternalMessages, useIntl, useJqlError, useScopedId, useStoreActions } from '../../../../state';
-import { FormatMessages, MessageContainer } from '../format';
+import { extractMessageNodes, FormatMessages, MessageContainer } from '../format';
 import { messages } from './messages';
 var useFormattedErrorMessage = function useFormattedErrorMessage() {
   var _useIntl = useIntl(),
@@ -51,6 +51,65 @@ var useFormattedErrorMessage = function useFormattedErrorMessage() {
   }
   return null;
 };
+
+/**
+ * This function maps client side validation errors and external messages into a unified format
+ * This is so that the output of this function can then be processed in a unified manner by different renderers
+ *
+ * ------ REMOVE THE FOLLOWING COMMENTS WITH THE FG CLEANUP OF gravityai-2553-fix-jql-debugger-flicker -----
+ * Cloned from useFormattedErrorMessage. Differences are:
+ *  - return type is ExternalMessage[] instead of ReactNode
+ *  - Stripped rendering logic away (i.e. FormatMessages) to make the implementation modular
+ */
+var useErrorMessages = function useErrorMessages() {
+  var _useIntl3 = useIntl(),
+    _useIntl4 = _slicedToArray(_useIntl3, 1),
+    formatMessage = _useIntl4[0].formatMessage;
+  var _useJqlError3 = useJqlError(),
+    _useJqlError4 = _slicedToArray(_useJqlError3, 1),
+    jqlError = _useJqlError4[0];
+  var _useExternalMessages3 = useExternalMessages(),
+    _useExternalMessages4 = _slicedToArray(_useExternalMessages3, 1),
+    externalErrors = _useExternalMessages4[0].errors;
+  var _useStoreActions3 = useStoreActions(),
+    _useStoreActions4 = _slicedToArray(_useStoreActions3, 2),
+    externalErrorMessageViewed = _useStoreActions4[1].externalErrorMessageViewed;
+  var editorViewIsInvalid = useEditorViewIsInvalid();
+  useEffect(function () {
+    // Emit a UI event whenever external errors has changed
+    externalErrorMessageViewed();
+  }, [externalErrorMessageViewed, externalErrors]);
+  if (!editorViewIsInvalid) {
+    return null;
+  }
+
+  /**
+   * Transform a string message to take the form of an ExternalMessage,
+   * so that we can reduce a bunch of conditionals when processing the output of useErrorMessages
+   */
+  var toExternalMessageShape = function toExternalMessageShape(message) {
+    return [{
+      type: 'error',
+      message: message
+    }];
+  };
+
+  // Prioritise client errors over external errors
+  if (jqlError instanceof JQLSyntaxError) {
+    return toExternalMessageShape("".concat(jqlError.message, " ").concat(formatMessage(messages.jqlErrorPosition, {
+      lineNumber: jqlError.line,
+      charPosition: jqlError.charPositionInLine + 1
+    })));
+  }
+  if (externalErrors.length > 0) {
+    return externalErrors;
+  }
+  if (jqlError !== null) {
+    return toExternalMessageShape(formatMessage(commonMessages.unknownError));
+  }
+  return null;
+};
+
 /**
  * This is a decorator component to include the editorTheme prop to the already passed list of props
  */
@@ -76,10 +135,41 @@ export var ErrorMessages = function ErrorMessages() {
   var _useScopedId3 = useScopedId(JQL_EDITOR_VALIDATION_ID),
     _useScopedId4 = _slicedToArray(_useScopedId3, 1),
     validationId = _useScopedId4[0];
-  var errorMessage = useFormattedErrorMessage();
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var errorMessages = fg('gravityai-2553-fix-jql-debugger-flicker') ? useErrorMessages() : null;
+  var errorMessage = !fg('gravityai-2553-fix-jql-debugger-flicker') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFormattedErrorMessage() : null;
   var _useCustomErrorCompon = useCustomErrorComponent(),
     _useCustomErrorCompon2 = _slicedToArray(_useCustomErrorCompon, 1),
     CustomErrorComponent = _useCustomErrorCompon2[0];
+  if (fg('gravityai-2553-fix-jql-debugger-flicker')) {
+    var _childrenToRender = errorMessages != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
+      testId: JQL_EDITOR_VALIDATION_ID
+    }, fg('jql_editor_a11y') ? /*#__PURE__*/React.createElement("span", {
+      role: "alert",
+      id: validationId
+    }, /*#__PURE__*/React.createElement(FormatMessages, {
+      messages: errorMessages
+    })) : /*#__PURE__*/React.createElement("span", {
+      role: "alert",
+      "aria-describedby": editorId
+    }, /*#__PURE__*/React.createElement(FormatMessages, {
+      messages: errorMessages
+    })))) : null;
+
+    // Only render CustomErrorComponent if there is an errorMessage
+    if (errorMessages != null && CustomErrorComponent) {
+      return /*#__PURE__*/React.createElement(CustomComponentDecoratedWithEditorTheme, {
+        testId: JQL_EDITOR_VALIDATION_ID,
+        editorId: editorId,
+        validationId: validationId,
+        Component: CustomErrorComponent,
+        errorMessages: extractMessageNodes(errorMessages)
+      }, _childrenToRender);
+    }
+    return _childrenToRender;
+  }
   var childrenToRender = errorMessage != null ? /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(ErrorMessage, {
     testId: JQL_EDITOR_VALIDATION_ID
   }, fg('jql_editor_a11y') ? /*#__PURE__*/React.createElement("span", {

package/dist/esm/ui/jql-editor-footer-content/jql-messages/format/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useEditorThemeContext } from '../../../../hooks/use-editor-theme';
 import { MessageContainer as MessageContainerStyled, MessageList } from './styled';
 
@@ -14,6 +15,20 @@ export var MessageContainer = function MessageContainer(_ref) {
 };
 export var FormatMessages = function FormatMessages(_ref2) {
   var messages = _ref2.messages;
+  if (fg('gravityai-2553-fix-jql-debugger-flicker')) {
+    var messageNodes = extractMessageNodes(messages);
+    if (messageNodes.length === 0) {
+      return null;
+    }
+    if (messageNodes.length === 1) {
+      return /*#__PURE__*/React.createElement("span", null, messageNodes[0]);
+    }
+    return /*#__PURE__*/React.createElement(MessageList, null, messageNodes.map(function (m, i) {
+      return /*#__PURE__*/React.createElement("li", {
+        key: i
+      }, m);
+    }));
+  }
   if (messages.length === 0) {
     return null;
   }
@@ -25,4 +40,16 @@ export var FormatMessages = function FormatMessages(_ref2) {
       key: i
     }, m.message);
   }));
+};
+
+/**
+ * This function was extracted from FormatMessages, so that the rendering is decoupled from the logic
+ * This is so that the extractMessageNodes can used elsewhere where rendering is delegated to a different renderer
+ *
+ * Simply put, this function only handles getting m.message, and limiting to MAX_MESSAGES
+ */
+export var extractMessageNodes = function extractMessageNodes(messages) {
+  return messages.slice(0, MAX_MESSAGES).map(function (m) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, m.message);
+  });
 };

package/dist/types/state/types.d.ts

@@ -69,7 +69,12 @@ export type CustomErrorComponent = React.ComponentType<PropsWithChildren<{
     testId: string;
     editorTheme: EditorTheme;
     editorId: string;
+    errorMessages?: React.ReactElement[];
+    validationId?: string;
 }>>;
+export type CustomErrorMessageProps = Omit<React.ComponentProps<CustomErrorComponent>, 'editorTheme'> & {
+    Component: CustomErrorComponent;
+};
 export type CustomComponents = {
     ErrorMessage?: CustomErrorComponent;
 };

package/dist/types/ui/jql-editor-footer-content/jql-messages/format/index.d.ts

@@ -6,3 +6,10 @@ export declare const MessageContainer: ({ children }: {
 export declare const FormatMessages: ({ messages }: {
     messages: ExternalMessage[];
 }) => React.JSX.Element | null;
+/**
+ * This function was extracted from FormatMessages, so that the rendering is decoupled from the logic
+ * This is so that the extractMessageNodes can used elsewhere where rendering is delegated to a different renderer
+ *
+ * Simply put, this function only handles getting m.message, and limiting to MAX_MESSAGES
+ */
+export declare const extractMessageNodes: (messages: ExternalMessage[]) => React.ReactElement[];

package/dist/types-ts4.5/state/types.d.ts

@@ -69,7 +69,12 @@ export type CustomErrorComponent = React.ComponentType<PropsWithChildren<{
     testId: string;
     editorTheme: EditorTheme;
     editorId: string;
+    errorMessages?: React.ReactElement[];
+    validationId?: string;
 }>>;
+export type CustomErrorMessageProps = Omit<React.ComponentProps<CustomErrorComponent>, 'editorTheme'> & {
+    Component: CustomErrorComponent;
+};
 export type CustomComponents = {
     ErrorMessage?: CustomErrorComponent;
 };

package/dist/types-ts4.5/ui/jql-editor-footer-content/jql-messages/format/index.d.ts

@@ -6,3 +6,10 @@ export declare const MessageContainer: ({ children }: {
 export declare const FormatMessages: ({ messages }: {
     messages: ExternalMessage[];
 }) => React.JSX.Element | null;
+/**
+ * This function was extracted from FormatMessages, so that the rendering is decoupled from the logic
+ * This is so that the extractMessageNodes can used elsewhere where rendering is delegated to a different renderer
+ *
+ * Simply put, this function only handles getting m.message, and limiting to MAX_MESSAGES
+ */
+export declare const extractMessageNodes: (messages: ExternalMessage[]) => React.ReactElement[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/jql-editor",
-	"version": "5.0.7",
+	"version": "5.1.0",
 	"description": "This package allows consumers to render an advanced JQL editor component to enable autocomplete-assisted authoring and validation of JQL queries.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -50,10 +50,10 @@
 		"@atlaskit/jql-parser": "^2.0.0",
 		"@atlaskit/legacy-custom-icons": "^0.22.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.4.0",
+		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -136,6 +136,9 @@
 		},
 		"jql_editor_a11y": {
 			"type": "boolean"
+		},
+		"gravityai-2553-fix-jql-debugger-flicker": {
+			"type": "boolean"
 		}
 	}
 }