@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.
- package/CHANGELOG.md +13 -0
- package/dist/cjs/ui/assets-modal/modal/render-assets-content/initial-state-view/index.js +2 -1
- package/dist/cjs/ui/common/error-state/access-required.js +2 -1
- package/dist/cjs/ui/common/error-state/loading-error.js +2 -1
- package/dist/cjs/ui/common/error-state/messages.js +0 -11
- package/dist/cjs/ui/common/error-state/modal-loading-error.js +5 -13
- package/dist/cjs/ui/common/error-state/no-instances.js +2 -1
- package/dist/cjs/ui/common/error-state/no-results.js +2 -1
- package/dist/cjs/ui/common/initial-state-view/index.js +2 -1
- package/dist/cjs/ui/common/modal/content-container/index.js +35 -0
- package/dist/cjs/ui/confluence-search-modal/confluence-search-container/index.js +48 -0
- package/dist/cjs/ui/confluence-search-modal/confluence-search-container/messages.js +14 -0
- package/dist/cjs/ui/confluence-search-modal/modal/index.js +206 -42
- package/dist/cjs/ui/confluence-search-modal/modal/messages.js +4 -4
- package/dist/cjs/ui/confluence-search-modal/types.js +5 -0
- package/dist/cjs/ui/issue-like-table/column-picker/concatenated-menu-list.js +2 -1
- package/dist/cjs/ui/issue-like-table/drag-column-preview.js +2 -1
- package/dist/cjs/ui/issue-like-table/index.js +4 -1
- package/dist/cjs/ui/issue-like-table/styled.js +2 -1
- package/dist/cjs/ui/jira-issues-modal/modal/index.js +14 -21
- package/dist/cjs/ui/jira-issues-modal/modal/messages.js +5 -0
- package/dist/cjs/ui/jira-issues-modal/mode-switcher/index.js +1 -0
- package/dist/es2019/ui/assets-modal/modal/render-assets-content/initial-state-view/index.js +2 -1
- package/dist/es2019/ui/common/error-state/access-required.js +2 -1
- package/dist/es2019/ui/common/error-state/loading-error.js +2 -1
- package/dist/es2019/ui/common/error-state/messages.js +0 -11
- package/dist/es2019/ui/common/error-state/modal-loading-error.js +4 -10
- package/dist/es2019/ui/common/error-state/no-instances.js +2 -1
- package/dist/es2019/ui/common/error-state/no-results.js +2 -1
- package/dist/es2019/ui/common/initial-state-view/index.js +2 -1
- package/dist/es2019/ui/common/modal/content-container/index.js +30 -0
- package/dist/es2019/ui/confluence-search-modal/confluence-search-container/index.js +35 -0
- package/dist/es2019/ui/confluence-search-modal/confluence-search-container/messages.js +8 -0
- package/dist/es2019/ui/confluence-search-modal/modal/index.js +191 -41
- package/dist/es2019/ui/confluence-search-modal/modal/messages.js +4 -4
- package/dist/es2019/ui/confluence-search-modal/types.js +1 -0
- package/dist/es2019/ui/issue-like-table/column-picker/concatenated-menu-list.js +2 -1
- package/dist/es2019/ui/issue-like-table/drag-column-preview.js +2 -1
- package/dist/es2019/ui/issue-like-table/index.js +7 -1
- package/dist/es2019/ui/issue-like-table/styled.js +2 -1
- package/dist/es2019/ui/jira-issues-modal/modal/index.js +14 -23
- package/dist/es2019/ui/jira-issues-modal/modal/messages.js +5 -0
- package/dist/es2019/ui/jira-issues-modal/mode-switcher/index.js +1 -0
- package/dist/esm/ui/assets-modal/modal/render-assets-content/initial-state-view/index.js +2 -1
- package/dist/esm/ui/common/error-state/access-required.js +2 -1
- package/dist/esm/ui/common/error-state/loading-error.js +2 -1
- package/dist/esm/ui/common/error-state/messages.js +0 -11
- package/dist/esm/ui/common/error-state/modal-loading-error.js +5 -12
- package/dist/esm/ui/common/error-state/no-instances.js +2 -1
- package/dist/esm/ui/common/error-state/no-results.js +2 -1
- package/dist/esm/ui/common/initial-state-view/index.js +2 -1
- package/dist/esm/ui/common/modal/content-container/index.js +29 -0
- package/dist/esm/ui/confluence-search-modal/confluence-search-container/index.js +38 -0
- package/dist/esm/ui/confluence-search-modal/confluence-search-container/messages.js +8 -0
- package/dist/esm/ui/confluence-search-modal/modal/index.js +210 -44
- package/dist/esm/ui/confluence-search-modal/modal/messages.js +4 -4
- package/dist/esm/ui/confluence-search-modal/types.js +1 -0
- package/dist/esm/ui/issue-like-table/column-picker/concatenated-menu-list.js +2 -1
- package/dist/esm/ui/issue-like-table/drag-column-preview.js +2 -1
- package/dist/esm/ui/issue-like-table/index.js +4 -1
- package/dist/esm/ui/issue-like-table/styled.js +2 -1
- package/dist/esm/ui/jira-issues-modal/modal/index.js +16 -23
- package/dist/esm/ui/jira-issues-modal/modal/messages.js +5 -0
- package/dist/esm/ui/jira-issues-modal/mode-switcher/index.js +1 -0
- package/dist/types/common/types.d.ts +3 -6
- package/dist/types/ui/common/error-state/messages.d.ts +0 -10
- package/dist/types/ui/common/error-state/modal-loading-error.d.ts +3 -2
- package/dist/types/ui/common/modal/content-container/index.d.ts +8 -0
- package/dist/types/ui/confluence-search-modal/confluence-search-container/index.d.ts +9 -0
- package/dist/types/ui/confluence-search-modal/confluence-search-container/messages.d.ts +7 -0
- package/dist/types/ui/confluence-search-modal/index.d.ts +2 -2
- package/dist/types/ui/confluence-search-modal/modal/index.d.ts +2 -2
- package/dist/types/ui/confluence-search-modal/modal/messages.d.ts +1 -1
- package/dist/types/ui/confluence-search-modal/types.d.ts +12 -0
- package/dist/types/ui/jira-issues-modal/index.d.ts +2 -2
- package/dist/types/ui/jira-issues-modal/modal/index.d.ts +3 -13
- package/dist/types/ui/jira-issues-modal/modal/messages.d.ts +5 -0
- package/dist/types/ui/jira-issues-modal/types.d.ts +5 -1
- package/dist/types-ts4.5/common/types.d.ts +3 -6
- package/dist/types-ts4.5/ui/common/error-state/messages.d.ts +0 -10
- package/dist/types-ts4.5/ui/common/error-state/modal-loading-error.d.ts +3 -2
- package/dist/types-ts4.5/ui/common/modal/content-container/index.d.ts +8 -0
- package/dist/types-ts4.5/ui/confluence-search-modal/confluence-search-container/index.d.ts +9 -0
- package/dist/types-ts4.5/ui/confluence-search-modal/confluence-search-container/messages.d.ts +7 -0
- package/dist/types-ts4.5/ui/confluence-search-modal/index.d.ts +2 -2
- package/dist/types-ts4.5/ui/confluence-search-modal/modal/index.d.ts +2 -2
- package/dist/types-ts4.5/ui/confluence-search-modal/modal/messages.d.ts +1 -1
- package/dist/types-ts4.5/ui/confluence-search-modal/types.d.ts +12 -0
- package/dist/types-ts4.5/ui/jira-issues-modal/index.d.ts +2 -2
- package/dist/types-ts4.5/ui/jira-issues-modal/modal/index.d.ts +3 -13
- package/dist/types-ts4.5/ui/jira-issues-modal/modal/messages.d.ts +5 -0
- package/dist/types-ts4.5/ui/jira-issues-modal/types.d.ts +5 -1
- package/examples-helpers/buildConfluenceSearchTable.tsx +77 -0
- package/examples-helpers/mockSmartLinkData.ts +44 -0
- package/examples-helpers/smartLinkCustomClient.ts +31 -20
- 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,
|
|
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,
|
|
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,
|
|
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,
|
|
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)(
|
|
479
|
-
|
|
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
|
-
|
|
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)(
|
|
540
|
-
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
-
|
|
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
|
-
},
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
+
});
|