@atlaskit/link-create 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-create
 
+## 0.10.0
+
+### Minor Changes
+
+- [`dc546d1044a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dc546d1044a) - Update failure handler in link-create API to take Error instead of string, and fire analytics on failure
+
+## 0.9.1
+
+### Patch Changes
+
+- [`84b33e5a4b6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/84b33e5a4b6) - EDM-6544: minor internal refactors with no expected functional change
+
 ## 0.9.0
 
 ### Minor Changes

package/analytics.spec.yaml

@@ -83,3 +83,12 @@ events:
         objectType:
           type: string
           description: the type of created content
+
+  - object createFailed (linkCreate):
+      type: track
+      description: fired when the object creation fails
+      attributes:
+        <<: *PackageMetaDataContext
+        failureType:
+          type: string
+          description: the name of the failure

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::6c4bc6f47b1cf9cb3a9a70cac9a93775>>
+ * @codegen <<SignedSource::50073590468fe2604f65d3e0b23d517b>>
  * @codegenCommand yarn workspace @atlaskit/link-create run codegen-analytics
  */
 

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

@@ -18,7 +18,7 @@ var LinkCreateCallbackContext = /*#__PURE__*/_react.default.createContext({});
 var LinkCreateCallbackProvider = function LinkCreateCallbackProvider(_ref) {
   var children = _ref.children,
     _onCreate = _ref.onCreate,
-    onFailure = _ref.onFailure,
+    _onFailure = _ref.onFailure,
     onCancel = _ref.onCancel;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
@@ -52,10 +52,29 @@ var LinkCreateCallbackProvider = function LinkCreateCallbackProvider(_ref) {
         }
         return onCreate;
       }(),
-      onFailure: onFailure,
+      onFailure: function () {
+        var _onFailure2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(error) {
+          return _regenerator.default.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                createAnalyticsEvent((0, _analytics.default)('track.object.createFailed.linkCreate', {
+                  failureType: error.name
+                })).fire(_constants.ANALYTICS_CHANNEL);
+                _onFailure && _onFailure(error);
+              case 2:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        function onFailure(_x2) {
+          return _onFailure2.apply(this, arguments);
+        }
+        return onFailure;
+      }(),
       onCancel: onCancel
     };
-  }, [onFailure, onCancel, createAnalyticsEvent, _onCreate]);
+  }, [_onFailure, onCancel, createAnalyticsEvent, _onCreate]);
   return /*#__PURE__*/_react.default.createElement(LinkCreateCallbackContext.Provider, {
     value: value
   }, children);

package/dist/cjs/ui/create-form/form-footer/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CreateFormFooter", {
+  enumerable: true,
+  get: function get() {
+    return _main.CreateFormFooter;
+  }
+});
+var _main = require("./main");

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreateFormFooter = CreateFormFooter;
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _button = _interopRequireWildcard(require("@atlaskit/button"));
+var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
+var _form = require("@atlaskit/form");
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+var _messages = require("./messages");
+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; }
+/** @jsx jsx */
+
+var errorStyles = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: 'auto'
+});
+function CreateFormFooter(_ref) {
+  var formErrorMessage = _ref.formErrorMessage,
+    handleCancel = _ref.handleCancel,
+    submitting = _ref.submitting,
+    testId = _ref.testId;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react.jsx)(_form.FormFooter, null, formErrorMessage && (0, _react.jsx)("div", {
+    css: errorStyles,
+    "data-testid": "".concat(testId, "-error")
+  }, (0, _react.jsx)(_error.default, {
+    label: formErrorMessage,
+    primaryColor: "var(--ds-icon-danger, #E34935)"
+  }), formErrorMessage), (0, _react.jsx)(_button.ButtonGroup, null, (0, _react.jsx)(_button.default, {
+    type: "button",
+    appearance: "subtle",
+    onClick: handleCancel,
+    testId: "".concat(testId, "-button-cancel")
+  }, intl.formatMessage(_messages.messages.close)), (0, _react.jsx)(_loadingButton.default, {
+    type: "submit",
+    appearance: "primary",
+    isLoading: submitting,
+    testId: "".concat(testId, "-button-submit")
+  }, intl.formatMessage(_messages.messages.create))));
+}

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,21 +10,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _button = require("@atlaskit/button");
-var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
-var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _form = _interopRequireWildcard(require("@atlaskit/form"));
-var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+var _form = _interopRequireDefault(require("@atlaskit/form"));
 var _constants = require("../../common/constants");
 var _analytics = _interopRequireDefault(require("../../common/utils/analytics/analytics.codegen"));
 var _formContext = require("../../controllers/form-context");
+var _formFooter = require("./form-footer");
 var _formLoader = require("./form-loader");
-var _messages = require("./messages");
 var _utils = require("./utils");
-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; }
 /** @jsx jsx */
 
 var formStyles = (0, _react2.css)({
@@ -33,11 +25,6 @@ var formStyles = (0, _react2.css)({
   padding: "0 0 ".concat("var(--ds-space-300, 24px)", " 0"),
   margin: "var(--ds-space-0, 0px)".concat(" auto")
 });
-var errorStyles = (0, _react2.css)({
-  display: 'flex',
-  alignItems: 'center',
-  marginRight: 'auto'
-});
 var TEST_ID = 'link-create-form';
 exports.TEST_ID = TEST_ID;
 var CreateForm = function CreateForm(_ref) {
@@ -48,7 +35,6 @@ var CreateForm = function CreateForm(_ref) {
     onCancel = _ref.onCancel,
     isLoading = _ref.isLoading,
     hideFooter = _ref.hideFooter;
-  var intl = (0, _reactIntlNext.useIntl)();
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useFormContext = (0, _formContext.useFormContext)(),
@@ -99,23 +85,12 @@ var CreateForm = function CreateForm(_ref) {
       name: "link-create-form",
       "data-testid": testId,
       css: formStyles
-    }), (0, _react2.jsx)("div", null, children), !hideFooter && (0, _react2.jsx)(_form.FormFooter, null, formErrorMessage && (0, _react2.jsx)("div", {
-      css: errorStyles,
-      "data-testid": "".concat(testId, "-error")
-    }, (0, _react2.jsx)(_error.default, {
-      label: formErrorMessage,
-      primaryColor: "var(--ds-icon-danger, #E34935)"
-    }), formErrorMessage), (0, _react2.jsx)(_button.ButtonGroup, null, (0, _react2.jsx)(_standardButton.default, {
-      type: "button",
-      appearance: "subtle",
-      onClick: handleCancel,
-      testId: "".concat(testId, "-button-cancel")
-    }, intl.formatMessage(_messages.messages.close)), (0, _react2.jsx)(_loadingButton.default, {
-      type: "submit",
-      appearance: "primary",
-      isLoading: submitting,
-      testId: "".concat(testId, "-button-submit")
-    }, intl.formatMessage(_messages.messages.create)))));
+    }), (0, _react2.jsx)("div", null, children), !hideFooter && (0, _react2.jsx)(_formFooter.CreateFormFooter, {
+      formErrorMessage: formErrorMessage,
+      handleCancel: handleCancel,
+      submitting: submitting,
+      testId: testId
+    }));
   });
 };
 exports.CreateForm = CreateForm;

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

@@ -69,10 +69,10 @@ var LinkCreate = (0, _formContext.withLinkCreateFormContext)(function (_ref2) {
       return _ref3.apply(this, arguments);
     };
   }(), [onCreate, setFormErrorMessage]);
-  var handleFailure = (0, _react.useCallback)(function (errorMessage) {
+  var handleFailure = (0, _react.useCallback)(function (error) {
     // Set the form error message
-    setFormErrorMessage(errorMessage);
-    onFailure && onFailure(errorMessage);
+    setFormErrorMessage(error.message);
+    onFailure && onFailure(error);
   }, [onFailure, setFormErrorMessage]);
   return (0, _react2.jsx)("div", {
     "data-testid": testId

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-create",
-	"version": "0.9.0",
+	"version": "0.10.0",
 	"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::6c4bc6f47b1cf9cb3a9a70cac9a93775>>
+ * @codegen <<SignedSource::50073590468fe2604f65d3e0b23d517b>>
  * @codegenCommand yarn workspace @atlaskit/link-create run codegen-analytics
  */
 

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

@@ -26,7 +26,12 @@ const LinkCreateCallbackProvider = ({
         await onCreate(result);
       }
     },
-    onFailure,
+    onFailure: async error => {
+      createAnalyticsEvent(createEventPayload('track.object.createFailed.linkCreate', {
+        failureType: error.name
+      })).fire(ANALYTICS_CHANNEL);
+      onFailure && onFailure(error);
+    },
     onCancel
   }), [onFailure, onCancel, createAnalyticsEvent, onCreate]);
   return /*#__PURE__*/React.createElement(LinkCreateCallbackContext.Provider, {

package/dist/es2019/ui/create-form/form-footer/index.js

@@ -0,0 +1 @@
+export { CreateFormFooter } from './main';

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

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import Button, { ButtonGroup } from '@atlaskit/button';
+import LoadingButton from '@atlaskit/button/loading-button';
+import { FormFooter } from '@atlaskit/form';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import { messages } from './messages';
+const errorStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: 'auto'
+});
+export function CreateFormFooter({
+  formErrorMessage,
+  handleCancel,
+  submitting,
+  testId
+}) {
+  const intl = useIntl();
+  return jsx(FormFooter, null, formErrorMessage && jsx("div", {
+    css: errorStyles,
+    "data-testid": `${testId}-error`
+  }, jsx(ErrorIcon, {
+    label: formErrorMessage,
+    primaryColor: "var(--ds-icon-danger, #E34935)"
+  }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
+    type: "button",
+    appearance: "subtle",
+    onClick: handleCancel,
+    testId: `${testId}-button-cancel`
+  }, intl.formatMessage(messages.close)), jsx(LoadingButton, {
+    type: "submit",
+    appearance: "primary",
+    isLoading: submitting,
+    testId: `${testId}-button-submit`
+  }, intl.formatMessage(messages.create))));
+}

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

@@ -2,29 +2,19 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ButtonGroup } from '@atlaskit/button';
-import LoadingButton from '@atlaskit/button/loading-button';
-import Button from '@atlaskit/button/standard-button';
-import Form, { FormFooter } from '@atlaskit/form';
-import ErrorIcon from '@atlaskit/icon/glyph/error';
+import Form from '@atlaskit/form';
 import { ANALYTICS_CHANNEL, CREATE_FORM_MAX_WIDTH_IN_PX } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
 import { useFormContext } from '../../controllers/form-context';
+import { CreateFormFooter } from './form-footer';
 import { CreateFormLoader } from './form-loader';
-import { messages } from './messages';
 import { validateFormData } from './utils';
 const formStyles = css({
   maxWidth: `${CREATE_FORM_MAX_WIDTH_IN_PX}px`,
   padding: `0 0 ${"var(--ds-space-300, 24px)"} 0`,
   margin: `${"var(--ds-space-0, 0px)"} auto`
 });
-const errorStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  marginRight: 'auto'
-});
 export const TEST_ID = 'link-create-form';
 export const CreateForm = ({
   children,
@@ -34,7 +24,6 @@ export const CreateForm = ({
   isLoading,
   hideFooter
 }) => {
-  const intl = useIntl();
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
@@ -70,21 +59,10 @@ export const CreateForm = ({
     name: "link-create-form",
     "data-testid": testId,
     css: formStyles
-  }), jsx("div", null, children), !hideFooter && jsx(FormFooter, null, formErrorMessage && jsx("div", {
-    css: errorStyles,
-    "data-testid": `${testId}-error`
-  }, jsx(ErrorIcon, {
-    label: formErrorMessage,
-    primaryColor: "var(--ds-icon-danger, #E34935)"
-  }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
-    type: "button",
-    appearance: "subtle",
-    onClick: handleCancel,
-    testId: `${testId}-button-cancel`
-  }, intl.formatMessage(messages.close)), jsx(LoadingButton, {
-    type: "submit",
-    appearance: "primary",
-    isLoading: submitting,
-    testId: `${testId}-button-submit`
-  }, intl.formatMessage(messages.create))))));
+  }), jsx("div", null, children), !hideFooter && jsx(CreateFormFooter, {
+    formErrorMessage: formErrorMessage,
+    handleCancel: handleCancel,
+    submitting: submitting,
+    testId: testId
+  })));
 };

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

@@ -37,10 +37,10 @@ const LinkCreate = withLinkCreateFormContext(({
       await onCreate(result);
     }
   }, [onCreate, setFormErrorMessage]);
-  const handleFailure = useCallback(errorMessage => {
+  const handleFailure = useCallback(error => {
     // Set the form error message
-    setFormErrorMessage(errorMessage);
-    onFailure && onFailure(errorMessage);
+    setFormErrorMessage(error.message);
+    onFailure && onFailure(error);
   }, [onFailure, setFormErrorMessage]);
   return jsx("div", {
     "data-testid": testId

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-create",
-	"version": "0.9.0",
+	"version": "0.10.0",
 	"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::6c4bc6f47b1cf9cb3a9a70cac9a93775>>
+ * @codegen <<SignedSource::50073590468fe2604f65d3e0b23d517b>>
  * @codegenCommand yarn workspace @atlaskit/link-create run codegen-analytics
  */
 

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

@@ -8,7 +8,7 @@ var LinkCreateCallbackContext = /*#__PURE__*/React.createContext({});
 var LinkCreateCallbackProvider = function LinkCreateCallbackProvider(_ref) {
   var children = _ref.children,
     _onCreate = _ref.onCreate,
-    onFailure = _ref.onFailure,
+    _onFailure = _ref.onFailure,
     onCancel = _ref.onCancel;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
@@ -42,10 +42,29 @@ var LinkCreateCallbackProvider = function LinkCreateCallbackProvider(_ref) {
         }
         return onCreate;
       }(),
-      onFailure: onFailure,
+      onFailure: function () {
+        var _onFailure2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(error) {
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                createAnalyticsEvent(createEventPayload('track.object.createFailed.linkCreate', {
+                  failureType: error.name
+                })).fire(ANALYTICS_CHANNEL);
+                _onFailure && _onFailure(error);
+              case 2:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        function onFailure(_x2) {
+          return _onFailure2.apply(this, arguments);
+        }
+        return onFailure;
+      }(),
       onCancel: onCancel
     };
-  }, [onFailure, onCancel, createAnalyticsEvent, _onCreate]);
+  }, [_onFailure, onCancel, createAnalyticsEvent, _onCreate]);
   return /*#__PURE__*/React.createElement(LinkCreateCallbackContext.Provider, {
     value: value
   }, children);

package/dist/esm/ui/create-form/form-footer/index.js

@@ -0,0 +1 @@
+export { CreateFormFooter } from './main';

package/dist/esm/ui/create-form/form-footer/main.js

@@ -0,0 +1,37 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import Button, { ButtonGroup } from '@atlaskit/button';
+import LoadingButton from '@atlaskit/button/loading-button';
+import { FormFooter } from '@atlaskit/form';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import { messages } from './messages';
+var errorStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: 'auto'
+});
+export function CreateFormFooter(_ref) {
+  var formErrorMessage = _ref.formErrorMessage,
+    handleCancel = _ref.handleCancel,
+    submitting = _ref.submitting,
+    testId = _ref.testId;
+  var intl = useIntl();
+  return jsx(FormFooter, null, formErrorMessage && jsx("div", {
+    css: errorStyles,
+    "data-testid": "".concat(testId, "-error")
+  }, jsx(ErrorIcon, {
+    label: formErrorMessage,
+    primaryColor: "var(--ds-icon-danger, #E34935)"
+  }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
+    type: "button",
+    appearance: "subtle",
+    onClick: handleCancel,
+    testId: "".concat(testId, "-button-cancel")
+  }, intl.formatMessage(messages.close)), jsx(LoadingButton, {
+    type: "submit",
+    appearance: "primary",
+    isLoading: submitting,
+    testId: "".concat(testId, "-button-submit")
+  }, intl.formatMessage(messages.create))));
+}

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

@@ -4,29 +4,19 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
 import { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ButtonGroup } from '@atlaskit/button';
-import LoadingButton from '@atlaskit/button/loading-button';
-import Button from '@atlaskit/button/standard-button';
-import Form, { FormFooter } from '@atlaskit/form';
-import ErrorIcon from '@atlaskit/icon/glyph/error';
+import Form from '@atlaskit/form';
 import { ANALYTICS_CHANNEL, CREATE_FORM_MAX_WIDTH_IN_PX } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
 import { useFormContext } from '../../controllers/form-context';
+import { CreateFormFooter } from './form-footer';
 import { CreateFormLoader } from './form-loader';
-import { messages } from './messages';
 import { validateFormData } from './utils';
 var formStyles = css({
   maxWidth: "".concat(CREATE_FORM_MAX_WIDTH_IN_PX, "px"),
   padding: "0 0 ".concat("var(--ds-space-300, 24px)", " 0"),
   margin: "var(--ds-space-0, 0px)".concat(" auto")
 });
-var errorStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  marginRight: 'auto'
-});
 export var TEST_ID = 'link-create-form';
 export var CreateForm = function CreateForm(_ref) {
   var children = _ref.children,
@@ -36,7 +26,6 @@ export var CreateForm = function CreateForm(_ref) {
     onCancel = _ref.onCancel,
     isLoading = _ref.isLoading,
     hideFooter = _ref.hideFooter;
-  var intl = useIntl();
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useFormContext = useFormContext(),
@@ -87,22 +76,11 @@ export var CreateForm = function CreateForm(_ref) {
       name: "link-create-form",
       "data-testid": testId,
       css: formStyles
-    }), jsx("div", null, children), !hideFooter && jsx(FormFooter, null, formErrorMessage && jsx("div", {
-      css: errorStyles,
-      "data-testid": "".concat(testId, "-error")
-    }, jsx(ErrorIcon, {
-      label: formErrorMessage,
-      primaryColor: "var(--ds-icon-danger, #E34935)"
-    }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
-      type: "button",
-      appearance: "subtle",
-      onClick: handleCancel,
-      testId: "".concat(testId, "-button-cancel")
-    }, intl.formatMessage(messages.close)), jsx(LoadingButton, {
-      type: "submit",
-      appearance: "primary",
-      isLoading: submitting,
-      testId: "".concat(testId, "-button-submit")
-    }, intl.formatMessage(messages.create)))));
+    }), jsx("div", null, children), !hideFooter && jsx(CreateFormFooter, {
+      formErrorMessage: formErrorMessage,
+      handleCancel: handleCancel,
+      submitting: submitting,
+      testId: testId
+    }));
   });
 };

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

@@ -58,10 +58,10 @@ var LinkCreate = withLinkCreateFormContext(function (_ref2) {
       return _ref3.apply(this, arguments);
     };
   }(), [onCreate, setFormErrorMessage]);
-  var handleFailure = useCallback(function (errorMessage) {
+  var handleFailure = useCallback(function (error) {
     // Set the form error message
-    setFormErrorMessage(errorMessage);
-    onFailure && onFailure(errorMessage);
+    setFormErrorMessage(error.message);
+    onFailure && onFailure(error);
   }, [onFailure, setFormErrorMessage]);
   return jsx("div", {
     "data-testid": testId

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-create",
-	"version": "0.9.0",
+	"version": "0.10.0",
 	"sideEffects": false
 }

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

@@ -3,7 +3,7 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::6c4bc6f47b1cf9cb3a9a70cac9a93775>>
+ * @codegen <<SignedSource::50073590468fe2604f65d3e0b23d517b>>
  * @codegenCommand yarn workspace @atlaskit/link-create run codegen-analytics
  */
 export type PackageMetaDataType = {
@@ -30,6 +30,9 @@ export type ObjectCreatedLinkCreateAttributesType = {
     objectId: string;
     objectType: string;
 };
+export type ObjectCreateFailedLinkCreateAttributesType = {
+    failureType: string;
+};
 type AnalyticsEventAttributes = {
     'screen.linkCreateScreen.viewed': LinkCreateScreenViewedAttributesType;
     'ui.button.clicked.create': ButtonClickedCreateAttributesType;
@@ -37,6 +40,7 @@ type AnalyticsEventAttributes = {
     'ui.modalDialog.closed.linkCreate': ModalDialogClosedLinkCreateAttributesType;
     'operational.linkCreate.unhandledErrorCaught': LinkCreateUnhandledErrorCaughtAttributesType;
     'track.object.created.linkCreate': ObjectCreatedLinkCreateAttributesType;
+    'track.object.createFailed.linkCreate': ObjectCreateFailedLinkCreateAttributesType;
 };
 declare function createEventPayload<K extends keyof AnalyticsEventAttributes>(eventKey: K, attributes: AnalyticsEventAttributes[K]): {
     eventType: string;

package/dist/types/controllers/callback-context/main.d.ts

@@ -8,7 +8,7 @@ interface LinkCreateCallbackProviderProps {
     /**
      * This callback for any errors
      */
-    onFailure?: (errorMessage: string) => void;
+    onFailure?: (error: Error) => void;
     /**
      * This callback for when the form was manually discarded by user
      */

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

@@ -0,0 +1 @@
+export { CreateFormFooter } from './main';

package/dist/types/ui/create-form/form-footer/main.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export interface CreateFormFooterProps {
+    formErrorMessage: string | undefined;
+    handleCancel: () => void;
+    submitting: boolean;
+    testId?: string;
+}
+export declare function CreateFormFooter({ formErrorMessage, handleCancel, submitting, testId, }: CreateFormFooterProps): jsx.JSX.Element;

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

@@ -3,7 +3,7 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::6c4bc6f47b1cf9cb3a9a70cac9a93775>>
+ * @codegen <<SignedSource::50073590468fe2604f65d3e0b23d517b>>
  * @codegenCommand yarn workspace @atlaskit/link-create run codegen-analytics
  */
 export type PackageMetaDataType = {
@@ -30,6 +30,9 @@ export type ObjectCreatedLinkCreateAttributesType = {
     objectId: string;
     objectType: string;
 };
+export type ObjectCreateFailedLinkCreateAttributesType = {
+    failureType: string;
+};
 type AnalyticsEventAttributes = {
     'screen.linkCreateScreen.viewed': LinkCreateScreenViewedAttributesType;
     'ui.button.clicked.create': ButtonClickedCreateAttributesType;
@@ -37,6 +40,7 @@ type AnalyticsEventAttributes = {
     'ui.modalDialog.closed.linkCreate': ModalDialogClosedLinkCreateAttributesType;
     'operational.linkCreate.unhandledErrorCaught': LinkCreateUnhandledErrorCaughtAttributesType;
     'track.object.created.linkCreate': ObjectCreatedLinkCreateAttributesType;
+    'track.object.createFailed.linkCreate': ObjectCreateFailedLinkCreateAttributesType;
 };
 declare function createEventPayload<K extends keyof AnalyticsEventAttributes>(eventKey: K, attributes: AnalyticsEventAttributes[K]): {
     eventType: string;

package/dist/types-ts4.5/controllers/callback-context/main.d.ts

@@ -8,7 +8,7 @@ interface LinkCreateCallbackProviderProps {
     /**
      * This callback for any errors
      */
-    onFailure?: (errorMessage: string) => void;
+    onFailure?: (error: Error) => void;
     /**
      * This callback for when the form was manually discarded by user
      */

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

@@ -0,0 +1 @@
+export { CreateFormFooter } from './main';

package/dist/types-ts4.5/ui/create-form/form-footer/main.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export interface CreateFormFooterProps {
+    formErrorMessage: string | undefined;
+    handleCancel: () => void;
+    submitting: boolean;
+    testId?: string;
+}
+export declare function CreateFormFooter({ formErrorMessage, handleCancel, submitting, testId, }: CreateFormFooterProps): jsx.JSX.Element;

package/example-helpers/mock-plugin-form.tsx

@@ -1,5 +1,7 @@
 import React, { useMemo } from 'react';
 
+import { OptionsType } from '@atlaskit/select';
+
 import {
   AsyncSelect,
   CreateForm,
@@ -7,8 +9,7 @@ import {
   TextField,
   useLinkCreateCallback,
   Validator,
-} from '@atlaskit/link-create';
-import { OptionsType } from '@atlaskit/select';
+} from '../src';
 
 interface pluginProps {
   shouldThrowError?: boolean;
@@ -54,7 +55,7 @@ export function MockPluginForm({ shouldThrowError }: pluginProps) {
       return exampleOptions;
     } catch (error) {
       if (error instanceof Error) {
-        onFailure && onFailure(error.message);
+        onFailure && onFailure(error);
       }
       return [];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-create",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "The driver component of meta creation flow",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -44,7 +44,7 @@
     "@atlaskit/select": "^16.5.0",
     "@atlaskit/spinner": "^15.4.0",
     "@atlaskit/textfield": "^5.6.0",
-    "@atlaskit/tokens": "^1.12.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -53,7 +53,8 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
-    "@atlaskit/link-test-helpers": "^4.1.0",
+    "@af/visual-regression": "*",
+    "@atlaskit/link-test-helpers": "^4.2.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^12.1.5",
@@ -102,5 +103,10 @@
       ]
     }
   },
+  "techstackIgnore": {
+    "stricter": [
+      "@atlassian/tangerine/project-structure"
+    ]
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
 }

package/report.api.md

@@ -108,7 +108,7 @@ export const LinkCreateCallbackProvider: React_2.FC<LinkCreateCallbackProviderPr
 interface LinkCreateCallbackProviderProps {
   onCancel?: () => void;
   onCreate?: (result: CreatePayload) => Promise<void> | void;
-  onFailure?: (errorMessage: string) => void;
+  onFailure?: (error: Error) => void;
 }
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -77,7 +77,7 @@ export const LinkCreateCallbackProvider: React_2.FC<LinkCreateCallbackProviderPr
 interface LinkCreateCallbackProviderProps {
     onCancel?: () => void;
     onCreate?: (result: CreatePayload) => Promise<void> | void;
-    onFailure?: (errorMessage: string) => void;
+    onFailure?: (error: Error) => void;
 }
 
 // @public (undocumented)