@atlaskit/link-datasource 0.34.1 → 0.34.3

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,18 @@
1
1
  # @atlaskit/link-datasource
2
2
 
3
+ ## 0.34.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`f93b91224c7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f93b91224c7) - [ux] Refocused column search after initial load
8
+
9
+ ## 0.34.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [`4929f0c37cc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4929f0c37cc) - [ux] Update empty state in assets modal with link
14
+ - Updated dependencies
15
+
3
16
  ## 0.34.1
4
17
 
5
18
  ### Patch Changes
@@ -26,6 +26,7 @@ var searchTitleStyles = (0, _react.css)({
26
26
  paddingTop: "var(--ds-space-200, 16px)",
27
27
  paddingBottom: "var(--ds-space-100, 8px)"
28
28
  });
29
+ var AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
29
30
  var InitialStateView = function InitialStateView() {
30
31
  var _useIntl = (0, _reactIntlNext.useIntl)(),
31
32
  formatMessage = _useIntl.formatMessage;
@@ -36,6 +37,9 @@ var InitialStateView = function InitialStateView() {
36
37
  css: svgAndTextsWrapperStyles
37
38
  }, (0, _react.jsx)(_crystalBallSvg.CrystalBallSVG, null), (0, _react.jsx)("div", {
38
39
  css: searchTitleStyles
39
- }, formatMessage(_messages.initialStateViewMessages.searchTitle)), (0, _react.jsx)("div", null, formatMessage(_messages.initialStateViewMessages.searchDescription)), (0, _react.jsx)("a", null, formatMessage(_messages.initialStateViewMessages.learnMoreLink))));
40
+ }, formatMessage(_messages.initialStateViewMessages.searchTitle)), (0, _react.jsx)("div", null, formatMessage(_messages.initialStateViewMessages.searchDescription)), (0, _react.jsx)("a", {
41
+ href: AQLSupportDocumentLink,
42
+ target: "_blank"
43
+ }, formatMessage(_messages.initialStateViewMessages.learnMoreLink))));
40
44
  };
41
45
  exports.InitialStateView = InitialStateView;
@@ -9,7 +9,7 @@ var initialStateViewMessages = (0, _reactIntlNext.defineMessages)({
9
9
  searchTitle: {
10
10
  id: 'linkDataSource.assets.configModal.renderAssetsContent.initialStateView.searchTitle',
11
11
  description: 'The initial search state title that gives the user some idea about how to get information',
12
- defaultMessage: 'Search for objects or object types'
12
+ defaultMessage: 'Search for objects'
13
13
  },
14
14
  searchDescription: {
15
15
  id: 'linkDataSource.assets.configModal.renderAssetsContent.initialStateView.searchDescription',
@@ -96,6 +96,7 @@ var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref) {
96
96
  onFocus = _ref3$fieldProps.onFocus,
97
97
  restFieldProps = (0, _objectWithoutProperties2.default)(_ref3$fieldProps, _excluded);
98
98
  return (0, _react.jsx)(_select.AsyncSelect, (0, _extends2.default)({
99
+ autoFocus: true,
99
100
  classNamePrefix: classNamePrefix,
100
101
  isLoading: objectSchemasLoading,
101
102
  defaultOptions: true // setting to true causes the loadOptions to be called on mount
@@ -29,6 +29,7 @@ var ColumnPicker = function ColumnPicker(_ref) {
29
29
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
30
30
  allOptions = _useState2[0],
31
31
  setAllOptions = _useState2[1];
32
+ var pickerRef = (0, _react.useRef)(null);
32
33
  var mapColumnToOption = (0, _react.useCallback)(function (_ref2) {
33
34
  var key = _ref2.key,
34
35
  title = _ref2.title;
@@ -93,6 +94,13 @@ var ColumnPicker = function ColumnPicker(_ref) {
93
94
  return selectedValue.value === option.value;
94
95
  });
95
96
  };
97
+ (0, _react.useEffect)(function () {
98
+ if (allOptions.length) {
99
+ var _pickerRef$current, _pickerRef$current$se, _pickerRef$current$se2;
100
+ // necessary to refocus the search input after the loading state
101
+ pickerRef === null || pickerRef === void 0 ? void 0 : (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 ? void 0 : (_pickerRef$current$se = _pickerRef$current.selectRef) === null || _pickerRef$current$se === void 0 ? void 0 : (_pickerRef$current$se2 = _pickerRef$current$se.inputRef) === null || _pickerRef$current$se2 === void 0 ? void 0 : _pickerRef$current$se2.focus();
102
+ }
103
+ }, [allOptions]);
96
104
  return (0, _react2.jsx)(_select.PopupSelect, {
97
105
  classNamePrefix: 'column-picker-popup',
98
106
  testId: 'column-picker-popup',
@@ -106,6 +114,7 @@ var ColumnPicker = function ColumnPicker(_ref) {
106
114
  hideSelectedOptions: false,
107
115
  id: 'column-picker-popup',
108
116
  isMulti: true,
117
+ ref: pickerRef,
109
118
  isOptionDisabled: handleIsOptionDisabled,
110
119
  placeholder: intl.formatMessage(_messages.columnPickerMessages.search),
111
120
  onKeyDown: stopEscapePropagationWhenOpen,
@@ -344,7 +344,7 @@ var analyticsContextAttributes = {
344
344
  };
345
345
  var analyticsContextData = {
346
346
  packageName: "@atlaskit/link-datasource",
347
- packageVersion: "0.34.1",
347
+ packageVersion: "0.34.3",
348
348
  source: 'datasourceConfigModal'
349
349
  };
350
350
  var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
@@ -20,6 +20,7 @@ const searchTitleStyles = css({
20
20
  paddingTop: "var(--ds-space-200, 16px)",
21
21
  paddingBottom: "var(--ds-space-100, 8px)"
22
22
  });
23
+ const AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
23
24
  export const InitialStateView = () => {
24
25
  const {
25
26
  formatMessage
@@ -31,5 +32,8 @@ export const InitialStateView = () => {
31
32
  css: svgAndTextsWrapperStyles
32
33
  }, jsx(CrystalBallSVG, null), jsx("div", {
33
34
  css: searchTitleStyles
34
- }, formatMessage(initialStateViewMessages.searchTitle)), jsx("div", null, formatMessage(initialStateViewMessages.searchDescription)), jsx("a", null, formatMessage(initialStateViewMessages.learnMoreLink))));
35
+ }, formatMessage(initialStateViewMessages.searchTitle)), jsx("div", null, formatMessage(initialStateViewMessages.searchDescription)), jsx("a", {
36
+ href: AQLSupportDocumentLink,
37
+ target: "_blank"
38
+ }, formatMessage(initialStateViewMessages.learnMoreLink))));
35
39
  };
@@ -3,7 +3,7 @@ export const initialStateViewMessages = defineMessages({
3
3
  searchTitle: {
4
4
  id: 'linkDataSource.assets.configModal.renderAssetsContent.initialStateView.searchTitle',
5
5
  description: 'The initial search state title that gives the user some idea about how to get information',
6
- defaultMessage: 'Search for objects or object types'
6
+ defaultMessage: 'Search for objects'
7
7
  },
8
8
  searchDescription: {
9
9
  id: 'linkDataSource.assets.configModal.renderAssetsContent.initialStateView.searchDescription',
@@ -63,6 +63,7 @@ export const AssetsObjectSchemaSelect = ({
63
63
  ...restFieldProps
64
64
  }
65
65
  }) => jsx(AsyncSelect, _extends({
66
+ autoFocus: true,
66
67
  classNamePrefix: classNamePrefix,
67
68
  isLoading: objectSchemasLoading,
68
69
  defaultOptions: true // setting to true causes the loadOptions to be called on mount
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  /** @jsx jsx */
3
- import { useCallback, useEffect, useState } from 'react';
3
+ import { useCallback, useEffect, useRef, useState } from 'react';
4
4
  import { jsx } from '@emotion/react';
5
5
  import { useIntl } from 'react-intl-next';
6
6
  import Button from '@atlaskit/button/standard-button';
@@ -16,6 +16,7 @@ export const ColumnPicker = ({
16
16
  }) => {
17
17
  const intl = useIntl();
18
18
  const [allOptions, setAllOptions] = useState([]);
19
+ const pickerRef = useRef(null);
19
20
  const mapColumnToOption = useCallback(({
20
21
  key,
21
22
  title
@@ -68,6 +69,13 @@ export const ColumnPicker = ({
68
69
  const handleIsOptionDisabled = (option, selectValue) => {
69
70
  return selectValue.length === 1 && selectValue.some(selectedValue => selectedValue.value === option.value);
70
71
  };
72
+ useEffect(() => {
73
+ if (allOptions.length) {
74
+ var _pickerRef$current, _pickerRef$current$se, _pickerRef$current$se2;
75
+ // necessary to refocus the search input after the loading state
76
+ pickerRef === null || pickerRef === void 0 ? void 0 : (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 ? void 0 : (_pickerRef$current$se = _pickerRef$current.selectRef) === null || _pickerRef$current$se === void 0 ? void 0 : (_pickerRef$current$se2 = _pickerRef$current$se.inputRef) === null || _pickerRef$current$se2 === void 0 ? void 0 : _pickerRef$current$se2.focus();
77
+ }
78
+ }, [allOptions]);
71
79
  return jsx(PopupSelect, {
72
80
  classNamePrefix: 'column-picker-popup',
73
81
  testId: 'column-picker-popup',
@@ -81,6 +89,7 @@ export const ColumnPicker = ({
81
89
  hideSelectedOptions: false,
82
90
  id: 'column-picker-popup',
83
91
  isMulti: true,
92
+ ref: pickerRef,
84
93
  isOptionDisabled: handleIsOptionDisabled,
85
94
  placeholder: intl.formatMessage(columnPickerMessages.search),
86
95
  onKeyDown: stopEscapePropagationWhenOpen,
@@ -290,7 +290,7 @@ const analyticsContextAttributes = {
290
290
  };
291
291
  const analyticsContextData = {
292
292
  packageName: "@atlaskit/link-datasource",
293
- packageVersion: "0.34.1",
293
+ packageVersion: "0.34.3",
294
294
  source: 'datasourceConfigModal'
295
295
  };
296
296
  const contextData = {
@@ -20,6 +20,7 @@ var searchTitleStyles = css({
20
20
  paddingTop: "var(--ds-space-200, 16px)",
21
21
  paddingBottom: "var(--ds-space-100, 8px)"
22
22
  });
23
+ var AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
23
24
  export var InitialStateView = function InitialStateView() {
24
25
  var _useIntl = useIntl(),
25
26
  formatMessage = _useIntl.formatMessage;
@@ -30,5 +31,8 @@ export var InitialStateView = function InitialStateView() {
30
31
  css: svgAndTextsWrapperStyles
31
32
  }, jsx(CrystalBallSVG, null), jsx("div", {
32
33
  css: searchTitleStyles
33
- }, formatMessage(initialStateViewMessages.searchTitle)), jsx("div", null, formatMessage(initialStateViewMessages.searchDescription)), jsx("a", null, formatMessage(initialStateViewMessages.learnMoreLink))));
34
+ }, formatMessage(initialStateViewMessages.searchTitle)), jsx("div", null, formatMessage(initialStateViewMessages.searchDescription)), jsx("a", {
35
+ href: AQLSupportDocumentLink,
36
+ target: "_blank"
37
+ }, formatMessage(initialStateViewMessages.learnMoreLink))));
34
38
  };
@@ -3,7 +3,7 @@ export var initialStateViewMessages = defineMessages({
3
3
  searchTitle: {
4
4
  id: 'linkDataSource.assets.configModal.renderAssetsContent.initialStateView.searchTitle',
5
5
  description: 'The initial search state title that gives the user some idea about how to get information',
6
- defaultMessage: 'Search for objects or object types'
6
+ defaultMessage: 'Search for objects'
7
7
  },
8
8
  searchDescription: {
9
9
  id: 'linkDataSource.assets.configModal.renderAssetsContent.initialStateView.searchDescription',
@@ -89,6 +89,7 @@ export var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref) {
89
89
  onFocus = _ref3$fieldProps.onFocus,
90
90
  restFieldProps = _objectWithoutProperties(_ref3$fieldProps, _excluded);
91
91
  return jsx(AsyncSelect, _extends({
92
+ autoFocus: true,
92
93
  classNamePrefix: classNamePrefix,
93
94
  isLoading: objectSchemasLoading,
94
95
  defaultOptions: true // setting to true causes the loadOptions to be called on mount
@@ -4,7 +4,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
4
4
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
5
5
  var _excluded = ["isOpen"];
6
6
  /** @jsx jsx */
7
- import { useCallback, useEffect, useState } from 'react';
7
+ import { useCallback, useEffect, useRef, useState } from 'react';
8
8
  import { jsx } from '@emotion/react';
9
9
  import { useIntl } from 'react-intl-next';
10
10
  import Button from '@atlaskit/button/standard-button';
@@ -22,6 +22,7 @@ export var ColumnPicker = function ColumnPicker(_ref) {
22
22
  _useState2 = _slicedToArray(_useState, 2),
23
23
  allOptions = _useState2[0],
24
24
  setAllOptions = _useState2[1];
25
+ var pickerRef = useRef(null);
25
26
  var mapColumnToOption = useCallback(function (_ref2) {
26
27
  var key = _ref2.key,
27
28
  title = _ref2.title;
@@ -86,6 +87,13 @@ export var ColumnPicker = function ColumnPicker(_ref) {
86
87
  return selectedValue.value === option.value;
87
88
  });
88
89
  };
90
+ useEffect(function () {
91
+ if (allOptions.length) {
92
+ var _pickerRef$current, _pickerRef$current$se, _pickerRef$current$se2;
93
+ // necessary to refocus the search input after the loading state
94
+ pickerRef === null || pickerRef === void 0 ? void 0 : (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 ? void 0 : (_pickerRef$current$se = _pickerRef$current.selectRef) === null || _pickerRef$current$se === void 0 ? void 0 : (_pickerRef$current$se2 = _pickerRef$current$se.inputRef) === null || _pickerRef$current$se2 === void 0 ? void 0 : _pickerRef$current$se2.focus();
95
+ }
96
+ }, [allOptions]);
89
97
  return jsx(PopupSelect, {
90
98
  classNamePrefix: 'column-picker-popup',
91
99
  testId: 'column-picker-popup',
@@ -99,6 +107,7 @@ export var ColumnPicker = function ColumnPicker(_ref) {
99
107
  hideSelectedOptions: false,
100
108
  id: 'column-picker-popup',
101
109
  isMulti: true,
110
+ ref: pickerRef,
102
111
  isOptionDisabled: handleIsOptionDisabled,
103
112
  placeholder: intl.formatMessage(columnPickerMessages.search),
104
113
  onKeyDown: stopEscapePropagationWhenOpen,
@@ -334,7 +334,7 @@ var analyticsContextAttributes = {
334
334
  };
335
335
  var analyticsContextData = {
336
336
  packageName: "@atlaskit/link-datasource",
337
- packageVersion: "0.34.1",
337
+ packageVersion: "0.34.3",
338
338
  source: 'datasourceConfigModal'
339
339
  };
340
340
  var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "0.34.1",
3
+ "version": "0.34.3",
4
4
  "description": "UI Components to support linking platform dataset feature",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -47,7 +47,7 @@
47
47
  "@atlaskit/linking-types": "^8.2.0",
48
48
  "@atlaskit/lozenge": "^11.4.0",
49
49
  "@atlaskit/modal-dialog": "^12.6.0",
50
- "@atlaskit/pragmatic-drag-and-drop": "^0.21.0",
50
+ "@atlaskit/pragmatic-drag-and-drop": "^0.22.0",
51
51
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.11.0",
52
52
  "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^0.6.0",
53
53
  "@atlaskit/pragmatic-drag-and-drop-react-indicator": "^0.16.0",
@@ -1,5 +0,0 @@
1
- {
2
- "name": "@atlaskit/link-datasource",
3
- "version": "0.34.1",
4
- "sideEffects": false
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "name": "@atlaskit/link-datasource",
3
- "version": "0.34.1",
4
- "sideEffects": false
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "name": "@atlaskit/link-datasource",
3
- "version": "0.34.1",
4
- "sideEffects": false
5
- }