@atlaskit/link-create 1.10.0 → 1.11.0

package/dist/cjs/ui/create-form/main.js

@@ -7,19 +7,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TEST_ID = exports.CreateForm = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _finalForm = require("final-form");
 var _reactFinalForm = require("react-final-form");
+var _reactIntlNext = require("react-intl-next");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../common/constants");
+var _messages = _interopRequireDefault(require("../../common/messages"));
+var _callbackContext = require("../../controllers/callback-context");
 var _exitWarningModalContext = require("../../controllers/exit-warning-modal-context");
 var _formContext = require("../../controllers/form-context");
 var _formFooter = require("./form-footer");
 var _formLoader = require("./form-loader");
-var _excluded = ["submitting"];
+var _excluded = ["submitting", "submitError"];
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /** @jsx jsx */
 var formStyles = (0, _react2.css)({
@@ -39,10 +44,14 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
     hideFooter = _ref.hideFooter,
     initialValues = _ref.initialValues;
   var _useFormContext = (0, _formContext.useFormContext)(),
+    setFormErrorMessage = _useFormContext.setFormErrorMessage,
     formErrorMessage = _useFormContext.formErrorMessage,
     enableEditView = _useFormContext.enableEditView;
+  var intl = (0, _reactIntlNext.useIntl)();
   var _useExitWarningModal = (0, _exitWarningModalContext.useExitWarningModal)(),
     setShouldShowWarning = _useExitWarningModal.setShouldShowWarning;
+  var _useLinkCreateCallbac = (0, _callbackContext.useLinkCreateCallback)(),
+    onFailure = _useLinkCreateCallbac.onFailure;
   var handleSubmit = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(data) {
       var shouldEnableEditView, formData;
@@ -60,6 +69,11 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
              * if submission is successful
              */
             enableEditView === null || enableEditView === void 0 || enableEditView(!!shouldEnableEditView);
+
+            /**
+             * This is the onSubmit handler provided by the plugin
+             * It will be async, and it will likely involve awaiting `onCreate` (the adopters handler)
+             */
             return _context.abrupt("return", onSubmit(formData));
           case 4:
             return _context.abrupt("return", onSubmit(data));
@@ -73,6 +87,40 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
       return _ref2.apply(this, arguments);
     };
   }(), [onSubmit, enableEditView]);
+  var handleSubmitWithErrorHandling = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+    var _args2 = arguments;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.prev = 0;
+          /**
+           * Clear any error message that may have been set by async select fields
+           * This will immediately remove any indication of an error, but the form likely will fail to submit,
+           * it will be likely a 400 because the user probably could not set all fields anyway
+           */
+          setFormErrorMessage();
+          _context2.next = 4;
+          return handleSubmit.apply(void 0, _args2);
+        case 4:
+          return _context2.abrupt("return", _context2.sent);
+        case 7:
+          _context2.prev = 7;
+          _context2.t0 = _context2["catch"](0);
+          /**
+           * Notify link create of failed experience
+           */
+          onFailure === null || onFailure === void 0 || onFailure(_context2.t0);
+
+          /**
+           * Return a generic message for react final form to render
+           */
+          return _context2.abrupt("return", (0, _defineProperty2.default)({}, _finalForm.FORM_ERROR, intl.formatMessage(_messages.default.genericErrorMessage)));
+        case 11:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[0, 7]]);
+  })), [handleSubmit, setFormErrorMessage, intl, onFailure]);
   var handleCancel = (0, _react.useCallback)(function () {
     onCancel && onCancel();
   }, [onCancel]);
@@ -80,7 +128,7 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
     return (0, _react2.jsx)(_formLoader.CreateFormLoader, null);
   }
   return (0, _react2.jsx)(_reactFinalForm.Form, {
-    onSubmit: handleSubmit,
+    onSubmit: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.better-observability') ? handleSubmitWithErrorHandling : handleSubmit,
     initialValues: initialValues,
     mutators: {
       setField: function setField(args, state, tools) {
@@ -89,9 +137,10 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
         });
       }
     }
-  }, function (_ref3) {
-    var submitting = _ref3.submitting,
-      formProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+  }, function (_ref5) {
+    var submitting = _ref5.submitting,
+      submitError = _ref5.submitError,
+      formProps = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
     return (0, _react2.jsx)("form", {
       onSubmit: formProps.handleSubmit,
       name: "link-create-form",
@@ -112,8 +161,14 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
         });
         setShouldShowWarning(isModified);
       }
-    }), (0, _react2.jsx)(_primitives.Box, null, children), !hideFooter && (0, _react2.jsx)(_formFooter.CreateFormFooter, {
-      formErrorMessage: formErrorMessage,
+    }), (0, _react2.jsx)(_primitives.Box, null, children), !hideFooter && (0, _react2.jsx)(_formFooter.CreateFormFooter
+    /**
+     * We will prefer to render the error message connected to
+     * react final form state (submitError) otherwise we can
+     * default to the `formErrorMessage` that we sometimes use with our own
+     * "form context" (only currently used for AsyncSelect field reporting failed loading)
+     */, {
+      formErrorMessage: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.better-observability') ? submitError || formErrorMessage : formErrorMessage,
       handleCancel: handleCancel,
       submitting: submitting,
       testId: testId

package/dist/cjs/ui/link-create/error-boundary/index.js

@@ -13,6 +13,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../common/constants");
 var _errorBoundaryUi = require("../../../common/ui/error-boundary-ui");
 var _analytics = _interopRequireDefault(require("../../../common/utils/analytics/analytics.codegen"));
+var _experienceTracker = require("../../../controllers/experience-tracker");
 var _errorBoundaryBase = require("./error-boundary-base");
 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; }
@@ -21,14 +22,17 @@ var ErrorBoundary = exports.ErrorBoundary = function ErrorBoundary(_ref) {
     errorComponent = _ref.errorComponent;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var experience = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.better-observability') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _experienceTracker.useExperience)() : null;
   var handleError = (0, _react.useCallback)(function (error, info) {
     var _window, _window2, _info$componentStack;
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.enable-sentry-client')) {
-      // Capture exception to Sentry
-      (0, _sentry.captureException)(error, 'link-create');
+    if (!(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.better-observability')) {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.enable-sentry-client')) {
+        // Capture exception to Sentry
+        (0, _sentry.captureException)(error, 'link-create');
+      }
     }
-
-    // Fire Analytics event
     createAnalyticsEvent((0, _analytics.default)('operational.linkCreate.unhandledErrorCaught', (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.enable-sentry-client') ? {
       browserInfo: ((_window = window) === null || _window === void 0 || (_window = _window.navigator) === null || _window === void 0 ? void 0 : _window.userAgent) || 'unknown',
       error: error.name,
@@ -38,10 +42,11 @@ var ErrorBoundary = exports.ErrorBoundary = function ErrorBoundary(_ref) {
       error: error.toString(),
       componentStack: (_info$componentStack = info === null || info === void 0 ? void 0 : info.componentStack) !== null && _info$componentStack !== void 0 ? _info$componentStack : ''
     })).fire(_constants.ANALYTICS_CHANNEL);
-
-    // Fire UFO failed experience
-    // failUfoExperience(ufoExperience.mounted);
-  }, [createAnalyticsEvent]);
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.better-observability')) {
+      // Track experience as failed for SLO
+      experience === null || experience === void 0 || experience.failure(error);
+    }
+  }, [createAnalyticsEvent, experience]);
   return /*#__PURE__*/_react.default.createElement(_errorBoundaryBase.BaseErrorBoundary, {
     onError: handleError,
     errorComponent: errorComponent !== null && errorComponent !== void 0 ? errorComponent : /*#__PURE__*/_react.default.createElement(_errorBoundaryUi.ErrorBoundaryUI, null)

package/dist/cjs/ui/link-create/main.js

@@ -82,7 +82,9 @@ var LinkCreateWithModal = function LinkCreateWithModal(_ref2) {
   }(), [onCreate, setFormErrorMessage]);
   var handleFailure = (0, _react.useCallback)(function (error) {
     // Set the form error message
-    setFormErrorMessage(error.message);
+    if (error instanceof Error) {
+      setFormErrorMessage(error.message);
+    }
     onFailure && onFailure(error);
   }, [onFailure, setFormErrorMessage]);
   var _useExitWarningModal = (0, _exitWarningModalContext.useExitWarningModal)(),
@@ -104,8 +106,8 @@ var LinkCreateWithModal = function LinkCreateWithModal(_ref2) {
     return setShowExitWarning(false);
   }, []);
   return (0, _react2.jsx)(_callbackContext.LinkCreateCallbackProvider, {
-    onCreate: handleCreate,
-    onFailure: handleFailure,
+    onCreate: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.better-observability') ? onCreate : handleCreate,
+    onFailure: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.better-observability') ? onFailure : handleFailure,
     onCancel: handleCancel
   }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, active && (0, _react2.jsx)(_ModalDialog.Modal, {
     testId: "link-create-modal",

package/dist/cjs/ui/main.js

@@ -5,35 +5,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PACKAGE_DATA = void 0;
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../common/constants");
 var _errorBoundaryModal = require("../common/ui/error-boundary-modal");
 var _analytics = require("../common/utils/analytics");
 var _fetchMessagesForLocale = require("../common/utils/locale/fetch-messages-for-locale");
+var _experienceTracker = require("../controllers/experience-tracker");
 var _en = _interopRequireDefault(require("../i18n/en"));
 var _linkCreate = _interopRequireDefault(require("./link-create"));
 var _errorBoundary = require("./link-create/error-boundary");
 /** @jsx jsx */
 
-var LinkCreateWithAnalyticsContext = (0, _analytics.withLinkCreateAnalyticsContext)( /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var props = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_ref), _ref));
-  return (0, _react2.jsx)(_errorBoundary.ErrorBoundary, {
+var LinkCreateWithAnalyticsContext = (0, _analytics.withLinkCreateAnalyticsContext)( /*#__PURE__*/(0, _react.memo)(function (props) {
+  var ExperienceProvider = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.better-observability') ? _experienceTracker.Experience : _react.Fragment;
+  return (0, _react2.jsx)(ExperienceProvider, null, (0, _react2.jsx)(_errorBoundary.ErrorBoundary, {
     errorComponent: (0, _react2.jsx)(_errorBoundaryModal.ErrorBoundaryModal, {
       active: props.active,
       onClose: props.onCancel
     })
-  }, (0, _react2.jsx)(_linkCreate.default, props));
+  }, (0, _react2.jsx)(_linkCreate.default, props)));
 }));
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "1.10.0" || '',
-  componentName: _constants.COMPONENT_NAME,
-  source: _constants.COMPONENT_NAME
+  packageVersion: "1.11.0" || '',
+  component: _constants.COMPONENT_NAME,
+  componentName: _constants.COMPONENT_NAME
 };
 var ComposedLinkCreate = /*#__PURE__*/(0, _react.memo)(function (props) {
   return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {

package/dist/es2019/common/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  genericErrorMessage: {
+    id: 'link-create.unknown-error.heading',
+    defaultMessage: 'Something went wrong',
+    description: 'Message when an unknown error occurs'
+  }
+});

package/dist/es2019/common/ui/error-boundary-ui/index.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import EmptyState from '@atlaskit/empty-state';
+import commonMessages from '../../messages';
 import ErrorSVG from './error-svg';
 import messages from './messages';
 export const CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
@@ -11,7 +12,7 @@ export const ErrorBoundaryUI = () => {
   return /*#__PURE__*/React.createElement(EmptyState, {
     maxImageWidth: 82,
     testId: 'link-create-error-boundary-ui',
-    header: intl.formatMessage(messages.heading),
+    header: intl.formatMessage(commonMessages.genericErrorMessage),
     description: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.description, {
       values: {
         a: label => /*#__PURE__*/React.createElement(Button, {

package/dist/es2019/common/ui/error-boundary-ui/messages.js

@@ -1,10 +1,5 @@
 import { defineMessages } from 'react-intl-next';
 export default defineMessages({
-  heading: {
-    id: 'link-create.unknown-error.heading',
-    defaultMessage: 'Something went wrong',
-    description: 'Heading when an unknown error occurs'
-  },
   description: {
     id: 'link-create.unknown-error.description',
     defaultMessage: 'Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.',

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::be704bbbca0e49c927d1268b9a0f1d6a>>
+ * @codegen <<SignedSource::20562f2db603daab7d5b7a5c5ba1c04b>>
  * @codegenCommand yarn workspace @atlaskit/link-create run codegen-analytics
  */
 

package/dist/es2019/common/utils/errors/index.js

@@ -0,0 +1,31 @@
+import { getTraceId } from '@atlaskit/linking-common/utils';
+const getUrlPath = url => {
+  try {
+    return new URL(url).pathname;
+  } catch {
+    return 'Failed to parse pathname from url';
+  }
+};
+export const getNetworkFields = error => {
+  if (error instanceof Response) {
+    return {
+      traceId: getTraceId(error),
+      status: error.status,
+      path: getUrlPath(error.url)
+    };
+  }
+  return {
+    traceId: null,
+    status: null,
+    path: null
+  };
+};
+export const getErrorType = error => {
+  if (error instanceof Response) {
+    return 'NetworkError';
+  }
+  if (error instanceof Error) {
+    return error.name;
+  }
+  return typeof error;
+};

package/dist/es2019/controllers/callback-context/main.js

@@ -1,7 +1,10 @@
 import React, { useContext, useMemo } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { ANALYTICS_CHANNEL } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
+import { getErrorType } from '../../common/utils/errors';
+import { useExperience } from '../experience-tracker';
 const LinkCreateCallbackContext = /*#__PURE__*/React.createContext({});
 const LinkCreateCallbackProvider = ({
   children,
@@ -12,8 +15,18 @@ const LinkCreateCallbackProvider = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const experience = getBooleanFF('platform.linking-platform.link-create.better-observability') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useExperience() : null;
   const handleCreate = useMemo(() => ({
     onCreate: async result => {
+      if (getBooleanFF('platform.linking-platform.link-create.better-observability')) {
+        /**
+         * We consider the experience successful once we have
+         * successfully created an object
+         */
+        experience === null || experience === void 0 ? void 0 : experience.success();
+      }
       const {
         objectId,
         objectType
@@ -26,15 +39,18 @@ const LinkCreateCallbackProvider = ({
         await onCreate(result);
       }
     }
-  }), [createAnalyticsEvent, onCreate]);
+  }), [createAnalyticsEvent, onCreate, experience]);
   const handleFailure = useMemo(() => ({
     onFailure: async error => {
       createAnalyticsEvent(createEventPayload('track.object.createFailed.linkCreate', {
-        failureType: error.name
+        failureType: getErrorType(error)
       })).fire(ANALYTICS_CHANNEL);
+      if (getBooleanFF('platform.linking-platform.link-create.better-observability')) {
+        experience === null || experience === void 0 ? void 0 : experience.failure(error);
+      }
       onFailure && onFailure(error);
     }
-  }), [createAnalyticsEvent, onFailure]);
+  }), [createAnalyticsEvent, onFailure, experience]);
   const value = useMemo(() => ({
     onCancel,
     ...handleCreate,

package/dist/es2019/controllers/experience-tracker/index.js

@@ -0,0 +1,75 @@
+import React, { createContext, useContext, useMemo, useRef } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { captureException } from '@atlaskit/linking-common/sentry';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { ANALYTICS_CHANNEL } from '../../common/constants';
+import createEventPayload from '../../common/utils/analytics/analytics.codegen';
+import { getErrorType, getNetworkFields } from '../../common/utils/errors';
+const ExperienceContext = /*#__PURE__*/createContext({
+  success: () => {},
+  failure: () => {}
+});
+
+/**
+ * Experience provider that simply keeps track of the state of the experience.
+ * Fires an operational event when experience state changes to FAILED.
+ */
+export const Experience = ({
+  children
+}) => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const experience = useRef('STARTED');
+  const value = useMemo(() => ({
+    success: () => {
+      if (experience.current !== 'SUCCEEDED') {
+        experience.current = 'SUCCEEDED';
+      }
+    },
+    /**
+     * Indicate the experience has failed and capture exception information
+     * @param error Typically an Error class or Response class
+     */
+    failure: error => {
+      const experienceStatus = 'FAILED';
+
+      /**
+       * Always capture an event to Splunk
+       */
+      createAnalyticsEvent(createEventPayload('operational.operation.failed.linkCreate', {
+        /**
+         * The type of error that has failed the experience
+         */
+        errorType: getErrorType(error),
+        /**
+         * The current status of the experience (has failed)
+         */
+        experienceStatus,
+        /**
+         * Previous experience status indicates whether the experience
+         * has just failed now, or has already failing
+         */
+        previousExperienceStatus: experience.current,
+        /**
+         * Fields related to `Response` object that can help with debugging
+         * what has gone wrong
+         */
+        ...getNetworkFields(error)
+      })).fire(ANALYTICS_CHANNEL);
+      if (error instanceof Error) {
+        if (getBooleanFF('platform.linking-platform.link-create.enable-sentry-client')) {
+          // Capture exception to Sentry
+          captureException(error, 'link-create');
+        }
+      }
+      if (experience.current !== experienceStatus) {
+        experience.current = experienceStatus;
+      }
+    }
+  }), [experience, createAnalyticsEvent]);
+  return /*#__PURE__*/React.createElement(ExperienceContext.Provider, {
+    value: value
+  }, children);
+};
+export const useExperience = () => useContext(ExperienceContext);

package/dist/es2019/index.js

@@ -1,2 +1,3 @@
+export { FORM_ERROR } from 'final-form';
 export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy } from './ui/index';
 export { useLinkCreateCallback, LinkCreateCallbackProvider } from './controllers/callback-context';

package/dist/es2019/ui/create-form/async-select/main.js

@@ -4,8 +4,13 @@ import { useEffect, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import debounce from 'debounce-promise';
 import { useForm } from 'react-final-form';
+import { useIntl } from 'react-intl-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { AsyncSelect as AkAsyncSelect } from '@atlaskit/select';
+import messages from '../../../common/messages';
+import { useLinkCreateCallback } from '../../../controllers/callback-context';
 import { CreateField } from '../../../controllers/create-field';
+import { useFormContext } from '../../../controllers/form-context';
 export const TEST_ID = 'link-create-async-select';
 
 /**
@@ -23,15 +28,41 @@ export function AsyncSelect({
   validationHelpText,
   testId = TEST_ID,
   defaultOption: propsDefaultValue,
-  loadOptions,
+  loadOptions: loadOptionsFn,
   ...restProps
 }) {
   const {
     mutators
   } = useForm();
+  const {
+    onFailure
+  } = useLinkCreateCallback();
+  const {
+    setFormErrorMessage
+  } = useFormContext();
+  const intl = useIntl();
   const [defaultValue, setDefaultValue] = useState(propsDefaultValue);
   const [isLoadingDefaultOptions, setIsLoadingDefaultOptions] = useState(false);
   const [defaultOptions, setDefaultOptions] = useState([]);
+
+  /**
+   * This binds experience to fail if async fetch ever fails to load
+   */
+  const loadOptions = getBooleanFF('platform.linking-platform.link-create.better-observability') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useMemo(() => {
+    if (loadOptionsFn) {
+      return async function (...args) {
+        try {
+          return await loadOptionsFn(...args);
+        } catch (err) {
+          onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+          setFormErrorMessage(intl.formatMessage(messages.genericErrorMessage));
+          return [];
+        }
+      };
+    }
+  }, [intl, onFailure, loadOptionsFn, setFormErrorMessage]) : loadOptionsFn;
   useEffect(() => {
     let current = true;
     const fetch = async (query = '') => {

package/dist/es2019/ui/create-form/main.js

@@ -1,10 +1,14 @@
 /** @jsx jsx */
 import { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
+import { FORM_ERROR } from 'final-form';
 import { Form, FormSpy } from 'react-final-form';
+import { useIntl } from 'react-intl-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives';
 import { CREATE_FORM_MAX_WIDTH_IN_PX, LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../common/constants';
+import messages from '../../common/messages';
+import { useLinkCreateCallback } from '../../controllers/callback-context';
 import { useExitWarningModal } from '../../controllers/exit-warning-modal-context';
 import { useFormContext } from '../../controllers/form-context';
 import { CreateFormFooter } from './form-footer';
@@ -26,12 +30,17 @@ export const CreateForm = ({
   initialValues
 }) => {
   const {
+    setFormErrorMessage,
     formErrorMessage,
     enableEditView
   } = useFormContext();
+  const intl = useIntl();
   const {
     setShouldShowWarning
   } = useExitWarningModal();
+  const {
+    onFailure
+  } = useLinkCreateCallback();
   const handleSubmit = useCallback(async data => {
     if (getBooleanFF('platform.linking-platform.link-create.enable-edit')) {
       const {
@@ -45,10 +54,38 @@ export const CreateForm = ({
        * if submission is successful
        */
       enableEditView === null || enableEditView === void 0 ? void 0 : enableEditView(!!shouldEnableEditView);
+
+      /**
+       * This is the onSubmit handler provided by the plugin
+       * It will be async, and it will likely involve awaiting `onCreate` (the adopters handler)
+       */
       return onSubmit(formData);
     }
     return onSubmit(data);
   }, [onSubmit, enableEditView]);
+  const handleSubmitWithErrorHandling = useCallback(async (...args) => {
+    try {
+      /**
+       * Clear any error message that may have been set by async select fields
+       * This will immediately remove any indication of an error, but the form likely will fail to submit,
+       * it will be likely a 400 because the user probably could not set all fields anyway
+       */
+      setFormErrorMessage();
+      return await handleSubmit(...args);
+    } catch (error) {
+      /**
+       * Notify link create of failed experience
+       */
+      onFailure === null || onFailure === void 0 ? void 0 : onFailure(error);
+
+      /**
+       * Return a generic message for react final form to render
+       */
+      return {
+        [FORM_ERROR]: intl.formatMessage(messages.genericErrorMessage)
+      };
+    }
+  }, [handleSubmit, setFormErrorMessage, intl, onFailure]);
   const handleCancel = useCallback(() => {
     onCancel && onCancel();
   }, [onCancel]);
@@ -56,7 +93,7 @@ export const CreateForm = ({
     return jsx(CreateFormLoader, null);
   }
   return jsx(Form, {
-    onSubmit: handleSubmit,
+    onSubmit: getBooleanFF('platform.linking-platform.link-create.better-observability') ? handleSubmitWithErrorHandling : handleSubmit,
     initialValues: initialValues,
     mutators: {
       setField: (args, state, tools) => {
@@ -65,6 +102,7 @@ export const CreateForm = ({
     }
   }, ({
     submitting,
+    submitError,
     ...formProps
   }) => {
     return jsx("form", {
@@ -85,8 +123,14 @@ export const CreateForm = ({
         const isModified = Object.values(state.modified).some(value => value);
         setShouldShowWarning(isModified);
       }
-    }), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter, {
-      formErrorMessage: formErrorMessage,
+    }), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter
+    /**
+     * We will prefer to render the error message connected to
+     * react final form state (submitError) otherwise we can
+     * default to the `formErrorMessage` that we sometimes use with our own
+     * "form context" (only currently used for AsyncSelect field reporting failed loading)
+     */, {
+      formErrorMessage: getBooleanFF('platform.linking-platform.link-create.better-observability') ? submitError || formErrorMessage : formErrorMessage,
       handleCancel: handleCancel,
       submitting: submitting,
       testId: testId