@atlaskit/link-picker 1.10.3 → 1.11.0
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 +14 -0
- package/dist/cjs/common/analytics/experiences.js +62 -0
- package/dist/cjs/controllers/session-provider/index.js +61 -0
- package/dist/cjs/ui/error-boundary/error-boundary-base/index.js +76 -0
- package/dist/cjs/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.js +2 -2
- package/dist/cjs/ui/error-boundary/index.js +33 -81
- package/dist/cjs/ui/index.js +6 -9
- package/dist/cjs/ui/link-picker/index.js +28 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/common/analytics/experiences.js +39 -0
- package/dist/es2019/controllers/session-provider/index.js +32 -0
- package/dist/es2019/ui/error-boundary/error-boundary-base/index.js +37 -0
- package/dist/es2019/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.js +2 -2
- package/dist/es2019/ui/error-boundary/index.js +30 -59
- package/dist/es2019/ui/index.js +5 -8
- package/dist/es2019/ui/link-picker/index.js +24 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/common/analytics/experiences.js +40 -0
- package/dist/esm/controllers/session-provider/index.js +38 -0
- package/dist/esm/ui/error-boundary/error-boundary-base/index.js +56 -0
- package/dist/esm/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.js +2 -2
- package/dist/esm/ui/error-boundary/index.js +30 -79
- package/dist/esm/ui/index.js +5 -8
- package/dist/esm/ui/link-picker/index.js +25 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/common/analytics/experiences.d.ts +11 -0
- package/dist/types/controllers/session-provider/index.d.ts +10 -0
- package/dist/types/ui/error-boundary/error-boundary-base/index.d.ts +18 -0
- package/dist/types/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.d.ts +0 -0
- package/dist/types/ui/error-boundary/index.d.ts +4 -24
- package/dist/types/ui/link-picker/index.d.ts +5 -0
- package/dist/types-ts4.0/common/analytics/experiences.d.ts +11 -0
- package/dist/types-ts4.0/controllers/session-provider/index.d.ts +10 -0
- package/dist/types-ts4.0/ui/error-boundary/error-boundary-base/index.d.ts +18 -0
- package/dist/types-ts4.0/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.d.ts +0 -0
- package/dist/types-ts4.0/ui/error-boundary/index.d.ts +4 -24
- package/dist/types-ts4.0/ui/link-picker/index.d.ts +5 -0
- package/package.json +9 -5
- package/report.api.md +5 -0
|
@@ -1,62 +1,33 @@
|
|
|
1
|
-
import
|
|
2
|
-
import React, { Component } from 'react';
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
3
2
|
import { withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
4
3
|
import createEventPayload from '../../analytics.codegen';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
} = this.props;
|
|
33
|
-
const payload = {
|
|
34
|
-
error,
|
|
35
|
-
info
|
|
36
|
-
};
|
|
37
|
-
this.fireAnalytics(payload);
|
|
38
|
-
onError && onError(error, info);
|
|
39
|
-
this.setState({
|
|
40
|
-
hasError: true
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
render() {
|
|
45
|
-
const {
|
|
46
|
-
children,
|
|
47
|
-
ErrorComponent
|
|
48
|
-
} = this.props;
|
|
49
|
-
const {
|
|
50
|
-
hasError
|
|
51
|
-
} = this.state;
|
|
52
|
-
|
|
53
|
-
if (hasError && ErrorComponent) {
|
|
54
|
-
return /*#__PURE__*/React.createElement(ErrorComponent, null);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
return children;
|
|
58
|
-
}
|
|
59
|
-
|
|
4
|
+
import { ANALYTICS_CHANNEL } from '../../common/constants';
|
|
5
|
+
import { failUfoExperience, ufoExperience } from '../../common/analytics/experiences';
|
|
6
|
+
import { useLinkPickerSessionId } from '../../controllers/session-provider';
|
|
7
|
+
import { ErrorBoundaryFallback } from './error-boundary-fallback';
|
|
8
|
+
import { BaseErrorBoundary } from './error-boundary-base';
|
|
9
|
+
|
|
10
|
+
function ErrorBoundary({
|
|
11
|
+
children,
|
|
12
|
+
createAnalyticsEvent
|
|
13
|
+
}) {
|
|
14
|
+
const linkPickerSessionId = useLinkPickerSessionId();
|
|
15
|
+
const handleError = useCallback((error, info) => {
|
|
16
|
+
var _window, _window$navigator, _info$componentStack;
|
|
17
|
+
|
|
18
|
+
// Fire Analytics event
|
|
19
|
+
createAnalyticsEvent(createEventPayload('ui.linkPicker.unhandledErrorCaught', {
|
|
20
|
+
browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
|
|
21
|
+
error: error.toString(),
|
|
22
|
+
componentStack: (_info$componentStack = info === null || info === void 0 ? void 0 : info.componentStack) !== null && _info$componentStack !== void 0 ? _info$componentStack : ''
|
|
23
|
+
})).fire(ANALYTICS_CHANNEL); // Fire UFO failed experience
|
|
24
|
+
|
|
25
|
+
failUfoExperience(ufoExperience.mounted, linkPickerSessionId);
|
|
26
|
+
}, [createAnalyticsEvent, linkPickerSessionId]);
|
|
27
|
+
return /*#__PURE__*/React.createElement(BaseErrorBoundary, {
|
|
28
|
+
onError: handleError,
|
|
29
|
+
ErrorComponent: ErrorBoundaryFallback
|
|
30
|
+
}, children);
|
|
60
31
|
}
|
|
61
|
-
|
|
62
|
-
export default ErrorBoundary;
|
|
32
|
+
|
|
33
|
+
export default withAnalyticsEvents()(ErrorBoundary);
|
package/dist/es2019/ui/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
import { AnalyticsContext } from '@atlaskit/analytics-next';
|
|
1
2
|
import React, { memo } from 'react';
|
|
2
3
|
import { LazySuspense, lazyForPaint } from 'react-loosely-lazy';
|
|
3
|
-
import {
|
|
4
|
-
import { COMPONENT_NAME, ANALYTICS_CHANNEL } from '../common/constants';
|
|
4
|
+
import { COMPONENT_NAME } from '../common/constants';
|
|
5
5
|
import { name as packageName, version as packageVersion } from '../version.json';
|
|
6
6
|
import ErrorBoundary from './error-boundary';
|
|
7
|
-
import { ErrorBoundaryFallback } from './error-boundary-fallback';
|
|
8
7
|
import { LoaderFallback } from './loader-fallback';
|
|
8
|
+
import { LinkPickerSessionProvider } from '../controllers/session-provider';
|
|
9
9
|
export const PACKAGE_DATA = {
|
|
10
10
|
packageName,
|
|
11
11
|
packageVersion,
|
|
@@ -17,9 +17,6 @@ const LazyLinkPicker = lazyForPaint(() => import(
|
|
|
17
17
|
'./link-picker'));
|
|
18
18
|
export const ComposedLinkPicker = /*#__PURE__*/memo(props => /*#__PURE__*/React.createElement(AnalyticsContext, {
|
|
19
19
|
data: PACKAGE_DATA
|
|
20
|
-
}, /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
21
|
-
channel: ANALYTICS_CHANNEL,
|
|
22
|
-
ErrorComponent: ErrorBoundaryFallback
|
|
23
|
-
}, /*#__PURE__*/React.createElement(LazySuspense, {
|
|
20
|
+
}, /*#__PURE__*/React.createElement(LinkPickerSessionProvider, null, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(LazySuspense, {
|
|
24
21
|
fallback: LoaderFallback
|
|
25
|
-
}, /*#__PURE__*/React.createElement(LazyLinkPicker, props)))));
|
|
22
|
+
}, /*#__PURE__*/React.createElement(LazyLinkPicker, props))))));
|
|
@@ -24,8 +24,11 @@ import LinkSearchList, { testIds as listTestIds } from './link-search-list';
|
|
|
24
24
|
import LinkSearchError, { testIds as searchErrorTestIds } from './link-search-error';
|
|
25
25
|
import FormFooter, { testIds as formFooterTestIds } from './form-footer';
|
|
26
26
|
import { getDataSource, getScreenReaderText } from './utils';
|
|
27
|
+
import { succeedUfoExperience, ufoExperience } from '../../common/analytics/experiences';
|
|
28
|
+
import { useLinkPickerSessionId } from '../../controllers/session-provider';
|
|
27
29
|
export const RECENT_SEARCH_LIST_SIZE = 5;
|
|
28
30
|
export const testIds = {
|
|
31
|
+
linkPickerRoot: 'link-picker-root',
|
|
29
32
|
linkPicker: 'link-picker',
|
|
30
33
|
urlInputField: 'link-url',
|
|
31
34
|
textInputField: 'link-text',
|
|
@@ -123,6 +126,10 @@ function LinkPicker({
|
|
|
123
126
|
trackAttribute,
|
|
124
127
|
getAttributes
|
|
125
128
|
} = useLinkPickerAnalytics();
|
|
129
|
+
const linkPickerSessionId = useLinkPickerSessionId();
|
|
130
|
+
useLayoutEffect(() => {
|
|
131
|
+
succeedUfoExperience(ufoExperience.mounted, linkPickerSessionId);
|
|
132
|
+
}, [linkPickerSessionId]);
|
|
126
133
|
useEffect(() => {
|
|
127
134
|
// Anything in here is fired on component mount.
|
|
128
135
|
const event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {}));
|
|
@@ -371,4 +378,20 @@ function LinkPicker({
|
|
|
371
378
|
}));
|
|
372
379
|
}
|
|
373
380
|
|
|
374
|
-
|
|
381
|
+
const DefaultRootComponent = ({
|
|
382
|
+
children
|
|
383
|
+
}) => {
|
|
384
|
+
return jsx("div", {
|
|
385
|
+
"data-testid": testIds.linkPickerRoot
|
|
386
|
+
}, children);
|
|
387
|
+
};
|
|
388
|
+
|
|
389
|
+
export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
|
|
390
|
+
component,
|
|
391
|
+
...props
|
|
392
|
+
}) => {
|
|
393
|
+
const RootComponent = component !== null && component !== void 0 ? component : DefaultRootComponent;
|
|
394
|
+
return jsx(RootComponent, _extends({}, props, {
|
|
395
|
+
"data-testid": testIds.linkPickerRoot
|
|
396
|
+
}), jsx(LinkPicker, props));
|
|
397
|
+
}));
|
package/dist/es2019/version.json
CHANGED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
|
|
3
|
+
export var ufoExperience = {
|
|
4
|
+
mounted: 'component-mounted'
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
var ufoExperiences = _defineProperty({}, ufoExperience.mounted, new ConcurrentExperience(ufoExperience.mounted, {
|
|
8
|
+
type: ExperienceTypes.Load,
|
|
9
|
+
performanceType: ExperiencePerformanceTypes.PageSegmentLoad,
|
|
10
|
+
platform: {
|
|
11
|
+
component: 'link-picker'
|
|
12
|
+
}
|
|
13
|
+
}));
|
|
14
|
+
|
|
15
|
+
export var startUfoExperience = function startUfoExperience(experienceName, id, metadata) {
|
|
16
|
+
var experience = ufoExperiences[experienceName].getInstance(id);
|
|
17
|
+
experience.start();
|
|
18
|
+
|
|
19
|
+
if (metadata) {
|
|
20
|
+
experience.addMetadata(metadata);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
export var succeedUfoExperience = function succeedUfoExperience(experienceName, id, metadata) {
|
|
24
|
+
var experience = ufoExperiences[experienceName].getInstance(id);
|
|
25
|
+
experience.success({
|
|
26
|
+
metadata: metadata
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
export var failUfoExperience = function failUfoExperience(experienceName, id, metadata) {
|
|
30
|
+
var experience = ufoExperiences[experienceName].getInstance(id);
|
|
31
|
+
experience.failure({
|
|
32
|
+
metadata: metadata
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
export var abortUfoExperience = function abortUfoExperience(experienceName, id, metadata) {
|
|
36
|
+
var experience = ufoExperiences[experienceName].getInstance(id);
|
|
37
|
+
experience.abort({
|
|
38
|
+
metadata: metadata
|
|
39
|
+
});
|
|
40
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React, { createContext, useContext, useEffect, useRef } from 'react';
|
|
2
|
+
import { v4 as uuidv4 } from 'uuid';
|
|
3
|
+
import { abortUfoExperience, startUfoExperience, ufoExperience } from '../../common/analytics/experiences';
|
|
4
|
+
export var INIT_CONTEXT = 'SESSION_UNINITIALIZED';
|
|
5
|
+
export var SessionContext = /*#__PURE__*/createContext(INIT_CONTEXT);
|
|
6
|
+
|
|
7
|
+
var useConstructor = function useConstructor(callback) {
|
|
8
|
+
var hasBeenFired = useRef(false);
|
|
9
|
+
|
|
10
|
+
if (!hasBeenFired.current) {
|
|
11
|
+
callback();
|
|
12
|
+
hasBeenFired.current = true;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
return null;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export var LinkPickerSessionProvider = function LinkPickerSessionProvider(_ref) {
|
|
19
|
+
var children = _ref.children;
|
|
20
|
+
|
|
21
|
+
var _useRef = useRef(uuidv4()),
|
|
22
|
+
sessionId = _useRef.current;
|
|
23
|
+
|
|
24
|
+
useEffect(function () {
|
|
25
|
+
return function () {
|
|
26
|
+
return abortUfoExperience(ufoExperience.mounted, sessionId);
|
|
27
|
+
};
|
|
28
|
+
}, [sessionId]);
|
|
29
|
+
useConstructor(function () {
|
|
30
|
+
return startUfoExperience(ufoExperience.mounted, sessionId);
|
|
31
|
+
});
|
|
32
|
+
return /*#__PURE__*/React.createElement(SessionContext.Provider, {
|
|
33
|
+
value: sessionId
|
|
34
|
+
}, children);
|
|
35
|
+
};
|
|
36
|
+
export var useLinkPickerSessionId = function useLinkPickerSessionId() {
|
|
37
|
+
return useContext(SessionContext);
|
|
38
|
+
};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
4
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
|
+
|
|
7
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
8
|
+
|
|
9
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
10
|
+
|
|
11
|
+
import React, { Component } from 'react';
|
|
12
|
+
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
13
|
+
export var BaseErrorBoundary = /*#__PURE__*/function (_Component) {
|
|
14
|
+
_inherits(BaseErrorBoundary, _Component);
|
|
15
|
+
|
|
16
|
+
var _super = _createSuper(BaseErrorBoundary);
|
|
17
|
+
|
|
18
|
+
function BaseErrorBoundary(props) {
|
|
19
|
+
var _this;
|
|
20
|
+
|
|
21
|
+
_classCallCheck(this, BaseErrorBoundary);
|
|
22
|
+
|
|
23
|
+
_this = _super.call(this, props);
|
|
24
|
+
_this.state = {
|
|
25
|
+
hasError: false
|
|
26
|
+
};
|
|
27
|
+
return _this;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
_createClass(BaseErrorBoundary, [{
|
|
31
|
+
key: "componentDidCatch",
|
|
32
|
+
value: function componentDidCatch(error, info) {
|
|
33
|
+
var onError = this.props.onError;
|
|
34
|
+
onError && onError(error, info);
|
|
35
|
+
this.setState({
|
|
36
|
+
hasError: true
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
}, {
|
|
40
|
+
key: "render",
|
|
41
|
+
value: function render() {
|
|
42
|
+
var _this$props = this.props,
|
|
43
|
+
children = _this$props.children,
|
|
44
|
+
ErrorComponent = _this$props.ErrorComponent;
|
|
45
|
+
var hasError = this.state.hasError;
|
|
46
|
+
|
|
47
|
+
if (hasError && ErrorComponent) {
|
|
48
|
+
return /*#__PURE__*/React.createElement(ErrorComponent, null);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return children;
|
|
52
|
+
}
|
|
53
|
+
}]);
|
|
54
|
+
|
|
55
|
+
return BaseErrorBoundary;
|
|
56
|
+
}(Component);
|
package/dist/esm/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.js
RENAMED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { jsx } from '@emotion/react';
|
|
3
3
|
import EmptyState from '@atlaskit/empty-state';
|
|
4
4
|
import { defineMessages, useIntl } from 'react-intl-next';
|
|
5
|
-
import GenericErrorSVG from '
|
|
6
|
-
import { rootContainerStyles } from '
|
|
5
|
+
import GenericErrorSVG from '../../../common/generic-error-svg';
|
|
6
|
+
import { rootContainerStyles } from '../../link-picker/styled';
|
|
7
7
|
var messages = defineMessages({
|
|
8
8
|
heading: {
|
|
9
9
|
defaultMessage: 'Something went wrong!',
|
|
@@ -1,81 +1,32 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
-
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
4
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
5
|
-
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
6
|
-
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
|
-
|
|
9
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
10
|
-
|
|
11
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
12
|
-
|
|
13
|
-
import React, { Component } from 'react';
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
14
2
|
import { withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
15
3
|
import createEventPayload from '../../analytics.codegen';
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
return _this;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
_createClass(BaseErrorBoundary, [{
|
|
49
|
-
key: "componentDidCatch",
|
|
50
|
-
value: function componentDidCatch(error, info) {
|
|
51
|
-
var onError = this.props.onError;
|
|
52
|
-
var payload = {
|
|
53
|
-
error: error,
|
|
54
|
-
info: info
|
|
55
|
-
};
|
|
56
|
-
this.fireAnalytics(payload);
|
|
57
|
-
onError && onError(error, info);
|
|
58
|
-
this.setState({
|
|
59
|
-
hasError: true
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
}, {
|
|
63
|
-
key: "render",
|
|
64
|
-
value: function render() {
|
|
65
|
-
var _this$props2 = this.props,
|
|
66
|
-
children = _this$props2.children,
|
|
67
|
-
ErrorComponent = _this$props2.ErrorComponent;
|
|
68
|
-
var hasError = this.state.hasError;
|
|
69
|
-
|
|
70
|
-
if (hasError && ErrorComponent) {
|
|
71
|
-
return /*#__PURE__*/React.createElement(ErrorComponent, null);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
return children;
|
|
75
|
-
}
|
|
76
|
-
}]);
|
|
77
|
-
|
|
78
|
-
return BaseErrorBoundary;
|
|
79
|
-
}(Component);
|
|
80
|
-
var ErrorBoundary = withAnalyticsEvents()(BaseErrorBoundary);
|
|
81
|
-
export default ErrorBoundary;
|
|
4
|
+
import { ANALYTICS_CHANNEL } from '../../common/constants';
|
|
5
|
+
import { failUfoExperience, ufoExperience } from '../../common/analytics/experiences';
|
|
6
|
+
import { useLinkPickerSessionId } from '../../controllers/session-provider';
|
|
7
|
+
import { ErrorBoundaryFallback } from './error-boundary-fallback';
|
|
8
|
+
import { BaseErrorBoundary } from './error-boundary-base';
|
|
9
|
+
|
|
10
|
+
function ErrorBoundary(_ref) {
|
|
11
|
+
var children = _ref.children,
|
|
12
|
+
createAnalyticsEvent = _ref.createAnalyticsEvent;
|
|
13
|
+
var linkPickerSessionId = useLinkPickerSessionId();
|
|
14
|
+
var handleError = useCallback(function (error, info) {
|
|
15
|
+
var _window, _window$navigator, _info$componentStack;
|
|
16
|
+
|
|
17
|
+
// Fire Analytics event
|
|
18
|
+
createAnalyticsEvent(createEventPayload('ui.linkPicker.unhandledErrorCaught', {
|
|
19
|
+
browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
|
|
20
|
+
error: error.toString(),
|
|
21
|
+
componentStack: (_info$componentStack = info === null || info === void 0 ? void 0 : info.componentStack) !== null && _info$componentStack !== void 0 ? _info$componentStack : ''
|
|
22
|
+
})).fire(ANALYTICS_CHANNEL); // Fire UFO failed experience
|
|
23
|
+
|
|
24
|
+
failUfoExperience(ufoExperience.mounted, linkPickerSessionId);
|
|
25
|
+
}, [createAnalyticsEvent, linkPickerSessionId]);
|
|
26
|
+
return /*#__PURE__*/React.createElement(BaseErrorBoundary, {
|
|
27
|
+
onError: handleError,
|
|
28
|
+
ErrorComponent: ErrorBoundaryFallback
|
|
29
|
+
}, children);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export default withAnalyticsEvents()(ErrorBoundary);
|
package/dist/esm/ui/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
import { AnalyticsContext } from '@atlaskit/analytics-next';
|
|
1
2
|
import React, { memo } from 'react';
|
|
2
3
|
import { LazySuspense, lazyForPaint } from 'react-loosely-lazy';
|
|
3
|
-
import {
|
|
4
|
-
import { COMPONENT_NAME, ANALYTICS_CHANNEL } from '../common/constants';
|
|
4
|
+
import { COMPONENT_NAME } from '../common/constants';
|
|
5
5
|
import { name as packageName, version as packageVersion } from '../version.json';
|
|
6
6
|
import ErrorBoundary from './error-boundary';
|
|
7
|
-
import { ErrorBoundaryFallback } from './error-boundary-fallback';
|
|
8
7
|
import { LoaderFallback } from './loader-fallback';
|
|
8
|
+
import { LinkPickerSessionProvider } from '../controllers/session-provider';
|
|
9
9
|
export var PACKAGE_DATA = {
|
|
10
10
|
packageName: packageName,
|
|
11
11
|
packageVersion: packageVersion,
|
|
@@ -20,10 +20,7 @@ var LazyLinkPicker = lazyForPaint(function () {
|
|
|
20
20
|
export var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
|
|
21
21
|
return /*#__PURE__*/React.createElement(AnalyticsContext, {
|
|
22
22
|
data: PACKAGE_DATA
|
|
23
|
-
}, /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
24
|
-
channel: ANALYTICS_CHANNEL,
|
|
25
|
-
ErrorComponent: ErrorBoundaryFallback
|
|
26
|
-
}, /*#__PURE__*/React.createElement(LazySuspense, {
|
|
23
|
+
}, /*#__PURE__*/React.createElement(LinkPickerSessionProvider, null, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(LazySuspense, {
|
|
27
24
|
fallback: LoaderFallback
|
|
28
|
-
}, /*#__PURE__*/React.createElement(LazyLinkPicker, props))));
|
|
25
|
+
}, /*#__PURE__*/React.createElement(LazyLinkPicker, props)))));
|
|
29
26
|
});
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
1
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
4
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
5
|
+
var _excluded = ["component"];
|
|
4
6
|
|
|
5
7
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
8
|
|
|
@@ -30,8 +32,11 @@ import LinkSearchList, { testIds as listTestIds } from './link-search-list';
|
|
|
30
32
|
import LinkSearchError, { testIds as searchErrorTestIds } from './link-search-error';
|
|
31
33
|
import FormFooter, { testIds as formFooterTestIds } from './form-footer';
|
|
32
34
|
import { getDataSource, getScreenReaderText } from './utils';
|
|
35
|
+
import { succeedUfoExperience, ufoExperience } from '../../common/analytics/experiences';
|
|
36
|
+
import { useLinkPickerSessionId } from '../../controllers/session-provider';
|
|
33
37
|
export var RECENT_SEARCH_LIST_SIZE = 5;
|
|
34
38
|
export var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
39
|
+
linkPickerRoot: 'link-picker-root',
|
|
35
40
|
linkPicker: 'link-picker',
|
|
36
41
|
urlInputField: 'link-url',
|
|
37
42
|
textInputField: 'link-text',
|
|
@@ -130,6 +135,10 @@ function LinkPicker(_ref) {
|
|
|
130
135
|
trackAttribute = _useLinkPickerAnalyti.trackAttribute,
|
|
131
136
|
getAttributes = _useLinkPickerAnalyti.getAttributes;
|
|
132
137
|
|
|
138
|
+
var linkPickerSessionId = useLinkPickerSessionId();
|
|
139
|
+
useLayoutEffect(function () {
|
|
140
|
+
succeedUfoExperience(ufoExperience.mounted, linkPickerSessionId);
|
|
141
|
+
}, [linkPickerSessionId]);
|
|
133
142
|
useEffect(function () {
|
|
134
143
|
// Anything in here is fired on component mount.
|
|
135
144
|
var event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {}));
|
|
@@ -381,4 +390,19 @@ function LinkPicker(_ref) {
|
|
|
381
390
|
}));
|
|
382
391
|
}
|
|
383
392
|
|
|
384
|
-
|
|
393
|
+
var DefaultRootComponent = function DefaultRootComponent(_ref2) {
|
|
394
|
+
var children = _ref2.children;
|
|
395
|
+
return jsx("div", {
|
|
396
|
+
"data-testid": testIds.linkPickerRoot
|
|
397
|
+
}, children);
|
|
398
|
+
};
|
|
399
|
+
|
|
400
|
+
export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(function (_ref3) {
|
|
401
|
+
var component = _ref3.component,
|
|
402
|
+
props = _objectWithoutProperties(_ref3, _excluded);
|
|
403
|
+
|
|
404
|
+
var RootComponent = component !== null && component !== void 0 ? component : DefaultRootComponent;
|
|
405
|
+
return jsx(RootComponent, _extends({}, props, {
|
|
406
|
+
"data-testid": testIds.linkPickerRoot
|
|
407
|
+
}), jsx(LinkPicker, props));
|
|
408
|
+
}));
|
package/dist/esm/version.json
CHANGED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { CustomData } from '@atlaskit/ufo';
|
|
2
|
+
export declare const ufoExperience: {
|
|
3
|
+
readonly mounted: "component-mounted";
|
|
4
|
+
};
|
|
5
|
+
declare type ExperienceType = keyof typeof ufoExperience;
|
|
6
|
+
declare type ExperienceName = typeof ufoExperience[ExperienceType];
|
|
7
|
+
export declare const startUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
|
|
8
|
+
export declare const succeedUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
|
|
9
|
+
export declare const failUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
|
|
10
|
+
export declare const abortUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
export declare type LinkPickerSessionId = string;
|
|
3
|
+
export declare const INIT_CONTEXT = "SESSION_UNINITIALIZED";
|
|
4
|
+
export declare const SessionContext: React.Context<string>;
|
|
5
|
+
interface SessionProviderProps {
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare const LinkPickerSessionProvider: ({ children, }: SessionProviderProps) => JSX.Element;
|
|
9
|
+
export declare const useLinkPickerSessionId: () => string;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React, { Component, ReactNode } from 'react';
|
|
2
|
+
export declare type ErrorBoundaryErrorInfo = {
|
|
3
|
+
componentStack: string;
|
|
4
|
+
};
|
|
5
|
+
declare type BaseErrorBoundaryState = {
|
|
6
|
+
hasError: boolean;
|
|
7
|
+
};
|
|
8
|
+
interface BaseErrorBoundaryProps {
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
ErrorComponent?: React.ComponentType;
|
|
11
|
+
onError?: (error: Error, info?: ErrorBoundaryErrorInfo) => void;
|
|
12
|
+
}
|
|
13
|
+
export declare class BaseErrorBoundary extends Component<BaseErrorBoundaryProps, BaseErrorBoundaryState> {
|
|
14
|
+
constructor(props: BaseErrorBoundaryProps);
|
|
15
|
+
componentDidCatch(error: Error, info?: ErrorBoundaryErrorInfo): void;
|
|
16
|
+
render(): React.ReactNode;
|
|
17
|
+
}
|
|
18
|
+
export {};
|
package/dist/types/ui/{error-boundary-fallback → error-boundary/error-boundary-fallback}/index.d.ts
RENAMED
|
File without changes
|
|
@@ -1,27 +1,7 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
3
|
-
|
|
4
|
-
componentStack: string;
|
|
5
|
-
};
|
|
6
|
-
export interface ErrorBoundaryProps extends WithAnalyticsEventsProps {
|
|
3
|
+
interface ErrorBoundaryProps extends WithAnalyticsEventsProps {
|
|
7
4
|
children: ReactNode;
|
|
8
|
-
channel: string;
|
|
9
|
-
ErrorComponent?: React.ComponentType;
|
|
10
|
-
onError?: (error: Error, info?: ErrorBoundaryErrorInfo) => void;
|
|
11
5
|
}
|
|
12
|
-
declare
|
|
13
|
-
|
|
14
|
-
info?: ErrorBoundaryErrorInfo;
|
|
15
|
-
[key: string]: any;
|
|
16
|
-
};
|
|
17
|
-
declare type ErrorBoundaryState = {
|
|
18
|
-
hasError: boolean;
|
|
19
|
-
};
|
|
20
|
-
export declare class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
21
|
-
constructor(props: ErrorBoundaryProps);
|
|
22
|
-
fireAnalytics: (analyticsErrorPayload: ErrorBoundaryPayload) => void;
|
|
23
|
-
componentDidCatch(error: Error, info?: ErrorBoundaryErrorInfo): void;
|
|
24
|
-
render(): React.ReactNode;
|
|
25
|
-
}
|
|
26
|
-
declare const ErrorBoundary: React.ForwardRefExoticComponent<Omit<ErrorBoundaryProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
|
|
27
|
-
export default ErrorBoundary;
|
|
6
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<ErrorBoundaryProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
|
|
7
|
+
export default _default;
|
|
@@ -15,6 +15,7 @@ export declare const testIds: {
|
|
|
15
15
|
readonly searchError: string;
|
|
16
16
|
readonly insertButton: "link-picker-insert-button";
|
|
17
17
|
readonly cancelButton: "link-picker-cancel-button";
|
|
18
|
+
readonly linkPickerRoot: "link-picker-root";
|
|
18
19
|
readonly linkPicker: "link-picker";
|
|
19
20
|
readonly urlInputField: "link-url";
|
|
20
21
|
readonly textInputField: "link-text";
|
|
@@ -56,6 +57,10 @@ export interface LinkPickerProps {
|
|
|
56
57
|
displayText?: string | null;
|
|
57
58
|
/** Plugins that provide link suggestions / search capabilities. */
|
|
58
59
|
plugins?: LinkPickerPlugin[];
|
|
60
|
+
/** Customise the link picker root component */
|
|
61
|
+
component?: React.ComponentType<Partial<LinkPickerProps> & {
|
|
62
|
+
children: React.ReactElement;
|
|
63
|
+
}>;
|
|
59
64
|
}
|
|
60
65
|
export interface PickerState {
|
|
61
66
|
selectedIndex: number;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { CustomData } from '@atlaskit/ufo';
|
|
2
|
+
export declare const ufoExperience: {
|
|
3
|
+
readonly mounted: "component-mounted";
|
|
4
|
+
};
|
|
5
|
+
declare type ExperienceType = keyof typeof ufoExperience;
|
|
6
|
+
declare type ExperienceName = typeof ufoExperience[ExperienceType];
|
|
7
|
+
export declare const startUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
|
|
8
|
+
export declare const succeedUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
|
|
9
|
+
export declare const failUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
|
|
10
|
+
export declare const abortUfoExperience: (experienceName: ExperienceName, id: string, metadata?: CustomData | undefined) => void;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
export declare type LinkPickerSessionId = string;
|
|
3
|
+
export declare const INIT_CONTEXT = "SESSION_UNINITIALIZED";
|
|
4
|
+
export declare const SessionContext: React.Context<string>;
|
|
5
|
+
interface SessionProviderProps {
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare const LinkPickerSessionProvider: ({ children, }: SessionProviderProps) => JSX.Element;
|
|
9
|
+
export declare const useLinkPickerSessionId: () => string;
|
|
10
|
+
export {};
|