@atlaskit/link-datasource 0.22.0 → 0.24.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-datasource
 
+## 0.24.0
+
+### Minor Changes
+
+- [`108aa0ad121`](https://bitbucket.org/atlassian/atlassian-frontend/commits/108aa0ad121) - [ux] Fix some table bugs such as inconsistency between issue count for modal/table and fix case where user can deselect all fields in the column picker
+
+## 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/issue-like-table/column-picker/index.js

@@ -87,6 +87,13 @@ var ColumnPicker = function ColumnPicker(_ref) {
     onOpen && void onOpen();
     void sortSelectedColumnsTop();
   }, [onOpen, sortSelectedColumnsTop]);
+
+  // If only 1 option is selected, disable it since we don't want user to uncheck everything
+  var handleIsOptionDisabled = function handleIsOptionDisabled(option, selectValue) {
+    return selectValue.length === 1 && selectValue.some(function (selectedValue) {
+      return selectedValue.value === option.value;
+    });
+  };
   return (0, _react2.jsx)(_select.PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',
@@ -99,6 +106,7 @@ var ColumnPicker = function ColumnPicker(_ref) {
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isMulti: true,
+    isOptionDisabled: handleIsOptionDisabled,
     placeholder: intl.formatMessage(_messages.columnPickerMessages.search),
     onKeyDown: stopEscapePropagationWhenOpen,
     "aria-label": "Search for fields",

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", {
@@ -297,8 +299,8 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
   }, (0, _react2.jsx)(_reactIntlNext.FormattedNumber, {
     value: totalCount
   }), ' ', (0, _react2.jsx)(_reactIntlNext.FormattedPlural, {
-    one: "issue",
-    other: "issues",
+    one: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.singularIssue),
+    other: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.pluralIssues),
     value: totalCount
   })), (0, _react2.jsx)(_standardButton.default, {
     appearance: "default",

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

@@ -37,9 +37,19 @@ var modalMessages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Count view'
   },
   issuesCountSmartCardPlaceholderText: {
-    id: 'linkDataSource.jira-issues.configmodal.issues',
+    id: 'linkDataSource.jira-issues.configmodal.placeholder.issues',
     description: 'Placeholder text that will be placed next to a count of jira issues',
     defaultMessage: '### Issues'
+  },
+  singularIssue: {
+    id: 'linkDataSource.jira-issues.configmodal.singular.issue',
+    description: 'Text that appears after single issue count number.',
+    defaultMessage: 'issue'
+  },
+  pluralIssues: {
+    id: 'linkDataSource.jira-issues.configmodal.plural.issues',
+    description: 'Text that appears after plural issue count number.',
+    defaultMessage: 'issues'
   }
 });
 exports.modalMessages = modalMessages;

package/dist/cjs/ui/table-footer/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableFooter = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("react");
@@ -46,12 +45,14 @@ var TableFooter = function TableFooter(_ref) {
     "data-testid": "table-footer"
   }, (0, _react2.jsx)(IssueCounterWrapper, null, showIssueCount && (0, _react2.jsx)(_heading.default, {
     testId: "issue-count",
-    level: 'h400'
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.footerMessages.issueText, {
-    values: {
-      issueCount: issueCount
-    }
-  })))), (0, _react2.jsx)(SyncWrapper, null, onRefresh && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(SyncTextWrapper, {
+    level: "h400"
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedNumber, {
+    value: issueCount
+  }), ' ', (0, _react2.jsx)(_reactIntlNext.FormattedPlural, {
+    one: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.footerMessages.singularIssue),
+    other: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.footerMessages.pluralIssues),
+    value: issueCount
+  }))), (0, _react2.jsx)(SyncWrapper, null, onRefresh && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(SyncTextWrapper, {
     "data-testid": "sync-text"
   }, isLoading ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.footerMessages.loadingText) : (0, _react2.jsx)(_syncInfo.SyncInfo, {
     lastSyncTime: lastSyncTime

package/dist/cjs/ui/table-footer/messages.js

@@ -6,10 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.footerMessages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var footerMessages = (0, _reactIntlNext.defineMessages)({
-  issueText: {
+  singularIssue: {
     id: 'linkDataSource.table-footer.issue',
-    description: 'Text that appears after issue count number if there is only 1 issue.',
-    defaultMessage: '{issueCount} {issueCount, plural, one {issue} other {issues}}'
+    description: 'Text that appears after single issue count number.',
+    defaultMessage: 'issue'
+  },
+  pluralIssues: {
+    id: 'linkDataSource.table-footer.issues',
+    description: 'Text that appears after plural issue count number.',
+    defaultMessage: 'issues'
   },
   loadingText: {
     id: 'linkDataSource.table-footer.loading',

package/dist/cjs/version.json

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

package/dist/es2019/ui/issue-like-table/column-picker/index.js

@@ -64,6 +64,11 @@ export const ColumnPicker = ({
     onOpen && void onOpen();
     void sortSelectedColumnsTop();
   }, [onOpen, sortSelectedColumnsTop]);
+
+  // If only 1 option is selected, disable it since we don't want user to uncheck everything
+  const handleIsOptionDisabled = (option, selectValue) => {
+    return selectValue.length === 1 && selectValue.some(selectedValue => selectedValue.value === option.value);
+  };
   return jsx(PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',
@@ -76,6 +81,7 @@ export const ColumnPicker = ({
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isMulti: true,
+    isOptionDisabled: handleIsOptionDisabled,
     placeholder: intl.formatMessage(columnPickerMessages.search),
     onKeyDown: stopEscapePropagationWhenOpen,
     "aria-label": "Search for fields",

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", {
@@ -246,8 +248,8 @@ export const JiraIssuesConfigModal = props => {
   }, jsx(FormattedNumber, {
     value: totalCount
   }), ' ', jsx(FormattedPlural, {
-    one: "issue",
-    other: "issues",
+    one: jsx(FormattedMessage, modalMessages.singularIssue),
+    other: jsx(FormattedMessage, modalMessages.pluralIssues),
     value: totalCount
   })), jsx(Button, {
     appearance: "default",

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

@@ -31,8 +31,18 @@ export const modalMessages = defineMessages({
     defaultMessage: 'Count view'
   },
   issuesCountSmartCardPlaceholderText: {
-    id: 'linkDataSource.jira-issues.configmodal.issues',
+    id: 'linkDataSource.jira-issues.configmodal.placeholder.issues',
     description: 'Placeholder text that will be placed next to a count of jira issues',
     defaultMessage: '### Issues'
+  },
+  singularIssue: {
+    id: 'linkDataSource.jira-issues.configmodal.singular.issue',
+    description: 'Text that appears after single issue count number.',
+    defaultMessage: 'issue'
+  },
+  pluralIssues: {
+    id: 'linkDataSource.jira-issues.configmodal.plural.issues',
+    description: 'Text that appears after plural issue count number.',
+    defaultMessage: 'issues'
   }
 });

package/dist/es2019/ui/table-footer/index.js

@@ -1,9 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { Fragment, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
 import styled from '@emotion/styled';
-import { FormattedMessage, useIntl } from 'react-intl-next';
+import { FormattedMessage, FormattedNumber, FormattedPlural, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import Heading from '@atlaskit/heading';
 import RefreshIcon from '@atlaskit/icon/glyph/refresh';
@@ -57,12 +56,14 @@ export const TableFooter = ({
     "data-testid": "table-footer"
   }, jsx(IssueCounterWrapper, null, showIssueCount && jsx(Heading, {
     testId: "issue-count",
-    level: 'h400'
-  }, jsx(FormattedMessage, _extends({}, footerMessages.issueText, {
-    values: {
-      issueCount
-    }
-  })))), jsx(SyncWrapper, null, onRefresh && jsx(Fragment, null, jsx(SyncTextWrapper, {
+    level: "h400"
+  }, jsx(FormattedNumber, {
+    value: issueCount
+  }), ' ', jsx(FormattedPlural, {
+    one: jsx(FormattedMessage, footerMessages.singularIssue),
+    other: jsx(FormattedMessage, footerMessages.pluralIssues),
+    value: issueCount
+  }))), jsx(SyncWrapper, null, onRefresh && jsx(Fragment, null, jsx(SyncTextWrapper, {
     "data-testid": "sync-text"
   }, isLoading ? jsx(FormattedMessage, footerMessages.loadingText) : jsx(SyncInfo, {
     lastSyncTime: lastSyncTime

package/dist/es2019/ui/table-footer/messages.js

@@ -1,9 +1,14 @@
 import { defineMessages } from 'react-intl-next';
 export const footerMessages = defineMessages({
-  issueText: {
+  singularIssue: {
     id: 'linkDataSource.table-footer.issue',
-    description: 'Text that appears after issue count number if there is only 1 issue.',
-    defaultMessage: '{issueCount} {issueCount, plural, one {issue} other {issues}}'
+    description: 'Text that appears after single issue count number.',
+    defaultMessage: 'issue'
+  },
+  pluralIssues: {
+    id: 'linkDataSource.table-footer.issues',
+    description: 'Text that appears after plural issue count number.',
+    defaultMessage: 'issues'
   },
   loadingText: {
     id: 'linkDataSource.table-footer.loading',

package/dist/es2019/version.json

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

package/dist/esm/ui/issue-like-table/column-picker/index.js

@@ -80,6 +80,13 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     onOpen && void onOpen();
     void sortSelectedColumnsTop();
   }, [onOpen, sortSelectedColumnsTop]);
+
+  // If only 1 option is selected, disable it since we don't want user to uncheck everything
+  var handleIsOptionDisabled = function handleIsOptionDisabled(option, selectValue) {
+    return selectValue.length === 1 && selectValue.some(function (selectedValue) {
+      return selectedValue.value === option.value;
+    });
+  };
   return jsx(PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',
@@ -92,6 +99,7 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isMulti: true,
+    isOptionDisabled: handleIsOptionDisabled,
     placeholder: intl.formatMessage(columnPickerMessages.search),
     onKeyDown: stopEscapePropagationWhenOpen,
     "aria-label": "Search for fields",

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", {
@@ -286,8 +288,8 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
   }, jsx(FormattedNumber, {
     value: totalCount
   }), ' ', jsx(FormattedPlural, {
-    one: "issue",
-    other: "issues",
+    one: jsx(FormattedMessage, modalMessages.singularIssue),
+    other: jsx(FormattedMessage, modalMessages.pluralIssues),
     value: totalCount
   })), jsx(Button, {
     appearance: "default",

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

@@ -31,8 +31,18 @@ export var modalMessages = defineMessages({
     defaultMessage: 'Count view'
   },
   issuesCountSmartCardPlaceholderText: {
-    id: 'linkDataSource.jira-issues.configmodal.issues',
+    id: 'linkDataSource.jira-issues.configmodal.placeholder.issues',
     description: 'Placeholder text that will be placed next to a count of jira issues',
     defaultMessage: '### Issues'
+  },
+  singularIssue: {
+    id: 'linkDataSource.jira-issues.configmodal.singular.issue',
+    description: 'Text that appears after single issue count number.',
+    defaultMessage: 'issue'
+  },
+  pluralIssues: {
+    id: 'linkDataSource.jira-issues.configmodal.plural.issues',
+    description: 'Text that appears after plural issue count number.',
+    defaultMessage: 'issues'
   }
 });

package/dist/esm/ui/table-footer/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -6,7 +5,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { Fragment, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
 import styled from '@emotion/styled';
-import { FormattedMessage, useIntl } from 'react-intl-next';
+import { FormattedMessage, FormattedNumber, FormattedPlural, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import Heading from '@atlaskit/heading';
 import RefreshIcon from '@atlaskit/icon/glyph/refresh';
@@ -39,12 +38,14 @@ export var TableFooter = function TableFooter(_ref) {
     "data-testid": "table-footer"
   }, jsx(IssueCounterWrapper, null, showIssueCount && jsx(Heading, {
     testId: "issue-count",
-    level: 'h400'
-  }, jsx(FormattedMessage, _extends({}, footerMessages.issueText, {
-    values: {
-      issueCount: issueCount
-    }
-  })))), jsx(SyncWrapper, null, onRefresh && jsx(Fragment, null, jsx(SyncTextWrapper, {
+    level: "h400"
+  }, jsx(FormattedNumber, {
+    value: issueCount
+  }), ' ', jsx(FormattedPlural, {
+    one: jsx(FormattedMessage, footerMessages.singularIssue),
+    other: jsx(FormattedMessage, footerMessages.pluralIssues),
+    value: issueCount
+  }))), jsx(SyncWrapper, null, onRefresh && jsx(Fragment, null, jsx(SyncTextWrapper, {
     "data-testid": "sync-text"
   }, isLoading ? jsx(FormattedMessage, footerMessages.loadingText) : jsx(SyncInfo, {
     lastSyncTime: lastSyncTime

package/dist/esm/ui/table-footer/messages.js

@@ -1,9 +1,14 @@
 import { defineMessages } from 'react-intl-next';
 export var footerMessages = defineMessages({
-  issueText: {
+  singularIssue: {
     id: 'linkDataSource.table-footer.issue',
-    description: 'Text that appears after issue count number if there is only 1 issue.',
-    defaultMessage: '{issueCount} {issueCount, plural, one {issue} other {issues}}'
+    description: 'Text that appears after single issue count number.',
+    defaultMessage: 'issue'
+  },
+  pluralIssues: {
+    id: 'linkDataSource.table-footer.issues',
+    description: 'Text that appears after plural issue count number.',
+    defaultMessage: 'issues'
   },
   loadingText: {
     id: 'linkDataSource.table-footer.loading',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.22.0",
+	"version": "0.24.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/ui/jira-issues-modal/modal/messages.d.ts

@@ -34,4 +34,14 @@ export declare const modalMessages: {
         description: string;
         defaultMessage: string;
     };
+    singularIssue: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    pluralIssues: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/dist/types/ui/table-footer/messages.d.ts

@@ -1,5 +1,10 @@
 export declare const footerMessages: {
-    issueText: {
+    singularIssue: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    pluralIssues: {
         id: string;
         description: string;
         defaultMessage: 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/dist/types-ts4.5/ui/jira-issues-modal/modal/messages.d.ts

@@ -34,4 +34,14 @@ export declare const modalMessages: {
         description: string;
         defaultMessage: string;
     };
+    singularIssue: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    pluralIssues: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/dist/types-ts4.5/ui/table-footer/messages.d.ts

@@ -1,5 +1,10 @@
 export declare const footerMessages: {
-    issueText: {
+    singularIssue: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    pluralIssues: {
         id: string;
         description: string;
         defaultMessage: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "0.22.0",
+  "version": "0.24.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": "*",