@atlaskit/link-picker 1.27.1 → 1.28.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/link-picker
 
+## 1.28.0
+
+### Minor Changes
+
+- [`db2a42eb771`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db2a42eb771) - [ux] EDM-7273 Jira create feature discovery
+
+## 1.27.2
+
+### Patch Changes
+
+- [`fa3c0d93eae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fa3c0d93eae) - Improves fixed height display of link picker when 'platform.linking-platform.link-picker.fixed-height-search-results' is enabled.
+- Updated dependencies
+
 ## 1.27.1
 
 ### Patch Changes

package/compass.yml

@@ -21,7 +21,7 @@ links:
     url: 'https://product-fabric.atlassian.net/jira/software/c/projects/EDM/boards/893'
   - name: ''
     type: ON_CALL
-    url: 'https://atlassian.app.opsgenie.com/settings/schedule/detail/98927e5e-f400-41a3-bdd1-b580c9b1d78b'
+    url: 'https://atlassian.app.opsgenie.com/settings/schedule/detail/b9c8b313-dd6d-4a41-8eeb-d7a9df55be9d'
   - name: ''
     type: DASHBOARD
     url: 'https://atlassian.signalfx.com/#/dashboard/EXwrMgYAwAA?groupId=EXwtbIrA4AA&configId=EXwrNLcA4AA'

package/dist/cjs/common/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RECENT_SEARCH_LIST_SIZE = exports.LINK_PICKER_WIDTH_IN_PX = exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = exports.LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK = exports.COMPONENT_NAME = exports.ANALYTICS_CHANNEL = void 0;
+exports.RECENT_SEARCH_LIST_SIZE = exports.LINK_PICKER_WIDTH_IN_PX = exports.LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK = exports.COMPONENT_NAME = exports.ANALYTICS_CHANNEL = void 0;
 var ANALYTICS_CHANNEL = 'media';
 exports.ANALYTICS_CHANNEL = ANALYTICS_CHANNEL;
 var COMPONENT_NAME = 'linkPicker';
@@ -12,13 +12,5 @@ var RECENT_SEARCH_LIST_SIZE = 5;
 exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
 var LINK_PICKER_WIDTH_IN_PX = 342;
 exports.LINK_PICKER_WIDTH_IN_PX = LINK_PICKER_WIDTH_IN_PX;
-var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = '472px';
-exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT;
-var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = '550px';
-exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT;
-var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = '218px';
-exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT;
-var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = '141px';
-exports.LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT;
 var LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK = '290px';
 exports.LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK = LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK;

package/dist/cjs/common/ui/min-height-container/styled.js

@@ -8,5 +8,5 @@ exports.minHeightComponentStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _templateObject;
-var minHeightComponentStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--link-picker-min-height);\n"])));
+var minHeightComponentStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: stretch;\n  justify-content: center;\n  min-height: var(--link-picker-min-height);\n"])));
 exports.minHeightComponentStyles = minHeightComponentStyles;

package/dist/cjs/ui/link-picker/form-footer/feature-discovery/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _storageClient = require("@atlaskit/frontend-utilities/storage-client");
+var _styled = require("./styled");
+/** @jsx jsx */
+
+var LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/link-picker';
+var LOCAL_STORAGE_DISCOVERY_KEY = 'action-discovery-jira-create';
+var LOCAL_STORAGE_DISCOVERY_VALUE = 'discovered';
+var LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS = 15552000000; // 180 days
+
+/**
+ * This is a hacky solution to help with the feature discovery.
+ * This implementation must be removed once the experiment is completed.
+ *
+ * Cleanup ticket:
+ * https://product-fabric.atlassian.net/browse/EDM-7480
+ */
+var FeatureDiscovery = function FeatureDiscovery(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  var storageClient = (0, _react.useMemo)(function () {
+    return new _storageClient.StorageClient(LOCAL_STORAGE_CLIENT_KEY);
+  }, []);
+  // Set this to `false` if you want to always show the feature discovery pulse.
+  // (or open Application tab in your devtools and delete the relevent row)
+  var discovered = (0, _react.useMemo)(function () {
+    return storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY) === LOCAL_STORAGE_DISCOVERY_VALUE;
+  }, [storageClient]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (!discovered) {
+        storageClient.setItemWithExpiry(LOCAL_STORAGE_DISCOVERY_KEY, LOCAL_STORAGE_DISCOVERY_VALUE, LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS);
+      }
+    };
+  }, [storageClient, discovered]);
+  if (discovered) {
+    return children;
+  }
+  return (0, _react2.jsx)("span", {
+    css: _styled.pulseStyles,
+    "data-testid": "".concat(testId, "-discovery")
+  }, children);
+};
+var _default = FeatureDiscovery;
+exports.default = _default;

package/dist/cjs/ui/link-picker/form-footer/feature-discovery/styled.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pulseStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject, _templateObject2;
+var pulseKeyframes = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  to {\n    box-shadow: 0 0 0 7px rgba(0, 0, 0, 0);\n  }\n"])));
+
+// Styling from atlassian-frontend/packages/design-system/onboarding/src/styled/target.tsx
+var pulseColor = 'rgb(101, 84, 192)';
+var pulseStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  border-radius: 3px;\n  box-shadow: 0 0 0 0 ", ";\n  animation: ", " 1.45s cubic-bezier(0.5, 0, 0, 1) infinite;\n"])), pulseColor, pulseKeyframes);
+exports.pulseStyles = pulseStyles;

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

@@ -14,9 +14,10 @@ var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireWildcard(require("@atlaskit/button"));
 var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
 var _errors = require("../../../common/utils/errors");
+var _featureDiscovery = _interopRequireDefault(require("./feature-discovery"));
 var _styled = require("./styled");
 var _utils = require("./utils");
-var _excluded = ["isLoading", "error", "url", "queryState", "items", "isEditing", "onCancel", "action"];
+var _excluded = ["isLoading", "error", "url", "queryState", "items", "isEditing", "onCancel", "action", "createFeatureDiscovery"];
 /** @jsx jsx */
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
@@ -40,7 +41,9 @@ var messages = (0, _reactIntlNext.defineMessages)({
 var testIds = {
   insertButton: 'link-picker-insert-button',
   cancelButton: 'link-picker-cancel-button',
-  actionButton: 'link-picker-action-button'
+  actionButton: 'link-picker-action-button',
+  /** Feature discovery for action button (css pulse) */
+  actionButtonDiscovery: 'link-picker-action-button-discovery'
 };
 exports.testIds = testIds;
 var FormFooter = /*#__PURE__*/(0, _react.memo)(function (_ref) {
@@ -52,6 +55,8 @@ var FormFooter = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     isEditing = _ref.isEditing,
     onCancel = _ref.onCancel,
     action = _ref.action,
+    _ref$createFeatureDis = _ref.createFeatureDiscovery,
+    createFeatureDiscovery = _ref$createFeatureDis === void 0 ? false : _ref$createFeatureDis,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var intl = (0, _reactIntlNext.useIntl)();
   if (error && error instanceof _errors.UnauthenticatedError) {
@@ -59,19 +64,24 @@ var FormFooter = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }
   var isSubmitDisabled = (0, _utils.checkSubmitDisabled)(isLoading, error, url, queryState, items);
   var insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
+  var createButton = function createButton(pluginAction) {
+    return (0, _react2.jsx)(_button.default, {
+      testId: testIds.actionButton,
+      onClick: pluginAction.callback,
+      appearance: "default",
+      iconBefore: (0, _react2.jsx)(_add.default, {
+        label: "",
+        size: "medium"
+      })
+    }, typeof pluginAction.label === 'string' ? pluginAction.label : intl.formatMessage(pluginAction.label));
+  };
   return (0, _react2.jsx)("footer", (0, _extends2.default)({
     css: _styled.formFooterStyles
   }, restProps), action && (0, _react2.jsx)("div", {
     css: _styled.formFooterActionStyles
-  }, (0, _react2.jsx)(_button.default, {
-    testId: testIds.actionButton,
-    onClick: action.callback,
-    appearance: "default",
-    iconBefore: (0, _react2.jsx)(_add.default, {
-      label: "",
-      size: "medium"
-    })
-  }, typeof action.label === 'string' ? action.label : intl.formatMessage(action.label))), (0, _react2.jsx)(_button.ButtonGroup, null, (0, _react2.jsx)(_button.default, {
+  }, createFeatureDiscovery ? (0, _react2.jsx)(_featureDiscovery.default, {
+    testId: testIds.actionButtonDiscovery
+  }, createButton(action)) : createButton(action)), (0, _react2.jsx)(_button.ButtonGroup, null, (0, _react2.jsx)(_button.default, {
     appearance: "subtle",
     onClick: onCancel,
     testId: testIds.cancelButton

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

@@ -13,6 +13,7 @@ var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _url2 = require("@atlaskit/linking-common/url");
 var _userAgent = require("@atlaskit/linking-common/user-agent");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _analytics = require("../../common/analytics");
 var _constants = require("../../common/constants");
@@ -44,13 +45,17 @@ var initState = {
   selectedIndex: -1,
   invalidUrl: false,
   activeTab: 0,
-  preventHidingRecents: false
+  preventHidingRecents: false,
+  /** This only allows the feature discovery pulse - to be shown the ff must be on and active tab be Jira */
+  allowCreateFeatureDiscovery: true
 };
 function reducer(state, payload) {
   if (payload.url && state.url !== payload.url) {
     return _objectSpread(_objectSpread({}, state), {}, {
       invalidUrl: false,
-      selectedIndex: (0, _url2.isSafeUrl)(payload.url) && payload.url.length ? -1 : state.selectedIndex
+      selectedIndex: (0, _url2.isSafeUrl)(payload.url) && payload.url.length ? -1 : state.selectedIndex,
+      /** When the user starts entering a url, stop pulsing the create button */
+      allowCreateFeatureDiscovery: false
     }, payload);
   }
   return _objectSpread(_objectSpread({}, state), payload);
@@ -96,7 +101,8 @@ var LinkPicker = (0, _analytics.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0
     url = state.url,
     displayText = state.displayText,
     invalidUrl = state.invalidUrl,
-    activeTab = state.activeTab;
+    activeTab = state.activeTab,
+    allowCreateFeatureDiscovery = state.allowCreateFeatureDiscovery;
   var intl = (0, _reactIntlNext.useIntl)();
   var queryState = (0, _useSearchQuery.useSearchQuery)(state);
   var _usePlugins = (0, _usePlugins2.usePlugins)(queryState, activeTab, plugins),
@@ -316,7 +322,7 @@ var LinkPicker = (0, _analytics.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0
     "aria-label": intl.formatMessage(_messages.linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
     onChange: handleChangeText
-  }), !!queryState && (0, _react2.jsx)(_searchResults.SearchResults, {
+  }), !!queryState && (isLoadingPlugins || isActivePlugin) && (0, _react2.jsx)(_searchResults.SearchResults, {
     activeTab: activeTab,
     tabs: tabs,
     activePlugin: activePlugin,
@@ -345,6 +351,9 @@ var LinkPicker = (0, _analytics.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0
     onCancel: onCancel,
     action: pluginAction,
     css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? _styled.formFooterMargin : undefined
+    /* Show the feature discovery pulse when we're on the Jira tab, we haven't started typing a url and
+    the feature flag is enabled */,
+    createFeatureDiscovery: (activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.tabKey) === 'jira' && allowCreateFeatureDiscovery && (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.enable-jira-create')
   }));
 }));
 exports.LinkPicker = LinkPicker;

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

@@ -16,6 +16,7 @@ var _useFixHeight = require("../../../controllers/use-fix-height");
 var _linkSearchError = require("./link-search-error");
 var _linkSearchList = require("./link-search-list");
 var _scrollingTabs = require("./scrolling-tabs");
+var _searchResultsContainer = require("./search-results-container");
 var _styled = require("./styled");
 var _trackTabViewed = require("./track-tab-viewed");
 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); }
@@ -57,7 +58,9 @@ var SearchResults = function SearchResults(_ref) {
       testId: testIds.tabItem
     }, tab.tabTitle);
   }));
-  return (0, _react2.jsx)(_react.Fragment, null, isLoadingPlugins && !!queryState && (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)(_searchResultsContainer.SearchResultsContainer, (0, _extends2.default)({
+    hasTabs: !!tabs.length || isLoadingPlugins
+  }, fixListHeightProps), isLoadingPlugins && !!queryState && (0, _react2.jsx)("div", {
     css: _styled.spinnerContainerStyles
   }, (0, _react2.jsx)(_spinner.default, {
     testId: testIds.tabsLoadingIndicator,
@@ -71,9 +74,7 @@ var SearchResults = function SearchResults(_ref) {
     onChange: handleTabChange
   }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? (0, _react2.jsx)(_scrollingTabs.ScrollingTabList, null, tabList) : tabList), (0, _react2.jsx)(_trackTabViewed.TrackTabViewed, {
     activePlugin: activePlugin
-  })), (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: _styled.flexColumnStyles
-  }, fixListHeightProps), !error && (0, _react2.jsx)(_linkSearchList.LinkSearchList, {
+  })), !error && (0, _react2.jsx)(_linkSearchList.LinkSearchList, {
     id: linkSearchListId,
     role: "listbox",
     items: items,
@@ -85,6 +86,6 @@ var SearchResults = function SearchResults(_ref) {
     onKeyDown: handleKeyDown,
     hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
     activePlugin: activePlugin
-  }), error && ((_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : (0, _react2.jsx)(_linkSearchError.LinkSearchError, null)))));
+  }), error && ((_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : (0, _react2.jsx)(_linkSearchError.LinkSearchError, null))));
 };
 exports.SearchResults = SearchResults;

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

@@ -14,6 +14,7 @@ var _reactIntlNext = require("react-intl-next");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _minHeightContainer = require("../../../../common/ui/min-height-container");
 var _handleNavKeyDown = require("../../../../common/utils/handleNavKeyDown");
 var _linkSearchNoResults = require("./link-search-no-results");
 var _styled = require("./link-search-no-results/styled");
@@ -155,7 +156,8 @@ var LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     })));
   }
   if (isLoading) {
-    loadingContent = (0, _react2.jsx)("div", {
+    loadingContent = (0, _react2.jsx)(_minHeightContainer.MinHeightContainer, {
+      minHeight: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.fixed-height-search-results') ? '50px' : '80px',
       css: _styled2.spinnerContainerStyles
     }, (0, _react2.jsx)(_spinner.default, {
       testId: testIds.searchResultLoadingIndicator,

package/dist/cjs/ui/link-picker/search-results/link-search-list/styled.js

@@ -10,9 +10,9 @@ var _react = require("@emotion/react");
 var _theme = require("@atlaskit/theme");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-var listContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0;\n  min-height: 80px;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
+var listContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  padding-top: 0;\n  min-height: 80px;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
 exports.listContainerStyles = listContainerStyles;
-var spinnerContainerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  min-height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n"])));
+var spinnerContainerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  flex-direction: column;\n  align-items: center;\n"])));
 exports.spinnerContainerStyles = spinnerContainerStyles;
 var listStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  margin: 0 calc(-1 * ", ");\n  list-style: none;\n"])), "var(--ds-space-200, 16px)");
 exports.listStyles = listStyles;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchResultsContainer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _minHeightContainer = require("../../../../common/ui/min-height-container");
+var _styled = require("./styled");
+var _excluded = ["hasTabs"];
+/** @jsx jsx */
+var SearchResultsContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var hasTabs = _ref.hasTabs,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var minHeight = hasTabs ? '347px' : '302px';
+  var ffMinHeight = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.fixed-height-search-results') ? minHeight : 'auto';
+  return (0, _react2.jsx)(_minHeightContainer.MinHeightContainer, (0, _extends2.default)({
+    ref: ref,
+    minHeight: ffMinHeight,
+    css: _styled.flexColumn
+  }, props));
+});
+exports.SearchResultsContainer = SearchResultsContainer;

package/dist/cjs/ui/link-picker/search-results/search-results-container/styled.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flexColumn = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject;
+var flexColumn = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  width: 100%;\n"])));
+exports.flexColumn = flexColumn;

package/dist/cjs/ui/link-picker/search-results/styled.js

@@ -10,7 +10,7 @@ var _react = require("@emotion/react");
 var _templateObject, _templateObject2, _templateObject3;
 var tabsWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  margin-left: calc(-1 * ", ");\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
 exports.tabsWrapperStyles = tabsWrapperStyles;
-var spinnerContainerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n"])));
+var spinnerContainerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  flex-grow: 1;\n"])));
 exports.spinnerContainerStyles = spinnerContainerStyles;
 var flexColumnStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
 exports.flexColumnStyles = flexColumnStyles;

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

@@ -4,20 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tabsWrapperStyles = exports.rootContainerStyles = exports.formFooterMargin = exports.flexColumnStyles = void 0;
+exports.rootContainerStyles = exports.formFooterMargin = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../common/constants");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2;
 /**
  * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
  */
 var rootContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  padding: ", " ", "\n    ", ";\n  box-sizing: border-box;\n  line-height: initial;\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.fixed-height-search-results') ? undefined : "".concat(_constants.LINK_PICKER_WIDTH_IN_PX, "px"), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
 exports.rootContainerStyles = rootContainerStyles;
-var tabsWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  margin-left: calc(-1 * ", ");\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
-exports.tabsWrapperStyles = tabsWrapperStyles;
-var flexColumnStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
-exports.flexColumnStyles = flexColumnStyles;
-var formFooterMargin = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n"])), "var(--ds-space-200, 16px)");
+var formFooterMargin = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n"])), "var(--ds-space-200, 16px)");
 exports.formFooterMargin = formFooterMargin;

package/dist/cjs/ui/loader-fallback/index.js

@@ -8,10 +8,16 @@ exports.LoaderFallback = void 0;
 var _react = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-var _constants = require("../../common/constants");
 var _minHeightContainer = require("../../common/ui/min-height-container");
+var _styled = require("./styled");
 /** @jsx jsx */
 
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = '472px';
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = '550px';
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT = '505px';
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITHOUT_DISPLAYTEXT = '429px';
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = '218px';
+var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = '141px';
 // EDM-7122: can delete these two consts once min height container for link picker is firm for the loader
 var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT = '142px';
 var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT = '220px';
@@ -20,10 +26,13 @@ var getEstimatedMinHeight = function getEstimatedMinHeight(_ref) {
     isLoadingPlugins = _ref.isLoadingPlugins,
     plugins = _ref.plugins;
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.fixed-height-search-results')) {
-    if (plugins !== null && plugins !== void 0 && plugins.length || isLoadingPlugins) {
-      return hideDisplayText ? _constants.LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT : _constants.LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT;
+    if (plugins && plugins.length > 1 || isLoadingPlugins) {
+      return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT;
     }
-    return hideDisplayText ? _constants.LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT : _constants.LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT;
+    if ((plugins === null || plugins === void 0 ? void 0 : plugins.length) === 1) {
+      return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT;
+    }
+    return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT;
   }
   return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT;
 };
@@ -36,7 +45,8 @@ var LoaderFallback = function LoaderFallback(props) {
   var minHeight = getEstimatedMinHeight(props);
   return (0, _react.jsx)(_minHeightContainer.MinHeightContainer, {
     minHeight: minHeight,
-    "data-testid": "link-picker-root-loader-boundary-ui"
+    "data-testid": "link-picker-root-loader-boundary-ui",
+    css: _styled.styles
   }, (0, _react.jsx)(_spinner.default, {
     testId: "link-picker.component-loading-indicator",
     size: "medium"

package/dist/cjs/ui/loader-fallback/styled.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject;
+var styles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n"])));
+exports.styles = styles;

package/dist/cjs/version.json

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

package/dist/es2019/common/constants.js

@@ -2,8 +2,4 @@ export const ANALYTICS_CHANNEL = 'media';
 export const COMPONENT_NAME = 'linkPicker';
 export const RECENT_SEARCH_LIST_SIZE = 5;
 export const LINK_PICKER_WIDTH_IN_PX = 342;
-export const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = '472px';
-export const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = '550px';
-export const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = '218px';
-export const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = '141px';
 export const LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK = '290px';

package/dist/es2019/common/ui/min-height-container/styled.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 export const minHeightComponentStyles = css`
   display: flex;
-  align-items: center;
+  align-items: stretch;
   justify-content: center;
   min-height: var(--link-picker-min-height);
 `;

package/dist/es2019/ui/link-picker/form-footer/feature-discovery/index.js

@@ -0,0 +1,41 @@
+/** @jsx jsx */
+import { useEffect, useMemo } from 'react';
+import { jsx } from '@emotion/react';
+import { StorageClient } from '@atlaskit/frontend-utilities/storage-client';
+import { pulseStyles } from './styled';
+const LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/link-picker';
+const LOCAL_STORAGE_DISCOVERY_KEY = 'action-discovery-jira-create';
+const LOCAL_STORAGE_DISCOVERY_VALUE = 'discovered';
+const LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS = 15552000000; // 180 days
+
+/**
+ * This is a hacky solution to help with the feature discovery.
+ * This implementation must be removed once the experiment is completed.
+ *
+ * Cleanup ticket:
+ * https://product-fabric.atlassian.net/browse/EDM-7480
+ */
+const FeatureDiscovery = ({
+  children,
+  testId
+}) => {
+  const storageClient = useMemo(() => new StorageClient(LOCAL_STORAGE_CLIENT_KEY), []);
+  // Set this to `false` if you want to always show the feature discovery pulse.
+  // (or open Application tab in your devtools and delete the relevent row)
+  const discovered = useMemo(() => storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY) === LOCAL_STORAGE_DISCOVERY_VALUE, [storageClient]);
+  useEffect(() => {
+    return () => {
+      if (!discovered) {
+        storageClient.setItemWithExpiry(LOCAL_STORAGE_DISCOVERY_KEY, LOCAL_STORAGE_DISCOVERY_VALUE, LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS);
+      }
+    };
+  }, [storageClient, discovered]);
+  if (discovered) {
+    return children;
+  }
+  return jsx("span", {
+    css: pulseStyles,
+    "data-testid": `${testId}-discovery`
+  }, children);
+};
+export default FeatureDiscovery;

package/dist/es2019/ui/link-picker/form-footer/feature-discovery/styled.js

@@ -0,0 +1,15 @@
+import { css, keyframes } from '@emotion/react';
+const pulseKeyframes = keyframes`
+  to {
+    box-shadow: 0 0 0 7px rgba(0, 0, 0, 0);
+  }
+`;
+
+// Styling from atlassian-frontend/packages/design-system/onboarding/src/styled/target.tsx
+const pulseColor = 'rgb(101, 84, 192)';
+export const pulseStyles = css`
+  display: inline-flex;
+  border-radius: 3px;
+  box-shadow: 0 0 0 0 ${pulseColor};
+  animation: ${pulseKeyframes} 1.45s cubic-bezier(0.5, 0, 0, 1) infinite;
+`;

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

@@ -6,6 +6,7 @@ import { defineMessages, useIntl } from 'react-intl-next';
 import Button, { ButtonGroup } from '@atlaskit/button';
 import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
 import { UnauthenticatedError } from '../../../common/utils/errors';
+import FeatureDiscovery from './feature-discovery';
 import { formFooterActionStyles, formFooterStyles } from './styled';
 import { checkSubmitDisabled } from './utils';
 const messages = defineMessages({
@@ -28,7 +29,9 @@ const messages = defineMessages({
 export const testIds = {
   insertButton: 'link-picker-insert-button',
   cancelButton: 'link-picker-cancel-button',
-  actionButton: 'link-picker-action-button'
+  actionButton: 'link-picker-action-button',
+  /** Feature discovery for action button (css pulse) */
+  actionButtonDiscovery: 'link-picker-action-button-discovery'
 };
 export const FormFooter = /*#__PURE__*/memo(({
   isLoading,
@@ -39,6 +42,7 @@ export const FormFooter = /*#__PURE__*/memo(({
   isEditing,
   onCancel,
   action,
+  createFeatureDiscovery = false,
   ...restProps
 }) => {
   const intl = useIntl();
@@ -47,19 +51,22 @@ export const FormFooter = /*#__PURE__*/memo(({
   }
   const isSubmitDisabled = checkSubmitDisabled(isLoading, error, url, queryState, items);
   const insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
-  return jsx("footer", _extends({
-    css: formFooterStyles
-  }, restProps), action && jsx("div", {
-    css: formFooterActionStyles
-  }, jsx(Button, {
+  const createButton = pluginAction => jsx(Button, {
     testId: testIds.actionButton,
-    onClick: action.callback,
+    onClick: pluginAction.callback,
     appearance: "default",
     iconBefore: jsx(EditorAddIcon, {
       label: "",
       size: "medium"
     })
-  }, typeof action.label === 'string' ? action.label : intl.formatMessage(action.label))), jsx(ButtonGroup, null, jsx(Button, {
+  }, typeof pluginAction.label === 'string' ? pluginAction.label : intl.formatMessage(pluginAction.label));
+  return jsx("footer", _extends({
+    css: formFooterStyles
+  }, restProps), action && jsx("div", {
+    css: formFooterActionStyles
+  }, createFeatureDiscovery ? jsx(FeatureDiscovery, {
+    testId: testIds.actionButtonDiscovery
+  }, createButton(action)) : createButton(action)), jsx(ButtonGroup, null, jsx(Button, {
     appearance: "subtle",
     onClick: onCancel,
     testId: testIds.cancelButton