@atlaskit/link-picker 1.27.2 → 1.28.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-picker
 
+## 1.28.1
+
+### Patch Changes
+
+- [`f01deb5e6ab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f01deb5e6ab) - Use injected env vars instead of version.json
+
+## 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

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/utils/analytics/analytics.codegen.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::e7a81d0d46e015c9728ae9557b47040f>>
+ * @codegen <<SignedSource::cd5b926575a5c379425d0d72e5339f12>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 

package/dist/cjs/ui/index.js

@@ -14,7 +14,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../common/constants");
 var _sessionProvider = require("../controllers/session-provider");
-var _version = require("../version.json");
 var _errorBoundary = require("./error-boundary");
 var _loaderFallback = require("./loader-fallback");
 var _messagesProvider = require("./messages-provider");
@@ -26,8 +25,8 @@ var testIds = {
 };
 exports.testIds = testIds;
 var PACKAGE_DATA = {
-  packageName: _version.name,
-  packageVersion: _version.version,
+  packageName: "@atlaskit/link-picker",
+  packageVersion: "1.28.1",
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };

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),
@@ -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/version.json

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

package/dist/es2019/common/utils/analytics/analytics.codegen.js

@@ -3,7 +3,7 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::e7a81d0d46e015c9728ae9557b47040f>>
+ * @codegen <<SignedSource::cd5b926575a5c379425d0d72e5339f12>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 

package/dist/es2019/ui/index.js

@@ -7,7 +7,6 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { COMPONENT_NAME } from '../common/constants';
 import { LinkPickerSessionProvider } from '../controllers/session-provider';
-import { name as packageName, version as packageVersion } from '../version.json';
 import { ErrorBoundary } from './error-boundary';
 import { LoaderFallback } from './loader-fallback';
 import { MessagesProvider } from './messages-provider';
@@ -16,8 +15,8 @@ export const testIds = {
   linkPickerRoot: 'link-picker-root'
 };
 export const PACKAGE_DATA = {
-  packageName,
-  packageVersion,
+  packageName: "@atlaskit/link-picker",
+  packageVersion: "1.28.1",
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

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

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);
@@ -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/version.json

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

package/dist/esm/common/utils/analytics/analytics.codegen.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::e7a81d0d46e015c9728ae9557b47040f>>
+ * @codegen <<SignedSource::cd5b926575a5c379425d0d72e5339f12>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 

package/dist/esm/ui/index.js

@@ -7,7 +7,6 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { COMPONENT_NAME } from '../common/constants';
 import { LinkPickerSessionProvider } from '../controllers/session-provider';
-import { name as packageName, version as packageVersion } from '../version.json';
 import { ErrorBoundary } from './error-boundary';
 import { LoaderFallback } from './loader-fallback';
 import { MessagesProvider } from './messages-provider';
@@ -16,8 +15,8 @@ export var testIds = {
   linkPickerRoot: 'link-picker-root'
 };
 export var PACKAGE_DATA = {
-  packageName: packageName,
-  packageVersion: packageVersion,
+  packageName: "@atlaskit/link-picker",
+  packageVersion: "1.28.1",
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

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),
@@ -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/version.json

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

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

@@ -70,4 +70,5 @@ export interface PickerState {
     activeTab: number;
     /** When true, even if the selected index is -1, don't hide the recents. */
     preventHidingRecents: boolean;
+    allowCreateFeatureDiscovery: boolean;
 }

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

@@ -3,11 +3,11 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::e7a81d0d46e015c9728ae9557b47040f>>
+ * @codegen <<SignedSource::cd5b926575a5c379425d0d72e5339f12>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 export type PackageMetaDataType = {
-    packageName: '@atlaskit/link-picker';
+    packageName: string;
     packageVersion: string;
     source: 'linkPicker';
     componentName: 'linkPicker';

package/dist/types/ui/link-picker/form-footer/feature-discovery/index.d.ts

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { type FC } from 'react';
+type FeatureDiscoveryProps = {
+    children: React.ReactElement;
+    testId?: string;
+};
+/**
+ * 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
+ */
+declare const FeatureDiscovery: FC<FeatureDiscoveryProps>;
+export default FeatureDiscovery;

package/dist/types/ui/link-picker/form-footer/feature-discovery/styled.d.ts

@@ -0,0 +1 @@
+export declare const pulseStyles: import("@emotion/react").SerializedStyles;

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

@@ -5,6 +5,8 @@ export declare const testIds: {
     readonly insertButton: "link-picker-insert-button";
     readonly cancelButton: "link-picker-cancel-button";
     readonly actionButton: "link-picker-action-button";
+    /** Feature discovery for action button (css pulse) */
+    readonly actionButtonDiscovery: "link-picker-action-button-discovery";
 };
 interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
     /** If the results section appears to be loading, impact whether the submit button is disabled */
@@ -16,6 +18,7 @@ interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
     isEditing?: boolean;
     onCancel?: () => void;
     action?: LinkPickerPluginAction;
+    createFeatureDiscovery?: boolean;
 }
-export declare const FormFooter: import("react").MemoExoticComponent<({ isLoading, error, url, queryState, items, isEditing, onCancel, action, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
+export declare const FormFooter: import("react").MemoExoticComponent<({ isLoading, error, url, queryState, items, isEditing, onCancel, action, createFeatureDiscovery, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
 export {};

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

@@ -7,6 +7,7 @@ export declare const testIds: {
     readonly insertButton: "link-picker-insert-button";
     readonly cancelButton: "link-picker-cancel-button";
     readonly actionButton: "link-picker-action-button";
+    readonly actionButtonDiscovery: "link-picker-action-button-discovery";
     readonly tabsLoadingIndicator: string;
     readonly tabList: string;
     readonly tabItem: string;

package/dist/types-ts4.5/common/types.d.ts

@@ -70,4 +70,5 @@ export interface PickerState {
     activeTab: number;
     /** When true, even if the selected index is -1, don't hide the recents. */
     preventHidingRecents: boolean;
+    allowCreateFeatureDiscovery: boolean;
 }

package/dist/types-ts4.5/common/utils/analytics/analytics.codegen.d.ts

@@ -3,11 +3,11 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::e7a81d0d46e015c9728ae9557b47040f>>
+ * @codegen <<SignedSource::cd5b926575a5c379425d0d72e5339f12>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 export type PackageMetaDataType = {
-    packageName: '@atlaskit/link-picker';
+    packageName: string;
     packageVersion: string;
     source: 'linkPicker';
     componentName: 'linkPicker';

package/dist/types-ts4.5/ui/link-picker/form-footer/feature-discovery/index.d.ts

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { type FC } from 'react';
+type FeatureDiscoveryProps = {
+    children: React.ReactElement;
+    testId?: string;
+};
+/**
+ * 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
+ */
+declare const FeatureDiscovery: FC<FeatureDiscoveryProps>;
+export default FeatureDiscovery;

package/dist/types-ts4.5/ui/link-picker/form-footer/feature-discovery/styled.d.ts

@@ -0,0 +1 @@
+export declare const pulseStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/link-picker/form-footer/index.d.ts

@@ -5,6 +5,8 @@ export declare const testIds: {
     readonly insertButton: "link-picker-insert-button";
     readonly cancelButton: "link-picker-cancel-button";
     readonly actionButton: "link-picker-action-button";
+    /** Feature discovery for action button (css pulse) */
+    readonly actionButtonDiscovery: "link-picker-action-button-discovery";
 };
 interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
     /** If the results section appears to be loading, impact whether the submit button is disabled */
@@ -16,6 +18,7 @@ interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
     isEditing?: boolean;
     onCancel?: () => void;
     action?: LinkPickerPluginAction;
+    createFeatureDiscovery?: boolean;
 }
-export declare const FormFooter: import("react").MemoExoticComponent<({ isLoading, error, url, queryState, items, isEditing, onCancel, action, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
+export declare const FormFooter: import("react").MemoExoticComponent<({ isLoading, error, url, queryState, items, isEditing, onCancel, action, createFeatureDiscovery, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
 export {};

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

@@ -7,6 +7,7 @@ export declare const testIds: {
     readonly insertButton: "link-picker-insert-button";
     readonly cancelButton: "link-picker-cancel-button";
     readonly actionButton: "link-picker-action-button";
+    readonly actionButtonDiscovery: "link-picker-action-button-discovery";
     readonly tabsLoadingIndicator: string;
     readonly tabList: string;
     readonly tabItem: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.27.2",
+  "version": "1.28.1",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -42,6 +42,9 @@
     },
     "platform.linking-platform.link-picker.fixed-height-search-results": {
       "type": "boolean"
+    },
+    "platform.linking-platform.link-picker.enable-jira-create": {
+      "type": "boolean"
     }
   },
   "scripts": {
@@ -50,19 +53,19 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.8.0",
+    "@atlaskit/button": "^16.9.0",
     "@atlaskit/empty-state": "^7.6.0",
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/frontend-utilities": "^2.7.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/linking-common": "^4.0.0",
+    "@atlaskit/linking-common": "^4.4.0",
     "@atlaskit/onboarding": "^10.8.2",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/tabs": "^13.4.0",
     "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.12.0",
+    "@atlaskit/tokens": "^1.14.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/visually-hidden": "^1.2.0",
@@ -81,10 +84,10 @@
   "devDependencies": {
     "@af/analytics-codegen": "^0.1.0",
     "@af/visual-regression": "*",
-    "@atlaskit/dropdown-menu": "^11.10.0",
+    "@atlaskit/dropdown-menu": "^11.11.0",
     "@atlaskit/link-provider": "^1.6.0",
-    "@atlaskit/link-test-helpers": "^4.1.0",
-    "@atlaskit/linking-common": "^4.0.0",
+    "@atlaskit/link-test-helpers": "^6.0.0",
+    "@atlaskit/linking-common": "^4.4.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",