@atlaskit/link-picker 1.10.0 → 1.10.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-picker
 
+## 1.10.2
+
+### Patch Changes
+
+- [`8a538989c8d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a538989c8d) - [ux] Updated label and Placeholder messages
+
+## 1.10.1
+
+### Patch Changes
+
+- [`df6de875d71`](https://bitbucket.org/atlassian/atlassian-frontend/commits/df6de875d71) - Adds operational logging for plugin resolve failures.
+
 ## 1.10.0
 
 ### Minor Changes

package/dist/cjs/analytics.codegen.js

@@ -10,7 +10,7 @@ exports.default = void 0;
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::e8a730530bb93e19d0b85114da0581c8>>
+ * @codegen <<SignedSource::05d8b1c9e46066efd0d11fa9d19c32a9>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 function createEventPayload(eventKey, attributes) {

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

@@ -15,13 +15,24 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
+var _convertToError = require("@atlaskit/frontend-utilities/convert-to-error");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
 var _linkPicker = require("../../ui/link-picker");
 
+var _analytics = _interopRequireDefault(require("../../analytics.codegen"));
+
+var _constants = require("../../common/constants");
+
 var _utils = require("./utils");
 
 var _reducer = require("./reducer");
 
 function usePlugins(state, activeTab, plugins) {
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
   var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       retries = _useState2[0],
@@ -101,6 +112,9 @@ function usePlugins(state, activeTab, plugins) {
                     type: 'ERROR',
                     payload: _context.t0
                   });
+                  createAnalyticsEvent((0, _analytics.default)('operational.resultsResolve.failed', {
+                    error: (0, _convertToError.convertToError)(_context.t0).toString()
+                  })).fire(_constants.ANALYTICS_CHANNEL);
                 }
 
               case 17:
@@ -118,7 +132,7 @@ function usePlugins(state, activeTab, plugins) {
 
     updateResults();
     return cancel;
-  }, [activePlugin, state, retries, dispatch]);
+  }, [activePlugin, state, retries, createAnalyticsEvent, dispatch]);
   var tabs = (0, _react.useMemo)(function () {
     if (!plugins || plugins.length <= 1) {
       return [];

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 = exports.CONTACT_SUPPORT_LINK = void 0;
+exports.testIds = exports.default = exports.RECENT_SEARCH_LIST_SIZE = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -53,8 +53,6 @@ var _browser = require("./browser");
 
 var _announcer = _interopRequireDefault(require("./announcer"));
 
-var _transformTimeStamp = require("./transformTimeStamp");
-
 var _linkSearchList = _interopRequireWildcard(require("./link-search-list"));
 
 var _linkSearchError = _interopRequireWildcard(require("./link-search-error"));
@@ -73,8 +71,6 @@ 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 = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
   linkPicker: 'link-picker',
@@ -331,14 +327,14 @@ function LinkPicker(_ref) {
       invalidUrl: true
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
-  var linkPlaceHolder = isActivePlugin ? _messages.messages.placeholder : _messages.messages.linkPlaceholder;
+  var messages = isActivePlugin ? _messages.searchMessages : _messages.linkMessages;
   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 !== null && items !== void 0 ? items : [], selectedIndex, intl);
+  var screenReaderText = _browser.browser.safari && (0, _utils.getScreenReaderText)(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
   var searchIcon = isActivePlugin && (0, _react2.jsx)("span", {
     css: _styled.searchIconStyles,
     "data-testid": testIds.searchIcon
@@ -357,23 +353,23 @@ function LinkPicker(_ref) {
     delay: 250
   }), (0, _react2.jsx)(_visuallyHidden.default, {
     id: screenReaderDescriptionId
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.searchLinkAriaDescription)), (0, _react2.jsx)(LinkInputField, {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.linkAriaLabel)), (0, _react2.jsx)(LinkInputField, {
     role: "combobox",
     autoComplete: "off",
     name: "url",
     testId: testIds.urlInputField,
-    label: intl.formatMessage(_messages.messages.linkLabel),
-    placeholder: intl.formatMessage(linkPlaceHolder),
+    label: intl.formatMessage(messages.linkLabel),
+    placeholder: intl.formatMessage(messages.linkPlaceholder),
     value: url,
     autoFocus: true,
     elemBeforeInput: searchIcon,
-    clearLabel: intl.formatMessage(_messages.messages.clearLink),
+    clearLabel: intl.formatMessage(_messages.formMessages.clearLink),
     "aria-expanded": true,
     "aria-autocomplete": "list",
     "aria-controls": linkSearchListId,
     "aria-activedescendant": ariaActiveDescendant,
     "aria-describedby": screenReaderDescriptionId,
-    error: invalidUrl ? intl.formatMessage(_messages.messages.linkInvalid) : null,
+    error: invalidUrl ? intl.formatMessage(_messages.formMessages.linkInvalid) : null,
     onClear: handleUrlClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
@@ -382,10 +378,10 @@ function LinkPicker(_ref) {
     name: "displayText",
     testId: testIds.textInputField,
     value: displayText,
-    label: intl.formatMessage(_messages.messages.linkTextLabel),
-    placeholder: intl.formatMessage(_messages.messages.linkTextPlaceholder),
-    clearLabel: intl.formatMessage(_messages.messages.clearText),
-    "aria-label": intl.formatMessage(_messages.messages.linkAriaLabel),
+    label: intl.formatMessage(_messages.linkTextMessages.linkTextLabel),
+    placeholder: intl.formatMessage(_messages.linkTextMessages.linkTextPlaceholder),
+    clearLabel: intl.formatMessage(_messages.linkTextMessages.clearLinkText),
+    "aria-label": intl.formatMessage(_messages.linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
@@ -430,17 +426,4 @@ function LinkPicker(_ref) {
 
 var _default = (0, _analytics2.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0, _react.memo)(LinkPicker));
 
-exports.default = _default;
-
-function getScreenReaderText(items, selectedIndex, intl) {
-  if (items.length && selectedIndex > -1) {
-    var _items$selectedIndex = items[selectedIndex],
-        name = _items$selectedIndex.name,
-        container = _items$selectedIndex.container,
-        lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
-        lastViewedDate = _items$selectedIndex.lastViewedDate;
-    var date = (0, _transformTimeStamp.transformTimeStamp)(intl, lastViewedDate, lastUpdatedDate);
-    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(', ');
-  }
-}
+exports.default = _default;

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

@@ -3,61 +3,83 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.messages = void 0;
+exports.searchMessages = exports.messages = exports.linkTextMessages = exports.linkMessages = exports.formMessages = void 0;
 
 var _reactIntlNext = require("react-intl-next");
 
-var messages = (0, _reactIntlNext.defineMessages)({
-  placeholder: {
-    id: 'fabric.linkPicker.hyperlinkToolbarPlaceholder',
+var searchMessages = (0, _reactIntlNext.defineMessages)({
+  linkLabel: {
+    id: 'fabric.linkPicker.search.linkLabel',
     defaultMessage: 'Search or paste a link',
-    description: 'Search or paste a link'
-  },
-  linkPlaceholder: {
-    id: 'fabric.linkPicker.linkPlaceholder',
-    defaultMessage: 'Paste link',
-    description: 'Create a new link by pasting a URL.'
+    description: 'Label for the link input'
   },
-  linkTextPlaceholder: {
-    id: 'fabric.linkPicker.linkTextPlaceholder',
-    defaultMessage: 'Add a description',
-    description: 'Text to display'
+  linkAriaLabel: {
+    id: 'fabric.linkPicker.search.linkAriaLabel',
+    defaultMessage: 'Suggestions will appear below as you type into the field',
+    description: 'Aria label for the link input'
   },
+  linkPlaceholder: {
+    id: 'fabric.linkPicker.search.linkPlaceholder',
+    defaultMessage: 'Find recent links or paste a new link',
+    description: 'Placeholder text for the link input'
+  }
+});
+exports.searchMessages = searchMessages;
+var linkMessages = (0, _reactIntlNext.defineMessages)({
   linkLabel: {
-    id: 'fabric.linkPicker.linkAddress',
+    id: 'fabric.linkPicker.linkLabel',
     defaultMessage: 'Link',
-    description: 'Link Label'
+    description: 'Label for the link input'
+  },
+  linkAriaLabel: {
+    id: 'fabric.linkPicker.linkAriaLabel',
+    defaultMessage: 'Type or paste a link into the field',
+    description: 'Aria label for the link input'
   },
+  linkPlaceholder: {
+    id: 'fabric.linkPicker.linkPlaceholder',
+    defaultMessage: 'Paste a link',
+    description: 'Placeholder text for the link input'
+  }
+});
+exports.linkMessages = linkMessages;
+var formMessages = (0, _reactIntlNext.defineMessages)({
   linkInvalid: {
     id: 'fabric.linkPicker.linkInvalid',
     defaultMessage: 'Enter a valid URL.',
-    description: 'Input Error the URL is invalid'
-  },
-  linkTextLabel: {
-    id: 'fabric.linkPicker.displayText',
-    defaultMessage: 'Link text',
-    description: 'Link text label'
-  },
-  clearText: {
-    id: 'fabric.linkPicker.clearLinkText',
-    defaultMessage: 'Clear text',
-    description: 'Clears text on the link toolbar'
+    description: 'Error message shown for invalid links'
   },
   clearLink: {
     id: 'fabric.linkPicker.clearLink',
     defaultMessage: 'Clear link',
-    description: 'Clears link in the link toolbar'
+    description: 'Tooltip message for link input clear button'
+  }
+});
+exports.formMessages = formMessages;
+var linkTextMessages = (0, _reactIntlNext.defineMessages)({
+  linkTextLabel: {
+    id: 'fabric.linkPicker.linkTextLabel',
+    defaultMessage: 'Add a description (optional)',
+    description: 'Label for the link description input'
   },
-  searchLinkAriaDescription: {
-    id: 'fabric.linkPicker.hyperlink.searchLinkAriaDescription',
-    defaultMessage: 'Suggestions will appear below as you type into the field',
-    description: 'Describes what the search field does for screen reader users.'
+  linkTextAriaLabel: {
+    id: 'fabric.linkPicker.linkTextAriaLabel',
+    defaultMessage: 'Link description',
+    description: 'Aria label for the link description input'
   },
-  linkAriaLabel: {
-    id: 'fabric.linkPicker.hyperlink.linkAriaLabel',
-    defaultMessage: 'Link label',
-    description: 'aria label for a link'
+  linkTextPlaceholder: {
+    id: 'fabric.linkPicker.linkTextPlaceholder',
+    defaultMessage: 'Give this link a title or description',
+    description: 'Placeholder text for the link description input'
   },
+  clearLinkText: {
+    id: 'fabric.linkPicker.clearLinkText',
+    defaultMessage: 'Clear text',
+    description: 'Tooltip message for link input clear button'
+  }
+});
+exports.linkTextMessages = linkTextMessages;
+var messages = (0, _reactIntlNext.defineMessages)({
   timeUpdated: {
     id: 'fabric.linkPicker.time.updated',
     defaultMessage: 'Updated',

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

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isUndoEvent = exports.isRedoEvent = exports.getDataSource = void 0;
+exports.getDataSource = void 0;
+exports.getScreenReaderText = getScreenReaderText;
+exports.isUndoEvent = exports.isRedoEvent = void 0;
 
 var _browser = require("./browser");
 
+var _transformTimeStamp = require("./transformTimeStamp");
+
 var KeyZCode = 90;
 var KeyYCode = 89;
 
@@ -36,4 +40,17 @@ var getDataSource = function getDataSource(item, plugin) {
   return (_ref = (_item$meta$source = (_item$meta = item.meta) === null || _item$meta === void 0 ? void 0 : _item$meta.source) !== null && _item$meta$source !== void 0 ? _item$meta$source : plugin === null || plugin === void 0 ? void 0 : (_plugin$meta = plugin.meta) === null || _plugin$meta === void 0 ? void 0 : _plugin$meta.source) !== null && _ref !== void 0 ? _ref : 'unknown';
 };
 
-exports.getDataSource = getDataSource;
+exports.getDataSource = getDataSource;
+
+function getScreenReaderText(items, selectedIndex, intl) {
+  if (items.length && selectedIndex > -1) {
+    var _items$selectedIndex = items[selectedIndex],
+        name = _items$selectedIndex.name,
+        container = _items$selectedIndex.container,
+        lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
+        lastViewedDate = _items$selectedIndex.lastViewedDate;
+    var date = (0, _transformTimeStamp.transformTimeStamp)(intl, lastViewedDate, lastUpdatedDate);
+    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(', ');
+  }
+}

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.10.0",
+	"version": "1.10.2",
 	"sideEffects": false
 }

package/dist/es2019/analytics.codegen.js

@@ -3,7 +3,7 @@
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::e8a730530bb93e19d0b85114da0581c8>>
+ * @codegen <<SignedSource::05d8b1c9e46066efd0d11fa9d19c32a9>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 function createEventPayload(eventKey, attributes) {

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

@@ -1,8 +1,15 @@
 import { useEffect, useMemo, useState, useCallback } from 'react';
+import { convertToError } from '@atlaskit/frontend-utilities/convert-to-error';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { RECENT_SEARCH_LIST_SIZE } from '../../ui/link-picker';
+import createEventPayload from '../../analytics.codegen';
+import { ANALYTICS_CHANNEL } from '../../common/constants';
 import { CancellationError, resolvePluginUpdates } from './utils';
 import { usePluginReducer } from './reducer';
 export function usePlugins(state, activeTab, plugins) {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const [retries, setRetries] = useState(0);
   const [pluginState, dispatch] = usePluginReducer();
   const activePlugin = plugins === null || plugins === void 0 ? void 0 : plugins[activeTab];
@@ -50,13 +57,16 @@ export function usePlugins(state, activeTab, plugins) {
             type: 'ERROR',
             payload: error
           });
+          createAnalyticsEvent(createEventPayload('operational.resultsResolve.failed', {
+            error: convertToError(error).toString()
+          })).fire(ANALYTICS_CHANNEL);
         }
       }
     };
 
     updateResults();
     return cancel;
-  }, [activePlugin, state, retries, dispatch]);
+  }, [activePlugin, state, retries, createAnalyticsEvent, dispatch]);
   const tabs = useMemo(() => {
     if (!plugins || plugins.length <= 1) {
       return [];

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

@@ -15,18 +15,16 @@ import { normalizeUrl, isSafeUrl } from '../../common/utils/url';
 import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import useFixHeight from '../../controllers/use-fix-height';
-import { messages } from './messages';
+import { searchMessages, linkMessages, formMessages, linkTextMessages } from './messages';
 import TextInput from './text-input';
 import { rootContainerStyles, searchIconStyles, tabsWrapperStyles, flexColumnStyles, formFooterMargin } from './styled';
 import { browser } from './browser';
 import Announcer from './announcer';
-import { transformTimeStamp } from './transformTimeStamp';
 import LinkSearchList, { testIds as listTestIds } from './link-search-list';
 import LinkSearchError, { testIds as searchErrorTestIds } from './link-search-error';
 import FormFooter, { testIds as formFooterTestIds } from './form-footer';
-import { getDataSource } from './utils';
+import { getDataSource, getScreenReaderText } from './utils';
 export const RECENT_SEARCH_LIST_SIZE = 5;
-export const CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 export const testIds = {
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
@@ -280,7 +278,7 @@ function LinkPicker({
       invalidUrl: true
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
-  const linkPlaceHolder = isActivePlugin ? messages.placeholder : messages.linkPlaceholder;
+  const messages = isActivePlugin ? searchMessages : linkMessages;
   const screenReaderDescriptionId = 'search-recent-links-field-description';
   const linkSearchListId = 'link-picker-search-list';
   const ariaActiveDescendant = selectedIndex > -1 ? `link-search-list-item-${selectedIndex}` : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
@@ -306,23 +304,23 @@ function LinkPicker({
     delay: 250
   }), jsx(VisuallyHidden, {
     id: screenReaderDescriptionId
-  }, jsx(FormattedMessage, messages.searchLinkAriaDescription)), jsx(LinkInputField, {
+  }, jsx(FormattedMessage, messages.linkAriaLabel)), jsx(LinkInputField, {
     role: "combobox",
     autoComplete: "off",
     name: "url",
     testId: testIds.urlInputField,
     label: intl.formatMessage(messages.linkLabel),
-    placeholder: intl.formatMessage(linkPlaceHolder),
+    placeholder: intl.formatMessage(messages.linkPlaceholder),
     value: url,
     autoFocus: true,
     elemBeforeInput: searchIcon,
-    clearLabel: intl.formatMessage(messages.clearLink),
+    clearLabel: intl.formatMessage(formMessages.clearLink),
     "aria-expanded": true,
     "aria-autocomplete": "list",
     "aria-controls": linkSearchListId,
     "aria-activedescendant": ariaActiveDescendant,
     "aria-describedby": screenReaderDescriptionId,
-    error: invalidUrl ? intl.formatMessage(messages.linkInvalid) : null,
+    error: invalidUrl ? intl.formatMessage(formMessages.linkInvalid) : null,
     onClear: handleUrlClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
@@ -331,10 +329,10 @@ function LinkPicker({
     name: "displayText",
     testId: testIds.textInputField,
     value: displayText,
-    label: intl.formatMessage(messages.linkTextLabel),
-    placeholder: intl.formatMessage(messages.linkTextPlaceholder),
-    clearLabel: intl.formatMessage(messages.clearText),
-    "aria-label": intl.formatMessage(messages.linkAriaLabel),
+    label: intl.formatMessage(linkTextMessages.linkTextLabel),
+    placeholder: intl.formatMessage(linkTextMessages.linkTextPlaceholder),
+    clearLabel: intl.formatMessage(linkTextMessages.clearLinkText),
+    "aria-label": intl.formatMessage(linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
@@ -373,18 +371,4 @@ function LinkPicker({
   }));
 }
 
-export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(LinkPicker));
-
-function getScreenReaderText(items, selectedIndex, intl) {
-  if (items.length && selectedIndex > -1) {
-    const {
-      name,
-      container,
-      lastUpdatedDate,
-      lastViewedDate
-    } = items[selectedIndex];
-    const date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
-    const 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(', ');
-  }
-}
+export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(LinkPicker));

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

@@ -1,55 +1,73 @@
 import { defineMessages } from 'react-intl-next';
-export const messages = defineMessages({
-  placeholder: {
-    id: 'fabric.linkPicker.hyperlinkToolbarPlaceholder',
+export const searchMessages = defineMessages({
+  linkLabel: {
+    id: 'fabric.linkPicker.search.linkLabel',
     defaultMessage: 'Search or paste a link',
-    description: 'Search or paste a link'
-  },
-  linkPlaceholder: {
-    id: 'fabric.linkPicker.linkPlaceholder',
-    defaultMessage: 'Paste link',
-    description: 'Create a new link by pasting a URL.'
+    description: 'Label for the link input'
   },
-  linkTextPlaceholder: {
-    id: 'fabric.linkPicker.linkTextPlaceholder',
-    defaultMessage: 'Add a description',
-    description: 'Text to display'
+  linkAriaLabel: {
+    id: 'fabric.linkPicker.search.linkAriaLabel',
+    defaultMessage: 'Suggestions will appear below as you type into the field',
+    description: 'Aria label for the link input'
   },
+  linkPlaceholder: {
+    id: 'fabric.linkPicker.search.linkPlaceholder',
+    defaultMessage: 'Find recent links or paste a new link',
+    description: 'Placeholder text for the link input'
+  }
+});
+export const linkMessages = defineMessages({
   linkLabel: {
-    id: 'fabric.linkPicker.linkAddress',
+    id: 'fabric.linkPicker.linkLabel',
     defaultMessage: 'Link',
-    description: 'Link Label'
+    description: 'Label for the link input'
+  },
+  linkAriaLabel: {
+    id: 'fabric.linkPicker.linkAriaLabel',
+    defaultMessage: 'Type or paste a link into the field',
+    description: 'Aria label for the link input'
   },
+  linkPlaceholder: {
+    id: 'fabric.linkPicker.linkPlaceholder',
+    defaultMessage: 'Paste a link',
+    description: 'Placeholder text for the link input'
+  }
+});
+export const formMessages = defineMessages({
   linkInvalid: {
     id: 'fabric.linkPicker.linkInvalid',
     defaultMessage: 'Enter a valid URL.',
-    description: 'Input Error the URL is invalid'
-  },
-  linkTextLabel: {
-    id: 'fabric.linkPicker.displayText',
-    defaultMessage: 'Link text',
-    description: 'Link text label'
-  },
-  clearText: {
-    id: 'fabric.linkPicker.clearLinkText',
-    defaultMessage: 'Clear text',
-    description: 'Clears text on the link toolbar'
+    description: 'Error message shown for invalid links'
   },
   clearLink: {
     id: 'fabric.linkPicker.clearLink',
     defaultMessage: 'Clear link',
-    description: 'Clears link in the link toolbar'
+    description: 'Tooltip message for link input clear button'
+  }
+});
+export const linkTextMessages = defineMessages({
+  linkTextLabel: {
+    id: 'fabric.linkPicker.linkTextLabel',
+    defaultMessage: 'Add a description (optional)',
+    description: 'Label for the link description input'
   },
-  searchLinkAriaDescription: {
-    id: 'fabric.linkPicker.hyperlink.searchLinkAriaDescription',
-    defaultMessage: 'Suggestions will appear below as you type into the field',
-    description: 'Describes what the search field does for screen reader users.'
+  linkTextAriaLabel: {
+    id: 'fabric.linkPicker.linkTextAriaLabel',
+    defaultMessage: 'Link description',
+    description: 'Aria label for the link description input'
   },
-  linkAriaLabel: {
-    id: 'fabric.linkPicker.hyperlink.linkAriaLabel',
-    defaultMessage: 'Link label',
-    description: 'aria label for a link'
+  linkTextPlaceholder: {
+    id: 'fabric.linkPicker.linkTextPlaceholder',
+    defaultMessage: 'Give this link a title or description',
+    description: 'Placeholder text for the link description input'
   },
+  clearLinkText: {
+    id: 'fabric.linkPicker.clearLinkText',
+    defaultMessage: 'Clear text',
+    description: 'Tooltip message for link input clear button'
+  }
+});
+export const messages = defineMessages({
   timeUpdated: {
     id: 'fabric.linkPicker.time.updated',
     defaultMessage: 'Updated',

package/dist/es2019/ui/link-picker/utils.js

@@ -1,4 +1,5 @@
 import { browser } from './browser';
+import { transformTimeStamp } from './transformTimeStamp';
 const KeyZCode = 90;
 const KeyYCode = 89;
 export const isUndoEvent = e => {
@@ -19,4 +20,17 @@ export const getDataSource = (item, plugin) => {
   var _ref, _item$meta$source, _item$meta, _plugin$meta;
 
   return (_ref = (_item$meta$source = (_item$meta = item.meta) === null || _item$meta === void 0 ? void 0 : _item$meta.source) !== null && _item$meta$source !== void 0 ? _item$meta$source : plugin === null || plugin === void 0 ? void 0 : (_plugin$meta = plugin.meta) === null || _plugin$meta === void 0 ? void 0 : _plugin$meta.source) !== null && _ref !== void 0 ? _ref : 'unknown';
-};
+};
+export function getScreenReaderText(items, selectedIndex, intl) {
+  if (items.length && selectedIndex > -1) {
+    const {
+      name,
+      container,
+      lastUpdatedDate,
+      lastViewedDate
+    } = items[selectedIndex];
+    const date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
+    const 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(', ');
+  }
+}

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.10.0",
+	"version": "1.10.2",
 	"sideEffects": false
 }

package/dist/esm/analytics.codegen.js

@@ -3,7 +3,7 @@
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::e8a730530bb93e19d0b85114da0581c8>>
+ * @codegen <<SignedSource::05d8b1c9e46066efd0d11fa9d19c32a9>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 function createEventPayload(eventKey, attributes) {

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

@@ -2,10 +2,17 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useEffect, useMemo, useState, useCallback } from 'react';
+import { convertToError } from '@atlaskit/frontend-utilities/convert-to-error';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { RECENT_SEARCH_LIST_SIZE } from '../../ui/link-picker';
+import createEventPayload from '../../analytics.codegen';
+import { ANALYTICS_CHANNEL } from '../../common/constants';
 import { CancellationError, resolvePluginUpdates } from './utils';
 import { usePluginReducer } from './reducer';
 export function usePlugins(state, activeTab, plugins) {
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
       retries = _useState2[0],
@@ -85,6 +92,9 @@ export function usePlugins(state, activeTab, plugins) {
                     type: 'ERROR',
                     payload: _context.t0
                   });
+                  createAnalyticsEvent(createEventPayload('operational.resultsResolve.failed', {
+                    error: convertToError(_context.t0).toString()
+                  })).fire(ANALYTICS_CHANNEL);
                 }
 
               case 17:
@@ -102,7 +112,7 @@ export function usePlugins(state, activeTab, plugins) {
 
     updateResults();
     return cancel;
-  }, [activePlugin, state, retries, dispatch]);
+  }, [activePlugin, state, retries, createAnalyticsEvent, dispatch]);
   var tabs = useMemo(function () {
     if (!plugins || plugins.length <= 1) {
       return [];

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

@@ -21,18 +21,16 @@ import { normalizeUrl, isSafeUrl } from '../../common/utils/url';
 import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import useFixHeight from '../../controllers/use-fix-height';
-import { messages } from './messages';
+import { searchMessages, linkMessages, formMessages, linkTextMessages } from './messages';
 import TextInput from './text-input';
 import { rootContainerStyles, searchIconStyles, tabsWrapperStyles, flexColumnStyles, formFooterMargin } from './styled';
 import { browser } from './browser';
 import Announcer from './announcer';
-import { transformTimeStamp } from './transformTimeStamp';
 import LinkSearchList, { testIds as listTestIds } from './link-search-list';
 import LinkSearchError, { testIds as searchErrorTestIds } from './link-search-error';
 import FormFooter, { testIds as formFooterTestIds } from './form-footer';
-import { getDataSource } from './utils';
+import { getDataSource, getScreenReaderText } from './utils';
 export var RECENT_SEARCH_LIST_SIZE = 5;
-export var CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 export var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
@@ -286,7 +284,7 @@ function LinkPicker(_ref) {
       invalidUrl: true
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
-  var linkPlaceHolder = isActivePlugin ? messages.placeholder : messages.linkPlaceholder;
+  var messages = isActivePlugin ? searchMessages : linkMessages;
   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
@@ -312,23 +310,23 @@ function LinkPicker(_ref) {
     delay: 250
   }), jsx(VisuallyHidden, {
     id: screenReaderDescriptionId
-  }, jsx(FormattedMessage, messages.searchLinkAriaDescription)), jsx(LinkInputField, {
+  }, jsx(FormattedMessage, messages.linkAriaLabel)), jsx(LinkInputField, {
     role: "combobox",
     autoComplete: "off",
     name: "url",
     testId: testIds.urlInputField,
     label: intl.formatMessage(messages.linkLabel),
-    placeholder: intl.formatMessage(linkPlaceHolder),
+    placeholder: intl.formatMessage(messages.linkPlaceholder),
     value: url,
     autoFocus: true,
     elemBeforeInput: searchIcon,
-    clearLabel: intl.formatMessage(messages.clearLink),
+    clearLabel: intl.formatMessage(formMessages.clearLink),
     "aria-expanded": true,
     "aria-autocomplete": "list",
     "aria-controls": linkSearchListId,
     "aria-activedescendant": ariaActiveDescendant,
     "aria-describedby": screenReaderDescriptionId,
-    error: invalidUrl ? intl.formatMessage(messages.linkInvalid) : null,
+    error: invalidUrl ? intl.formatMessage(formMessages.linkInvalid) : null,
     onClear: handleUrlClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
@@ -337,10 +335,10 @@ function LinkPicker(_ref) {
     name: "displayText",
     testId: testIds.textInputField,
     value: displayText,
-    label: intl.formatMessage(messages.linkTextLabel),
-    placeholder: intl.formatMessage(messages.linkTextPlaceholder),
-    clearLabel: intl.formatMessage(messages.clearText),
-    "aria-label": intl.formatMessage(messages.linkAriaLabel),
+    label: intl.formatMessage(linkTextMessages.linkTextLabel),
+    placeholder: intl.formatMessage(linkTextMessages.linkTextPlaceholder),
+    clearLabel: intl.formatMessage(linkTextMessages.clearLinkText),
+    "aria-label": intl.formatMessage(linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
@@ -383,17 +381,4 @@ function LinkPicker(_ref) {
   }));
 }
 
-export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(LinkPicker));
-
-function getScreenReaderText(items, selectedIndex, intl) {
-  if (items.length && selectedIndex > -1) {
-    var _items$selectedIndex = items[selectedIndex],
-        name = _items$selectedIndex.name,
-        container = _items$selectedIndex.container,
-        lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
-        lastViewedDate = _items$selectedIndex.lastViewedDate;
-    var date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
-    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(', ');
-  }
-}
+export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(LinkPicker));

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

@@ -1,55 +1,73 @@
 import { defineMessages } from 'react-intl-next';
-export var messages = defineMessages({
-  placeholder: {
-    id: 'fabric.linkPicker.hyperlinkToolbarPlaceholder',
+export var searchMessages = defineMessages({
+  linkLabel: {
+    id: 'fabric.linkPicker.search.linkLabel',
     defaultMessage: 'Search or paste a link',
-    description: 'Search or paste a link'
-  },
-  linkPlaceholder: {
-    id: 'fabric.linkPicker.linkPlaceholder',
-    defaultMessage: 'Paste link',
-    description: 'Create a new link by pasting a URL.'
+    description: 'Label for the link input'
   },
-  linkTextPlaceholder: {
-    id: 'fabric.linkPicker.linkTextPlaceholder',
-    defaultMessage: 'Add a description',
-    description: 'Text to display'
+  linkAriaLabel: {
+    id: 'fabric.linkPicker.search.linkAriaLabel',
+    defaultMessage: 'Suggestions will appear below as you type into the field',
+    description: 'Aria label for the link input'
   },
+  linkPlaceholder: {
+    id: 'fabric.linkPicker.search.linkPlaceholder',
+    defaultMessage: 'Find recent links or paste a new link',
+    description: 'Placeholder text for the link input'
+  }
+});
+export var linkMessages = defineMessages({
   linkLabel: {
-    id: 'fabric.linkPicker.linkAddress',
+    id: 'fabric.linkPicker.linkLabel',
     defaultMessage: 'Link',
-    description: 'Link Label'
+    description: 'Label for the link input'
+  },
+  linkAriaLabel: {
+    id: 'fabric.linkPicker.linkAriaLabel',
+    defaultMessage: 'Type or paste a link into the field',
+    description: 'Aria label for the link input'
   },
+  linkPlaceholder: {
+    id: 'fabric.linkPicker.linkPlaceholder',
+    defaultMessage: 'Paste a link',
+    description: 'Placeholder text for the link input'
+  }
+});
+export var formMessages = defineMessages({
   linkInvalid: {
     id: 'fabric.linkPicker.linkInvalid',
     defaultMessage: 'Enter a valid URL.',
-    description: 'Input Error the URL is invalid'
-  },
-  linkTextLabel: {
-    id: 'fabric.linkPicker.displayText',
-    defaultMessage: 'Link text',
-    description: 'Link text label'
-  },
-  clearText: {
-    id: 'fabric.linkPicker.clearLinkText',
-    defaultMessage: 'Clear text',
-    description: 'Clears text on the link toolbar'
+    description: 'Error message shown for invalid links'
   },
   clearLink: {
     id: 'fabric.linkPicker.clearLink',
     defaultMessage: 'Clear link',
-    description: 'Clears link in the link toolbar'
+    description: 'Tooltip message for link input clear button'
+  }
+});
+export var linkTextMessages = defineMessages({
+  linkTextLabel: {
+    id: 'fabric.linkPicker.linkTextLabel',
+    defaultMessage: 'Add a description (optional)',
+    description: 'Label for the link description input'
   },
-  searchLinkAriaDescription: {
-    id: 'fabric.linkPicker.hyperlink.searchLinkAriaDescription',
-    defaultMessage: 'Suggestions will appear below as you type into the field',
-    description: 'Describes what the search field does for screen reader users.'
+  linkTextAriaLabel: {
+    id: 'fabric.linkPicker.linkTextAriaLabel',
+    defaultMessage: 'Link description',
+    description: 'Aria label for the link description input'
   },
-  linkAriaLabel: {
-    id: 'fabric.linkPicker.hyperlink.linkAriaLabel',
-    defaultMessage: 'Link label',
-    description: 'aria label for a link'
+  linkTextPlaceholder: {
+    id: 'fabric.linkPicker.linkTextPlaceholder',
+    defaultMessage: 'Give this link a title or description',
+    description: 'Placeholder text for the link description input'
   },
+  clearLinkText: {
+    id: 'fabric.linkPicker.clearLinkText',
+    defaultMessage: 'Clear text',
+    description: 'Tooltip message for link input clear button'
+  }
+});
+export var messages = defineMessages({
   timeUpdated: {
     id: 'fabric.linkPicker.time.updated',
     defaultMessage: 'Updated',

package/dist/esm/ui/link-picker/utils.js

@@ -1,4 +1,5 @@
 import { browser } from './browser';
+import { transformTimeStamp } from './transformTimeStamp';
 var KeyZCode = 90;
 var KeyYCode = 89;
 export var isUndoEvent = function isUndoEvent(e) {
@@ -19,4 +20,16 @@ export var getDataSource = function getDataSource(item, plugin) {
   var _ref, _item$meta$source, _item$meta, _plugin$meta;
 
   return (_ref = (_item$meta$source = (_item$meta = item.meta) === null || _item$meta === void 0 ? void 0 : _item$meta.source) !== null && _item$meta$source !== void 0 ? _item$meta$source : plugin === null || plugin === void 0 ? void 0 : (_plugin$meta = plugin.meta) === null || _plugin$meta === void 0 ? void 0 : _plugin$meta.source) !== null && _ref !== void 0 ? _ref : 'unknown';
-};
+};
+export function getScreenReaderText(items, selectedIndex, intl) {
+  if (items.length && selectedIndex > -1) {
+    var _items$selectedIndex = items[selectedIndex],
+        name = _items$selectedIndex.name,
+        container = _items$selectedIndex.container,
+        lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
+        lastViewedDate = _items$selectedIndex.lastViewedDate;
+    var date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
+    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(', ');
+  }
+}

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.10.0",
+	"version": "1.10.2",
 	"sideEffects": false
 }

package/dist/types/analytics.codegen.d.ts

@@ -3,7 +3,7 @@
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::e8a730530bb93e19d0b85114da0581c8>>
+ * @codegen <<SignedSource::05d8b1c9e46066efd0d11fa9d19c32a9>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 export declare type PackageMetaDataType = {
@@ -30,6 +30,9 @@ export declare type LinkPickerUnhandledErrorCaughtAttributesType = {
     error: string;
     componentStack: string | null;
 };
+export declare type ResultsResolveFailedAttributesType = {
+    error: string;
+};
 declare type AnalyticsEventAttributes = {
     'ui.form.submitted.linkPicker': FormSubmittedLinkPickerAttributesType;
     'ui.inlineDialog.viewed.linkPicker': InlineDialogViewedLinkPickerAttributesType;
@@ -37,6 +40,7 @@ declare type AnalyticsEventAttributes = {
     'ui.textField.updated.linkField': TextFieldUpdatedLinkFieldAttributesType;
     'ui.textField.updated.displayTextField': TextFieldUpdatedDisplayTextFieldAttributesType;
     'ui.linkPicker.unhandledErrorCaught': LinkPickerUnhandledErrorCaughtAttributesType;
+    'operational.resultsResolve.failed': ResultsResolveFailedAttributesType;
 };
 declare function createEventPayload<K extends keyof AnalyticsEventAttributes>(eventKey: K, attributes: AnalyticsEventAttributes[K]): {
     eventType: string;

package/dist/types/ui/link-picker/index.d.ts

@@ -2,7 +2,6 @@
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { LinkInputType, LinkPickerPlugin } from '../types';
 export declare const RECENT_SEARCH_LIST_SIZE = 5;
-export declare const CONTACT_SUPPORT_LINK = "https://support.atlassian.com/contact/";
 export declare const testIds: {
     readonly clearUrlButton: "clear-text";
     readonly urlError: "link-error";

package/dist/types/ui/link-picker/messages.d.ts

@@ -1,35 +1,39 @@
-export declare const messages: {
-    placeholder: {
+export declare const searchMessages: {
+    linkLabel: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    linkPlaceholder: {
+    linkAriaLabel: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    linkTextPlaceholder: {
+    linkPlaceholder: {
         id: string;
         defaultMessage: string;
         description: string;
     };
+};
+export declare const linkMessages: {
     linkLabel: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    linkInvalid: {
+    linkAriaLabel: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    linkTextLabel: {
+    linkPlaceholder: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    clearText: {
+};
+export declare const formMessages: {
+    linkInvalid: {
         id: string;
         defaultMessage: string;
         description: string;
@@ -39,16 +43,30 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    searchLinkAriaDescription: {
+};
+export declare const linkTextMessages: {
+    linkTextLabel: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    linkAriaLabel: {
+    linkTextAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkTextPlaceholder: {
         id: string;
         defaultMessage: string;
         description: string;
     };
+    clearLinkText: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const messages: {
     timeUpdated: {
         id: string;
         defaultMessage: string;

package/dist/types/ui/link-picker/utils.d.ts

@@ -1,4 +1,5 @@
 import { KeyboardEvent } from 'react';
+import { IntlShape } from 'react-intl-next';
 import { LinkPickerPlugin, LinkSearchListItemData } from '../types';
 export declare const isUndoEvent: (e: KeyboardEvent<HTMLInputElement>) => boolean;
 export declare const isRedoEvent: (e: KeyboardEvent<HTMLInputElement>) => boolean;
@@ -6,3 +7,4 @@ export declare const isRedoEvent: (e: KeyboardEvent<HTMLInputElement>) => boolea
  * Retrieve the data source for a link given the item and the plugin that resolved it
  */
 export declare const getDataSource: (item: LinkSearchListItemData, plugin?: LinkPickerPlugin | undefined) => string;
+export declare function getScreenReaderText(items: LinkSearchListItemData[], selectedIndex: number, intl: IntlShape): string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -34,6 +34,7 @@
     "@atlaskit/button": "^16.2.0",
     "@atlaskit/empty-state": "^7.4.0",
     "@atlaskit/form": "^8.5.1",
+    "@atlaskit/frontend-utilities": "^2.0.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/tabs": "^13.3.0",