@atlaskit/jql-editor 4.7.2 → 4.7.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/jql-editor
 
+## 4.7.4
+
+### Patch Changes
+
+- [#141027](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141027)
+  [`54b27406e5181`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/54b27406e5181) -
+  [ux] Update icons and buttons on jql
+- Updated dependencies
+
+## 4.7.3
+
+### Patch Changes
+
+- [#136861](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136861)
+  [`d640bacacaa13`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d640bacacaa13) -
+  bumped react-magnetic-di to 3.1.4
+
 ## 4.7.2
 
 ### 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", "4.7.2", _jqlEditorCommon.ANALYTICS_CHANNEL);
+  return (0, _jqlEditorCommon.useJqlPackageAnalytics)(analyticsSource, "@atlaskit/jql-editor", "4.7.4", _jqlEditorCommon.ANALYTICS_CHANNEL);
 };

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

@@ -7,8 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.BaseExpandToggle = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _new = require("@atlaskit/button/new");
+var _growDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/grow-diagonal"));
+var _shrinkDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/shrink-diagonal"));
 var _actualSize = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/actual-size"));
 var _fitToPage = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/fit-to-page"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _styled = require("./styled");
 // Atlaskit doesn't provide a circle variation of the expand/collapse icons so we have to implement our own
@@ -40,7 +44,16 @@ var BaseExpandToggle = exports.BaseExpandToggle = function BaseExpandToggle(_ref
   } else {
     Icon = ExpandCircleIcon;
   }
-  return /*#__PURE__*/_react.default.createElement(_styled.ExpandToggleContainer, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+  return (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    appearance: 'subtle',
+    spacing: "compact",
+    "aria-expanded": expanded,
+    "aria-controls": editorId,
+    label: label,
+    isDisabled: isDisabled,
+    onClick: onClick,
+    icon: expanded ? _shrinkDiagonal.default : _growDiagonal.default
+  }) : /*#__PURE__*/_react.default.createElement(_styled.ExpandToggleContainer, null, /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: 'subtle',
     "aria-expanded": expanded,
     "aria-controls": editorId,

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

@@ -8,7 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.BaseSearch = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _button = require("@atlaskit/button");
-var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
+var _new = require("@atlaskit/button/new");
+var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
+var _search2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var style = {
@@ -26,7 +29,17 @@ var BaseSearch = exports.BaseSearch = function BaseSearch(_ref) {
       e.preventDefault();
     }
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_button.LoadingButton, {
+  return (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    label: label,
+    isDisabled: isDisabled,
+    testId: "jql-editor-search",
+    appearance: 'primary',
+    spacing: "compact",
+    onClick: onSearch,
+    onKeyDown: preventRepeatClick,
+    isLoading: isSearching,
+    icon: _search.default
+  }) : /*#__PURE__*/_react.default.createElement(_button.LoadingButton, {
     "aria-label": label,
     isDisabled: isDisabled,
     testId: "jql-editor-search"
@@ -38,7 +51,7 @@ var BaseSearch = exports.BaseSearch = function BaseSearch(_ref) {
     onClick: onSearch,
     onKeyDown: preventRepeatClick,
     isLoading: isSearching,
-    iconBefore: /*#__PURE__*/_react.default.createElement(_search.default, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_search2.default, {
       label: '',
       size: 'medium'
     })

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

@@ -5,9 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BaseSyntaxHelp = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _new = require("@atlaskit/button/new");
+var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/core/question-circle"));
 var _question = _interopRequireDefault(require("@atlaskit/icon/glyph/question"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _styled = require("./styled");
 var BaseSyntaxHelp = exports.BaseSyntaxHelp = function BaseSyntaxHelp(_ref) {
@@ -15,7 +19,21 @@ var BaseSyntaxHelp = exports.BaseSyntaxHelp = function BaseSyntaxHelp(_ref) {
     isDisabled = _ref.isDisabled,
     label = _ref.label,
     onClick = _ref.onClick;
-  return /*#__PURE__*/_react.default.createElement(_styled.SyntaxHelpContainer, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+  return (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/_react.default.createElement(_new.LinkIconButton, {
+    "aria-describedby": describedby,
+    label: label,
+    isDisabled: isDisabled,
+    appearance: "subtle",
+    spacing: "compact",
+    onClick: onClick,
+    target: "blank",
+    href: "https://confluence.atlassian.com/display/SERVICEDESKCLOUD/Advanced+searching",
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/_react.default.createElement(_questionCircle.default, (0, _extends2.default)({}, iconProps, {
+        color: "var(--ds-icon-subtle, #626F86)"
+      }));
+    }
+  }) : /*#__PURE__*/_react.default.createElement(_styled.SyntaxHelpContainer, null, /*#__PURE__*/_react.default.createElement(_button.default, {
     "aria-describedby": describedby,
     "aria-label": label,
     isDisabled: isDisabled,

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFormattedInfoMessage = exports.InfoMessages = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
-var _reactMagneticDi = require("react-magnetic-di");
 var _form = require("@atlaskit/form");
 var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/info"));
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));

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

@@ -9,7 +9,6 @@ exports.useFormattedWarningMessage = exports.WarningMessages = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactMagneticDi = require("react-magnetic-di");
 var _form = require("@atlaskit/form");
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));

package/dist/cjs/ui/jql-editor-layout/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.JQLEditorReadOnly = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _useEditorTheme = require("../../hooks/use-editor-theme");
 var _splitTextByNewLine = require("../../utils/split-text-by-new-line");
@@ -53,7 +54,8 @@ var JQLEditorLayout = function JQLEditorLayout(props) {
     onTransitionEnd: onEditorViewTransitionEnd
   }), /*#__PURE__*/_react.default.createElement(_styled.EditorControls, {
     isSearch: isSearch,
-    isCompact: isCompact
+    isCompact: isCompact,
+    isVisualRefresh: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh')
   }, EditorControlsContent)), /*#__PURE__*/_react.default.createElement(_styled.EditorFooter, null, EditorFooterContent));
 };
 /**

package/dist/cjs/ui/jql-editor-layout/styled.js

@@ -152,6 +152,8 @@ var EditorControls = exports.EditorControls = _styled.default.div(function (prop
     position: 'sticky',
     top: 0,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: "".concat(rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact), "px")
+    height: "".concat(rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact), "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    gap: props.isVisualRefresh ? "var(--ds-space-025, 2px)" : 'unset'
   };
 });

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", "4.7.2", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.7.4", ANALYTICS_CHANNEL);
 };

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

@@ -1,7 +1,11 @@
 import React from 'react';
 import Button from '@atlaskit/button';
+import { IconButton } from '@atlaskit/button/new';
+import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
+import ShrinkDiagonalIcon from '@atlaskit/icon/core/shrink-diagonal';
 import MediaServicesActualSizeIcon from '@atlaskit/icon/glyph/media-services/actual-size';
 import MediaServicesFitToPageIcon from '@atlaskit/icon/glyph/media-services/fit-to-page';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N50, N500 } from '@atlaskit/theme/colors';
 import { ExpandToggleContainer } from './styled';
 
@@ -33,7 +37,16 @@ export const BaseExpandToggle = ({
   } else {
     Icon = ExpandCircleIcon;
   }
-  return /*#__PURE__*/React.createElement(ExpandToggleContainer, null, /*#__PURE__*/React.createElement(Button, {
+  return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(IconButton, {
+    appearance: 'subtle',
+    spacing: "compact",
+    "aria-expanded": expanded,
+    "aria-controls": editorId,
+    label: label,
+    isDisabled: isDisabled,
+    onClick: onClick,
+    icon: expanded ? ShrinkDiagonalIcon : GrowDiagonalIcon
+  }) : /*#__PURE__*/React.createElement(ExpandToggleContainer, null, /*#__PURE__*/React.createElement(Button, {
     appearance: 'subtle',
     "aria-expanded": expanded,
     "aria-controls": editorId,

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

@@ -1,6 +1,9 @@
 import React, { useCallback } from 'react';
 import { LoadingButton } from '@atlaskit/button';
-import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+import { IconButton } from '@atlaskit/button/new';
+import SearchIcon from '@atlaskit/icon/core/search';
+import SearchIconOld from '@atlaskit/icon/glyph/editor/search';
+import { fg } from '@atlaskit/platform-feature-flags';
 const style = {
   // Fixes an issue where loading button makes the editor flicker with a scrollbar
   overflow: 'hidden'
@@ -17,7 +20,17 @@ export const BaseSearch = ({
       e.preventDefault();
     }
   }, []);
-  return /*#__PURE__*/React.createElement(LoadingButton, {
+  return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(IconButton, {
+    label: label,
+    isDisabled: isDisabled,
+    testId: "jql-editor-search",
+    appearance: 'primary',
+    spacing: "compact",
+    onClick: onSearch,
+    onKeyDown: preventRepeatClick,
+    isLoading: isSearching,
+    icon: SearchIcon
+  }) : /*#__PURE__*/React.createElement(LoadingButton, {
     "aria-label": label,
     isDisabled: isDisabled,
     testId: "jql-editor-search"
@@ -29,7 +42,7 @@ export const BaseSearch = ({
     onClick: onSearch,
     onKeyDown: preventRepeatClick,
     isLoading: isSearching,
-    iconBefore: /*#__PURE__*/React.createElement(SearchIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(SearchIconOld, {
       label: '',
       size: 'medium'
     })

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

@@ -1,6 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from '@atlaskit/button';
+import { LinkIconButton } from '@atlaskit/button/new';
+import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
 import QuestionIcon from '@atlaskit/icon/glyph/question';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0 } from '@atlaskit/theme/colors';
 import { SyntaxHelpContainer } from './styled';
 export const BaseSyntaxHelp = ({
@@ -9,7 +13,19 @@ export const BaseSyntaxHelp = ({
   label,
   onClick
 }) => {
-  return /*#__PURE__*/React.createElement(SyntaxHelpContainer, null, /*#__PURE__*/React.createElement(Button, {
+  return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(LinkIconButton, {
+    "aria-describedby": describedby,
+    label: label,
+    isDisabled: isDisabled,
+    appearance: "subtle",
+    spacing: "compact",
+    onClick: onClick,
+    target: "blank",
+    href: "https://confluence.atlassian.com/display/SERVICEDESKCLOUD/Advanced+searching",
+    icon: iconProps => /*#__PURE__*/React.createElement(QuestionCircleIcon, _extends({}, iconProps, {
+      color: "var(--ds-icon-subtle, #626F86)"
+    }))
+  }) : /*#__PURE__*/React.createElement(SyntaxHelpContainer, null, /*#__PURE__*/React.createElement(Button, {
     "aria-describedby": describedby,
     "aria-label": label,
     isDisabled: isDisabled,

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { di } from 'react-magnetic-di';
 import { HelperMessage } from '@atlaskit/form';
 import InfoIcon from '@atlaskit/icon/glyph/info';
 import * as colors from '@atlaskit/theme/colors';

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

@@ -1,5 +1,4 @@
 import React, { useCallback } from 'react';
-import { di } from 'react-magnetic-di';
 import { HelperMessage } from '@atlaskit/form';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
 import * as colors from '@atlaskit/theme/colors';

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives';
 import { EditorThemeContext, useEditorTheme, useEditorThemeContext } from '../../hooks/use-editor-theme';
 import { splitTextByNewLine } from '../../utils/split-text-by-new-line';
@@ -48,7 +49,8 @@ const JQLEditorLayout = props => {
     onTransitionEnd: onEditorViewTransitionEnd
   }), /*#__PURE__*/React.createElement(EditorControls, {
     isSearch: isSearch,
-    isCompact: isCompact
+    isCompact: isCompact,
+    isVisualRefresh: fg('platform-component-visual-refresh')
   }, EditorControlsContent)), /*#__PURE__*/React.createElement(EditorFooter, null, EditorFooterContent));
 };
 /**

package/dist/es2019/ui/jql-editor-layout/styled.js

@@ -250,5 +250,7 @@ export const EditorControls = styled.div(props => ({
   position: 'sticky',
   top: 0,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: `${rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact)}px`
+  height: `${rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact)}px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  gap: props.isVisualRefresh ? "var(--ds-space-025, 2px)" : 'unset'
 }));

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", "4.7.2", ANALYTICS_CHANNEL);
+  return useJqlPackageAnalytics(analyticsSource, "@atlaskit/jql-editor", "4.7.4", ANALYTICS_CHANNEL);
 };

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

@@ -1,7 +1,11 @@
 import React from 'react';
 import Button from '@atlaskit/button';
+import { IconButton } from '@atlaskit/button/new';
+import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
+import ShrinkDiagonalIcon from '@atlaskit/icon/core/shrink-diagonal';
 import MediaServicesActualSizeIcon from '@atlaskit/icon/glyph/media-services/actual-size';
 import MediaServicesFitToPageIcon from '@atlaskit/icon/glyph/media-services/fit-to-page';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N50, N500 } from '@atlaskit/theme/colors';
 import { ExpandToggleContainer } from './styled';
 
@@ -34,7 +38,16 @@ export var BaseExpandToggle = function BaseExpandToggle(_ref3) {
   } else {
     Icon = ExpandCircleIcon;
   }
-  return /*#__PURE__*/React.createElement(ExpandToggleContainer, null, /*#__PURE__*/React.createElement(Button, {
+  return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(IconButton, {
+    appearance: 'subtle',
+    spacing: "compact",
+    "aria-expanded": expanded,
+    "aria-controls": editorId,
+    label: label,
+    isDisabled: isDisabled,
+    onClick: onClick,
+    icon: expanded ? ShrinkDiagonalIcon : GrowDiagonalIcon
+  }) : /*#__PURE__*/React.createElement(ExpandToggleContainer, null, /*#__PURE__*/React.createElement(Button, {
     appearance: 'subtle',
     "aria-expanded": expanded,
     "aria-controls": editorId,

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

@@ -1,6 +1,9 @@
 import React, { useCallback } from 'react';
 import { LoadingButton } from '@atlaskit/button';
-import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+import { IconButton } from '@atlaskit/button/new';
+import SearchIcon from '@atlaskit/icon/core/search';
+import SearchIconOld from '@atlaskit/icon/glyph/editor/search';
+import { fg } from '@atlaskit/platform-feature-flags';
 var style = {
   // Fixes an issue where loading button makes the editor flicker with a scrollbar
   overflow: 'hidden'
@@ -16,7 +19,17 @@ export var BaseSearch = function BaseSearch(_ref) {
       e.preventDefault();
     }
   }, []);
-  return /*#__PURE__*/React.createElement(LoadingButton, {
+  return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(IconButton, {
+    label: label,
+    isDisabled: isDisabled,
+    testId: "jql-editor-search",
+    appearance: 'primary',
+    spacing: "compact",
+    onClick: onSearch,
+    onKeyDown: preventRepeatClick,
+    isLoading: isSearching,
+    icon: SearchIcon
+  }) : /*#__PURE__*/React.createElement(LoadingButton, {
     "aria-label": label,
     isDisabled: isDisabled,
     testId: "jql-editor-search"
@@ -28,7 +41,7 @@ export var BaseSearch = function BaseSearch(_ref) {
     onClick: onSearch,
     onKeyDown: preventRepeatClick,
     isLoading: isSearching,
-    iconBefore: /*#__PURE__*/React.createElement(SearchIcon, {
+    iconBefore: /*#__PURE__*/React.createElement(SearchIconOld, {
       label: '',
       size: 'medium'
     })

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

@@ -1,6 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from '@atlaskit/button';
+import { LinkIconButton } from '@atlaskit/button/new';
+import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
 import QuestionIcon from '@atlaskit/icon/glyph/question';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0 } from '@atlaskit/theme/colors';
 import { SyntaxHelpContainer } from './styled';
 export var BaseSyntaxHelp = function BaseSyntaxHelp(_ref) {
@@ -8,7 +12,21 @@ export var BaseSyntaxHelp = function BaseSyntaxHelp(_ref) {
     isDisabled = _ref.isDisabled,
     label = _ref.label,
     onClick = _ref.onClick;
-  return /*#__PURE__*/React.createElement(SyntaxHelpContainer, null, /*#__PURE__*/React.createElement(Button, {
+  return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(LinkIconButton, {
+    "aria-describedby": describedby,
+    label: label,
+    isDisabled: isDisabled,
+    appearance: "subtle",
+    spacing: "compact",
+    onClick: onClick,
+    target: "blank",
+    href: "https://confluence.atlassian.com/display/SERVICEDESKCLOUD/Advanced+searching",
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(QuestionCircleIcon, _extends({}, iconProps, {
+        color: "var(--ds-icon-subtle, #626F86)"
+      }));
+    }
+  }) : /*#__PURE__*/React.createElement(SyntaxHelpContainer, null, /*#__PURE__*/React.createElement(Button, {
     "aria-describedby": describedby,
     "aria-label": label,
     isDisabled: isDisabled,

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

@@ -1,6 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
-import { di } from 'react-magnetic-di';
 import { HelperMessage } from '@atlaskit/form';
 import InfoIcon from '@atlaskit/icon/glyph/info';
 import * as colors from '@atlaskit/theme/colors';

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

@@ -1,7 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback } from 'react';
-import { di } from 'react-magnetic-di';
 import { HelperMessage } from '@atlaskit/form';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
 import * as colors from '@atlaskit/theme/colors';

package/dist/esm/ui/jql-editor-layout/index.js

@@ -1,6 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isSearch", "isCompact"];
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives';
 import { EditorThemeContext, useEditorTheme, useEditorThemeContext } from '../../hooks/use-editor-theme';
 import { splitTextByNewLine } from '../../utils/split-text-by-new-line';
@@ -47,7 +48,8 @@ var JQLEditorLayout = function JQLEditorLayout(props) {
     onTransitionEnd: onEditorViewTransitionEnd
   }), /*#__PURE__*/React.createElement(EditorControls, {
     isSearch: isSearch,
-    isCompact: isCompact
+    isCompact: isCompact,
+    isVisualRefresh: fg('platform-component-visual-refresh')
   }, EditorControlsContent)), /*#__PURE__*/React.createElement(EditorFooter, null, EditorFooterContent));
 };
 /**

package/dist/esm/ui/jql-editor-layout/styled.js

@@ -148,6 +148,8 @@ export var EditorControls = styled.div(function (props) {
     position: 'sticky',
     top: 0,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: "".concat(rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact), "px")
+    height: "".concat(rowHeight + 2 * getEditorInputVerticalPadding(props.isCompact), "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    gap: props.isVisualRefresh ? "var(--ds-space-025, 2px)" : 'unset'
   };
 });

package/dist/types/ui/jql-editor-layout/styled.d.ts

@@ -60,5 +60,6 @@ export declare const EditorControls: import("@emotion/styled").StyledComponent<{
 } & {
     isSearch: boolean;
     isCompact: boolean;
+    isVisualRefresh?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/dist/types-ts4.5/ui/jql-editor-layout/styled.d.ts

@@ -60,5 +60,6 @@ export declare const EditorControls: import("@emotion/styled").StyledComponent<{
 } & {
     isSearch: boolean;
     isCompact: boolean;
+    isVisualRefresh?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/jql-editor",
-	"version": "4.7.2",
+	"version": "4.7.4",
 	"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",
@@ -41,15 +41,16 @@
 		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/form": "^10.5.0",
-		"@atlaskit/icon": "^22.16.0",
+		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/jql-ast": "^3.3.0",
 		"@atlaskit/jql-autocomplete": "^2.0.0",
 		"@atlaskit/jql-editor-common": "^2.1.0",
 		"@atlaskit/jql-parser": "^2.0.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.59.0",
+		"@atlaskit/tokens": "^1.60.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -60,7 +61,7 @@
 		"lodash": "^4.17.21",
 		"react-intl-next": "npm:react-intl@^5.18.1",
 		"react-loosely-lazy": "^1.0.0",
-		"react-magnetic-di": "^2.2.6",
+		"react-magnetic-di": "^3.1.4",
 		"react-sweet-state": "^2.6.5",
 		"rxjs": "^5.5.0",
 		"util": "^0.12.4",
@@ -121,5 +122,10 @@
 				"util"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"platform-component-visual-refresh": {
+			"type": "boolean"
+		}
 	}
 }