@atlaskit/link-picker 1.27.1 → 1.28.0

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

@@ -5,6 +5,7 @@ import { FormattedMessage, useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { isSafeUrl, normalizeUrl } from '@atlaskit/linking-common/url';
 import { browser } from '@atlaskit/linking-common/user-agent';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useLinkPickerAnalytics, withInputFieldTracking, withLinkPickerAnalyticsContext } from '../../common/analytics';
 import { ANALYTICS_CHANNEL } from '../../common/constants';
@@ -36,7 +37,9 @@ const 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) {
@@ -44,6 +47,8 @@ function reducer(state, payload) {
       ...state,
       invalidUrl: false,
       selectedIndex: isSafeUrl(payload.url) && payload.url.length ? -1 : state.selectedIndex,
+      /** When the user starts entering a url, stop pulsing the create button */
+      allowCreateFeatureDiscovery: false,
       ...payload
     };
   }
@@ -93,7 +98,8 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     url,
     displayText,
     invalidUrl,
-    activeTab
+    activeTab,
+    allowCreateFeatureDiscovery
   } = state;
   const intl = useIntl();
   const queryState = useSearchQuery(state);
@@ -316,7 +322,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     "aria-label": intl.formatMessage(linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
     onChange: handleChangeText
-  }), !!queryState && jsx(SearchResults, {
+  }), !!queryState && (isLoadingPlugins || isActivePlugin) && jsx(SearchResults, {
     activeTab: activeTab,
     tabs: tabs,
     activePlugin: activePlugin,
@@ -345,5 +351,8 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     onCancel: onCancel,
     action: pluginAction,
     css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? 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 && getBooleanFF('platform.linking-platform.link-picker.enable-jira-create')
   }));
 }));

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

@@ -8,7 +8,8 @@ import { useFixHeight } from '../../../controllers/use-fix-height';
 import { LinkSearchError, testIds as searchErrorTestIds } from './link-search-error';
 import { LinkSearchList, testIds as listTestIds } from './link-search-list';
 import { ScrollingTabList } from './scrolling-tabs';
-import { flexColumnStyles, spinnerContainerStyles, tabsWrapperStyles } from './styled';
+import { SearchResultsContainer } from './search-results-container';
+import { spinnerContainerStyles, tabsWrapperStyles } from './styled';
 import { TrackTabViewed } from './track-tab-viewed';
 export const testIds = {
   ...searchErrorTestIds,
@@ -45,7 +46,9 @@ export const SearchResults = ({
     key: tab.tabTitle,
     testId: testIds.tabItem
   }, tab.tabTitle)));
-  return jsx(Fragment, null, isLoadingPlugins && !!queryState && jsx("div", {
+  return jsx(SearchResultsContainer, _extends({
+    hasTabs: !!tabs.length || isLoadingPlugins
+  }, fixListHeightProps), isLoadingPlugins && !!queryState && jsx("div", {
     css: spinnerContainerStyles
   }, jsx(Spinner, {
     testId: testIds.tabsLoadingIndicator,
@@ -59,9 +62,7 @@ export const SearchResults = ({
     onChange: handleTabChange
   }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? jsx(ScrollingTabList, null, tabList) : tabList), jsx(TrackTabViewed, {
     activePlugin: activePlugin
-  })), jsx("div", _extends({
-    css: flexColumnStyles
-  }, fixListHeightProps), !error && jsx(LinkSearchList, {
+  })), !error && jsx(LinkSearchList, {
     id: linkSearchListId,
     role: "listbox",
     items: items,
@@ -73,5 +74,5 @@ export const SearchResults = ({
     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 : jsx(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 : jsx(LinkSearchError, null))));
 };

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

@@ -6,6 +6,7 @@ import { defineMessages, FormattedMessage } from 'react-intl-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import { MinHeightContainer } from '../../../../common/ui/min-height-container';
 import { handleNavKeyDown } from '../../../../common/utils/handleNavKeyDown';
 import { NoResults, testIds as noResultsTestIds } from './link-search-no-results';
 import { emptyStateNoResultsWrapper } from './link-search-no-results/styled';
@@ -139,7 +140,8 @@ export const LinkSearchList = /*#__PURE__*/forwardRef(({
     }))));
   }
   if (isLoading) {
-    loadingContent = jsx("div", {
+    loadingContent = jsx(MinHeightContainer, {
+      minHeight: getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results') ? '50px' : '80px',
       css: spinnerContainerStyles
     }, jsx(Spinner, {
       testId: testIds.searchResultLoadingIndicator,

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

@@ -4,6 +4,7 @@ import { css } from '@emotion/react';
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { typography } from '@atlaskit/theme';
 export const listContainerStyles = css`
+  width: 100%;
   padding-top: 0;
   min-height: 80px;
   margin-top: ${"var(--ds-space-200, 16px)"};
@@ -13,12 +14,9 @@ export const listContainerStyles = css`
   flex-direction: column;
 `;
 export const spinnerContainerStyles = css`
-  text-align: center;
-  min-height: 80px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   flex-grow: 1;
+  flex-direction: column;
+  align-items: center;
 `;
 export const listStyles = css`
   padding: 0;

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

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { MinHeightContainer } from '../../../../common/ui/min-height-container';
+import { flexColumn } from './styled';
+export const SearchResultsContainer = /*#__PURE__*/forwardRef(({
+  hasTabs,
+  ...props
+}, ref) => {
+  const minHeight = hasTabs ? '347px' : '302px';
+  const ffMinHeight = getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results') ? minHeight : 'auto';
+  return jsx(MinHeightContainer, _extends({
+    ref: ref,
+    minHeight: ffMinHeight,
+    css: flexColumn
+  }, props));
+});

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

@@ -0,0 +1,7 @@
+import { css } from '@emotion/react';
+export const flexColumn = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+`;

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

@@ -9,6 +9,7 @@ export const spinnerContainerStyles = css`
   display: flex;
   align-items: center;
   justify-content: center;
+  align-self: center;
   flex-grow: 1;
 `;
 export const flexColumnStyles = css`

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

@@ -12,15 +12,6 @@ export const rootContainerStyles = css`
   box-sizing: border-box;
   line-height: initial;
 `;
-export const tabsWrapperStyles = css`
-  margin-top: ${"var(--ds-space-150, 12px)"};
-  margin-left: calc(-1 * ${"var(--ds-space-100, 8px)"});
-  margin-right: calc(-1 * ${"var(--ds-space-100, 8px)"});
-`;
-export const flexColumnStyles = css`
-  display: flex;
-  flex-direction: column;
-`;
 export const formFooterMargin = css`
   margin-top: ${"var(--ds-space-200, 16px)"};
 `;

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

@@ -2,8 +2,14 @@
 import { jsx } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
-import { LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT, LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT, LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT, LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT } from '../../common/constants';
 import { MinHeightContainer } from '../../common/ui/min-height-container';
+import { styles } from './styled';
+const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT = '472px';
+const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT = '550px';
+const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT = '505px';
+const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITHOUT_DISPLAYTEXT = '429px';
+const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = '218px';
+const 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
 const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT = '142px';
 const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT = '220px';
@@ -13,9 +19,12 @@ const getEstimatedMinHeight = ({
   plugins
 }) => {
   if (getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results')) {
-    if (plugins !== null && plugins !== void 0 && plugins.length || isLoadingPlugins) {
+    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;
     }
+    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;
@@ -29,7 +38,8 @@ export const LoaderFallback = props => {
   const minHeight = getEstimatedMinHeight(props);
   return jsx(MinHeightContainer, {
     minHeight: minHeight,
-    "data-testid": "link-picker-root-loader-boundary-ui"
+    "data-testid": "link-picker-root-loader-boundary-ui",
+    css: styles
   }, jsx(Spinner, {
     testId: "link-picker.component-loading-indicator",
     size: "medium"

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

@@ -0,0 +1,4 @@
+import { css } from '@emotion/react';
+export const styles = css`
+  align-items: center;
+`;

package/dist/es2019/version.json

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

package/dist/esm/common/constants.js

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

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

@@ -1,4 +1,4 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import { css } from '@emotion/react';
-export var minHeightComponentStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--link-picker-min-height);\n"])));
+export var minHeightComponentStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: stretch;\n  justify-content: center;\n  min-height: var(--link-picker-min-height);\n"])));

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

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import { useEffect, useMemo } from 'react';
+import { jsx } from '@emotion/react';
+import { StorageClient } from '@atlaskit/frontend-utilities/storage-client';
+import { pulseStyles } from './styled';
+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 = useMemo(function () {
+    return 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)
+  var discovered = useMemo(function () {
+    return storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY) === LOCAL_STORAGE_DISCOVERY_VALUE;
+  }, [storageClient]);
+  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 jsx("span", {
+    css: pulseStyles,
+    "data-testid": "".concat(testId, "-discovery")
+  }, children);
+};
+export default FeatureDiscovery;

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

@@ -0,0 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { css, keyframes } from '@emotion/react';
+var pulseKeyframes = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)';
+export var pulseStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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);

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isLoading", "error", "url", "queryState", "items", "isEditing", "onCancel", "action"];
+var _excluded = ["isLoading", "error", "url", "queryState", "items", "isEditing", "onCancel", "action", "createFeatureDiscovery"];
 /** @jsx jsx */
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
@@ -8,6 +8,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';
 var messages = defineMessages({
@@ -30,7 +31,9 @@ var messages = defineMessages({
 export 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'
 };
 export var FormFooter = /*#__PURE__*/memo(function (_ref) {
   var isLoading = _ref.isLoading,
@@ -41,6 +44,8 @@ export var FormFooter = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
   var intl = useIntl();
   if (error && error instanceof UnauthenticatedError) {
@@ -48,19 +53,24 @@ export var FormFooter = /*#__PURE__*/memo(function (_ref) {
   }
   var isSubmitDisabled = checkSubmitDisabled(isLoading, error, url, queryState, items);
   var insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
+  var createButton = function createButton(pluginAction) {
+    return jsx(Button, {
+      testId: testIds.actionButton,
+      onClick: pluginAction.callback,
+      appearance: "default",
+      iconBefore: jsx(EditorAddIcon, {
+        label: "",
+        size: "medium"
+      })
+    }, typeof pluginAction.label === 'string' ? pluginAction.label : intl.formatMessage(pluginAction.label));
+  };
   return jsx("footer", _extends({
     css: formFooterStyles
   }, restProps), action && jsx("div", {
     css: formFooterActionStyles
-  }, jsx(Button, {
-    testId: testIds.actionButton,
-    onClick: action.callback,
-    appearance: "default",
-    iconBefore: jsx(EditorAddIcon, {
-      label: "",
-      size: "medium"
-    })
-  }, typeof action.label === 'string' ? action.label : intl.formatMessage(action.label))), jsx(ButtonGroup, null, jsx(Button, {
+  }, createFeatureDiscovery ? jsx(FeatureDiscovery, {
+    testId: testIds.actionButtonDiscovery
+  }, createButton(action)) : createButton(action)), jsx(ButtonGroup, null, jsx(Button, {
     appearance: "subtle",
     onClick: onCancel,
     testId: testIds.cancelButton

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

@@ -9,6 +9,7 @@ import { FormattedMessage, useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { isSafeUrl, normalizeUrl } from '@atlaskit/linking-common/url';
 import { browser } from '@atlaskit/linking-common/user-agent';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useLinkPickerAnalytics, withInputFieldTracking, withLinkPickerAnalyticsContext } from '../../common/analytics';
 import { ANALYTICS_CHANNEL } from '../../common/constants';
@@ -37,13 +38,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: isSafeUrl(payload.url) && payload.url.length ? -1 : state.selectedIndex
+      selectedIndex: 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);
@@ -89,7 +94,8 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     url = state.url,
     displayText = state.displayText,
     invalidUrl = state.invalidUrl,
-    activeTab = state.activeTab;
+    activeTab = state.activeTab,
+    allowCreateFeatureDiscovery = state.allowCreateFeatureDiscovery;
   var intl = useIntl();
   var queryState = useSearchQuery(state);
   var _usePlugins = usePlugins(queryState, activeTab, plugins),
@@ -309,7 +315,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     "aria-label": intl.formatMessage(linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
     onChange: handleChangeText
-  }), !!queryState && jsx(SearchResults, {
+  }), !!queryState && (isLoadingPlugins || isActivePlugin) && jsx(SearchResults, {
     activeTab: activeTab,
     tabs: tabs,
     activePlugin: activePlugin,
@@ -338,5 +344,8 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     onCancel: onCancel,
     action: pluginAction,
     css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? 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 && getBooleanFF('platform.linking-platform.link-picker.enable-jira-create')
   }));
 }));

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

@@ -11,7 +11,8 @@ import { useFixHeight } from '../../../controllers/use-fix-height';
 import { LinkSearchError, testIds as searchErrorTestIds } from './link-search-error';
 import { LinkSearchList, testIds as listTestIds } from './link-search-list';
 import { ScrollingTabList } from './scrolling-tabs';
-import { flexColumnStyles, spinnerContainerStyles, tabsWrapperStyles } from './styled';
+import { SearchResultsContainer } from './search-results-container';
+import { spinnerContainerStyles, tabsWrapperStyles } from './styled';
 import { TrackTabViewed } from './track-tab-viewed';
 export var testIds = _objectSpread(_objectSpread(_objectSpread({}, searchErrorTestIds), listTestIds), {}, {
   tabsLoadingIndicator: 'link-picker.tabs-loading-indicator',
@@ -47,7 +48,9 @@ export var SearchResults = function SearchResults(_ref) {
       testId: testIds.tabItem
     }, tab.tabTitle);
   }));
-  return jsx(Fragment, null, isLoadingPlugins && !!queryState && jsx("div", {
+  return jsx(SearchResultsContainer, _extends({
+    hasTabs: !!tabs.length || isLoadingPlugins
+  }, fixListHeightProps), isLoadingPlugins && !!queryState && jsx("div", {
     css: spinnerContainerStyles
   }, jsx(Spinner, {
     testId: testIds.tabsLoadingIndicator,
@@ -61,9 +64,7 @@ export var SearchResults = function SearchResults(_ref) {
     onChange: handleTabChange
   }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? jsx(ScrollingTabList, null, tabList) : tabList), jsx(TrackTabViewed, {
     activePlugin: activePlugin
-  })), jsx("div", _extends({
-    css: flexColumnStyles
-  }, fixListHeightProps), !error && jsx(LinkSearchList, {
+  })), !error && jsx(LinkSearchList, {
     id: linkSearchListId,
     role: "listbox",
     items: items,
@@ -75,5 +76,5 @@ export 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 : jsx(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 : jsx(LinkSearchError, null))));
 };

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

@@ -11,6 +11,7 @@ import { defineMessages, FormattedMessage } from 'react-intl-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import { MinHeightContainer } from '../../../../common/ui/min-height-container';
 import { handleNavKeyDown } from '../../../../common/utils/handleNavKeyDown';
 import { NoResults, testIds as noResultsTestIds } from './link-search-no-results';
 import { emptyStateNoResultsWrapper } from './link-search-no-results/styled';
@@ -147,7 +148,8 @@ export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
     })));
   }
   if (isLoading) {
-    loadingContent = jsx("div", {
+    loadingContent = jsx(MinHeightContainer, {
+      minHeight: getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results') ? '50px' : '80px',
       css: spinnerContainerStyles
     }, jsx(Spinner, {
       testId: testIds.searchResultLoadingIndicator,

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

@@ -5,7 +5,7 @@ import { css } from '@emotion/react';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { typography } from '@atlaskit/theme';
-export var listContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)");
-export var spinnerContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n"])));
+export var listContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)");
+export var spinnerContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  flex-direction: column;\n  align-items: center;\n"])));
 export var listStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0 calc(-1 * ", ");\n  list-style: none;\n"])), "var(--ds-space-200, 16px)");
 export var listTitleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-top: 0;\n  margin-bottom: ", ";\n"])), typography.h100(), "var(--ds-space-050, 4px)");

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

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["hasTabs"];
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { MinHeightContainer } from '../../../../common/ui/min-height-container';
+import { flexColumn } from './styled';
+export var SearchResultsContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var hasTabs = _ref.hasTabs,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var minHeight = hasTabs ? '347px' : '302px';
+  var ffMinHeight = getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results') ? minHeight : 'auto';
+  return jsx(MinHeightContainer, _extends({
+    ref: ref,
+    minHeight: ffMinHeight,
+    css: flexColumn
+  }, props));
+});

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

@@ -0,0 +1,4 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+export var flexColumn = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  width: 100%;\n"])));

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

@@ -2,5 +2,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 export var tabsWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)");
-export var spinnerContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n"])));
+export var spinnerContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  flex-grow: 1;\n"])));
 export var flexColumnStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));

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

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { LINK_PICKER_WIDTH_IN_PX } from '../../common/constants';
@@ -8,6 +8,4 @@ import { LINK_PICKER_WIDTH_IN_PX } from '../../common/constants';
  * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
  */
 export var rootContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", ";\n  padding: ", " ", "\n    ", ";\n  box-sizing: border-box;\n  line-height: initial;\n"])), getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results') ? undefined : "".concat(LINK_PICKER_WIDTH_IN_PX, "px"), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
-export var tabsWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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)");
-export var flexColumnStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-export var formFooterMargin = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-200, 16px)");
+export var formFooterMargin = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-200, 16px)");

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

@@ -2,8 +2,14 @@
 import { jsx } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
-import { LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT, LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT, LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT, LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT } from '../../common/constants';
 import { MinHeightContainer } from '../../common/ui/min-height-container';
+import { styles } from './styled';
+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';
@@ -12,9 +18,12 @@ var getEstimatedMinHeight = function getEstimatedMinHeight(_ref) {
     isLoadingPlugins = _ref.isLoadingPlugins,
     plugins = _ref.plugins;
   if (getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results')) {
-    if (plugins !== null && plugins !== void 0 && plugins.length || isLoadingPlugins) {
+    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;
     }
+    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;
@@ -28,7 +37,8 @@ export var LoaderFallback = function LoaderFallback(props) {
   var minHeight = getEstimatedMinHeight(props);
   return jsx(MinHeightContainer, {
     minHeight: minHeight,
-    "data-testid": "link-picker-root-loader-boundary-ui"
+    "data-testid": "link-picker-root-loader-boundary-ui",
+    css: styles
   }, jsx(Spinner, {
     testId: "link-picker.component-loading-indicator",
     size: "medium"

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

@@ -0,0 +1,4 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+export var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n"])));

package/dist/esm/version.json

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

package/dist/types/common/constants.d.ts

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