@atlaskit/link-datasource 1.24.6 → 1.24.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/ui/assets-modal/modal/render-assets-content/initial-state-view/index.js +2 -1
  3. package/dist/cjs/ui/common/error-state/access-required.js +2 -1
  4. package/dist/cjs/ui/common/error-state/loading-error.js +2 -1
  5. package/dist/cjs/ui/common/error-state/messages.js +0 -11
  6. package/dist/cjs/ui/common/error-state/modal-loading-error.js +5 -13
  7. package/dist/cjs/ui/common/error-state/no-instances.js +2 -1
  8. package/dist/cjs/ui/common/error-state/no-results.js +2 -1
  9. package/dist/cjs/ui/common/initial-state-view/index.js +2 -1
  10. package/dist/cjs/ui/common/modal/content-container/index.js +35 -0
  11. package/dist/cjs/ui/confluence-search-modal/confluence-search-container/index.js +48 -0
  12. package/dist/cjs/ui/confluence-search-modal/confluence-search-container/messages.js +14 -0
  13. package/dist/cjs/ui/confluence-search-modal/modal/index.js +206 -42
  14. package/dist/cjs/ui/confluence-search-modal/modal/messages.js +4 -4
  15. package/dist/cjs/ui/confluence-search-modal/types.js +5 -0
  16. package/dist/cjs/ui/issue-like-table/column-picker/concatenated-menu-list.js +2 -1
  17. package/dist/cjs/ui/issue-like-table/drag-column-preview.js +2 -1
  18. package/dist/cjs/ui/issue-like-table/index.js +4 -1
  19. package/dist/cjs/ui/issue-like-table/styled.js +2 -1
  20. package/dist/cjs/ui/jira-issues-modal/modal/index.js +14 -21
  21. package/dist/cjs/ui/jira-issues-modal/modal/messages.js +5 -0
  22. package/dist/cjs/ui/jira-issues-modal/mode-switcher/index.js +1 -0
  23. package/dist/es2019/ui/assets-modal/modal/render-assets-content/initial-state-view/index.js +2 -1
  24. package/dist/es2019/ui/common/error-state/access-required.js +2 -1
  25. package/dist/es2019/ui/common/error-state/loading-error.js +2 -1
  26. package/dist/es2019/ui/common/error-state/messages.js +0 -11
  27. package/dist/es2019/ui/common/error-state/modal-loading-error.js +4 -10
  28. package/dist/es2019/ui/common/error-state/no-instances.js +2 -1
  29. package/dist/es2019/ui/common/error-state/no-results.js +2 -1
  30. package/dist/es2019/ui/common/initial-state-view/index.js +2 -1
  31. package/dist/es2019/ui/common/modal/content-container/index.js +30 -0
  32. package/dist/es2019/ui/confluence-search-modal/confluence-search-container/index.js +35 -0
  33. package/dist/es2019/ui/confluence-search-modal/confluence-search-container/messages.js +8 -0
  34. package/dist/es2019/ui/confluence-search-modal/modal/index.js +191 -41
  35. package/dist/es2019/ui/confluence-search-modal/modal/messages.js +4 -4
  36. package/dist/es2019/ui/confluence-search-modal/types.js +1 -0
  37. package/dist/es2019/ui/issue-like-table/column-picker/concatenated-menu-list.js +2 -1
  38. package/dist/es2019/ui/issue-like-table/drag-column-preview.js +2 -1
  39. package/dist/es2019/ui/issue-like-table/index.js +7 -1
  40. package/dist/es2019/ui/issue-like-table/styled.js +2 -1
  41. package/dist/es2019/ui/jira-issues-modal/modal/index.js +14 -23
  42. package/dist/es2019/ui/jira-issues-modal/modal/messages.js +5 -0
  43. package/dist/es2019/ui/jira-issues-modal/mode-switcher/index.js +1 -0
  44. package/dist/esm/ui/assets-modal/modal/render-assets-content/initial-state-view/index.js +2 -1
  45. package/dist/esm/ui/common/error-state/access-required.js +2 -1
  46. package/dist/esm/ui/common/error-state/loading-error.js +2 -1
  47. package/dist/esm/ui/common/error-state/messages.js +0 -11
  48. package/dist/esm/ui/common/error-state/modal-loading-error.js +5 -12
  49. package/dist/esm/ui/common/error-state/no-instances.js +2 -1
  50. package/dist/esm/ui/common/error-state/no-results.js +2 -1
  51. package/dist/esm/ui/common/initial-state-view/index.js +2 -1
  52. package/dist/esm/ui/common/modal/content-container/index.js +29 -0
  53. package/dist/esm/ui/confluence-search-modal/confluence-search-container/index.js +38 -0
  54. package/dist/esm/ui/confluence-search-modal/confluence-search-container/messages.js +8 -0
  55. package/dist/esm/ui/confluence-search-modal/modal/index.js +210 -44
  56. package/dist/esm/ui/confluence-search-modal/modal/messages.js +4 -4
  57. package/dist/esm/ui/confluence-search-modal/types.js +1 -0
  58. package/dist/esm/ui/issue-like-table/column-picker/concatenated-menu-list.js +2 -1
  59. package/dist/esm/ui/issue-like-table/drag-column-preview.js +2 -1
  60. package/dist/esm/ui/issue-like-table/index.js +4 -1
  61. package/dist/esm/ui/issue-like-table/styled.js +2 -1
  62. package/dist/esm/ui/jira-issues-modal/modal/index.js +16 -23
  63. package/dist/esm/ui/jira-issues-modal/modal/messages.js +5 -0
  64. package/dist/esm/ui/jira-issues-modal/mode-switcher/index.js +1 -0
  65. package/dist/types/common/types.d.ts +3 -6
  66. package/dist/types/ui/common/error-state/messages.d.ts +0 -10
  67. package/dist/types/ui/common/error-state/modal-loading-error.d.ts +3 -2
  68. package/dist/types/ui/common/modal/content-container/index.d.ts +8 -0
  69. package/dist/types/ui/confluence-search-modal/confluence-search-container/index.d.ts +9 -0
  70. package/dist/types/ui/confluence-search-modal/confluence-search-container/messages.d.ts +7 -0
  71. package/dist/types/ui/confluence-search-modal/index.d.ts +2 -2
  72. package/dist/types/ui/confluence-search-modal/modal/index.d.ts +2 -2
  73. package/dist/types/ui/confluence-search-modal/modal/messages.d.ts +1 -1
  74. package/dist/types/ui/confluence-search-modal/types.d.ts +12 -0
  75. package/dist/types/ui/jira-issues-modal/index.d.ts +2 -2
  76. package/dist/types/ui/jira-issues-modal/modal/index.d.ts +3 -13
  77. package/dist/types/ui/jira-issues-modal/modal/messages.d.ts +5 -0
  78. package/dist/types/ui/jira-issues-modal/types.d.ts +5 -1
  79. package/dist/types-ts4.5/common/types.d.ts +3 -6
  80. package/dist/types-ts4.5/ui/common/error-state/messages.d.ts +0 -10
  81. package/dist/types-ts4.5/ui/common/error-state/modal-loading-error.d.ts +3 -2
  82. package/dist/types-ts4.5/ui/common/modal/content-container/index.d.ts +8 -0
  83. package/dist/types-ts4.5/ui/confluence-search-modal/confluence-search-container/index.d.ts +9 -0
  84. package/dist/types-ts4.5/ui/confluence-search-modal/confluence-search-container/messages.d.ts +7 -0
  85. package/dist/types-ts4.5/ui/confluence-search-modal/index.d.ts +2 -2
  86. package/dist/types-ts4.5/ui/confluence-search-modal/modal/index.d.ts +2 -2
  87. package/dist/types-ts4.5/ui/confluence-search-modal/modal/messages.d.ts +1 -1
  88. package/dist/types-ts4.5/ui/confluence-search-modal/types.d.ts +12 -0
  89. package/dist/types-ts4.5/ui/jira-issues-modal/index.d.ts +2 -2
  90. package/dist/types-ts4.5/ui/jira-issues-modal/modal/index.d.ts +3 -13
  91. package/dist/types-ts4.5/ui/jira-issues-modal/modal/messages.d.ts +5 -0
  92. package/dist/types-ts4.5/ui/jira-issues-modal/types.d.ts +5 -1
  93. package/examples-helpers/buildConfluenceSearchTable.tsx +77 -0
  94. package/examples-helpers/mockSmartLinkData.ts +44 -0
  95. package/examples-helpers/smartLinkCustomClient.ts +31 -20
  96. package/package.json +3 -3
@@ -10,13 +10,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
10
10
  var _react = require("@emotion/react");
11
11
  var _reactIntlNext = require("react-intl-next");
12
12
  var _select = require("@atlaskit/select");
13
+ var _typography = require("@atlaskit/theme/typography");
13
14
  var _messages = require("./messages");
14
15
  var _excluded = ["children"];
15
16
  /** @jsx jsx */
16
17
  var SELECT_ITEMS_MAXIMUM_THRESHOLD = exports.SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
17
18
  var messageStyles = (0, _react.css)({
18
19
  color: "var(--ds-text-subtle, #44546F)",
19
- font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
20
+ font: "var(--ds-font-body-small, ".concat(_typography.fontFallback.body.small, ")"),
20
21
  fontWeight: "var(--ds-font-weight-regular, 400)"
21
22
  });
22
23
  var ConcatenatedMenuList = exports.ConcatenatedMenuList = function ConcatenatedMenuList(_ref) {
@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
9
9
  var _react2 = require("@emotion/react");
10
10
  var _styled = _interopRequireDefault(require("@emotion/styled"));
11
11
  var _colors = require("@atlaskit/theme/colors");
12
+ var _typography = require("@atlaskit/theme/typography");
12
13
  var _styled2 = require("./styled");
13
14
  /** @jsx jsx */
14
15
 
@@ -35,7 +36,7 @@ var tableStyles = (0, _react2.css)({
35
36
  background: "var(--ds-surface, #FFF)",
36
37
  borderCollapse: 'separate',
37
38
  borderSpacing: 0,
38
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
39
+ font: "var(--ds-font-body, ".concat(_typography.fontFallback.body.medium, ")"),
39
40
  maxWidth: maxWidth
40
41
  });
41
42
  var DragColumnPreview = exports.DragColumnPreview = function DragColumnPreview(_ref) {
@@ -23,6 +23,7 @@ var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragma
23
23
  var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
24
24
  var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
25
25
  var _colors = require("@atlaskit/theme/colors");
26
+ var _typography = require("@atlaskit/theme/typography");
26
27
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
27
28
  var _ufoExperiences = require("../../analytics/ufoExperiences");
28
29
  var _zindex = require("../../common/zindex");
@@ -85,6 +86,8 @@ var TableCell = _styled.default.td((_styled$td = {}, (0, _defineProperty2.defaul
85
86
  }), (0, _defineProperty2.default)(_styled$td, "".concat((0, _styled2.withTablePluginBodyPrefix)('&:last-child')), {
86
87
  borderRight: 0,
87
88
  paddingRight: "var(--ds-space-100, 8px)"
89
+ }), (0, _defineProperty2.default)(_styled$td, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
90
+ whiteSpace: 'unset'
88
91
  }), _styled$td));
89
92
  var tableContainerStyles = (0, _react2.css)({
90
93
  borderRadius: 'inherit',
@@ -195,7 +198,7 @@ var noDefaultBorderStyles = (0, _react2.css)({
195
198
  borderBottom: 0
196
199
  });
197
200
  var headerStyles = (0, _react2.css)({
198
- font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
201
+ font: "var(--ds-font-body-UNSAFE_small, ".concat(_typography.fontFallback.body.UNSAFE_small, ")"),
199
202
  fontWeight: "var(--ds-font-weight-medium, 500)"
200
203
  });
201
204
  var headingHoverEffectStyles = (0, _react2.css)({
@@ -8,9 +8,10 @@ exports.withTablePluginPrefix = exports.withTablePluginHeaderPrefix = exports.wi
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
10
10
  var _colors = require("@atlaskit/theme/colors");
11
+ var _typography = require("@atlaskit/theme/typography");
11
12
  var _styled$th;
12
13
  var ScrollableContainerHeight = exports.ScrollableContainerHeight = 590;
13
- var fieldTextFontSize = exports.fieldTextFontSize = "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)";
14
+ var fieldTextFontSize = exports.fieldTextFontSize = "var(--ds-font-body, ".concat(_typography.fontFallback.body.medium, ")");
14
15
  var Table = exports.Table = _styled.default.table({
15
16
  width: '100%'
16
17
  });
@@ -42,6 +42,7 @@ var _noInstances = require("../../common/error-state/no-instances");
42
42
  var _noResults = require("../../common/error-state/no-results");
43
43
  var _initialStateView = require("../../common/initial-state-view");
44
44
  var _messages2 = require("../../common/initial-state-view/messages");
45
+ var _contentContainer = require("../../common/modal/content-container");
45
46
  var _siteSelector = require("../../common/modal/site-selector");
46
47
  var _issueLikeTable = require("../../issue-like-table");
47
48
  var _link = _interopRequireDefault(require("../../issue-like-table/render-type/link"));
@@ -55,22 +56,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
55
56
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
56
57
  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; }
57
58
  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 */
58
- var tableContainerStyles = (0, _react2.css)({
59
- borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
60
- borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
61
- border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"))
62
- });
63
- var contentContainerStyles = (0, _react2.css)({
64
- display: 'grid',
65
- maxHeight: '420px',
66
- overflow: 'auto',
67
- borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")")),
68
- backgroundImage: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundImage,
69
- backgroundPosition: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundPosition,
70
- backgroundRepeat: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundRepeat,
71
- backgroundSize: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundSize,
72
- backgroundAttachment: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundAttachment
73
- });
74
59
  var placeholderSmartLinkStyles = (0, _react2.css)({
75
60
  backgroundColor: "var(--ds-surface-raised, ".concat(_colors.N0, ")"),
76
61
  borderRadius: "var(--ds-border-radius-200, 3px)",
@@ -475,8 +460,8 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
475
460
  setVisibleColumnKeys(newVisibleColumnKeys);
476
461
  }, [visibleColumnKeys]);
477
462
  var issueLikeDataTableView = (0, _react.useMemo)(function () {
478
- return (0, _react2.jsx)("div", {
479
- css: [tableContainerStyles, contentContainerStyles]
463
+ return (0, _react2.jsx)(_contentContainer.ContentContainer, {
464
+ withTableBorder: true
480
465
  }, (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
481
466
  testId: "jira-datasource-table",
482
467
  status: status,
@@ -526,7 +511,15 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
526
511
  var selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
527
512
  if (status === 'rejected' && jqlUrl) {
528
513
  return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, {
529
- url: jqlUrl
514
+ errorMessage: jqlUrl ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages3.modalMessages.checkConnectionWithSource, {
515
+ values: {
516
+ a: function a(urlText) {
517
+ return (0, _react2.jsx)("a", {
518
+ href: jqlUrl
519
+ }, urlText);
520
+ }
521
+ }
522
+ })) : undefined
530
523
  });
531
524
  } else if (status === 'unauthorized') {
532
525
  return (0, _react2.jsx)(_accessRequired.AccessRequired, {
@@ -536,8 +529,8 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
536
529
  return (0, _react2.jsx)(_noResults.NoResults, null);
537
530
  } else if (status === 'empty' || !columns.length) {
538
531
  // persist the empty state when making the initial /data request which contains the columns
539
- return (0, _react2.jsx)("div", {
540
- css: [contentContainerStyles, !!jql && tableContainerStyles]
532
+ return (0, _react2.jsx)(_contentContainer.ContentContainer, {
533
+ withTableBorder: !!jql
541
534
  }, !!jql ? (0, _react2.jsx)(_issueLikeTable.EmptyState, {
542
535
  testId: "jira-datasource-modal--empty-state"
543
536
  }) : (0, _react2.jsx)(_initialStateView.InitialStateView, {
@@ -121,5 +121,10 @@ var modalMessages = exports.modalMessages = (0, _reactIntlNext.defineMessages)({
121
121
  id: 'linkDataSource.jira-issues.no.jira.sites.access.description',
122
122
  description: 'Description that shows in the modal when user has no access to any Jira sites',
123
123
  defaultMessage: 'To request access, contact your admin.'
124
+ },
125
+ checkConnectionWithSource: {
126
+ id: 'linkDataSource.jira-issues.checkConnectionWithSource',
127
+ description: 'Instructions to let the user know how to resolve the error that occured, or click the link provided to open the query in Jira',
128
+ defaultMessage: 'Check your connection and refresh, or <a>open this query in Jira</a> to review.'
124
129
  }
125
130
  });
@@ -88,6 +88,7 @@ var ModeSwitcher = exports.ModeSwitcher = function ModeSwitcher(props) {
88
88
  tooltipText = _ref.tooltipText;
89
89
  var isSelected = value === selectedOptionValue;
90
90
  return (0, _react2.jsx)(_tooltip.default, {
91
+ key: value,
91
92
  content: tooltipText
92
93
  }, function (tooltipProps) {
93
94
  return (0, _react2.jsx)("label", (0, _extends2.default)({}, tooltipProps, {
@@ -2,6 +2,7 @@
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import { useIntl } from 'react-intl-next';
5
+ import { fontFallback } from '@atlaskit/theme/typography';
5
6
  import { CrystalBallSVG } from './assets/crystal-ball-svg';
6
7
  import { initialStateViewMessages } from './messages';
7
8
  const initialStateViewContainerStyles = css({
@@ -14,7 +15,7 @@ const svgAndTextsWrapperStyles = css({
14
15
  alignSelf: 'center'
15
16
  });
16
17
  const searchTitleStyles = css({
17
- font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
18
+ font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`,
18
19
  paddingTop: "var(--ds-space-200, 16px)",
19
20
  paddingBottom: "var(--ds-space-100, 8px)"
20
21
  });
@@ -5,12 +5,13 @@ import { useIntl } from 'react-intl-next';
5
5
  import EmptyState from '@atlaskit/empty-state';
6
6
  import { Box, xcss } from '@atlaskit/primitives';
7
7
  import { N400 } from '@atlaskit/theme/colors';
8
+ import { fontFallback } from '@atlaskit/theme/typography';
8
9
  import { useDatasourceAnalyticsEvents } from '../../../analytics';
9
10
  import { AccessRequiredSVG } from './access-required-svg';
10
11
  import { loadingErrorMessages } from './messages';
11
12
  const urlStyles = css({
12
13
  color: `var(--ds-text-subtlest, ${N400})`,
13
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
14
+ font: `var(--ds-font-body, ${fontFallback.body.medium})`
14
15
  });
15
16
  const descriptionMessageStyles = css({
16
17
  display: 'flex',
@@ -3,6 +3,7 @@ import { useEffect } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import { FormattedMessage } from 'react-intl-next';
5
5
  import Button from '@atlaskit/button/standard-button';
6
+ import { fontFallback } from '@atlaskit/theme/typography';
6
7
  import { useDatasourceAnalyticsEvents } from '../../../analytics';
7
8
  import { LoadingErrorSVG } from './loading-error-svg';
8
9
  import { loadingErrorMessages } from './messages';
@@ -18,7 +19,7 @@ const errorMessageContainerStyles = css({
18
19
  placeItems: 'center'
19
20
  });
20
21
  const errorMessageStyles = css({
21
- font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
22
+ font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`
22
23
  });
23
24
  const errorDescriptionStyles = css({
24
25
  margin: 0
@@ -44,17 +44,6 @@ export const loadingErrorMessages = defineMessages({
44
44
  description: 'Instructions to let the user know how to resolve the network error that occurred or to try again at a different time',
45
45
  defaultMessage: 'Check your connection and refresh, or try again later.'
46
46
  },
47
- checkConnectionWithSourceDuplicate: {
48
- id: 'linkDataSource.checkConnectionWithSource',
49
- description: 'Instructions to let the user know how to resolve the error that occured, or click the link provided to open the query in Jira',
50
- defaultMessage: 'Check your connection and refresh, or <a>open this query in Jira</a> to review.'
51
- },
52
- //delete and remove duplicate from title above
53
- checkConnectionWithSource: {
54
- id: 'linkDataSource.jira-issues.checkConnectionWithSource',
55
- description: 'Instructions to let the user know how to resolve the error that occured, or click the link provided to open the query in Jira',
56
- defaultMessage: 'Check your connection and refresh, or <a>open this query in Jira</a> to review.'
57
- },
58
47
  noResultsFoundDuplicate: {
59
48
  id: 'linkDataSource.noResultsFound',
60
49
  description: 'Status message letting the user know their query did not have any results',
@@ -1,8 +1,8 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
1
  /** @jsx jsx */
3
2
  import { useEffect } from 'react';
4
3
  import { css, jsx } from '@emotion/react';
5
4
  import { FormattedMessage } from 'react-intl-next';
5
+ import { fontFallback } from '@atlaskit/theme/typography';
6
6
  import { useDatasourceAnalyticsEvents } from '../../../analytics';
7
7
  import { LoadingErrorSVG } from './loading-error-svg';
8
8
  import { loadingErrorMessages } from './messages';
@@ -18,13 +18,13 @@ const errorMessageContainerStyles = css({
18
18
  placeItems: 'center'
19
19
  });
20
20
  const errorMessageStyles = css({
21
- font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
21
+ font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`
22
22
  });
23
23
  const errorDescriptionStyles = css({
24
24
  margin: 0
25
25
  });
26
26
  export const ModalLoadingError = ({
27
- url
27
+ errorMessage = jsx(FormattedMessage, loadingErrorMessages.checkConnection)
28
28
  }) => {
29
29
  const {
30
30
  fireEvent
@@ -43,11 +43,5 @@ export const ModalLoadingError = ({
43
43
  css: errorMessageStyles
44
44
  }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadResults)), jsx("p", {
45
45
  css: errorDescriptionStyles
46
- }, url ? jsx(FormattedMessage, _extends({}, loadingErrorMessages.checkConnectionWithSource, {
47
- values: {
48
- a: chunk => jsx("a", {
49
- href: url
50
- }, chunk)
51
- }
52
- })) : jsx(FormattedMessage, loadingErrorMessages.checkConnection))));
46
+ }, errorMessage)));
53
47
  };
@@ -2,9 +2,10 @@
2
2
  import { css, jsx } from '@emotion/react';
3
3
  import { useIntl } from 'react-intl-next';
4
4
  import { Flex, xcss } from '@atlaskit/primitives';
5
+ import { fontFallback } from '@atlaskit/theme/typography';
5
6
  import { NoInstancesSvg } from './no-instances-svg';
6
7
  const titleStyles = css({
7
- font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
8
+ font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`,
8
9
  marginTop: "var(--ds-space-200, 16px)"
9
10
  });
10
11
  const descriptionStyles = css({
@@ -3,6 +3,7 @@ import { useEffect } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import { FormattedMessage } from 'react-intl-next';
5
5
  import Button from '@atlaskit/button/standard-button';
6
+ import { fontFallback } from '@atlaskit/theme/typography';
6
7
  import { useDatasourceAnalyticsEvents } from '../../../analytics';
7
8
  import { loadingErrorMessages } from './messages';
8
9
  const noResultsContainerStyles = css({
@@ -17,7 +18,7 @@ const noResultsMessageContainerStyles = css({
17
18
  placeItems: 'center'
18
19
  });
19
20
  const noResultsMessageStyles = css({
20
- font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
21
+ font: `var(--ds-font-heading-small, ${fontFallback.heading.small})`
21
22
  });
22
23
  export const NoResults = ({
23
24
  onRefresh
@@ -3,6 +3,7 @@ import { css, jsx } from '@emotion/react';
3
3
  import { FormattedMessage, useIntl } from 'react-intl-next';
4
4
  import Lozenge from '@atlaskit/lozenge';
5
5
  import { N300 } from '@atlaskit/theme/colors';
6
+ import { fontFallback } from '@atlaskit/theme/typography';
6
7
  import { initialStateViewMessages } from './messages';
7
8
  const initialStateViewContainerStyles = css({
8
9
  display: 'flex',
@@ -20,7 +21,7 @@ const betaTagStyles = css({
20
21
  });
21
22
  const searchTitleStyles = css({
22
23
  color: `var(--ds-text-subtlest, ${N300})`,
23
- font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
24
+ font: `var(--ds-font-heading-medium, ${fontFallback.heading.medium})`,
24
25
  paddingTop: "var(--ds-space-200, 16px)",
25
26
  paddingBottom: "var(--ds-space-100, 8px)",
26
27
  display: 'flex',
@@ -0,0 +1,30 @@
1
+ /** @jsx jsx */
2
+
3
+ import { jsx } from '@emotion/react';
4
+ import { Box, xcss } from '@atlaskit/primitives';
5
+ import { N40 } from '@atlaskit/theme/colors';
6
+ import { scrollableContainerShadowsCssComponents } from '../../../issue-like-table';
7
+ const contentContainerStyles = xcss({
8
+ display: 'grid',
9
+ maxHeight: '420px',
10
+ overflow: 'auto',
11
+ borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`,
12
+ backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
13
+ backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
14
+ backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
15
+ backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
16
+ backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
17
+ });
18
+ const tableContainerStyles = xcss({
19
+ borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
20
+ borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
21
+ border: `1px solid ${`var(--ds-border, ${N40})`}`
22
+ });
23
+ export const ContentContainer = ({
24
+ children,
25
+ withTableBorder
26
+ }) => {
27
+ return jsx(Box, {
28
+ xcss: [contentContainerStyles, withTableBorder && tableContainerStyles]
29
+ }, children);
30
+ };
@@ -0,0 +1,35 @@
1
+ import React, { useCallback, useEffect, useRef, useState } from 'react';
2
+ import { BasicSearchInput } from '../../common/modal/basic-search-input';
3
+ import { searchMessages } from './messages';
4
+ const ConfluenceSearchContainer = ({
5
+ cloudId,
6
+ initialSearchValue,
7
+ isSearching,
8
+ onSearch
9
+ }) => {
10
+ const currentCloudId = useRef(cloudId);
11
+ const [searchBarSearchString, setSearchBarSearchString] = useState(initialSearchValue !== null && initialSearchValue !== void 0 ? initialSearchValue : '');
12
+ const handleSearchChange = useCallback(e => {
13
+ const rawSearch = e.currentTarget.value;
14
+ setSearchBarSearchString(rawSearch);
15
+ }, []);
16
+
17
+ // TODO: further refactoring in EDM-9573
18
+ // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6827913
19
+ useEffect(() => {
20
+ if (currentCloudId.current !== cloudId) {
21
+ setSearchBarSearchString('');
22
+ currentCloudId.current = cloudId;
23
+ }
24
+ }, [cloudId]);
25
+ return /*#__PURE__*/React.createElement(BasicSearchInput, {
26
+ testId: "confluence-search-datasource-modal--search-input",
27
+ isSearching: isSearching,
28
+ onChange: handleSearchChange,
29
+ onSearch: onSearch,
30
+ searchTerm: searchBarSearchString,
31
+ placeholder: searchMessages.searchLabel,
32
+ fullWidth: true
33
+ });
34
+ };
35
+ export default ConfluenceSearchContainer;
@@ -0,0 +1,8 @@
1
+ import { defineMessages } from 'react-intl-next';
2
+ export const searchMessages = defineMessages({
3
+ searchLabel: {
4
+ id: 'linkDataSource.confluence-search.configmodal.searchLabel',
5
+ description: 'Placeholder text for the search input box',
6
+ defaultMessage: 'Enter keywords to find pages, attachments, and more'
7
+ }
8
+ });