@atlaskit/link-datasource 2.5.2 → 2.5.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/link-datasource
 
+## 2.5.3
+
+### Patch Changes
+
+- [#113477](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113477)
+  [`2c509c4c06447`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2c509c4c06447) -
+  Updated search count to be displayed from a common component with single i18n message string.
+
 ## 2.5.2
 
 ### Patch Changes

package/dist/cjs/ui/common/modal/search-count/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
+var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
+var _colors = require("@atlaskit/theme/colors");
+var _messages = require("../../../confluence-search-modal/modal/messages");
+var _messages2 = require("../../../jira-issues-modal/modal/messages");
+var _messages3 = require("../../../table-footer/messages");
+var _messages4 = require("./messages");
+var searchCountStyles = (0, _primitives.xcss)({
+  flex: 1
+});
+var TableSearchCount = function TableSearchCount(_ref) {
+  var url = _ref.url,
+    searchCount = _ref.searchCount,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'datasource-table-total-results-count' : _ref$testId,
+    _ref$prefixTextType = _ref.prefixTextType,
+    prefixTextType = _ref$prefixTextType === void 0 ? 'issue' : _ref$prefixTextType;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    testId: testId,
+    xcss: searchCountStyles,
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_linkUrl.default, {
+    href: url,
+    target: "_blank",
+    testId: "item-count-url"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      color: "var(--ds-text-accent-gray, ".concat(_colors.N800, ")"),
+      textDecoration: !url ? 'none' : ''
+    }
+  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+    level: "h200"
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.total-count-i18n-single-key') ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages4.searchCountMessages["".concat(prefixTextType, "CountText")], {
+    values: {
+      searchCount: searchCount
+    }
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedNumber, {
+    value: searchCount
+  }), ' ', prefixTextType === 'issue' && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages2.modalMessages.issueText, {
+    values: {
+      totalCount: searchCount
+    }
+  })), prefixTextType === 'result' && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.confluenceSearchModalMessages.searchCountText, {
+    values: {
+      totalCount: searchCount
+    }
+  })), prefixTextType === 'item' && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages3.footerMessages.itemText, {
+    values: {
+      itemCount: searchCount
+    }
+  }))))));
+};
+var _default = exports.default = TableSearchCount;

package/dist/cjs/ui/common/modal/search-count/messages.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.searchCountMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var searchCountMessages = exports.searchCountMessages = (0, _reactIntlNext.defineMessages)({
+  resultCountText: {
+    id: 'linkDataSource.search.configmodal.resultCountText',
+    description: 'Text that indicates the number of search results.',
+    defaultMessage: '{searchCount, plural, one {# result} other {# results}}'
+  },
+  issueCountText: {
+    id: 'linkDataSource.search.configmodal.issueCountText',
+    description: 'Text that indicates the number of jira issues in the search result.',
+    defaultMessage: '{searchCount, plural, one {# issue} other {# issues}}'
+  },
+  itemCountText: {
+    id: 'linkDataSource.search.configmodal.itemCountText',
+    description: 'Text that indicates the number of items in the search result.',
+    defaultMessage: '{searchCount, plural, one {# item} other {# items}}'
+  }
+});

package/dist/cjs/ui/confluence-search-modal/modal/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PlainConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
@@ -17,8 +16,6 @@ var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
 var _modalDialog = require("@atlaskit/modal-dialog");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
-var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
-var _colors = require("@atlaskit/theme/colors");
 var _analytics = require("../../../analytics");
 var _constants = require("../../../analytics/constants");
 var _types = require("../../../analytics/types");
@@ -39,6 +36,7 @@ var _contentContainer = require("../../common/modal/content-container");
 var _countViewSmartLink = require("../../common/modal/count-view-smart-link");
 var _datasourceModal = require("../../common/modal/datasource-modal");
 var _displayViewDropDown = require("../../common/modal/display-view-dropdown/display-view-drop-down");
+var _searchCount = _interopRequireDefault(require("../../common/modal/search-count"));
 var _siteSelector = require("../../common/modal/site-selector");
 var _issueLikeTable = require("../../issue-like-table");
 var _useColumnResize2 = require("../../issue-like-table/use-column-resize");
@@ -54,10 +52,6 @@ var inputContainerStyles = (0, _primitives.xcss)({
   display: 'flex',
   minHeight: '72px'
 });
-var searchCountStyles = (0, _primitives.xcss)({
-  flex: 1,
-  fontWeight: 600
-});
 var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConfigModal(props) {
   var datasourceId = props.datasourceId,
     initialColumnCustomSizes = props.columnCustomSizes,
@@ -442,25 +436,12 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     title: _messages.confluenceSearchModalMessages.noAccessToConfluenceSitesTitle,
     description: _messages.confluenceSearchModalMessages.noAccessToConfluenceSitesDescription,
     testId: 'no-confluence-instances-content'
-  })), (0, _react2.jsx)(_modalDialog.ModalFooter, null, shouldShowResultsCount && confluenceSearchUrl && (0, _react2.jsx)(_primitives.Box, {
-    testId: "confluence-search-datasource-modal-total-results-count",
-    xcss: searchCountStyles
-  }, (0, _react2.jsx)(_linkUrl.default, {
-    href: confluenceSearchUrl,
-    target: "_blank",
-    testId: "item-count-url"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      color: "var(--ds-text-accent-gray, ".concat(_colors.N800, ")")
-    }
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedNumber, {
-    value: totalCount
-  }), ' ', (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.confluenceSearchModalMessages.searchCountText, {
-    values: {
-      totalCount: totalCount
-    }
-  })))), (0, _react2.jsx)(_cancelButton.CancelButton, {
+  })), (0, _react2.jsx)(_modalDialog.ModalFooter, null, shouldShowResultsCount && confluenceSearchUrl && (0, _react2.jsx)(_searchCount.default, {
+    searchCount: totalCount,
+    url: confluenceSearchUrl,
+    prefixTextType: "result",
+    testId: "confluence-search-datasource-modal-total-results-count"
+  }), (0, _react2.jsx)(_cancelButton.CancelButton, {
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,
     testId: "confluence-search-modal--cancel-button"

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

@@ -16,8 +16,6 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
 var _modalDialog = require("@atlaskit/modal-dialog");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
-var _colors = require("@atlaskit/theme/colors");
 var _analytics = require("../../../analytics");
 var _constants = require("../../../analytics/constants");
 var _types = require("../../../analytics/types");
@@ -44,6 +42,7 @@ var _contentContainer = require("../../common/modal/content-container");
 var _countViewSmartLink = require("../../common/modal/count-view-smart-link");
 var _datasourceModal = require("../../common/modal/datasource-modal");
 var _displayViewDropDown = require("../../common/modal/display-view-dropdown/display-view-drop-down");
+var _searchCount = _interopRequireDefault(require("../../common/modal/search-count"));
 var _siteSelector = require("../../common/modal/site-selector");
 var _issueLikeTable = require("../../issue-like-table");
 var _useColumnResize2 = require("../../issue-like-table/use-column-resize");
@@ -56,10 +55,6 @@ var _jiraIssuesInitialStateSvg = require("./jira-issues-initial-state-svg");
 var _messages3 = require("./messages");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var issueCountStyles = (0, _react2.css)({
-  flex: 1,
-  fontWeight: 600
-});
 var getDisplayValue = function getDisplayValue(currentViewMode, itemCount) {
   if (currentViewMode === 'table') {
     return _types.DatasourceDisplay.DATASOURCE_TABLE;
@@ -481,25 +476,12 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     title: _messages.loadingErrorMessages.noAccessToJiraSitesTitle,
     description: _messages.loadingErrorMessages.noAccessToJiraSitesDescription,
     testId: "no-jira-instances-content"
-  })), (0, _react2.jsx)(_modalDialog.ModalFooter, null, shouldShowIssueCount && (0, _react2.jsx)("div", {
-    "data-testid": "jira-datasource-modal-total-issues-count",
-    css: issueCountStyles
-  }, (0, _react2.jsx)(_linkUrl.default, {
-    href: jqlUrl,
-    target: "_blank",
-    testId: "item-count-url"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      color: "var(--ds-text-accent-gray, ".concat(_colors.N800, ")")
-    }
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedNumber, {
-    value: totalCount
-  }), ' ', (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages3.modalMessages.issueText, {
-    values: {
-      totalCount: totalCount
-    }
-  })))), (0, _react2.jsx)(_cancelButton.CancelButton, {
+  })), (0, _react2.jsx)(_modalDialog.ModalFooter, null, shouldShowIssueCount && (0, _react2.jsx)(_searchCount.default, {
+    searchCount: totalCount,
+    url: jqlUrl,
+    prefixTextType: "issue",
+    testId: "jira-datasource-modal-total-issues-count"
+  }), (0, _react2.jsx)(_cancelButton.CancelButton, {
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,
     testId: "jira-datasource-modal--cancel-button"

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

@@ -5,18 +5,17 @@ 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 _react = require("react");
 var _react2 = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
-var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _refresh = _interopRequireDefault(require("@atlaskit/icon/glyph/refresh"));
-var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _assetsModal = require("../assets-modal");
+var _searchCount = _interopRequireDefault(require("../common/modal/search-count"));
 var _messages = require("./messages");
 var _poweredByJsmAssets = require("./powered-by-jsm-assets");
 var _syncInfo = require("./sync-info");
@@ -45,12 +44,6 @@ var TopBorderWrapper = _styled.default.div({
   padding: "var(--ds-space-250, 20px)".concat(" ", "var(--ds-space-0, 0px)")
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-var ItemCounterWrapper = _styled.default.div({
-  display: 'flex',
-  alignSelf: 'center'
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var SyncWrapper = _styled.default.div({
   display: 'flex',
@@ -85,27 +78,12 @@ var TableFooter = exports.TableFooter = function TableFooter(_ref) {
   // ensure correct positioning since 'justify-content: space-between' is used).
   return onRefresh || showItemCount ? (0, _react2.jsx)(FooterWrapper, {
     "data-testid": "table-footer"
-  }, (0, _react2.jsx)(TopBorderWrapper, null, (0, _react2.jsx)(ItemCounterWrapper, {
-    "data-testid": "item-count-wrapper"
-  }, showItemCount && (0, _react2.jsx)(_linkUrl.default, {
-    href: url,
-    target: "_blank",
-    testId: "item-count-url",
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      color: "var(--ds-text-accent-gray, ".concat(_colors.N800, ")"),
-      textDecoration: !url ? 'none' : ''
-    }
-  }, (0, _react2.jsx)(_heading.default, {
-    testId: "item-count",
-    level: "h200"
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedNumber, {
-    value: itemCount
-  }), ' ', (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.footerMessages.itemText, {
-    values: {
-      itemCount: itemCount
-    }
-  }))))), datasourceId === _assetsModal.ASSETS_LIST_OF_LINKS_DATASOURCE_ID ? (0, _react2.jsx)(_poweredByJsmAssets.PoweredByJSMAssets, {
+  }, (0, _react2.jsx)(TopBorderWrapper, null, showItemCount && (0, _react2.jsx)(_primitives.Flex, null, (0, _react2.jsx)(_searchCount.default, {
+    searchCount: itemCount,
+    url: url,
+    prefixTextType: "item",
+    testId: "item-count"
+  })), datasourceId === _assetsModal.ASSETS_LIST_OF_LINKS_DATASOURCE_ID ? (0, _react2.jsx)(_poweredByJsmAssets.PoweredByJSMAssets, {
     text: intl.formatMessage(_messages.footerMessages.powerByJSM)
   }) : null, (0, _react2.jsx)(SyncWrapper, null, onRefresh && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(SyncTextWrapper, {
     "data-testid": "sync-text"

package/dist/es2019/ui/common/modal/search-count/index.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage, FormattedNumber } from 'react-intl-next';
+import Heading from '@atlaskit/heading';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Flex, xcss } from '@atlaskit/primitives';
+import LinkUrl from '@atlaskit/smart-card/link-url';
+import { N800 } from '@atlaskit/theme/colors';
+import { confluenceSearchModalMessages } from '../../../confluence-search-modal/modal/messages';
+import { modalMessages } from '../../../jira-issues-modal/modal/messages';
+import { footerMessages } from '../../../table-footer/messages';
+import { searchCountMessages } from './messages';
+const searchCountStyles = xcss({
+  flex: 1
+});
+const TableSearchCount = ({
+  url,
+  searchCount,
+  testId = 'datasource-table-total-results-count',
+  prefixTextType = 'issue'
+}) => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    testId: testId,
+    xcss: searchCountStyles,
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(LinkUrl, {
+    href: url,
+    target: "_blank",
+    testId: "item-count-url"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      color: `var(--ds-text-accent-gray, ${N800})`,
+      textDecoration: !url ? 'none' : ''
+    }
+  }, /*#__PURE__*/React.createElement(Heading, {
+    level: "h200"
+  }, getBooleanFF('platform.linking-platform.datasource.total-count-i18n-single-key') ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, searchCountMessages[`${prefixTextType}CountText`], {
+    values: {
+      searchCount
+    }
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedNumber, {
+    value: searchCount
+  }), ' ', prefixTextType === 'issue' && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, modalMessages.issueText, {
+    values: {
+      totalCount: searchCount
+    }
+  })), prefixTextType === 'result' && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, confluenceSearchModalMessages.searchCountText, {
+    values: {
+      totalCount: searchCount
+    }
+  })), prefixTextType === 'item' && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, footerMessages.itemText, {
+    values: {
+      itemCount: searchCount
+    }
+  }))))));
+};
+export default TableSearchCount;

package/dist/es2019/ui/common/modal/search-count/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export const searchCountMessages = defineMessages({
+  resultCountText: {
+    id: 'linkDataSource.search.configmodal.resultCountText',
+    description: 'Text that indicates the number of search results.',
+    defaultMessage: '{searchCount, plural, one {# result} other {# results}}'
+  },
+  issueCountText: {
+    id: 'linkDataSource.search.configmodal.issueCountText',
+    description: 'Text that indicates the number of jira issues in the search result.',
+    defaultMessage: '{searchCount, plural, one {# issue} other {# issues}}'
+  },
+  itemCountText: {
+    id: 'linkDataSource.search.configmodal.itemCountText',
+    description: 'Text that indicates the number of items in the search result.',
+    defaultMessage: '{searchCount, plural, one {# item} other {# items}}'
+  }
+});

package/dist/es2019/ui/confluence-search-modal/modal/index.js

@@ -1,18 +1,15 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { FormattedMessage, FormattedNumber } from 'react-intl-next';
+import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
-import LinkUrl from '@atlaskit/smart-card/link-url';
-import { N800 } from '@atlaskit/theme/colors';
 import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
 import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay, DatasourceSearchMethod } from '../../../analytics/types';
@@ -33,6 +30,7 @@ import { ContentContainer } from '../../common/modal/content-container';
 import { SmartCardPlaceholder, SmartLink } from '../../common/modal/count-view-smart-link';
 import { DatasourceModal } from '../../common/modal/datasource-modal';
 import { DisplayViewDropDown } from '../../common/modal/display-view-dropdown/display-view-drop-down';
+import TableSearchCount from '../../common/modal/search-count';
 import { SiteSelector } from '../../common/modal/site-selector';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
 import { useColumnResize } from '../../issue-like-table/use-column-resize';
@@ -46,10 +44,6 @@ const inputContainerStyles = xcss({
   display: 'flex',
   minHeight: '72px'
 });
-const searchCountStyles = xcss({
-  flex: 1,
-  fontWeight: 600
-});
 export const PlainConfluenceSearchConfigModal = props => {
   const {
     datasourceId,
@@ -417,25 +411,12 @@ export const PlainConfluenceSearchConfigModal = props => {
     title: confluenceSearchModalMessages.noAccessToConfluenceSitesTitle,
     description: confluenceSearchModalMessages.noAccessToConfluenceSitesDescription,
     testId: 'no-confluence-instances-content'
-  })), jsx(ModalFooter, null, shouldShowResultsCount && confluenceSearchUrl && jsx(Box, {
-    testId: "confluence-search-datasource-modal-total-results-count",
-    xcss: searchCountStyles
-  }, jsx(LinkUrl, {
-    href: confluenceSearchUrl,
-    target: "_blank",
-    testId: "item-count-url"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      color: `var(--ds-text-accent-gray, ${N800})`
-    }
-  }, jsx(FormattedNumber, {
-    value: totalCount
-  }), ' ', jsx(FormattedMessage, _extends({}, confluenceSearchModalMessages.searchCountText, {
-    values: {
-      totalCount
-    }
-  })))), jsx(CancelButton, {
+  })), jsx(ModalFooter, null, shouldShowResultsCount && confluenceSearchUrl && jsx(TableSearchCount, {
+    searchCount: totalCount,
+    url: confluenceSearchUrl,
+    prefixTextType: "result",
+    testId: "confluence-search-datasource-modal-total-results-count"
+  }), jsx(CancelButton, {
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,
     testId: "confluence-search-modal--cancel-button"

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

@@ -3,15 +3,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { FormattedMessage, FormattedNumber } from 'react-intl-next';
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import LinkUrl from '@atlaskit/smart-card/link-url';
-import { N800 } from '@atlaskit/theme/colors';
 import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
 import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
@@ -38,6 +36,7 @@ import { ContentContainer } from '../../common/modal/content-container';
 import { SmartCardPlaceholder, SmartLink } from '../../common/modal/count-view-smart-link';
 import { DatasourceModal } from '../../common/modal/datasource-modal';
 import { DisplayViewDropDown } from '../../common/modal/display-view-dropdown/display-view-drop-down';
+import TableSearchCount from '../../common/modal/search-count';
 import { SiteSelector } from '../../common/modal/site-selector';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
 import { useColumnResize } from '../../issue-like-table/use-column-resize';
@@ -48,10 +47,6 @@ import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
 import { JiraSearchContainer } from '../jira-search-container';
 import { JiraInitialStateSVG } from './jira-issues-initial-state-svg';
 import { modalMessages } from './messages';
-const issueCountStyles = css({
-  flex: 1,
-  fontWeight: 600
-});
 const getDisplayValue = (currentViewMode, itemCount) => {
   if (currentViewMode === 'table') {
     return DatasourceDisplay.DATASOURCE_TABLE;
@@ -464,25 +459,12 @@ const PlainJiraIssuesConfigModal = props => {
     title: loadingErrorMessages.noAccessToJiraSitesTitle,
     description: loadingErrorMessages.noAccessToJiraSitesDescription,
     testId: `no-jira-instances-content`
-  })), jsx(ModalFooter, null, shouldShowIssueCount && jsx("div", {
-    "data-testid": "jira-datasource-modal-total-issues-count",
-    css: issueCountStyles
-  }, jsx(LinkUrl, {
-    href: jqlUrl,
-    target: "_blank",
-    testId: "item-count-url"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      color: `var(--ds-text-accent-gray, ${N800})`
-    }
-  }, jsx(FormattedNumber, {
-    value: totalCount
-  }), ' ', jsx(FormattedMessage, _extends({}, modalMessages.issueText, {
-    values: {
-      totalCount
-    }
-  })))), jsx(CancelButton, {
+  })), jsx(ModalFooter, null, shouldShowIssueCount && jsx(TableSearchCount, {
+    searchCount: totalCount,
+    url: jqlUrl,
+    prefixTextType: "issue",
+    testId: "jira-datasource-modal-total-issues-count"
+  }), jsx(CancelButton, {
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,
     testId: "jira-datasource-modal--cancel-button"

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { Fragment, useEffect, useState } from 'react';
 
@@ -6,13 +5,13 @@ import { Fragment, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl-next';
+import { FormattedMessage, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button';
-import Heading from '@atlaskit/heading';
 import RefreshIcon from '@atlaskit/icon/glyph/refresh';
-import LinkUrl from '@atlaskit/smart-card/link-url';
-import { N0, N40, N800, N90 } from '@atlaskit/theme/colors';
+import { Flex } from '@atlaskit/primitives';
+import { N0, N40, N90 } from '@atlaskit/theme/colors';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
+import TableSearchCount from '../common/modal/search-count';
 import { footerMessages } from './messages';
 import { PoweredByJSMAssets } from './powered-by-jsm-assets';
 import { SyncInfo } from './sync-info';
@@ -35,12 +34,6 @@ const TopBorderWrapper = styled.div({
   padding: `${"var(--ds-space-250, 20px)"} ${"var(--ds-space-0, 0px)"}`
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-const ItemCounterWrapper = styled.div({
-  display: 'flex',
-  alignSelf: 'center'
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const SyncWrapper = styled.div({
   display: 'flex',
@@ -73,27 +66,12 @@ export const TableFooter = ({
   // ensure correct positioning since 'justify-content: space-between' is used).
   return onRefresh || showItemCount ? jsx(FooterWrapper, {
     "data-testid": "table-footer"
-  }, jsx(TopBorderWrapper, null, jsx(ItemCounterWrapper, {
-    "data-testid": "item-count-wrapper"
-  }, showItemCount && jsx(LinkUrl, {
-    href: url,
-    target: "_blank",
-    testId: "item-count-url",
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      color: `var(--ds-text-accent-gray, ${N800})`,
-      textDecoration: !url ? 'none' : ''
-    }
-  }, jsx(Heading, {
-    testId: "item-count",
-    level: "h200"
-  }, jsx(FormattedNumber, {
-    value: itemCount
-  }), ' ', jsx(FormattedMessage, _extends({}, footerMessages.itemText, {
-    values: {
-      itemCount
-    }
-  }))))), datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID ? jsx(PoweredByJSMAssets, {
+  }, jsx(TopBorderWrapper, null, showItemCount && jsx(Flex, null, jsx(TableSearchCount, {
+    searchCount: itemCount,
+    url: url,
+    prefixTextType: "item",
+    testId: "item-count"
+  })), datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID ? jsx(PoweredByJSMAssets, {
     text: intl.formatMessage(footerMessages.powerByJSM)
   }) : null, jsx(SyncWrapper, null, onRefresh && jsx(Fragment, null, jsx(SyncTextWrapper, {
     "data-testid": "sync-text"

package/dist/esm/ui/common/modal/search-count/index.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage, FormattedNumber } from 'react-intl-next';
+import Heading from '@atlaskit/heading';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Flex, xcss } from '@atlaskit/primitives';
+import LinkUrl from '@atlaskit/smart-card/link-url';
+import { N800 } from '@atlaskit/theme/colors';
+import { confluenceSearchModalMessages } from '../../../confluence-search-modal/modal/messages';
+import { modalMessages } from '../../../jira-issues-modal/modal/messages';
+import { footerMessages } from '../../../table-footer/messages';
+import { searchCountMessages } from './messages';
+var searchCountStyles = xcss({
+  flex: 1
+});
+var TableSearchCount = function TableSearchCount(_ref) {
+  var url = _ref.url,
+    searchCount = _ref.searchCount,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'datasource-table-total-results-count' : _ref$testId,
+    _ref$prefixTextType = _ref.prefixTextType,
+    prefixTextType = _ref$prefixTextType === void 0 ? 'issue' : _ref$prefixTextType;
+  return /*#__PURE__*/React.createElement(Flex, {
+    testId: testId,
+    xcss: searchCountStyles,
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(LinkUrl, {
+    href: url,
+    target: "_blank",
+    testId: "item-count-url"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      color: "var(--ds-text-accent-gray, ".concat(N800, ")"),
+      textDecoration: !url ? 'none' : ''
+    }
+  }, /*#__PURE__*/React.createElement(Heading, {
+    level: "h200"
+  }, getBooleanFF('platform.linking-platform.datasource.total-count-i18n-single-key') ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, searchCountMessages["".concat(prefixTextType, "CountText")], {
+    values: {
+      searchCount: searchCount
+    }
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedNumber, {
+    value: searchCount
+  }), ' ', prefixTextType === 'issue' && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, modalMessages.issueText, {
+    values: {
+      totalCount: searchCount
+    }
+  })), prefixTextType === 'result' && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, confluenceSearchModalMessages.searchCountText, {
+    values: {
+      totalCount: searchCount
+    }
+  })), prefixTextType === 'item' && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, footerMessages.itemText, {
+    values: {
+      itemCount: searchCount
+    }
+  }))))));
+};
+export default TableSearchCount;

package/dist/esm/ui/common/modal/search-count/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export var searchCountMessages = defineMessages({
+  resultCountText: {
+    id: 'linkDataSource.search.configmodal.resultCountText',
+    description: 'Text that indicates the number of search results.',
+    defaultMessage: '{searchCount, plural, one {# result} other {# results}}'
+  },
+  issueCountText: {
+    id: 'linkDataSource.search.configmodal.issueCountText',
+    description: 'Text that indicates the number of jira issues in the search result.',
+    defaultMessage: '{searchCount, plural, one {# issue} other {# issues}}'
+  },
+  itemCountText: {
+    id: 'linkDataSource.search.configmodal.itemCountText',
+    description: 'Text that indicates the number of items in the search result.',
+    defaultMessage: '{searchCount, plural, one {# item} other {# items}}'
+  }
+});

package/dist/esm/ui/confluence-search-modal/modal/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -8,15 +7,13 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'rea
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { FormattedMessage, FormattedNumber } from 'react-intl-next';
+import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
-import LinkUrl from '@atlaskit/smart-card/link-url';
-import { N800 } from '@atlaskit/theme/colors';
 import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
 import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay, DatasourceSearchMethod } from '../../../analytics/types';
@@ -37,6 +34,7 @@ import { ContentContainer } from '../../common/modal/content-container';
 import { SmartCardPlaceholder, SmartLink } from '../../common/modal/count-view-smart-link';
 import { DatasourceModal } from '../../common/modal/datasource-modal';
 import { DisplayViewDropDown } from '../../common/modal/display-view-dropdown/display-view-drop-down';
+import TableSearchCount from '../../common/modal/search-count';
 import { SiteSelector } from '../../common/modal/site-selector';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
 import { useColumnResize } from '../../issue-like-table/use-column-resize';
@@ -50,10 +48,6 @@ var inputContainerStyles = xcss({
   display: 'flex',
   minHeight: '72px'
 });
-var searchCountStyles = xcss({
-  flex: 1,
-  fontWeight: 600
-});
 export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConfigModal(props) {
   var datasourceId = props.datasourceId,
     initialColumnCustomSizes = props.columnCustomSizes,
@@ -438,25 +432,12 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     title: confluenceSearchModalMessages.noAccessToConfluenceSitesTitle,
     description: confluenceSearchModalMessages.noAccessToConfluenceSitesDescription,
     testId: 'no-confluence-instances-content'
-  })), jsx(ModalFooter, null, shouldShowResultsCount && confluenceSearchUrl && jsx(Box, {
-    testId: "confluence-search-datasource-modal-total-results-count",
-    xcss: searchCountStyles
-  }, jsx(LinkUrl, {
-    href: confluenceSearchUrl,
-    target: "_blank",
-    testId: "item-count-url"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      color: "var(--ds-text-accent-gray, ".concat(N800, ")")
-    }
-  }, jsx(FormattedNumber, {
-    value: totalCount
-  }), ' ', jsx(FormattedMessage, _extends({}, confluenceSearchModalMessages.searchCountText, {
-    values: {
-      totalCount: totalCount
-    }
-  })))), jsx(CancelButton, {
+  })), jsx(ModalFooter, null, shouldShowResultsCount && confluenceSearchUrl && jsx(TableSearchCount, {
+    searchCount: totalCount,
+    url: confluenceSearchUrl,
+    prefixTextType: "result",
+    testId: "confluence-search-datasource-modal-total-results-count"
+  }), jsx(CancelButton, {
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,
     testId: "confluence-search-modal--cancel-button"

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

@@ -7,15 +7,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { FormattedMessage, FormattedNumber } from 'react-intl-next';
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import LinkUrl from '@atlaskit/smart-card/link-url';
-import { N800 } from '@atlaskit/theme/colors';
 import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
 import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
@@ -42,6 +40,7 @@ import { ContentContainer } from '../../common/modal/content-container';
 import { SmartCardPlaceholder, SmartLink } from '../../common/modal/count-view-smart-link';
 import { DatasourceModal } from '../../common/modal/datasource-modal';
 import { DisplayViewDropDown } from '../../common/modal/display-view-dropdown/display-view-drop-down';
+import TableSearchCount from '../../common/modal/search-count';
 import { SiteSelector } from '../../common/modal/site-selector';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
 import { useColumnResize } from '../../issue-like-table/use-column-resize';
@@ -52,10 +51,6 @@ import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
 import { JiraSearchContainer } from '../jira-search-container';
 import { JiraInitialStateSVG } from './jira-issues-initial-state-svg';
 import { modalMessages } from './messages';
-var issueCountStyles = css({
-  flex: 1,
-  fontWeight: 600
-});
 var getDisplayValue = function getDisplayValue(currentViewMode, itemCount) {
   if (currentViewMode === 'table') {
     return DatasourceDisplay.DATASOURCE_TABLE;
@@ -477,25 +472,12 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     title: loadingErrorMessages.noAccessToJiraSitesTitle,
     description: loadingErrorMessages.noAccessToJiraSitesDescription,
     testId: "no-jira-instances-content"
-  })), jsx(ModalFooter, null, shouldShowIssueCount && jsx("div", {
-    "data-testid": "jira-datasource-modal-total-issues-count",
-    css: issueCountStyles
-  }, jsx(LinkUrl, {
-    href: jqlUrl,
-    target: "_blank",
-    testId: "item-count-url"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      color: "var(--ds-text-accent-gray, ".concat(N800, ")")
-    }
-  }, jsx(FormattedNumber, {
-    value: totalCount
-  }), ' ', jsx(FormattedMessage, _extends({}, modalMessages.issueText, {
-    values: {
-      totalCount: totalCount
-    }
-  })))), jsx(CancelButton, {
+  })), jsx(ModalFooter, null, shouldShowIssueCount && jsx(TableSearchCount, {
+    searchCount: totalCount,
+    url: jqlUrl,
+    prefixTextType: "issue",
+    testId: "jira-datasource-modal-total-issues-count"
+  }), jsx(CancelButton, {
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,
     testId: "jira-datasource-modal--cancel-button"

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";
 /** @jsx jsx */
 import { Fragment, useEffect, useState } from 'react';
@@ -7,13 +6,13 @@ import { Fragment, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl-next';
+import { FormattedMessage, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button';
-import Heading from '@atlaskit/heading';
 import RefreshIcon from '@atlaskit/icon/glyph/refresh';
-import LinkUrl from '@atlaskit/smart-card/link-url';
-import { N0, N40, N800, N90 } from '@atlaskit/theme/colors';
+import { Flex } from '@atlaskit/primitives';
+import { N0, N40, N90 } from '@atlaskit/theme/colors';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
+import TableSearchCount from '../common/modal/search-count';
 import { footerMessages } from './messages';
 import { PoweredByJSMAssets } from './powered-by-jsm-assets';
 import { SyncInfo } from './sync-info';
@@ -36,12 +35,6 @@ var TopBorderWrapper = styled.div({
   padding: "var(--ds-space-250, 20px)".concat(" ", "var(--ds-space-0, 0px)")
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-var ItemCounterWrapper = styled.div({
-  display: 'flex',
-  alignSelf: 'center'
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 var SyncWrapper = styled.div({
   display: 'flex',
@@ -76,27 +69,12 @@ export var TableFooter = function TableFooter(_ref) {
   // ensure correct positioning since 'justify-content: space-between' is used).
   return onRefresh || showItemCount ? jsx(FooterWrapper, {
     "data-testid": "table-footer"
-  }, jsx(TopBorderWrapper, null, jsx(ItemCounterWrapper, {
-    "data-testid": "item-count-wrapper"
-  }, showItemCount && jsx(LinkUrl, {
-    href: url,
-    target: "_blank",
-    testId: "item-count-url",
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      color: "var(--ds-text-accent-gray, ".concat(N800, ")"),
-      textDecoration: !url ? 'none' : ''
-    }
-  }, jsx(Heading, {
-    testId: "item-count",
-    level: "h200"
-  }, jsx(FormattedNumber, {
-    value: itemCount
-  }), ' ', jsx(FormattedMessage, _extends({}, footerMessages.itemText, {
-    values: {
-      itemCount: itemCount
-    }
-  }))))), datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID ? jsx(PoweredByJSMAssets, {
+  }, jsx(TopBorderWrapper, null, showItemCount && jsx(Flex, null, jsx(TableSearchCount, {
+    searchCount: itemCount,
+    url: url,
+    prefixTextType: "item",
+    testId: "item-count"
+  })), datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID ? jsx(PoweredByJSMAssets, {
     text: intl.formatMessage(footerMessages.powerByJSM)
   }) : null, jsx(SyncWrapper, null, onRefresh && jsx(Fragment, null, jsx(SyncTextWrapper, {
     "data-testid": "sync-text"

package/dist/types/ui/common/modal/search-count/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface TableSearchCountProps {
+    url?: string;
+    prefixTextType: 'issue' | 'result' | 'item';
+    searchCount: number;
+    testId?: string;
+}
+declare const TableSearchCount: ({ url, searchCount, testId, prefixTextType, }: TableSearchCountProps) => JSX.Element;
+export default TableSearchCount;

package/dist/types/ui/common/modal/search-count/messages.d.ts

@@ -0,0 +1,17 @@
+export declare const searchCountMessages: {
+    resultCountText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    issueCountText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    itemCountText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/types-ts4.5/ui/common/modal/search-count/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface TableSearchCountProps {
+    url?: string;
+    prefixTextType: 'issue' | 'result' | 'item';
+    searchCount: number;
+    testId?: string;
+}
+declare const TableSearchCount: ({ url, searchCount, testId, prefixTextType, }: TableSearchCountProps) => JSX.Element;
+export default TableSearchCount;

package/dist/types-ts4.5/ui/common/modal/search-count/messages.d.ts

@@ -0,0 +1,17 @@
+export declare const searchCountMessages: {
+    resultCountText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    issueCountText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    itemCountText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "2.5.2",
+	"version": "2.5.3",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -158,6 +158,9 @@
 		"platform.linking-platform.datasource-assets_add_version_parameter": {
 			"type": "boolean"
 		},
+		"platform.linking-platform.datasource.total-count-i18n-single-key": {
+			"type": "boolean"
+		},
 		"platform.linking-platform.datasource-assets_update_refresh_button_dt3qk": {
 			"type": "boolean"
 		},