@atlaskit/link-datasource 0.33.1 → 0.33.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/link-datasource
2
2
 
3
+ ## 0.33.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`7e77ad40512`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7e77ad40512) - [ux] Add question mark to search field with link to aql docs
8
+
3
9
  ## 0.33.1
4
10
 
5
11
  ### Patch Changes
@@ -16,8 +16,11 @@ var _form = require("@atlaskit/form");
16
16
  var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
17
17
  var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
18
18
  var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
19
+ var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
19
20
  var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
20
21
  var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
22
+ var _colors = require("@atlaskit/theme/colors");
23
+ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
21
24
  var _useValidateAqlText2 = require("../../../../hooks/useValidateAqlText");
22
25
  var _types = require("../../../../types/assets/types");
23
26
  var _styled = require("../styled");
@@ -27,6 +30,16 @@ var _messages = require("./messages");
27
30
  /* Meta isn't exported in @atlaskit/form
28
31
  Taken from packages/design-system/form/src/field.tsx */
29
32
 
33
+ var buttonBaseStyles = (0, _react2.css)({
34
+ display: 'flex',
35
+ height: '100%',
36
+ position: 'relative',
37
+ alignItems: 'center',
38
+ justifyContent: 'center',
39
+ flexDirection: 'column',
40
+ marginRight: "var(--ds-space-100, 0.5em)"
41
+ });
42
+ var AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
30
43
  var searchButtonStyles = (0, _react2.css)({
31
44
  marginRight: "var(--ds-space-075, 6px)"
32
45
  });
@@ -143,7 +156,19 @@ var AqlSearchInput = function AqlSearchInput(_ref) {
143
156
  width: 24
144
157
  }
145
158
  }, renderValidatorIcon(fieldProps.value, error, meta)),
146
- elemAfterInput: (0, _react2.jsx)(_button.LoadingButton, {
159
+ elemAfterInput: (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_tooltip.default, {
160
+ content: formatMessage(_messages.searchInputMessages.helpTooltipText),
161
+ position: "bottom"
162
+ }, (0, _react2.jsx)("a", {
163
+ href: AQLSupportDocumentLink,
164
+ target: "_blank",
165
+ css: buttonBaseStyles
166
+ }, (0, _react2.jsx)(_questionCircle.default, {
167
+ label: "label",
168
+ primaryColor: "var(--ds-icon, ".concat(_colors.N500, ")"),
169
+ size: "medium",
170
+ testId: "assets-datasource-modal-help"
171
+ }))), (0, _react2.jsx)(_button.LoadingButton, {
147
172
  appearance: "primary",
148
173
  css: searchButtonStyles,
149
174
  iconBefore: (0, _react2.jsx)(_search.default, {
@@ -154,7 +179,7 @@ var AqlSearchInput = function AqlSearchInput(_ref) {
154
179
  spacing: "none",
155
180
  testId: "assets-datasource-modal--aql-search-button",
156
181
  type: "submit"
157
- }),
182
+ })),
158
183
  placeholder: formatMessage(_messages.searchInputMessages.placeholder),
159
184
  testId: testId
160
185
  }));
@@ -10,6 +10,11 @@ var searchInputMessages = (0, _reactIntlNext.defineMessages)({
10
10
  id: 'linkDataSource.assets.configModal.aqlSearchInput.placeholder',
11
11
  description: 'Display text for AQL search button',
12
12
  defaultMessage: 'Search via AQL'
13
+ },
14
+ helpTooltipText: {
15
+ id: 'linkDataSource.assets.configModal.aqlSearchInput.helpTooltipText',
16
+ description: 'Link to AQL Syntax help document',
17
+ defaultMessage: 'Syntax help'
13
18
  }
14
19
  });
15
20
  exports.searchInputMessages = searchInputMessages;
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "0.33.1",
3
+ "version": "0.33.2",
4
4
  "sideEffects": false
5
5
  }
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  /** @jsx jsx */
3
- import { useCallback, useRef } from 'react';
3
+ import { Fragment, useCallback, useRef } from 'react';
4
4
  import { css, jsx } from '@emotion/react';
5
5
  import { useIntl } from 'react-intl-next';
6
6
  import { LoadingButton } from '@atlaskit/button';
@@ -8,8 +8,11 @@ import { Field } from '@atlaskit/form';
8
8
  import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
9
9
  import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
10
10
  import SearchIcon from '@atlaskit/icon/glyph/editor/search';
11
+ import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
11
12
  import Spinner from '@atlaskit/spinner';
12
13
  import Textfield from '@atlaskit/textfield';
14
+ import { N500 } from '@atlaskit/theme/colors';
15
+ import Tooltip from '@atlaskit/tooltip';
13
16
  import { useValidateAqlText } from '../../../../hooks/useValidateAqlText';
14
17
  import { aqlKey } from '../../../../types/assets/types';
15
18
  import { FieldContainer } from '../styled';
@@ -18,6 +21,16 @@ import { searchInputMessages } from './messages';
18
21
  /* Meta isn't exported in @atlaskit/form
19
22
  Taken from packages/design-system/form/src/field.tsx */
20
23
 
24
+ const buttonBaseStyles = css({
25
+ display: 'flex',
26
+ height: '100%',
27
+ position: 'relative',
28
+ alignItems: 'center',
29
+ justifyContent: 'center',
30
+ flexDirection: 'column',
31
+ marginRight: "var(--ds-space-100, 0.5em)"
32
+ });
33
+ const AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
21
34
  const searchButtonStyles = css({
22
35
  marginRight: "var(--ds-space-075, 6px)"
23
36
  });
@@ -113,7 +126,19 @@ export const AqlSearchInput = ({
113
126
  width: 24
114
127
  }
115
128
  }, renderValidatorIcon(fieldProps.value, error, meta)),
116
- elemAfterInput: jsx(LoadingButton, {
129
+ elemAfterInput: jsx(Fragment, null, jsx(Tooltip, {
130
+ content: formatMessage(searchInputMessages.helpTooltipText),
131
+ position: "bottom"
132
+ }, jsx("a", {
133
+ href: AQLSupportDocumentLink,
134
+ target: "_blank",
135
+ css: buttonBaseStyles
136
+ }, jsx(QuestionCircleIcon, {
137
+ label: "label",
138
+ primaryColor: `var(--ds-icon, ${N500})`,
139
+ size: "medium",
140
+ testId: "assets-datasource-modal-help"
141
+ }))), jsx(LoadingButton, {
117
142
  appearance: "primary",
118
143
  css: searchButtonStyles,
119
144
  iconBefore: jsx(SearchIcon, {
@@ -124,7 +149,7 @@ export const AqlSearchInput = ({
124
149
  spacing: "none",
125
150
  testId: "assets-datasource-modal--aql-search-button",
126
151
  type: "submit"
127
- }),
152
+ })),
128
153
  placeholder: formatMessage(searchInputMessages.placeholder),
129
154
  testId: testId
130
155
  }))));
@@ -4,5 +4,10 @@ export const searchInputMessages = defineMessages({
4
4
  id: 'linkDataSource.assets.configModal.aqlSearchInput.placeholder',
5
5
  description: 'Display text for AQL search button',
6
6
  defaultMessage: 'Search via AQL'
7
+ },
8
+ helpTooltipText: {
9
+ id: 'linkDataSource.assets.configModal.aqlSearchInput.helpTooltipText',
10
+ description: 'Link to AQL Syntax help document',
11
+ defaultMessage: 'Syntax help'
7
12
  }
8
13
  });
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "0.33.1",
3
+ "version": "0.33.2",
4
4
  "sideEffects": false
5
5
  }
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
3
3
  import _regeneratorRuntime from "@babel/runtime/regenerator";
4
4
  /** @jsx jsx */
5
- import { useCallback, useRef } from 'react';
5
+ import { Fragment, useCallback, useRef } from 'react';
6
6
  import { css, jsx } from '@emotion/react';
7
7
  import { useIntl } from 'react-intl-next';
8
8
  import { LoadingButton } from '@atlaskit/button';
@@ -10,8 +10,11 @@ import { Field } from '@atlaskit/form';
10
10
  import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
11
11
  import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
12
12
  import SearchIcon from '@atlaskit/icon/glyph/editor/search';
13
+ import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
13
14
  import Spinner from '@atlaskit/spinner';
14
15
  import Textfield from '@atlaskit/textfield';
16
+ import { N500 } from '@atlaskit/theme/colors';
17
+ import Tooltip from '@atlaskit/tooltip';
15
18
  import { useValidateAqlText } from '../../../../hooks/useValidateAqlText';
16
19
  import { aqlKey } from '../../../../types/assets/types';
17
20
  import { FieldContainer } from '../styled';
@@ -20,6 +23,16 @@ import { searchInputMessages } from './messages';
20
23
  /* Meta isn't exported in @atlaskit/form
21
24
  Taken from packages/design-system/form/src/field.tsx */
22
25
 
26
+ var buttonBaseStyles = css({
27
+ display: 'flex',
28
+ height: '100%',
29
+ position: 'relative',
30
+ alignItems: 'center',
31
+ justifyContent: 'center',
32
+ flexDirection: 'column',
33
+ marginRight: "var(--ds-space-100, 0.5em)"
34
+ });
35
+ var AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
23
36
  var searchButtonStyles = css({
24
37
  marginRight: "var(--ds-space-075, 6px)"
25
38
  });
@@ -135,7 +148,19 @@ export var AqlSearchInput = function AqlSearchInput(_ref) {
135
148
  width: 24
136
149
  }
137
150
  }, renderValidatorIcon(fieldProps.value, error, meta)),
138
- elemAfterInput: jsx(LoadingButton, {
151
+ elemAfterInput: jsx(Fragment, null, jsx(Tooltip, {
152
+ content: formatMessage(searchInputMessages.helpTooltipText),
153
+ position: "bottom"
154
+ }, jsx("a", {
155
+ href: AQLSupportDocumentLink,
156
+ target: "_blank",
157
+ css: buttonBaseStyles
158
+ }, jsx(QuestionCircleIcon, {
159
+ label: "label",
160
+ primaryColor: "var(--ds-icon, ".concat(N500, ")"),
161
+ size: "medium",
162
+ testId: "assets-datasource-modal-help"
163
+ }))), jsx(LoadingButton, {
139
164
  appearance: "primary",
140
165
  css: searchButtonStyles,
141
166
  iconBefore: jsx(SearchIcon, {
@@ -146,7 +171,7 @@ export var AqlSearchInput = function AqlSearchInput(_ref) {
146
171
  spacing: "none",
147
172
  testId: "assets-datasource-modal--aql-search-button",
148
173
  type: "submit"
149
- }),
174
+ })),
150
175
  placeholder: formatMessage(searchInputMessages.placeholder),
151
176
  testId: testId
152
177
  }));
@@ -4,5 +4,10 @@ export var searchInputMessages = defineMessages({
4
4
  id: 'linkDataSource.assets.configModal.aqlSearchInput.placeholder',
5
5
  description: 'Display text for AQL search button',
6
6
  defaultMessage: 'Search via AQL'
7
+ },
8
+ helpTooltipText: {
9
+ id: 'linkDataSource.assets.configModal.aqlSearchInput.helpTooltipText',
10
+ description: 'Link to AQL Syntax help document',
11
+ defaultMessage: 'Syntax help'
7
12
  }
8
13
  });
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "0.33.1",
3
+ "version": "0.33.2",
4
4
  "sideEffects": false
5
5
  }
@@ -4,4 +4,9 @@ export declare const searchInputMessages: {
4
4
  description: string;
5
5
  defaultMessage: string;
6
6
  };
7
+ helpTooltipText: {
8
+ id: string;
9
+ description: string;
10
+ defaultMessage: string;
11
+ };
7
12
  };
@@ -4,4 +4,9 @@ export declare const searchInputMessages: {
4
4
  description: string;
5
5
  defaultMessage: string;
6
6
  };
7
+ helpTooltipText: {
8
+ id: string;
9
+ description: string;
10
+ defaultMessage: string;
11
+ };
7
12
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "0.33.1",
3
+ "version": "0.33.2",
4
4
  "description": "UI Components to support linking platform dataset feature",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -56,6 +56,7 @@
56
56
  "@atlaskit/textfield": "5.6.3",
57
57
  "@atlaskit/theme": "^12.5.0",
58
58
  "@atlaskit/tokens": "^1.14.0",
59
+ "@atlaskit/tooltip": "^17.8.0",
59
60
  "@atlassianlabs/jql-editor": "^2.0.1",
60
61
  "@atlassianlabs/jql-editor-autocomplete-rest": "^1.1.2",
61
62
  "@babel/runtime": "^7.0.0",