@atlaskit/link-picker 1.6.1 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/link-picker
 
+## 1.8.0
+
+### Minor Changes
+
+- [`89fffde2a59`](https://bitbucket.org/atlassian/atlassian-frontend/commits/89fffde2a59) - Wrap link picker in native form element
+
+## 1.7.1
+
+### Patch Changes
+
+- [`e900714203d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e900714203d) - Add "form submitted" analytics event.
+
+## 1.7.0
+
+### Minor Changes
+
+- [`d0feee9b4ad`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d0feee9b4ad) - [ux] Add a UI error message to display when the link picker plugin resolve throws an error
+
 ## 1.6.1
 
 ### Patch Changes

package/dist/cjs/analytics.codegen.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Generates analytics utilities from the package analytics spec yaml
+ *
+ * @codegen <<SignedSource::0cc1b4d9c22b31491ded3e581114ab2c>>
+ * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
+ */
+function createEventPayload(eventKey, attributes) {
+  var event = eventKey.split('.');
+  return {
+    eventType: 'ui',
+    actionSubject: event[0],
+    action: event[1],
+    actionSubjectId: event[2],
+    attributes: attributes
+  };
+}
+
+var _default = createEventPayload;
+exports.default = _default;

package/dist/cjs/common/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COMPONENT_NAME = exports.ANALYTICS_CHANNEL = void 0;
+var ANALYTICS_CHANNEL = 'media';
+exports.ANALYTICS_CHANNEL = ANALYTICS_CHANNEL;
+var COMPONENT_NAME = 'LinkPicker';
+exports.COMPONENT_NAME = COMPONENT_NAME;

package/dist/cjs/services/use-plugins/index.js

@@ -19,8 +19,6 @@ var _react = require("react");
 
 var _linkPicker = require("../../ui/link-picker");
 
-var _url = require("../../ui/link-picker/url");
-
 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; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -29,56 +27,46 @@ function reducer(state, payload) {
   return _objectSpread(_objectSpread({}, state), payload);
 }
 
-function usePlugins(state, plugins) {
+function usePlugins(state, activeTab, plugins) {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      retries = _useState2[0],
+      setRetries = _useState2[1];
+
   var _useReducer = (0, _react.useReducer)(reducer, {
-    items: [],
+    items: null,
+    error: null,
     isLoading: false
   }),
       _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
       pluginState = _useReducer2[0],
       dispatch = _useReducer2[1];
 
-  var url = state.url,
-      selectedIndex = state.selectedIndex;
   var items = pluginState.items,
-      isLoading = pluginState.isLoading;
-  var activePlugin = !plugins || plugins.length === 0 ? null : plugins[state.activeTab];
+      isLoading = pluginState.isLoading,
+      error = pluginState.error;
   var queryVersion = (0, _react.useRef)(0);
-  var pluginRef = (0, _react.useRef)(activePlugin);
-  var selectedItem = items[selectedIndex];
-  var isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
+  var activePlugin = plugins === null || plugins === void 0 ? void 0 : plugins[activeTab];
   (0, _react.useEffect)(function () {
     if (!activePlugin) {
       return;
     }
 
-    if (isSelectedItem) {
-      return;
-    }
-
-    if ((0, _url.isSafeUrl)(url) && url.length) {
+    if (!state) {
       dispatch({
-        items: [],
-        isLoading: false
+        items: null,
+        isLoading: false,
+        error: null
       });
       return;
     }
 
-    var updates = activePlugin.resolve({
-      query: url
+    var updates = activePlugin.resolve(state);
+    dispatch({
+      items: null,
+      isLoading: true,
+      error: null
     });
-
-    if (pluginRef.current !== activePlugin) {
-      dispatch({
-        items: [],
-        isLoading: true
-      });
-    } else {
-      dispatch({
-        isLoading: true
-      });
-    }
-
     var newQuery = ++queryVersion.current;
 
     var updateResults = /*#__PURE__*/function () {
@@ -156,6 +144,8 @@ function usePlugins(state, plugins) {
                 _context.prev = 25;
                 _context.t0 = _context["catch"](0);
                 dispatch({
+                  error: _context.t0,
+                  items: null,
                   isLoading: false
                 });
 
@@ -173,7 +163,7 @@ function usePlugins(state, plugins) {
     }();
 
     updateResults();
-  }, [activePlugin, queryVersion, url, isSelectedItem]);
+  }, [activePlugin, queryVersion, state, retries]);
   var tabs = (0, _react.useMemo)(function () {
     if (!plugins || plugins.length <= 1) {
       return [];
@@ -187,12 +177,19 @@ function usePlugins(state, plugins) {
       };
     });
   }, [plugins]);
+  var handleRetry = (0, _react.useCallback)(function () {
+    setRetries(function (prev) {
+      return ++prev;
+    });
+  }, []);
   return {
     tabs: tabs,
     items: items,
     isLoading: isLoading,
-    isSelectedItem: isSelectedItem,
-    isActivePlugin: !!activePlugin
+    isActivePlugin: !!activePlugin,
+    error: error,
+    retry: handleRetry,
+    errorFallback: activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.errorFallback
   };
 }
 

package/dist/cjs/services/use-search-query/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSearchQuery = useSearchQuery;
+
+var _react = require("react");
+
+var _url = require("../../ui/link-picker/url");
+
+function useSearchQuery(state) {
+  var _queryState$current;
+
+  var queryState = (0, _react.useRef)(null);
+  /*
+   * When state contains a valid url AND is NOT selected from results
+   * queryState should be null to clear the items in plugin state
+   */
+
+  if ((0, _url.isSafeUrl)(state.url) && state.selectedIndex === -1) {
+    queryState.current = null;
+  }
+  /*
+   * When state contains a search term e.g. Not a valid url return a query
+   */
+
+
+  if (((_queryState$current = queryState.current) === null || _queryState$current === void 0 ? void 0 : _queryState$current.query) !== state.url && !(0, _url.isSafeUrl)(state.url)) {
+    queryState.current = {
+      query: state.url
+    };
+  }
+  /*
+   * When state contains a valid url and is selected from the list
+   * return current state to prevent triger a new plugin search
+   */
+
+
+  return queryState.current;
+}

package/dist/cjs/ui/error-boundary-fallback/index.js

@@ -13,7 +13,7 @@ var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _genericErrorSvg = _interopRequireDefault(require("./generic-error-svg"));
+var _genericErrorSvg = _interopRequireDefault(require("../../common/generic-error-svg"));
 
 var _styled = require("../link-picker/styled");
 

package/dist/cjs/ui/index.js

@@ -15,6 +15,8 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _reactLooselyLazy = require("react-loosely-lazy");
 
+var _constants = require("../common/constants");
+
 var _version = require("../version.json");
 
 var _errorBoundaryFallback = require("./error-boundary-fallback");
@@ -25,12 +27,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var COMPONENT_NAME = 'LinkPicker';
-var ANALYTICS_CHANNEL = 'media';
 var PACKAGE_DATA = {
   packageName: _version.name,
   packageVersion: _version.version,
-  componentName: COMPONENT_NAME
+  componentName: _constants.COMPONENT_NAME
 };
 var LazyLinkPicker = (0, _reactLooselyLazy.lazyForPaint)(function () {
   return Promise.resolve().then(function () {
@@ -39,7 +39,7 @@ var LazyLinkPicker = (0, _reactLooselyLazy.lazyForPaint)(function () {
 });
 var ComposedLinkPicker = /*#__PURE__*/(0, _react.memo)(function (props) {
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsErrorBoundary, {
-    channel: ANALYTICS_CHANNEL,
+    channel: _constants.ANALYTICS_CHANNEL,
     data: PACKAGE_DATA,
     ErrorComponent: _errorBoundaryFallback.ErrorBoundaryFallback
   }, /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {

package/dist/cjs/ui/link-picker/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testIds = exports.default = exports.RECENT_SEARCH_LIST_SIZE = void 0;
+exports.testIds = exports.default = exports.RECENT_SEARCH_LIST_SIZE = exports.CONTACT_SUPPORT_LINK = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -21,6 +21,8 @@ var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
+var _analyticsNext = require("@atlaskit/analytics-next");
+
 var _button = _interopRequireWildcard(require("@atlaskit/button"));
 
 var _form = require("@atlaskit/form");
@@ -31,6 +33,14 @@ var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
 
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 
+var _analytics = _interopRequireDefault(require("../../analytics.codegen"));
+
+var _constants = require("../../common/constants");
+
+var _usePlugins2 = require("../../services/use-plugins");
+
+var _useSearchQuery = require("../../services/use-search-query");
+
 var _messages = require("./messages");
 
 var _textInput = _interopRequireDefault(require("./text-input"));
@@ -43,13 +53,13 @@ var _styled = require("./styled");
 
 var _browser = require("./browser");
 
-var _transformTimeStamp = require("./transformTimeStamp");
-
 var _announcer = _interopRequireDefault(require("./announcer"));
 
 var _linkSearchNoResults = _interopRequireDefault(require("./link-search-no-results"));
 
-var _usePlugins2 = require("../../services/use-plugins");
+var _transformTimeStamp = require("./transformTimeStamp");
+
+var _linkSearchError = _interopRequireDefault(require("./link-search-error"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -61,6 +71,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var RECENT_SEARCH_LIST_SIZE = 5;
 exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
+var CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
+exports.CONTACT_SUPPORT_LINK = CONTACT_SUPPORT_LINK;
 var testIds = {
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
@@ -76,7 +88,8 @@ var testIds = {
   searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
   urlError: 'link-error',
   tabList: 'link-picker-tabs',
-  tabItem: 'link-picker-tab'
+  tabItem: 'link-picker-tab',
+  searchError: 'link-search-error'
 };
 exports.testIds = testIds;
 var initState = {
@@ -100,6 +113,8 @@ function reducer(state, payload) {
 }
 
 function LinkPicker(_ref) {
+  var _queryState$query, _items$length, _errorFallback;
+
   var onSubmit = _ref.onSubmit,
       onCancel = _ref.onCancel,
       onContentResize = _ref.onContentResize,
@@ -107,6 +122,9 @@ function LinkPicker(_ref) {
       initUrl = _ref.url,
       initDisplayText = _ref.displayText;
 
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
   var _useReducer = (0, _react.useReducer)(reducer, _objectSpread(_objectSpread({}, initState), {}, {
     url: (0, _url2.normalizeUrl)(initUrl) || '',
     displayText: initDisplayText || ''
@@ -119,17 +137,23 @@ function LinkPicker(_ref) {
       selectedIndex = state.selectedIndex,
       url = state.url,
       displayText = state.displayText,
-      invalidUrl = state.invalidUrl;
-  var isEditing = !!initUrl;
+      invalidUrl = state.invalidUrl,
+      activeTab = state.activeTab;
   var intl = (0, _reactIntlNext.useIntl)();
+  var queryState = (0, _useSearchQuery.useSearchQuery)(state);
 
-  var _usePlugins = (0, _usePlugins2.usePlugins)(state, plugins),
+  var _usePlugins = (0, _usePlugins2.usePlugins)(queryState, activeTab, plugins),
       items = _usePlugins.items,
       isLoading = _usePlugins.isLoading,
-      isSelectedItem = _usePlugins.isSelectedItem,
       isActivePlugin = _usePlugins.isActivePlugin,
-      tabs = _usePlugins.tabs;
+      tabs = _usePlugins.tabs,
+      error = _usePlugins.error,
+      retry = _usePlugins.retry,
+      errorFallback = _usePlugins.errorFallback;
 
+  var isEditing = !!initUrl;
+  var selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
+  var isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
   (0, _react.useLayoutEffect)(function () {
     if (onContentResize) {
       onContentResize();
@@ -183,15 +207,15 @@ function LinkPicker(_ref) {
     dispatch((0, _defineProperty2.default)({}, field, ''));
   }, []);
   var handleMouseEnterResultItem = (0, _react.useCallback)(function (objectId) {
-    var index = findIndex(items, function (item) {
+    var index = items === null || items === void 0 ? void 0 : items.findIndex(function (item) {
       return item.objectId === objectId;
     });
     dispatch({
-      activeIndex: index
+      activeIndex: index !== null && index !== void 0 ? index : -1
     });
   }, [items]);
   var handleMouseLeaveResultItem = (0, _react.useCallback)(function (objectId) {
-    var index = findIndex(items, function (item) {
+    var index = items === null || items === void 0 ? void 0 : items.findIndex(function (item) {
       return item.objectId === objectId;
     }); // This is to avoid updating index that was set by other mouseenter event
 
@@ -202,6 +226,8 @@ function LinkPicker(_ref) {
     }
   }, [activeIndex, items]);
   var handleInsert = (0, _react.useCallback)(function (url, title, inputType) {
+    var event = createAnalyticsEvent((0, _analytics.default)('form.submitted.linkPicker', {}));
+    event.fire(_constants.ANALYTICS_CHANNEL);
     onSubmit(_objectSpread({
       url: url,
       displayText: displayText || null,
@@ -212,22 +238,23 @@ function LinkPicker(_ref) {
     }, inputType === 'manual' ? {
       rawUrl: state.url
     } : {}));
-  }, [displayText, onSubmit, state.url]);
+  }, [displayText, onSubmit, state.url, createAnalyticsEvent]);
   var handleSelected = (0, _react.useCallback)(function (objectId) {
-    var selectedItem = items.find(function (item) {
+    var selectedItem = items === null || items === void 0 ? void 0 : items.find(function (item) {
       return item.objectId === objectId;
     });
 
     if (selectedItem) {
       var _url = selectedItem.url,
           name = selectedItem.name;
+      dispatchEvent(new Event('submit'));
       handleInsert(_url, name, 'typeAhead');
     }
   }, [handleInsert, items]);
-  var handleSubmit = (0, _react.useCallback)(function () {
-    var selectedItem = items[selectedIndex];
+  var handleSubmit = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
 
-    if (isSelectedItem) {
+    if (isSelectedItem && selectedItem) {
       return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
 
@@ -240,18 +267,18 @@ function LinkPicker(_ref) {
     return dispatch({
       invalidUrl: true
     });
-  }, [handleInsert, isSelectedItem, items, selectedIndex, url]);
+  }, [handleInsert, isSelectedItem, selectedItem, url]);
   var linkPlaceHolder = isActivePlugin ? _messages.messages.placeholder : _messages.messages.linkPlaceholder;
-  var linkListTitle = url ? _messages.messages.titleResults : _messages.messages.titleRecentlyViewed;
+  var linkListTitle = (queryState === null || queryState === void 0 ? void 0 : (_queryState$query = queryState.query) === null || _queryState$query === void 0 ? void 0 : _queryState$query.length) !== 0 ? _messages.messages.titleResults : _messages.messages.titleRecentlyViewed;
   var insertButtonMsg = isEditing ? _messages.messages.saveButton : _messages.messages.insertButton;
-  var noResults = isActivePlugin && !isLoading && !items.length && !(0, _url2.isSafeUrl)(url);
+  var noResults = (items === null || items === void 0 ? void 0 : items.length) === 0 && !error;
   var screenReaderDescriptionId = 'search-recent-links-field-description';
   var linkSearchListId = 'link-picker-search-list';
   var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
   // as the Aria design pattern for combobox does not work in this case
   // for details: https://a11y-internal.atlassian.net/browse/AK-740
 
-  var screenReaderText = _browser.browser.safari && getScreenReaderText(items, selectedIndex, intl);
+  var screenReaderText = _browser.browser.safari && getScreenReaderText(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
   var searchIcon = isActivePlugin && (0, _react2.jsx)("span", {
     css: _styled.searchIconStyles,
     "data-testid": testIds.searchIcon
@@ -259,9 +286,10 @@ function LinkPicker(_ref) {
     size: "medium",
     label: ''
   }));
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)("form", {
     "data-testid": testIds.linkPicker,
-    css: _styled.rootContainerStyles
+    css: _styled.rootContainerStyles,
+    onSubmit: handleSubmit
   }, screenReaderText && (0, _react2.jsx)(_announcer.default, {
     ariaLive: "assertive",
     text: screenReaderText,
@@ -287,7 +315,6 @@ function LinkPicker(_ref) {
     "aria-describedby": screenReaderDescriptionId,
     error: invalidUrl ? intl.formatMessage(_messages.messages.linkInvalid) : null,
     onClear: handleClear,
-    onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
   }), (0, _react2.jsx)(_textInput.default, {
@@ -300,10 +327,9 @@ function LinkPicker(_ref) {
     clearLabel: intl.formatMessage(_messages.messages.clearText),
     "aria-label": intl.formatMessage(_messages.messages.linkAriaLabel),
     onClear: handleClear,
-    onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
-  }), tabs.length > 0 && (0, _react2.jsx)("div", {
+  }), queryState && (0, _react2.jsx)(_react.Fragment, null, tabs.length > 0 && (0, _react2.jsx)("div", {
     css: _styled.tabsWrapperStyles
   }, (0, _react2.jsx)(_tabs.default, {
     id: testIds.tabList,
@@ -321,7 +347,7 @@ function LinkPicker(_ref) {
       key: tab.tabTitle,
       testId: testIds.tabItem
     }, tab.tabTitle);
-  })))), !!items.length && (0, _react2.jsx)("div", {
+  })))), !!(items !== null && items !== void 0 && items.length) && (0, _react2.jsx)("div", {
     css: _styled.listTitleStyles,
     id: testIds.resultListTitle,
     "data-testid": testIds.resultListTitle
@@ -329,7 +355,7 @@ function LinkPicker(_ref) {
     id: "fabric.smartcard.linkpicker.suggested.results"
   }, url && (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.searchLinkResults, {
     values: {
-      count: items.length
+      count: (_items$length = items === null || items === void 0 ? void 0 : items.length) !== null && _items$length !== void 0 ? _items$length : 0
     },
     "aria-live": "polite",
     "aria-atomic": "true"
@@ -338,18 +364,34 @@ function LinkPicker(_ref) {
     ariaControls: "fabric.smartcard.linkpicker.suggested.results",
     id: linkSearchListId,
     role: "listbox",
-    items: items,
+    items: items !== null && items !== void 0 ? items : [],
     isLoading: isLoading,
     selectedIndex: selectedIndex,
     activeIndex: activeIndex,
     onSelect: handleSelected,
     onMouseEnter: handleMouseEnterResultItem,
     onMouseLeave: handleMouseLeaveResultItem
-  }), noResults && (0, _react2.jsx)(_linkSearchNoResults.default, {
+  }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : (0, _react2.jsx)(_linkSearchError.default, {
+    testId: testIds.searchError,
+    header: intl.formatMessage(_messages.messages.searchErrorHeader),
+    description: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.searchErrorDescription, {
+      values: {
+        a: function a(label) {
+          return (0, _react2.jsx)(_button.default, {
+            appearance: "link",
+            spacing: "none",
+            href: CONTACT_SUPPORT_LINK,
+            target: "_blank",
+            rel: "noopener noreferrer"
+          }, label);
+        }
+      }
+    }))
+  })), noResults && (0, _react2.jsx)(_linkSearchNoResults.default, {
     testId: testIds.emptyResultPage,
     header: intl.formatMessage(_messages.messages.noResults),
     description: intl.formatMessage(_messages.messages.noResultsDescription)
-  }), (0, _react2.jsx)(_form.FormFooter, {
+  })), (0, _react2.jsx)(_form.FormFooter, {
     align: "end"
   }, (0, _react2.jsx)(_button.ButtonGroup, null, (0, _react2.jsx)(_button.default, {
     appearance: "default",
@@ -358,7 +400,6 @@ function LinkPicker(_ref) {
   }, intl.formatMessage(_messages.messages.cancelButton)), (0, _react2.jsx)(_button.default, {
     type: "submit",
     appearance: "primary",
-    onClick: handleSubmit,
     testId: testIds.insertButton
   }, intl.formatMessage(insertButtonMsg)))));
 }
@@ -377,17 +418,4 @@ function getScreenReaderText(items, selectedIndex, intl) {
     var formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
     return [name, container, formattedDate].filter(Boolean).join(', ');
   }
-}
-
-function findIndex(array, predicate) {
-  var index = -1;
-  array.some(function (item, i) {
-    if (predicate(item)) {
-      index = i;
-      return true;
-    }
-
-    return false;
-  });
-  return index;
 }

package/dist/cjs/ui/link-picker/link-search-error/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
+
+var _genericErrorSvg = _interopRequireDefault(require("../../../common/generic-error-svg"));
+
+var LinkSearchError = function LinkSearchError(props) {
+  return /*#__PURE__*/_react.default.createElement(_emptyState.default, (0, _extends2.default)({}, props, {
+    renderImage: function renderImage() {
+      return /*#__PURE__*/_react.default.createElement(_genericErrorSvg.default, null);
+    }
+  }));
+};
+
+var _default = LinkSearchError;
+exports.default = _default;

package/dist/cjs/ui/link-picker/messages.js

@@ -112,6 +112,16 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.linkPicker.button.save',
     defaultMessage: 'Save',
     description: 'Button to save edited link'
+  },
+  searchErrorHeader: {
+    id: 'fabric.linkPicker.search.error.heading',
+    defaultMessage: 'We’re having trouble loading data.',
+    description: 'Heading message shown when a search throws an error'
+  },
+  searchErrorDescription: {
+    id: 'fabric.linkPicker.search.error.description',
+    defaultMessage: 'Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.',
+    description: 'Describes possible actions when search throws an error'
   }
 });
 exports.messages = messages;