@atlaskit/jql-editor 4.0.0

package/dist/es2019/state/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/state/util.js

@@ -0,0 +1,144 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import escapeRegExp from 'lodash/escapeRegExp';
+import uuidv5 from 'uuid/v5';
+import { AbstractJastVisitor } from '@atlaskit/jql-ast';
+import getDocumentPosition from '../plugins/common/get-document-position';
+import { getNodeText } from '../utils/document-text';
+// Unique namespace to identify JQL autocomplete options!
+const UUID_NAMESPACE = '9a90299c-aa58-494b-b6a1-e93206e3fdd6';
+export const getAutocompleteOptionId = value => uuidv5(value, UUID_NAMESPACE);
+export const tokensToAutocompleteOptions = tokens => {
+  let tokensToDisplay = tokens.values;
+  if (tokens.matchedText !== '') {
+    // Candidates that start with last token text but are not an exact match (case insensitive)
+    const regex = new RegExp(`^${escapeRegExp(tokens.matchedText)}[^$]`, 'i');
+    tokensToDisplay = tokens.values.filter(token => regex.test(token));
+  }
+  return tokensToDisplay.map(token => {
+    var _tokens$context;
+    return {
+      id: getAutocompleteOptionId(token),
+      name: token,
+      value: token,
+      replacePosition: tokens.replacePosition,
+      matchedText: tokens.matchedText,
+      context: (_tokens$context = tokens.context) !== null && _tokens$context !== void 0 ? _tokens$context : null,
+      type: 'keyword'
+    };
+  });
+};
+export const getReplacePositionStart = ({
+  rules,
+  tokens
+}) => {
+  // Matching tokens should be prioritized over rules when calculating autocomplete dropdown position
+  if (tokens.values.length) {
+    return tokens.replacePosition[0];
+  }
+
+  // Same precedence as `useAutocompleteOptions`, this may change in future if we don't limit suggestions to one rule
+  const rulePrecedence = ['value', 'function', 'list', 'operator', 'field'];
+  for (const rule of rulePrecedence) {
+    if (Object.prototype.hasOwnProperty.call(rules, rule)) {
+      return rules[rule].replacePosition[0];
+    }
+  }
+  return tokens.replacePosition[0];
+};
+export const getAutocompletePosition = (editorView, replacePositionStart) => {
+  const {
+    doc,
+    selection
+  } = editorView.state;
+  const documentPosition = getDocumentPosition(doc, replacePositionStart);
+  const {
+    left
+  } = editorView.coordsAtPos(documentPosition);
+  // Vertically position autocomplete relative to selection end
+  const {
+    bottom
+  } = editorView.coordsAtPos(selection.to);
+  return {
+    top: bottom,
+    left
+  };
+};
+const getDebugSelectionAttributes = () => {
+  var _selection$anchorNode, _selection$anchorNode2, _selection$focusNode, _selection$focusNode2;
+  const selection = document.getSelection();
+  if (selection === null || selection.type === 'None') {
+    return {};
+  }
+  return {
+    anchorOffset: selection.anchorOffset,
+    anchorNodeText: (_selection$anchorNode = selection.anchorNode) === null || _selection$anchorNode === void 0 ? void 0 : _selection$anchorNode.textContent,
+    anchorNodeName: (_selection$anchorNode2 = selection.anchorNode) === null || _selection$anchorNode2 === void 0 ? void 0 : _selection$anchorNode2.nodeName,
+    focusOffset: selection.focusOffset,
+    focusNodeText: (_selection$focusNode = selection.focusNode) === null || _selection$focusNode === void 0 ? void 0 : _selection$focusNode.textContent,
+    focusNodeName: (_selection$focusNode2 = selection.focusNode) === null || _selection$focusNode2 === void 0 ? void 0 : _selection$focusNode2.nodeName
+  };
+};
+export const sendDebugMessage = (message, editorView, editorState, onDebugUnsafeMessage, eventAttributes) => {
+  if (!onDebugUnsafeMessage) {
+    return;
+  }
+  try {
+    const editorViewStateText = getNodeText(editorView.state.doc, 0, editorView.state.doc.content.size);
+    const editorViewStateJson = JSON.stringify(editorView.state.toJSON());
+    const editorStateJson = JSON.stringify(editorState.toJSON());
+    const editorViewHtml = editorView.dom.innerHTML;
+    onDebugUnsafeMessage(message, {
+      editorStateJson,
+      editorViewStateText,
+      editorViewStateJson,
+      editorViewHtml,
+      ...getDebugSelectionAttributes(),
+      ...eventAttributes
+    });
+  } catch (ignored) {
+    // Do nothing
+  }
+};
+export const getFieldNodes = ast => {
+  if (!ast.query) {
+    return new Set();
+  }
+  const visitor = new FindFieldsVisitor();
+  ast.query.accept(visitor);
+  return visitor.fields;
+};
+class FindFieldsVisitor extends AbstractJastVisitor {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "fields", new Set());
+    _defineProperty(this, "visitQuery", query => {
+      if (query.where !== undefined) {
+        query.where.accept(this);
+      }
+      if (query.orderBy !== undefined) {
+        query.orderBy.accept(this);
+      }
+    });
+    _defineProperty(this, "visitOrderBy", orderBy => {
+      orderBy.fields.map(orderByField => orderByField.accept(this));
+    });
+    _defineProperty(this, "visitOrderByField", orderByField => {
+      orderByField.field.accept(this);
+    });
+    _defineProperty(this, "visitCompoundClause", compoundClause => {
+      compoundClause.clauses.map(clause => clause.accept(this));
+    });
+    _defineProperty(this, "visitTerminalClause", terminalClause => {
+      terminalClause.field.accept(this);
+    });
+    _defineProperty(this, "visitNotClause", notClause => {
+      notClause.clause.accept(this);
+    });
+    _defineProperty(this, "visitField", field => {
+      this.fields.add(field.value.toLowerCase());
+    });
+  }
+  defaultResult() {
+    return;
+  }
+}

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/error-boundary/index.js

@@ -0,0 +1,55 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { JQLEditorReadOnly } from '../jql-editor-layout';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+class ErrorBoundary extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      error: null
+    });
+  }
+  componentDidCatch(error) {
+    this.setState({
+      error
+    });
+    this.props.onError && this.props.onError(error);
+  }
+  render() {
+    const {
+      children,
+      render: renderFallback
+    } = this.props;
+    const {
+      error
+    } = this.state;
+    if (error === null) {
+      return children;
+    }
+    return renderFallback({
+      error
+    });
+  }
+}
+export const withErrorBoundary = WrappedComponent => {
+  return props => {
+    const {
+      query,
+      onRenderError,
+      onSearch,
+      isCompact
+    } = props;
+    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      onError: onRenderError,
+      render: () => /*#__PURE__*/React.createElement(JQLEditorReadOnly, {
+        query: query,
+        isSearch: !!onSearch,
+        isCompact: isCompact
+      })
+    }, /*#__PURE__*/React.createElement(WrappedComponent, props));
+  };
+};

package/dist/es2019/ui/index.js

@@ -0,0 +1,4 @@
+import { withErrorBoundary } from './error-boundary';
+import { withIntlProvider } from './intl-provider';
+import JQLEditorUI from './jql-editor';
+export default withIntlProvider(withErrorBoundary(JQLEditorUI));

package/dist/es2019/ui/intl-provider/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl-next';
+export const withIntlProvider = WrappedComponent => {
+  return props => {
+    const {
+      locale,
+      ...rest
+    } = props;
+    if (locale) {
+      return /*#__PURE__*/React.createElement(IntlProvider, {
+        locale: locale
+      }, /*#__PURE__*/React.createElement(WrappedComponent, rest));
+    }
+    return /*#__PURE__*/React.createElement(WrappedComponent, rest);
+  };
+};

package/dist/es2019/ui/jql-editor/index.js

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { di } from 'react-magnetic-di';
+import { useJqlEditorAnalytics } from '../../analytics';
+import { EditorThemeContext, useEditorTheme } from '../../hooks/use-editor-theme';
+import { EditorStateContainer } from '../../state';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { JQLEditorPortalRenderer } from '../jql-editor-portal-provider';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import JQLEditorView from '../jql-editor-view';
+const JQLEditorInner = ({
+  analyticsSource,
+  query,
+  messages = [],
+  inputRef,
+  isSearching,
+  onEditorMounted,
+  onDebugUnsafeMessage,
+  onHydrate,
+  onUpdate,
+  onSearch,
+  autocompleteProvider,
+  intl,
+  enableRichInlineNodes = false,
+  isCompact,
+  onSyntaxHelp,
+  onFocus
+}) => {
+  const editorTheme = useEditorTheme({
+    isSearch: !!onSearch,
+    isCompact
+  });
+  const {
+    createAndFireAnalyticsEvent
+  } = useJqlEditorAnalytics(analyticsSource);
+
+  // Create and update a mutable ref for our intl object so it can be used by Prosemirror plugins.
+  const intlRef = useRef(intl);
+  useEffect(() => {
+    intlRef.current = intl;
+  }, [intl]);
+  return /*#__PURE__*/React.createElement(EditorStateContainer, {
+    query: query,
+    externalMessages: messages,
+    isSearching: isSearching,
+    intlRef: intlRef,
+    onEditorMounted: onEditorMounted,
+    onDebugUnsafeMessage: onDebugUnsafeMessage,
+    onHydrate: onHydrate,
+    onUpdate: onUpdate,
+    onSearch: onSearch,
+    createAndFireAnalyticsEvent: createAndFireAnalyticsEvent,
+    autocompleteProvider: autocompleteProvider,
+    enableRichInlineNodes: enableRichInlineNodes,
+    onSyntaxHelp: onSyntaxHelp,
+    onFocus: onFocus
+  }, /*#__PURE__*/React.createElement(EditorThemeContext.Provider, {
+    value: editorTheme
+  }, /*#__PURE__*/React.createElement(JQLEditorPortalRenderer, null, /*#__PURE__*/React.createElement(JQLEditorView, {
+    inputRef: inputRef
+  }))));
+};
+export default injectIntl(JQLEditorInner);

package/dist/es2019/ui/jql-editor/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/jql-editor-controls-content/base-expand-toggle/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import Button from '@atlaskit/button';
+import MediaServicesActualSizeIcon from '@atlaskit/icon/glyph/media-services/actual-size';
+import MediaServicesFitToPageIcon from '@atlaskit/icon/glyph/media-services/fit-to-page';
+import { N50, N500 } from '@atlaskit/theme/colors';
+import { ExpandToggleContainer } from './styled';
+
+// Atlaskit doesn't provide a circle variation of the expand/collapse icons so we have to implement our own
+const ExpandCircleIcon = ({
+  isDisabled
+}) => /*#__PURE__*/React.createElement(MediaServicesActualSizeIcon, {
+  label: '',
+  size: 'small',
+  primaryColor: isDisabled ? `var(--ds-icon-disabled, ${N50})` : `var(--ds-icon, ${N500})`
+});
+const CollapseCircleIcon = ({
+  isDisabled
+}) => /*#__PURE__*/React.createElement(MediaServicesFitToPageIcon, {
+  label: '',
+  size: 'small',
+  primaryColor: isDisabled ? `var(--ds-icon-disabled, ${N50})` : `var(--ds-icon, ${N500})`
+});
+export const BaseExpandToggle = ({
+  expanded,
+  editorId,
+  isDisabled,
+  label,
+  onClick
+}) => {
+  let Icon;
+  if (expanded) {
+    Icon = CollapseCircleIcon;
+  } else {
+    Icon = ExpandCircleIcon;
+  }
+  return /*#__PURE__*/React.createElement(ExpandToggleContainer, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: 'subtle',
+    "aria-expanded": expanded,
+    "aria-controls": editorId,
+    "aria-label": label,
+    isDisabled: isDisabled,
+    spacing: 'none',
+    onClick: onClick,
+    iconBefore: /*#__PURE__*/React.createElement(Icon, {
+      isDisabled: isDisabled
+    })
+  }));
+};

package/dist/es2019/ui/jql-editor-controls-content/base-expand-toggle/styled.js

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+import { N40, N50 } from '@atlaskit/theme/colors';
+export const ExpandToggleContainer = styled.div`
+  /* Override background styles for our button to match designs */
+
+  > button {
+    border-radius: 100%;
+    /* Fill the remaining vertical space for a single line in our editor and space between buttons */
+    margin: ${"var(--ds-space-050, 4px)"} 0;
+
+    &:hover {
+      background: ${`var(--ds-background-neutral-subtle-hovered, ${N40})`};
+    }
+
+    &:active,
+    &[data-firefox-is-active='true'] {
+      background: ${`var(--ds-background-neutral-subtle-pressed, ${N50})`};
+    }
+  }
+`;

package/dist/es2019/ui/jql-editor-controls-content/base-search/index.js

@@ -0,0 +1,35 @@
+import React, { useCallback } from 'react';
+import { LoadingButton } from '@atlaskit/button';
+import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+const style = {
+  // Fixes an issue where loading button makes the editor flicker with a scrollbar
+  overflow: 'hidden'
+};
+export const BaseSearch = ({
+  isDisabled,
+  isSearching,
+  label,
+  onSearch
+}) => {
+  // Prevent click events being repeatedly fired if the Enter key is held down.
+  const preventRepeatClick = useCallback(e => {
+    if (e.key === 'Enter' && e.repeat) {
+      e.preventDefault();
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(LoadingButton, {
+    "aria-label": label,
+    isDisabled: isDisabled,
+    testId: "jql-editor-search",
+    style: style,
+    appearance: 'primary',
+    spacing: 'none',
+    onClick: onSearch,
+    onKeyDown: preventRepeatClick,
+    isLoading: isSearching,
+    iconBefore: /*#__PURE__*/React.createElement(SearchIcon, {
+      label: '',
+      size: 'medium'
+    })
+  });
+};

package/dist/es2019/ui/jql-editor-controls-content/base-syntax-help/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Button from '@atlaskit/button';
+import QuestionIcon from '@atlaskit/icon/glyph/question';
+import { N0 } from '@atlaskit/theme/colors';
+import { SyntaxHelpContainer } from './styled';
+export const BaseSyntaxHelp = ({
+  describedby,
+  isDisabled,
+  label,
+  onClick
+}) => {
+  return /*#__PURE__*/React.createElement(SyntaxHelpContainer, null, /*#__PURE__*/React.createElement(Button, {
+    "aria-describedby": describedby,
+    "aria-label": label,
+    isDisabled: isDisabled,
+    appearance: 'subtle',
+    spacing: 'none',
+    target: 'blank',
+    href: "https://confluence.atlassian.com/display/SERVICEDESKCLOUD/Advanced+searching",
+    iconBefore: /*#__PURE__*/React.createElement(QuestionIcon, {
+      label: '',
+      primaryColor: isDisabled ? `var(--ds-icon-disabled, ${N0})` : `var(--ds-icon-inverse, ${N0})`,
+      size: 'small'
+    }),
+    onClick: onClick
+  }));
+};

package/dist/es2019/ui/jql-editor-controls-content/base-syntax-help/styled.js

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+import { N50, N500, N600, N70 } from '@atlaskit/theme/colors';
+export const SyntaxHelpContainer = styled.div`
+  /* Override background styles for our button to match designs */
+
+  > a {
+    background: ${`var(--ds-background-neutral-bold, ${N70})`};
+    border-radius: 100%;
+    /* Fill the remaining vertical space for a single line in our editor and space between buttons */
+    margin: ${"var(--ds-space-050, 4px)"};
+
+    &:hover {
+      background: ${`var(--ds-background-neutral-bold-hovered, ${N500})`};
+    }
+
+    &:focus {
+      background: ${`var(--ds-background-neutral-bold, ${N70})`};
+    }
+
+    &:active,
+    &[data-firefox-is-active='true'] {
+      background: ${`var(--ds-background-neutral-bold-pressed, ${N600})`};
+    }
+
+    &[disabled] {
+      background: ${`var(--ds-background-disabled, ${N50})`};
+    }
+  }
+`;

package/dist/es2019/ui/jql-editor-controls-content/expand-toggle/index.js

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { Action, ActionSubject, ActionSubjectId, EventType } from '../../../analytics';
+import { JQL_EDITOR_INPUT_ID } from '../../../common/constants';
+import { TooltipContent } from '../../../common/styled';
+import { useEditorThemeContext } from '../../../hooks/use-editor-theme';
+import { useIntl, useScopedId, useStoreActions } from '../../../state';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { TooltipTag } from '../../tooltip-tag';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { BaseExpandToggle } from '../base-expand-toggle';
+import { messages } from './messages';
+export const ExpandToggle = () => {
+  const {
+    expanded,
+    toggleExpanded
+  } = useEditorThemeContext();
+  const [, {
+    createAndFireAnalyticsEvent
+  }] = useStoreActions();
+  const [editorId] = useScopedId(JQL_EDITOR_INPUT_ID);
+  const [intl] = useIntl();
+  let message;
+  if (expanded) {
+    message = intl.formatMessage(messages.collapseTooltip);
+  } else {
+    message = intl.formatMessage(messages.expandTooltip);
+  }
+  const onClick = useCallback(() => {
+    createAndFireAnalyticsEvent({
+      action: Action.CLICKED,
+      actionSubject: ActionSubject.BUTTON,
+      actionSubjectId: ActionSubjectId.EDITOR_EXPAND,
+      eventType: EventType.UI,
+      attributes: {
+        expanded: !expanded
+      }
+    });
+    toggleExpanded();
+  }, [expanded, createAndFireAnalyticsEvent, toggleExpanded]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    position: 'bottom',
+    content: /*#__PURE__*/React.createElement(TooltipContent, null, message),
+    tag: TooltipTag
+  }, /*#__PURE__*/React.createElement(BaseExpandToggle, {
+    expanded: expanded,
+    editorId: editorId,
+    label: intl.formatMessage(messages.buttonLabel),
+    onClick: onClick
+  }));
+};

package/dist/es2019/ui/jql-editor-controls-content/expand-toggle/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  buttonLabel: {
+    id: 'jql-editor.ui.jql-editor-controls-content.expand-toggle.button-label',
+    defaultMessage: 'Editor',
+    description: 'Label that tells the user the expand toggle is controlling the JQL editor.'
+  },
+  expandTooltip: {
+    id: 'jql-editor.ui.jql-editor-controls-content.expand-toggle.expand-tooltip',
+    defaultMessage: 'Expand editor',
+    description: 'Tooltip to show for the expand icon which increases the height of the editor'
+  },
+  collapseTooltip: {
+    id: 'jql-editor.ui.jql-editor-controls-content.expand-toggle.collapse-tooltip',
+    defaultMessage: 'Collapse editor',
+    description: 'Tooltip to show for the collapse icon which shrinks the height of the editor'
+  }
+});

package/dist/es2019/ui/jql-editor-controls-content/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useEditorThemeContext } from '../../hooks/use-editor-theme';
+import { ExpandToggle } from './expand-toggle';
+import { Search } from './search';
+import { SyntaxHelp } from './syntax-help';
+export const JQLEditorControlsContent = () => {
+  const {
+    isSearch
+  } = useEditorThemeContext();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ExpandToggle, null), /*#__PURE__*/React.createElement(SyntaxHelp, null), isSearch && /*#__PURE__*/React.createElement(Search, null));
+};

package/dist/es2019/ui/jql-editor-controls-content/read-only-controls-content/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import noop from 'lodash/noop';
+import { useEditorThemeContext } from '../../../hooks/use-editor-theme';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { BaseExpandToggle } from '../base-expand-toggle';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { BaseSearch } from '../base-search';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { BaseSyntaxHelp } from '../base-syntax-help';
+export const ReadOnlyControlsContent = () => {
+  const {
+    isSearch
+  } = useEditorThemeContext();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseExpandToggle, {
+    label: '',
+    editorId: '',
+    expanded: false,
+    onClick: noop,
+    isDisabled: true
+  }), /*#__PURE__*/React.createElement(BaseSyntaxHelp, {
+    label: '',
+    onClick: noop,
+    isDisabled: true
+  }), isSearch && /*#__PURE__*/React.createElement(BaseSearch, {
+    label: '',
+    onSearch: noop,
+    isDisabled: true
+  }));
+};

package/dist/es2019/ui/jql-editor-controls-content/search/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { TooltipContent } from '../../../common/styled';
+import { useIntl, useIsSearching, useStoreActions } from '../../../state';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { TooltipTag } from '../../tooltip-tag';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { BaseSearch } from '../base-search';
+import { messages } from './messages';
+export const Search = () => {
+  const [intl] = useIntl();
+  const [, {
+    onSearch
+  }] = useStoreActions();
+  const label = intl.formatMessage(messages.searchLabel);
+  const [isSearching] = useIsSearching();
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    position: 'bottom',
+    content: /*#__PURE__*/React.createElement(TooltipContent, null, label),
+    tag: TooltipTag
+  }, /*#__PURE__*/React.createElement(BaseSearch, {
+    label: label,
+    onSearch: onSearch,
+    isSearching: isSearching
+  }));
+};

package/dist/es2019/ui/jql-editor-controls-content/search/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  searchLabel: {
+    id: 'jql-editor.ui.jql-editor-controls-content.search.label',
+    defaultMessage: 'Search',
+    description: 'Label to show for the search icon which the user can press to perform a search.'
+  }
+});

package/dist/es2019/ui/jql-editor-controls-content/syntax-help/index.js

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { ScreenReaderText } from '../../../accessibility';
+import { Action, ActionSubject, ActionSubjectId, EventType } from '../../../analytics';
+import { SYNTAX_HELP_DESCRIPTION_ID } from '../../../common/constants';
+import { TooltipContent } from '../../../common/styled';
+import { useIntl, useOnSyntaxHelp, useScopedId } from '../../../state';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { TooltipTag } from '../../tooltip-tag';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { BaseSyntaxHelp } from '../base-syntax-help';
+import { messages } from './messages';
+export const SyntaxHelp = () => {
+  const [intl] = useIntl();
+  const label = intl.formatMessage(messages.syntaxHelpTooltip);
+  const [descriptionId] = useScopedId(SYNTAX_HELP_DESCRIPTION_ID);
+  const [onSyntaxHelp, {
+    createAndFireAnalyticsEvent
+  }] = useOnSyntaxHelp();
+  const onClick = useCallback(e => {
+    createAndFireAnalyticsEvent({
+      action: Action.CLICKED,
+      actionSubject: ActionSubject.BUTTON,
+      actionSubjectId: ActionSubjectId.EDITOR_HELP,
+      eventType: EventType.UI
+    });
+    const handled = onSyntaxHelp && onSyntaxHelp(e);
+    // Prevent default behaviour when the event is handled on the consumer side.
+    if (handled) {
+      e.preventDefault();
+    }
+  }, [createAndFireAnalyticsEvent, onSyntaxHelp]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    position: 'bottom',
+    content: /*#__PURE__*/React.createElement(TooltipContent, null, label),
+    tag: TooltipTag
+  }, /*#__PURE__*/React.createElement(BaseSyntaxHelp, {
+    describedby: descriptionId,
+    label: label,
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement(ScreenReaderText, {
+    id: descriptionId
+  }, intl.formatMessage(messages.syntaxHelpDescription)));
+};

package/dist/es2019/ui/jql-editor-controls-content/syntax-help/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  syntaxHelpDescription: {
+    id: 'jql-editor.ui.jql-editor-footer-content.jql-editor-help.syntax-help.description',
+    defaultMessage: 'Open JQL syntax help in a new tab.',
+    description: 'Description read when the syntax help link is focused.'
+  },
+  syntaxHelpTooltip: {
+    id: 'jql-editor.ui.jql-editor-footer-content.jql-editor-help.syntax-help.tooltip',
+    defaultMessage: 'Syntax help',
+    description: 'Tooltip to show when the syntax help link is focused.'
+  }
+});