@atlaskit/link-datasource 0.21.1 → 0.21.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/link-datasource
 
+## 0.21.2
+
+### Patch Changes
+
+- [`105f0c7291b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/105f0c7291b) - [ux] Various bug fixes to jira issue modal
+- Updated dependencies
+
 ## 0.21.1
 
 ### Patch Changes

package/dist/cjs/hooks/useDatasourceTableState.js

@@ -46,8 +46,8 @@ var useDatasourceTableState = function useDatasourceTableState(_ref) {
     setColumns = _useState14[1];
   var _useState15 = (0, _react.useState)(undefined),
     _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-    totalIssueCount = _useState16[0],
-    setTotalIssueCount = _useState16[1];
+    totalCount = _useState16[0],
+    setTotalCount = _useState16[1];
   var _useDatasourceClientE = (0, _linkClientExtension.useDatasourceClientExtension)(),
     getDatasourceData = _useDatasourceClientE.getDatasourceData,
     getDatasourceDetails = _useDatasourceClientE.getDatasourceDetails;
@@ -108,7 +108,7 @@ var useDatasourceTableState = function useDatasourceTableState(_ref) {
       _yield$getDatasourceD,
       data,
       nextPageCursor,
-      totalIssues,
+      totalCount,
       schema,
       _args2 = arguments;
     return _regenerator.default.wrap(function _callee2$(_context2) {
@@ -136,9 +136,9 @@ var useDatasourceTableState = function useDatasourceTableState(_ref) {
           _yield$getDatasourceD = _context2.sent;
           data = _yield$getDatasourceD.data;
           nextPageCursor = _yield$getDatasourceD.nextPageCursor;
-          totalIssues = _yield$getDatasourceD.totalIssues;
+          totalCount = _yield$getDatasourceD.totalCount;
           schema = _yield$getDatasourceD.schema;
-          setTotalIssueCount(totalIssues);
+          setTotalCount(totalCount);
           setNextCursor(nextPageCursor);
           setResponseItems(function (currentResponseItems) {
             if (shouldRequestFirstPage) {
@@ -165,7 +165,7 @@ var useDatasourceTableState = function useDatasourceTableState(_ref) {
     setResponseItems([]);
     setHasNextPage(true);
     setNextCursor(undefined);
-    setTotalIssueCount(undefined);
+    setTotalCount(undefined);
     setLastRequestedFieldKeys([]);
   }, []);
 
@@ -204,7 +204,7 @@ var useDatasourceTableState = function useDatasourceTableState(_ref) {
     hasNextPage: hasNextPage,
     columns: columns,
     defaultVisibleColumnKeys: defaultVisibleColumnKeys,
-    totalIssueCount: totalIssueCount
+    totalCount: totalCount
   };
 };
 exports.useDatasourceTableState = useDatasourceTableState;

package/dist/cjs/ui/datasource-table-view/datasourceTableView.js

@@ -40,7 +40,7 @@ var DatasourceTableView = function DatasourceTableView(_ref) {
     hasNextPage = _useDatasourceTableSt.hasNextPage,
     columns = _useDatasourceTableSt.columns,
     defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
-    totalIssueCount = _useDatasourceTableSt.totalIssueCount,
+    totalCount = _useDatasourceTableSt.totalCount,
     loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails;
   (0, _react.useEffect)(function () {
     if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
@@ -60,7 +60,7 @@ var DatasourceTableView = function DatasourceTableView(_ref) {
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
     onVisibleColumnKeysChange: onVisibleColumnKeysChange
   }), (0, _react2.jsx)(_tableFooter.TableFooter, {
-    issueCount: totalIssueCount,
+    issueCount: totalCount,
     onRefresh: reset,
     isLoading: status === 'loading'
   })) : (0, _react2.jsx)(_spinner.default, {

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

@@ -78,6 +78,11 @@ var ColumnPicker = function ColumnPicker(_ref) {
     var sortedOptions = [].concat((0, _toConsumableArray2.default)(selectedOptions), (0, _toConsumableArray2.default)(nonSelectedOptions));
     sortedOptions.length > 0 && setAllOptions(sortedOptions);
   }, [allOptions, selectedOptions]);
+  var stopEscapePropagationWhenOpen = function stopEscapePropagationWhenOpen(e) {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+    }
+  };
   var handleOpen = (0, _react.useCallback)(function () {
     onOpen && void onOpen();
     void sortSelectedColumnsTop();
@@ -95,6 +100,7 @@ var ColumnPicker = function ColumnPicker(_ref) {
     hideSelectedOptions: false,
     isMulti: true,
     placeholder: intl.formatMessage(_messages.columnPickerMessages.search),
+    onKeyDown: stopEscapePropagationWhenOpen,
     "aria-label": "Search for fields",
     onChange: handleChange,
     isLoading: allOptions.length === 0,

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

@@ -20,8 +20,6 @@ var LazyJiraIssuesConfigModal = /*#__PURE__*/(0, _react.lazy)(function () {
     };
   });
 });
-
-//
 var JiraIssuesConfigModalWithWrappers = function JiraIssuesConfigModalWithWrappers(props) {
   return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: /*#__PURE__*/_react.default.createElement("div", {

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

@@ -25,6 +25,7 @@ var inputContainerStyles = (0, _react2.css)({
   gap: "var(--ds-space-250, 20px)",
   minHeight: '60px'
 });
+var DEFAULT_JQL_QUERY = 'created >= -30d order by created DESC';
 var JiraSearchContainer = function JiraSearchContainer(props) {
   var parameters = props.parameters,
     onSearch = props.onSearch;
@@ -43,7 +44,7 @@ var JiraSearchContainer = function JiraSearchContainer(props) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     currentSearchMode = _useState4[0],
     setCurrentSearchMode = _useState4[1];
-  var _useState5 = (0, _react.useState)(initialJql || ''),
+  var _useState5 = (0, _react.useState)(initialJql || DEFAULT_JQL_QUERY),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     jql = _useState6[0],
     setJql = _useState6[1];

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

@@ -43,6 +43,11 @@ var placeholderSmartLinkStyles = (0, _react2.css)({
   color: "var(--ds-text-brand, ".concat(_colors.B400, ")"),
   padding: '0px 2px'
 });
+var issueCountStyles = (0, _react2.css)({
+  color: "var(--ds-text-accent-gray, ".concat(_colors.N800, ")"),
+  flex: 1,
+  fontWeight: 600
+});
 var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
   var datasourceId = props.datasourceId,
     initialParameters = props.parameters,
@@ -88,7 +93,8 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
     hasNextPage = _useDatasourceTableSt.hasNextPage,
     columns = _useDatasourceTableSt.columns,
     defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
-    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails;
+    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
+    totalCount = _useDatasourceTableSt.totalCount;
   (0, _react.useEffect)(function () {
     var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     setVisibleColumnKeys(newVisibleColumnKeys);
@@ -153,7 +159,7 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
       onInsert({
         type: 'inlineCard',
         attrs: {
-          url: "".concat(selectedJiraSite.url, "/issues/").concat(encodeURI(jql))
+          url: "".concat(selectedJiraSite.url, "/issues/?jql=").concat(encodeURI(jql))
         }
       });
     } else if (responseItems.length === 1 && firstIssueUrl) {
@@ -263,7 +269,16 @@ var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
     onSearch: onSearch
   }), (0, _react2.jsx)("div", {
     css: contentContainerStyles
-  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_standardButton.default, {
+  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), (0, _react2.jsx)(_modalDialog.ModalFooter, null, !!totalCount && currentViewMode === 'issue' && (0, _react2.jsx)("div", {
+    "data-testid": "jira-jql-datasource-modal-total-issues-count",
+    css: issueCountStyles
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedNumber, {
+    value: totalCount
+  }), ' ', (0, _react2.jsx)(_reactIntlNext.FormattedPlural, {
+    one: "issue",
+    other: "issues",
+    value: totalCount
+  })), (0, _react2.jsx)(_standardButton.default, {
     appearance: "default",
     onClick: onCancel
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.cancelButtonText)), (0, _react2.jsx)(_standardButton.default, {

package/dist/cjs/version.json

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

package/dist/es2019/hooks/useDatasourceTableState.js

@@ -12,7 +12,7 @@ export const useDatasourceTableState = ({
   const [hasNextPage, setHasNextPage] = useState(true);
   const [nextCursor, setNextCursor] = useState(undefined);
   const [columns, setColumns] = useState([]);
-  const [totalIssueCount, setTotalIssueCount] = useState(undefined);
+  const [totalCount, setTotalCount] = useState(undefined);
   const {
     getDatasourceData,
     getDatasourceDetails
@@ -63,10 +63,10 @@ export const useDatasourceTableState = ({
     const {
       data,
       nextPageCursor,
-      totalIssues,
+      totalCount,
       schema
     } = await getDatasourceData(datasourceId, datasourceDataRequest);
-    setTotalIssueCount(totalIssues);
+    setTotalCount(totalCount);
     setNextCursor(nextPageCursor);
     setResponseItems(currentResponseItems => {
       if (shouldRequestFirstPage) {
@@ -88,7 +88,7 @@ export const useDatasourceTableState = ({
     setResponseItems([]);
     setHasNextPage(true);
     setNextCursor(undefined);
-    setTotalIssueCount(undefined);
+    setTotalCount(undefined);
     setLastRequestedFieldKeys([]);
   }, []);
 
@@ -125,6 +125,6 @@ export const useDatasourceTableState = ({
     hasNextPage,
     columns,
     defaultVisibleColumnKeys,
-    totalIssueCount
+    totalCount
   };
 };

package/dist/es2019/ui/datasource-table-view/datasourceTableView.js

@@ -29,7 +29,7 @@ export const DatasourceTableView = ({
     hasNextPage,
     columns,
     defaultVisibleColumnKeys,
-    totalIssueCount,
+    totalCount,
     loadDatasourceDetails
   } = useDatasourceTableState({
     datasourceId,
@@ -54,7 +54,7 @@ export const DatasourceTableView = ({
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
     onVisibleColumnKeysChange: onVisibleColumnKeysChange
   }), jsx(TableFooter, {
-    issueCount: totalIssueCount,
+    issueCount: totalCount,
     onRefresh: reset,
     isLoading: status === 'loading'
   })) : jsx(Spinner, {

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

@@ -55,6 +55,11 @@ export const ColumnPicker = ({
     const sortedOptions = [...selectedOptions, ...nonSelectedOptions];
     sortedOptions.length > 0 && setAllOptions(sortedOptions);
   }, [allOptions, selectedOptions]);
+  const stopEscapePropagationWhenOpen = e => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+    }
+  };
   const handleOpen = useCallback(() => {
     onOpen && void onOpen();
     void sortSelectedColumnsTop();
@@ -72,6 +77,7 @@ export const ColumnPicker = ({
     hideSelectedOptions: false,
     isMulti: true,
     placeholder: intl.formatMessage(columnPickerMessages.search),
+    onKeyDown: stopEscapePropagationWhenOpen,
     "aria-label": "Search for fields",
     onChange: handleChange,
     isLoading: allOptions.length === 0,

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

@@ -3,8 +3,6 @@ export const JIRA_LIST_OF_LINKS_DATASOURCE_ID = 'd8b75300-dfda-4519-b6cd-e49abbd
 const LazyJiraIssuesConfigModal = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_linkdatasource-jiraissuesmodal" */'./modal').then(module => ({
   default: module.JiraIssuesConfigModal
 })));
-
-//
 const JiraIssuesConfigModalWithWrappers = props => {
   return /*#__PURE__*/React.createElement(Suspense, {
     fallback: /*#__PURE__*/React.createElement("div", {

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

@@ -13,6 +13,7 @@ const inputContainerStyles = css({
   gap: "var(--ds-space-250, 20px)",
   minHeight: '60px'
 });
+const DEFAULT_JQL_QUERY = 'created >= -30d order by created DESC';
 export const JiraSearchContainer = props => {
   const {
     parameters,
@@ -29,7 +30,7 @@ export const JiraSearchContainer = props => {
   const jqlModeValue = 'jql';
   const [basicSearchTerm, setBasicSearchTerm] = useState('');
   const [currentSearchMode, setCurrentSearchMode] = useState(initialJql ? jqlModeValue : basicModeValue);
-  const [jql, setJql] = useState(initialJql || '');
+  const [jql, setJql] = useState(initialJql || DEFAULT_JQL_QUERY);
   const [orderKey, setOrderKey] = useState();
   const [orderDirection, setOrderDirection] = useState();
   const onSearchModeChange = searchMode => {

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

@@ -2,10 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
-import { FormattedMessage, IntlProvider, useIntl } from 'react-intl-next';
+import { FormattedMessage, FormattedNumber, FormattedPlural, IntlProvider, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
-import { B400, N0 } from '@atlaskit/theme/colors';
+import { B400, N0, N800 } from '@atlaskit/theme/colors';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
@@ -29,6 +29,11 @@ const placeholderSmartLinkStyles = css({
   color: `var(--ds-text-brand, ${B400})`,
   padding: '0px 2px'
 });
+const issueCountStyles = css({
+  color: `var(--ds-text-accent-gray, ${N800})`,
+  flex: 1,
+  fontWeight: 600
+});
 export const JiraIssuesConfigModal = props => {
   const {
     datasourceId,
@@ -55,7 +60,8 @@ export const JiraIssuesConfigModal = props => {
     hasNextPage,
     columns,
     defaultVisibleColumnKeys,
-    loadDatasourceDetails
+    loadDatasourceDetails,
+    totalCount
   } = useDatasourceTableState({
     datasourceId,
     parameters: isParametersSet ? parameters : undefined,
@@ -104,7 +110,7 @@ export const JiraIssuesConfigModal = props => {
       onInsert({
         type: 'inlineCard',
         attrs: {
-          url: `${selectedJiraSite.url}/issues/${encodeURI(jql)}`
+          url: `${selectedJiraSite.url}/issues/?jql=${encodeURI(jql)}`
         }
       });
     } else if (responseItems.length === 1 && firstIssueUrl) {
@@ -212,7 +218,16 @@ export const JiraIssuesConfigModal = props => {
     onSearch: onSearch
   }), jsx("div", {
     css: contentContainerStyles
-  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), jsx(ModalFooter, null, jsx(Button, {
+  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), jsx(ModalFooter, null, !!totalCount && currentViewMode === 'issue' && jsx("div", {
+    "data-testid": "jira-jql-datasource-modal-total-issues-count",
+    css: issueCountStyles
+  }, jsx(FormattedNumber, {
+    value: totalCount
+  }), ' ', jsx(FormattedPlural, {
+    one: "issue",
+    other: "issues",
+    value: totalCount
+  })), jsx(Button, {
     appearance: "default",
     onClick: onCancel
   }, jsx(FormattedMessage, modalMessages.cancelButtonText)), jsx(Button, {

package/dist/es2019/version.json

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

package/dist/esm/hooks/useDatasourceTableState.js

@@ -39,8 +39,8 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
     setColumns = _useState14[1];
   var _useState15 = useState(undefined),
     _useState16 = _slicedToArray(_useState15, 2),
-    totalIssueCount = _useState16[0],
-    setTotalIssueCount = _useState16[1];
+    totalCount = _useState16[0],
+    setTotalCount = _useState16[1];
   var _useDatasourceClientE = useDatasourceClientExtension(),
     getDatasourceData = _useDatasourceClientE.getDatasourceData,
     getDatasourceDetails = _useDatasourceClientE.getDatasourceDetails;
@@ -101,7 +101,7 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
       _yield$getDatasourceD,
       data,
       nextPageCursor,
-      totalIssues,
+      totalCount,
       schema,
       _args2 = arguments;
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -129,9 +129,9 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
           _yield$getDatasourceD = _context2.sent;
           data = _yield$getDatasourceD.data;
           nextPageCursor = _yield$getDatasourceD.nextPageCursor;
-          totalIssues = _yield$getDatasourceD.totalIssues;
+          totalCount = _yield$getDatasourceD.totalCount;
           schema = _yield$getDatasourceD.schema;
-          setTotalIssueCount(totalIssues);
+          setTotalCount(totalCount);
           setNextCursor(nextPageCursor);
           setResponseItems(function (currentResponseItems) {
             if (shouldRequestFirstPage) {
@@ -158,7 +158,7 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
     setResponseItems([]);
     setHasNextPage(true);
     setNextCursor(undefined);
-    setTotalIssueCount(undefined);
+    setTotalCount(undefined);
     setLastRequestedFieldKeys([]);
   }, []);
 
@@ -197,6 +197,6 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
     hasNextPage: hasNextPage,
     columns: columns,
     defaultVisibleColumnKeys: defaultVisibleColumnKeys,
-    totalIssueCount: totalIssueCount
+    totalCount: totalCount
   };
 };

package/dist/esm/ui/datasource-table-view/datasourceTableView.js

@@ -32,7 +32,7 @@ export var DatasourceTableView = function DatasourceTableView(_ref) {
     hasNextPage = _useDatasourceTableSt.hasNextPage,
     columns = _useDatasourceTableSt.columns,
     defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
-    totalIssueCount = _useDatasourceTableSt.totalIssueCount,
+    totalCount = _useDatasourceTableSt.totalCount,
     loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails;
   useEffect(function () {
     if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
@@ -52,7 +52,7 @@ export var DatasourceTableView = function DatasourceTableView(_ref) {
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
     onVisibleColumnKeysChange: onVisibleColumnKeysChange
   }), jsx(TableFooter, {
-    issueCount: totalIssueCount,
+    issueCount: totalCount,
     onRefresh: reset,
     isLoading: status === 'loading'
   })) : jsx(Spinner, {

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

@@ -71,6 +71,11 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     var sortedOptions = [].concat(_toConsumableArray(selectedOptions), _toConsumableArray(nonSelectedOptions));
     sortedOptions.length > 0 && setAllOptions(sortedOptions);
   }, [allOptions, selectedOptions]);
+  var stopEscapePropagationWhenOpen = function stopEscapePropagationWhenOpen(e) {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+    }
+  };
   var handleOpen = useCallback(function () {
     onOpen && void onOpen();
     void sortSelectedColumnsTop();
@@ -88,6 +93,7 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     hideSelectedOptions: false,
     isMulti: true,
     placeholder: intl.formatMessage(columnPickerMessages.search),
+    onKeyDown: stopEscapePropagationWhenOpen,
     "aria-label": "Search for fields",
     onChange: handleChange,
     isLoading: allOptions.length === 0,

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

@@ -7,8 +7,6 @@ var LazyJiraIssuesConfigModal = /*#__PURE__*/lazy(function () {
     };
   });
 });
-
-//
 var JiraIssuesConfigModalWithWrappers = function JiraIssuesConfigModalWithWrappers(props) {
   return /*#__PURE__*/React.createElement(Suspense, {
     fallback: /*#__PURE__*/React.createElement("div", {

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

@@ -14,6 +14,7 @@ var inputContainerStyles = css({
   gap: "var(--ds-space-250, 20px)",
   minHeight: '60px'
 });
+var DEFAULT_JQL_QUERY = 'created >= -30d order by created DESC';
 export var JiraSearchContainer = function JiraSearchContainer(props) {
   var parameters = props.parameters,
     onSearch = props.onSearch;
@@ -32,7 +33,7 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     currentSearchMode = _useState4[0],
     setCurrentSearchMode = _useState4[1];
-  var _useState5 = useState(initialJql || ''),
+  var _useState5 = useState(initialJql || DEFAULT_JQL_QUERY),
     _useState6 = _slicedToArray(_useState5, 2),
     jql = _useState6[0],
     setJql = _useState6[1];

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

@@ -5,10 +5,10 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
-import { FormattedMessage, IntlProvider, useIntl } from 'react-intl-next';
+import { FormattedMessage, FormattedNumber, FormattedPlural, IntlProvider, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
-import { B400, N0 } from '@atlaskit/theme/colors';
+import { B400, N0, N800 } from '@atlaskit/theme/colors';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
@@ -32,6 +32,11 @@ var placeholderSmartLinkStyles = css({
   color: "var(--ds-text-brand, ".concat(B400, ")"),
   padding: '0px 2px'
 });
+var issueCountStyles = css({
+  color: "var(--ds-text-accent-gray, ".concat(N800, ")"),
+  flex: 1,
+  fontWeight: 600
+});
 export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
   var datasourceId = props.datasourceId,
     initialParameters = props.parameters,
@@ -77,7 +82,8 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
     hasNextPage = _useDatasourceTableSt.hasNextPage,
     columns = _useDatasourceTableSt.columns,
     defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
-    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails;
+    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
+    totalCount = _useDatasourceTableSt.totalCount;
   useEffect(function () {
     var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     setVisibleColumnKeys(newVisibleColumnKeys);
@@ -142,7 +148,7 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
       onInsert({
         type: 'inlineCard',
         attrs: {
-          url: "".concat(selectedJiraSite.url, "/issues/").concat(encodeURI(jql))
+          url: "".concat(selectedJiraSite.url, "/issues/?jql=").concat(encodeURI(jql))
         }
       });
     } else if (responseItems.length === 1 && firstIssueUrl) {
@@ -252,7 +258,16 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
     onSearch: onSearch
   }), jsx("div", {
     css: contentContainerStyles
-  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), jsx(ModalFooter, null, jsx(Button, {
+  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), jsx(ModalFooter, null, !!totalCount && currentViewMode === 'issue' && jsx("div", {
+    "data-testid": "jira-jql-datasource-modal-total-issues-count",
+    css: issueCountStyles
+  }, jsx(FormattedNumber, {
+    value: totalCount
+  }), ' ', jsx(FormattedPlural, {
+    one: "issue",
+    other: "issues",
+    value: totalCount
+  })), jsx(Button, {
     appearance: "default",
     onClick: onCancel
   }, jsx(FormattedMessage, modalMessages.cancelButtonText)), jsx(Button, {

package/dist/esm/version.json

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

package/dist/types/hooks/useDatasourceTableState.d.ts

@@ -13,7 +13,7 @@ export interface DatasourceTableState {
     hasNextPage: boolean;
     columns: DatasourceResponseSchemaProperty[];
     defaultVisibleColumnKeys: string[];
-    totalIssueCount?: number;
+    totalCount?: number;
 }
 export interface DatasourceTableStateProps {
     datasourceId: string;

package/dist/types-ts4.5/hooks/useDatasourceTableState.d.ts

@@ -13,7 +13,7 @@ export interface DatasourceTableState {
     hasNextPage: boolean;
     columns: DatasourceResponseSchemaProperty[];
     defaultVisibleColumnKeys: string[];
-    totalIssueCount?: number;
+    totalCount?: number;
 }
 export interface DatasourceTableStateProps {
     datasourceId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "0.21.1",
+  "version": "0.21.2",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
     "@atlaskit/image": "^1.1.0",
     "@atlaskit/link-client-extension": "^1.2.0",
     "@atlaskit/linking-common": "^2.14.0",
-    "@atlaskit/linking-types": "^5.0.0",
+    "@atlaskit/linking-types": "^6.0.0",
     "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/modal-dialog": "^12.6.0",
     "@atlaskit/pragmatic-drag-and-drop": "^0.18.0",