@atlaskit/link-datasource 0.22.0 → 0.23.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 0.23.0
+
+### Minor Changes
+
+- [`62465d6399f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62465d6399f) - [ux] Adding loading spinner to search button and fixed initial search loading state in table
+
 ## 0.22.0
 
 ### Minor Changes

package/dist/cjs/ui/jira-issues-modal/basic-search-input/index.js

@@ -16,6 +16,9 @@ var _messages = require("./messages");
 var searchButtonStyles = (0, _react.css)({
   marginRight: "var(--ds-space-075, 6px)"
 });
+var formStyles = (0, _react.css)({
+  flex: 1
+});
 var BasicSearchInput = function BasicSearchInput(_ref) {
   var isDisabled = _ref.isDisabled,
     isSearching = _ref.isSearching,
@@ -26,7 +29,14 @@ var BasicSearchInput = function BasicSearchInput(_ref) {
     testId = _ref$testId === void 0 ? 'jira-jql-datasource-modal--basic-search-input' : _ref$testId;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  return (0, _react.jsx)(_textfield.default, {
+  var handleFormSubmit = function handleFormSubmit(e) {
+    e.preventDefault();
+    onSearch(searchTerm);
+  };
+  return (0, _react.jsx)("form", {
+    css: formStyles,
+    onSubmit: handleFormSubmit
+  }, (0, _react.jsx)(_textfield.default, {
     elemAfterInput: (0, _react.jsx)(_button.LoadingButton, {
       appearance: "primary",
       css: searchButtonStyles,
@@ -47,6 +57,6 @@ var BasicSearchInput = function BasicSearchInput(_ref) {
     placeholder: formatMessage(_messages.basicSearchInputMessages.basicTextSearchLabel),
     testId: testId,
     value: searchTerm
-  });
+  }));
 };
 exports.BasicSearchInput = BasicSearchInput;

package/dist/cjs/ui/jira-issues-modal/jira-search-container/index.js

@@ -27,7 +27,8 @@ var inputContainerStyles = (0, _react2.css)({
 });
 var DEFAULT_JQL_QUERY = 'created >= -30d order by created DESC';
 var JiraSearchContainer = function JiraSearchContainer(props) {
-  var parameters = props.parameters,
+  var isSearching = props.isSearching,
+    parameters = props.parameters,
     onSearch = props.onSearch;
   var _ref = parameters || {},
     cloudId = _ref.cloudId,
@@ -93,11 +94,13 @@ var JiraSearchContainer = function JiraSearchContainer(props) {
   return (0, _react2.jsx)("div", {
     css: inputContainerStyles
   }, currentSearchMode === basicModeValue && (0, _react2.jsx)(_basicSearchInput.BasicSearchInput, {
+    isSearching: isSearching,
     onChange: handleBasicSearchChange,
     onSearch: handleSearch,
     searchTerm: basicSearchTerm
   }), currentSearchMode === jqlModeValue && (0, _react2.jsx)(_jqlEditor.JiraJQLEditor, {
     cloudId: cloudId || '',
+    isSearching: isSearching,
     onChange: onQueryChange,
     onSearch: handleSearch,
     query: jql

package/dist/cjs/ui/jira-issues-modal/jql-editor/index.js

@@ -14,6 +14,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var JiraJQLEditor = function JiraJQLEditor(props) {
   var cloudId = props.cloudId,
+    isSearching = props.isSearching,
     onChange = props.onChange,
     onSearch = props.onSearch,
     query = props.query;
@@ -34,6 +35,7 @@ var JiraJQLEditor = function JiraJQLEditor(props) {
     autocompleteProvider: autocompleteProvider,
     onSearch: onSearch,
     onUpdate: onChange,
+    isSearching: isSearching,
     inputRef: inputRef,
     query: query
   });

package/dist/cjs/ui/jira-issues-modal/modal/index.js

@@ -236,15 +236,16 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
     }
   }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status]);
   var renderIssuesModeContent = (0, _react.useCallback)(function () {
-    if (status === 'empty') {
-      return (0, _react2.jsx)(_issueLikeTable.EmptyState, {
-        testId: "jira-jql-datasource-modal--empty-state"
+    if (status === 'rejected' && jqlUrl) {
+      return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, {
+        url: jqlUrl
       });
     } else if (resolvedWithNoResults) {
       return (0, _react2.jsx)(_noResults.NoResults, null);
-    } else if (status === 'rejected' && jqlUrl) {
-      return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, {
-        url: jqlUrl
+      // persist the empty state when making the initial /data request which contains the columns
+    } else if (status === 'empty' || !columns.length) {
+      return (0, _react2.jsx)(_issueLikeTable.EmptyState, {
+        testId: "jira-jql-datasource-modal--empty-state"
       });
     }
     var firstIssueUrl = retrieveUrlForSmartCardRender();
@@ -256,7 +257,7 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
       }));
     }
     return issueLikeDataTableView;
-  }, [issueLikeDataTableView, jqlUrl, responseItems.length, resolvedWithNoResults, retrieveUrlForSmartCardRender, status]);
+  }, [status, columns.length, resolvedWithNoResults, jqlUrl, retrieveUrlForSmartCardRender, responseItems.length, issueLikeDataTableView]);
   return (0, _react2.jsx)(_reactIntlNext.IntlProvider, {
     locale: "en"
   }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, (0, _react2.jsx)(_modalDialog.default, {
@@ -287,6 +288,7 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
     onOptionValueChange: handleViewModeChange,
     selectedOptionValue: currentViewMode
   })), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_jiraSearchContainer.JiraSearchContainer, {
+    isSearching: status === 'loading',
     parameters: parameters,
     onSearch: onSearch
   }), (0, _react2.jsx)("div", {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.22.0",
+	"version": "0.23.0",
 	"sideEffects": false
 }

package/dist/es2019/ui/jira-issues-modal/basic-search-input/index.js

@@ -8,6 +8,9 @@ import { basicSearchInputMessages } from './messages';
 const searchButtonStyles = css({
   marginRight: "var(--ds-space-075, 6px)"
 });
+const formStyles = css({
+  flex: 1
+});
 export const BasicSearchInput = ({
   isDisabled,
   isSearching,
@@ -19,7 +22,14 @@ export const BasicSearchInput = ({
   const {
     formatMessage
   } = useIntl();
-  return jsx(Textfield, {
+  const handleFormSubmit = e => {
+    e.preventDefault();
+    onSearch(searchTerm);
+  };
+  return jsx("form", {
+    css: formStyles,
+    onSubmit: handleFormSubmit
+  }, jsx(Textfield, {
     elemAfterInput: jsx(LoadingButton, {
       appearance: "primary",
       css: searchButtonStyles,
@@ -38,5 +48,5 @@ export const BasicSearchInput = ({
     placeholder: formatMessage(basicSearchInputMessages.basicTextSearchLabel),
     testId: testId,
     value: searchTerm
-  });
+  }));
 };

package/dist/es2019/ui/jira-issues-modal/jira-search-container/index.js

@@ -16,6 +16,7 @@ const inputContainerStyles = css({
 const DEFAULT_JQL_QUERY = 'created >= -30d order by created DESC';
 export const JiraSearchContainer = props => {
   const {
+    isSearching,
     parameters,
     onSearch
   } = props;
@@ -68,11 +69,13 @@ export const JiraSearchContainer = props => {
   return jsx("div", {
     css: inputContainerStyles
   }, currentSearchMode === basicModeValue && jsx(BasicSearchInput, {
+    isSearching: isSearching,
     onChange: handleBasicSearchChange,
     onSearch: handleSearch,
     searchTerm: basicSearchTerm
   }), currentSearchMode === jqlModeValue && jsx(JiraJQLEditor, {
     cloudId: cloudId || '',
+    isSearching: isSearching,
     onChange: onQueryChange,
     onSearch: handleSearch,
     query: jql

package/dist/es2019/ui/jira-issues-modal/jql-editor/index.js

@@ -6,6 +6,7 @@ import { makeGetJqlSuggestionsData } from '../../../services/makeGetJqlSuggestio
 export const JiraJQLEditor = props => {
   const {
     cloudId,
+    isSearching,
     onChange,
     onSearch,
     query
@@ -27,6 +28,7 @@ export const JiraJQLEditor = props => {
     autocompleteProvider: autocompleteProvider,
     onSearch: onSearch,
     onUpdate: onChange,
+    isSearching: isSearching,
     inputRef: inputRef,
     query: query
   });

package/dist/es2019/ui/jira-issues-modal/modal/index.js

@@ -185,15 +185,16 @@ export const JiraIssuesConfigModal = props => {
     }
   }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status]);
   const renderIssuesModeContent = useCallback(() => {
-    if (status === 'empty') {
-      return jsx(EmptyState, {
-        testId: `jira-jql-datasource-modal--empty-state`
+    if (status === 'rejected' && jqlUrl) {
+      return jsx(ModalLoadingError, {
+        url: jqlUrl
       });
     } else if (resolvedWithNoResults) {
       return jsx(NoResults, null);
-    } else if (status === 'rejected' && jqlUrl) {
-      return jsx(ModalLoadingError, {
-        url: jqlUrl
+      // persist the empty state when making the initial /data request which contains the columns
+    } else if (status === 'empty' || !columns.length) {
+      return jsx(EmptyState, {
+        testId: `jira-jql-datasource-modal--empty-state`
       });
     }
     const firstIssueUrl = retrieveUrlForSmartCardRender();
@@ -205,7 +206,7 @@ export const JiraIssuesConfigModal = props => {
       }));
     }
     return issueLikeDataTableView;
-  }, [issueLikeDataTableView, jqlUrl, responseItems.length, resolvedWithNoResults, retrieveUrlForSmartCardRender, status]);
+  }, [status, columns.length, resolvedWithNoResults, jqlUrl, retrieveUrlForSmartCardRender, responseItems.length, issueLikeDataTableView]);
   return jsx(IntlProvider, {
     locale: "en"
   }, jsx(ModalTransition, null, jsx(Modal, {
@@ -236,6 +237,7 @@ export const JiraIssuesConfigModal = props => {
     onOptionValueChange: handleViewModeChange,
     selectedOptionValue: currentViewMode
   })), jsx(ModalBody, null, jsx(JiraSearchContainer, {
+    isSearching: status === 'loading',
     parameters: parameters,
     onSearch: onSearch
   }), jsx("div", {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.22.0",
+	"version": "0.23.0",
 	"sideEffects": false
 }

package/dist/esm/ui/jira-issues-modal/basic-search-input/index.js

@@ -8,6 +8,9 @@ import { basicSearchInputMessages } from './messages';
 var searchButtonStyles = css({
   marginRight: "var(--ds-space-075, 6px)"
 });
+var formStyles = css({
+  flex: 1
+});
 export var BasicSearchInput = function BasicSearchInput(_ref) {
   var isDisabled = _ref.isDisabled,
     isSearching = _ref.isSearching,
@@ -18,7 +21,14 @@ export var BasicSearchInput = function BasicSearchInput(_ref) {
     testId = _ref$testId === void 0 ? 'jira-jql-datasource-modal--basic-search-input' : _ref$testId;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  return jsx(Textfield, {
+  var handleFormSubmit = function handleFormSubmit(e) {
+    e.preventDefault();
+    onSearch(searchTerm);
+  };
+  return jsx("form", {
+    css: formStyles,
+    onSubmit: handleFormSubmit
+  }, jsx(Textfield, {
     elemAfterInput: jsx(LoadingButton, {
       appearance: "primary",
       css: searchButtonStyles,
@@ -39,5 +49,5 @@ export var BasicSearchInput = function BasicSearchInput(_ref) {
     placeholder: formatMessage(basicSearchInputMessages.basicTextSearchLabel),
     testId: testId,
     value: searchTerm
-  });
+  }));
 };

package/dist/esm/ui/jira-issues-modal/jira-search-container/index.js

@@ -16,7 +16,8 @@ var inputContainerStyles = css({
 });
 var DEFAULT_JQL_QUERY = 'created >= -30d order by created DESC';
 export var JiraSearchContainer = function JiraSearchContainer(props) {
-  var parameters = props.parameters,
+  var isSearching = props.isSearching,
+    parameters = props.parameters,
     onSearch = props.onSearch;
   var _ref = parameters || {},
     cloudId = _ref.cloudId,
@@ -82,11 +83,13 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
   return jsx("div", {
     css: inputContainerStyles
   }, currentSearchMode === basicModeValue && jsx(BasicSearchInput, {
+    isSearching: isSearching,
     onChange: handleBasicSearchChange,
     onSearch: handleSearch,
     searchTerm: basicSearchTerm
   }), currentSearchMode === jqlModeValue && jsx(JiraJQLEditor, {
     cloudId: cloudId || '',
+    isSearching: isSearching,
     onChange: onQueryChange,
     onSearch: handleSearch,
     query: jql

package/dist/esm/ui/jira-issues-modal/jql-editor/index.js

@@ -5,6 +5,7 @@ import { makeGetJqlAutocompleteData } from '../../../services/makeGetJqlAutocomp
 import { makeGetJqlSuggestionsData } from '../../../services/makeGetJqlSuggestionsData';
 export var JiraJQLEditor = function JiraJQLEditor(props) {
   var cloudId = props.cloudId,
+    isSearching = props.isSearching,
     onChange = props.onChange,
     onSearch = props.onSearch,
     query = props.query;
@@ -25,6 +26,7 @@ export var JiraJQLEditor = function JiraJQLEditor(props) {
     autocompleteProvider: autocompleteProvider,
     onSearch: onSearch,
     onUpdate: onChange,
+    isSearching: isSearching,
     inputRef: inputRef,
     query: query
   });

package/dist/esm/ui/jira-issues-modal/modal/index.js

@@ -225,15 +225,16 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
     }
   }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status]);
   var renderIssuesModeContent = useCallback(function () {
-    if (status === 'empty') {
-      return jsx(EmptyState, {
-        testId: "jira-jql-datasource-modal--empty-state"
+    if (status === 'rejected' && jqlUrl) {
+      return jsx(ModalLoadingError, {
+        url: jqlUrl
       });
     } else if (resolvedWithNoResults) {
       return jsx(NoResults, null);
-    } else if (status === 'rejected' && jqlUrl) {
-      return jsx(ModalLoadingError, {
-        url: jqlUrl
+      // persist the empty state when making the initial /data request which contains the columns
+    } else if (status === 'empty' || !columns.length) {
+      return jsx(EmptyState, {
+        testId: "jira-jql-datasource-modal--empty-state"
       });
     }
     var firstIssueUrl = retrieveUrlForSmartCardRender();
@@ -245,7 +246,7 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
       }));
     }
     return issueLikeDataTableView;
-  }, [issueLikeDataTableView, jqlUrl, responseItems.length, resolvedWithNoResults, retrieveUrlForSmartCardRender, status]);
+  }, [status, columns.length, resolvedWithNoResults, jqlUrl, retrieveUrlForSmartCardRender, responseItems.length, issueLikeDataTableView]);
   return jsx(IntlProvider, {
     locale: "en"
   }, jsx(ModalTransition, null, jsx(Modal, {
@@ -276,6 +277,7 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
     onOptionValueChange: handleViewModeChange,
     selectedOptionValue: currentViewMode
   })), jsx(ModalBody, null, jsx(JiraSearchContainer, {
+    isSearching: status === 'loading',
     parameters: parameters,
     onSearch: onSearch
   }), jsx("div", {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.22.0",
+	"version": "0.23.0",
 	"sideEffects": false
 }

package/dist/types/ui/jira-issues-modal/jira-search-container/index.d.ts

@@ -1,6 +1,7 @@
 import { jsx } from '@emotion/react';
 import { JiraIssueDatasourceParameters, JiraIssueDatasourceParametersQuery } from '../types';
 export interface SearchContainerProps {
+    isSearching?: boolean;
     onSearch: (query: JiraIssueDatasourceParametersQuery) => void;
     parameters?: JiraIssueDatasourceParameters;
 }

package/dist/types/ui/jira-issues-modal/jql-editor/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface JiraJQLEditorProps {
     cloudId: string;
+    isSearching?: boolean;
     onChange?: (query: string) => void;
     onSearch: (query: string) => void;
     query: string;

package/dist/types-ts4.5/ui/jira-issues-modal/jira-search-container/index.d.ts

@@ -1,6 +1,7 @@
 import { jsx } from '@emotion/react';
 import { JiraIssueDatasourceParameters, JiraIssueDatasourceParametersQuery } from '../types';
 export interface SearchContainerProps {
+    isSearching?: boolean;
     onSearch: (query: JiraIssueDatasourceParametersQuery) => void;
     parameters?: JiraIssueDatasourceParameters;
 }

package/dist/types-ts4.5/ui/jira-issues-modal/jql-editor/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface JiraJQLEditorProps {
     cloudId: string;
+    isSearching?: boolean;
     onChange?: (query: string) => void;
     onSearch: (query: string) => void;
     query: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/image": "^1.1.0",
     "@atlaskit/link-client-extension": "^1.2.0",
-    "@atlaskit/linking-common": "^2.14.0",
+    "@atlaskit/linking-common": "^2.15.0",
     "@atlaskit/linking-types": "^6.0.0",
     "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/modal-dialog": "^12.6.0",
@@ -63,7 +63,6 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
-    "@atlaskit/code": "^14.6.0",
     "@atlaskit/link-provider": "^1.6.0",
     "@atlaskit/link-test-helpers": "^4.0.0",
     "@atlaskit/ssr": "*",