@atlaskit/link-create 1.1.2 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-create
 
+## 1.2.0
+
+### Minor Changes
+
+- [#42356](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42356) [`db060471faf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db060471faf) - EDM-7905: an internal refactor for a new experimental feature under a feature flag platform.linking-platform.link-create.enable-edit
+
 ## 1.1.2
 
 ### Patch Changes

package/dist/cjs/common/constants.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CREATE_FORM_MIN_HEIGHT_IN_PX = exports.CREATE_FORM_MAX_WIDTH_IN_PX = exports.COMPONENT_NAME = exports.ANALYTICS_CHANNEL = void 0;
+exports.LINK_CREATE_FORM_POST_CREATE_FIELD = exports.CREATE_FORM_MIN_HEIGHT_IN_PX = exports.CREATE_FORM_MAX_WIDTH_IN_PX = exports.COMPONENT_NAME = exports.ANALYTICS_CHANNEL = void 0;
 var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var COMPONENT_NAME = exports.COMPONENT_NAME = 'linkCreate';
 var CREATE_FORM_MAX_WIDTH_IN_PX = exports.CREATE_FORM_MAX_WIDTH_IN_PX = '480';
-var CREATE_FORM_MIN_HEIGHT_IN_PX = exports.CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
+var CREATE_FORM_MIN_HEIGHT_IN_PX = exports.CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
+var LINK_CREATE_FORM_POST_CREATE_FIELD = exports.LINK_CREATE_FORM_POST_CREATE_FIELD = '__post_create__';

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

@@ -18,10 +18,12 @@ var FormContext = exports.FormContext = /*#__PURE__*/(0, _react.createContext)({
   getValidators: function getValidators() {
     return {};
   },
-  setFormErrorMessage: function setFormErrorMessage() {}
+  setFormErrorMessage: function setFormErrorMessage() {},
+  enableEditView: undefined
 });
 var FormContextProvider = exports.FormContextProvider = function FormContextProvider(_ref) {
-  var children = _ref.children;
+  var enableEditView = _ref.enableEditView,
+    children = _ref.children;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     error = _useState2[0],
@@ -52,7 +54,8 @@ var FormContextProvider = exports.FormContextProvider = function FormContextProv
       assignValidator: assignValidator,
       getValidators: getValidators,
       setFormErrorMessage: setFormErrorMessage,
-      formErrorMessage: error
+      formErrorMessage: error,
+      enableEditView: enableEditView
     }
   }, children);
 };

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactFinalForm = require("react-final-form");
+var _reactIntlNext = require("react-intl-next");
+var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
+var _constants = require("../../../../common/constants");
+var _formContext = require("../../../../controllers/form-context");
+var _formSpy = require("../../form-spy");
+var _messages = require("./messages");
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+
+var EditButton = exports.EditButton = function EditButton() {
+  var intl = (0, _reactIntlNext.useIntl)();
+  var _useFormState = (0, _reactFinalForm.useFormState)(),
+    submitting = _useFormState.submitting;
+  var _useForm = (0, _reactFinalForm.useForm)(),
+    submit = _useForm.submit,
+    mutators = _useForm.mutators;
+  var _useFormContext = (0, _formContext.useFormContext)(),
+    enableEditView = _useFormContext.enableEditView;
+  if (!enableEditView) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_formSpy.FormSpy, null, function (_ref) {
+    var values = _ref.values;
+    return /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
+      type: "button",
+      testId: "link-create-form-button-edit",
+      isLoading:
+      /**
+       * Should only be in a loading state if submitting is because we clicked
+       * the edit button
+       */
+      submitting && values[_constants.LINK_CREATE_FORM_POST_CREATE_FIELD] === true,
+      onClick: function onClick() {
+        var _mutators$setField;
+        /**
+         * Setting this field to true indicates that the edit button was clicked and that
+         * we have the intention of triggering the edit/post create flow
+         */
+        (_mutators$setField = mutators.setField) === null || _mutators$setField === void 0 || _mutators$setField.call(mutators, _constants.LINK_CREATE_FORM_POST_CREATE_FIELD, true);
+        submit();
+      }
+    }, intl.formatMessage(_messages.messages.edit));
+  });
+};

package/dist/cjs/ui/create-form/form-footer/edit-button/messages.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  edit: {
+    id: 'linkCreate.createForm.button.edit',
+    defaultMessage: 'Edit',
+    description: 'Button to edit the Create object'
+  }
+});

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

@@ -6,22 +6,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CreateFormFooter = CreateFormFooter;
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireWildcard(require("@atlaskit/button"));
 var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _editButton = require("./edit-button");
 var _messages = require("./messages");
+var _submitButton = require("./submit-button");
 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 formFooterWrapperStyles = (0, _react.css)({
+var formFooterWrapperStyles = (0, _react2.css)({
   display: 'flex',
   marginTop: "var(--ds-space-300, 24px)",
   justifyContent: 'flex-end'
 });
-var errorStyles = (0, _react.css)({
+var errorStyles = (0, _react2.css)({
   display: 'flex',
   alignItems: 'center',
   marginRight: 'auto'
@@ -37,21 +41,21 @@ function CreateFormFooter(_ref) {
     submitting = _ref.submitting,
     testId = _ref.testId;
   var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _react.jsx)("footer", {
+  return (0, _react2.jsx)("footer", {
     "data-testid": "".concat(testId, "-footer"),
     css: formFooterWrapperStyles
-  }, formErrorMessage && (0, _react.jsx)("div", {
+  }, formErrorMessage && (0, _react2.jsx)("div", {
     css: errorStyles,
     "data-testid": "".concat(testId, "-error")
-  }, (0, _react.jsx)(_error.default, {
+  }, (0, _react2.jsx)(_error.default, {
     label: formErrorMessage,
     primaryColor: "var(--ds-icon-danger, #E34935)"
-  }), formErrorMessage), (0, _react.jsx)(_button.ButtonGroup, null, (0, _react.jsx)(_button.default, {
+  }), formErrorMessage), (0, _react2.jsx)(_button.ButtonGroup, null, (0, _react2.jsx)(_button.default, {
     type: "button",
     appearance: "subtle",
     onClick: handleCancel,
     testId: "".concat(testId, "-button-cancel")
-  }, intl.formatMessage(_messages.messages.close)), (0, _react.jsx)(_loadingButton.default, {
+  }, intl.formatMessage(_messages.messages.close)), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.enable-edit') ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_editButton.EditButton, null), (0, _react2.jsx)(_submitButton.SubmitButton, null)) : (0, _react2.jsx)(_loadingButton.default, {
     type: "submit",
     appearance: "primary",
     isLoading: submitting,

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubmitButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactFinalForm = require("react-final-form");
+var _reactIntlNext = require("react-intl-next");
+var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
+var _constants = require("../../../../common/constants");
+var _formSpy = require("../../form-spy");
+var _messages = require("../messages");
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+
+var SubmitButton = exports.SubmitButton = function SubmitButton() {
+  var intl = (0, _reactIntlNext.useIntl)();
+  var _useFormState = (0, _reactFinalForm.useFormState)(),
+    submitting = _useFormState.submitting;
+  var _useForm = (0, _reactFinalForm.useForm)(),
+    mutators = _useForm.mutators;
+  return /*#__PURE__*/_react.default.createElement(_formSpy.FormSpy, null, function (_ref) {
+    var values = _ref.values;
+    return /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
+      type: "submit",
+      appearance: "primary",
+      isLoading:
+      /**
+       * Should only be in a loading state if submitting is because we clicked
+       * the edit button
+       */
+      submitting && values[_constants.LINK_CREATE_FORM_POST_CREATE_FIELD] === false,
+      testId: "link-create-form-button-submit",
+      onClick: function onClick() {
+        var _mutators$setField;
+        (_mutators$setField = mutators.setField) === null || _mutators$setField === void 0 || _mutators$setField.call(mutators, _constants.LINK_CREATE_FORM_POST_CREATE_FIELD, false);
+      }
+    }, intl.formatMessage(_messages.messages.create));
+  });
+};

package/dist/cjs/ui/main.js

@@ -24,7 +24,7 @@ var LinkCreateWithAnalyticsContext = (0, _analytics.withLinkCreateAnalyticsConte
 }));
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "1.1.2" || '',
+  packageVersion: "1.2.0" || '',
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };

package/dist/es2019/common/constants.js

@@ -1,4 +1,5 @@
 export const ANALYTICS_CHANNEL = 'media';
 export const COMPONENT_NAME = 'linkCreate';
 export const CREATE_FORM_MAX_WIDTH_IN_PX = '480';
-export const CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
+export const CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
+export const LINK_CREATE_FORM_POST_CREATE_FIELD = '__post_create__';

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

@@ -2,9 +2,11 @@ import React, { createContext, useCallback, useContext, useState } from 'react';
 export const FormContext = /*#__PURE__*/createContext({
   assignValidator: () => {},
   getValidators: () => ({}),
-  setFormErrorMessage: () => {}
+  setFormErrorMessage: () => {},
+  enableEditView: undefined
 });
 const FormContextProvider = ({
+  enableEditView,
   children
 }) => {
   const [error, setError] = useState();
@@ -32,7 +34,8 @@ const FormContextProvider = ({
       assignValidator,
       getValidators,
       setFormErrorMessage,
-      formErrorMessage: error
+      formErrorMessage: error,
+      enableEditView
     }
   }, children);
 };

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useForm, useFormState } from 'react-final-form';
+import { useIntl } from 'react-intl-next';
+import LoadingButton from '@atlaskit/button/loading-button';
+import { LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../../../common/constants';
+import { useFormContext } from '../../../../controllers/form-context';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { FormSpy } from '../../form-spy';
+import { messages } from './messages';
+export const EditButton = () => {
+  const intl = useIntl();
+  const {
+    submitting
+  } = useFormState();
+  const {
+    submit,
+    mutators
+  } = useForm();
+  const {
+    enableEditView
+  } = useFormContext();
+  if (!enableEditView) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FormSpy, null, ({
+    values
+  }) => /*#__PURE__*/React.createElement(LoadingButton, {
+    type: "button",
+    testId: "link-create-form-button-edit",
+    isLoading:
+    /**
+     * Should only be in a loading state if submitting is because we clicked
+     * the edit button
+     */
+    submitting && values[LINK_CREATE_FORM_POST_CREATE_FIELD] === true,
+    onClick: () => {
+      var _mutators$setField;
+      /**
+       * Setting this field to true indicates that the edit button was clicked and that
+       * we have the intention of triggering the edit/post create flow
+       */
+      (_mutators$setField = mutators.setField) === null || _mutators$setField === void 0 ? void 0 : _mutators$setField.call(mutators, LINK_CREATE_FORM_POST_CREATE_FIELD, true);
+      submit();
+    }
+  }, intl.formatMessage(messages.edit)));
+};

package/dist/es2019/ui/create-form/form-footer/edit-button/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  edit: {
+    id: 'linkCreate.createForm.button.edit',
+    defaultMessage: 'Edit',
+    description: 'Button to edit the Create object'
+  }
+});

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

@@ -1,10 +1,14 @@
 /** @jsx jsx */
+import { Fragment } from 'react';
 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 ErrorIcon from '@atlaskit/icon/glyph/error';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { EditButton } from './edit-button';
 import { messages } from './messages';
+import { SubmitButton } from './submit-button';
 const formFooterWrapperStyles = css({
   display: 'flex',
   marginTop: "var(--ds-space-300, 24px)",
@@ -41,7 +45,7 @@ export function CreateFormFooter({
     appearance: "subtle",
     onClick: handleCancel,
     testId: `${testId}-button-cancel`
-  }, intl.formatMessage(messages.close)), jsx(LoadingButton, {
+  }, intl.formatMessage(messages.close)), getBooleanFF('platform.linking-platform.link-create.enable-edit') ? jsx(Fragment, null, jsx(EditButton, null), jsx(SubmitButton, null)) : jsx(LoadingButton, {
     type: "submit",
     appearance: "primary",
     isLoading: submitting,

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useForm, useFormState } from 'react-final-form';
+import { useIntl } from 'react-intl-next';
+import LoadingButton from '@atlaskit/button/loading-button';
+import { LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../../../common/constants';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { FormSpy } from '../../form-spy';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { messages } from '../messages';
+export const SubmitButton = () => {
+  const intl = useIntl();
+  const {
+    submitting
+  } = useFormState();
+  const {
+    mutators
+  } = useForm();
+  return /*#__PURE__*/React.createElement(FormSpy, null, ({
+    values
+  }) => /*#__PURE__*/React.createElement(LoadingButton, {
+    type: "submit",
+    appearance: "primary",
+    isLoading:
+    /**
+     * Should only be in a loading state if submitting is because we clicked
+     * the edit button
+     */
+    submitting && values[LINK_CREATE_FORM_POST_CREATE_FIELD] === false,
+    testId: "link-create-form-button-submit",
+    onClick: () => {
+      var _mutators$setField;
+      (_mutators$setField = mutators.setField) === null || _mutators$setField === void 0 ? void 0 : _mutators$setField.call(mutators, LINK_CREATE_FORM_POST_CREATE_FIELD, false);
+    }
+  }, intl.formatMessage(messages.create)));
+};

package/dist/es2019/ui/main.js

@@ -15,7 +15,7 @@ const LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE
 }));
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "1.1.2" || '',
+  packageVersion: "1.2.0" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/dist/esm/common/constants.js

@@ -1,4 +1,5 @@
 export var ANALYTICS_CHANNEL = 'media';
 export var COMPONENT_NAME = 'linkCreate';
 export var CREATE_FORM_MAX_WIDTH_IN_PX = '480';
-export var CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
+export var CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
+export var LINK_CREATE_FORM_POST_CREATE_FIELD = '__post_create__';

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

@@ -8,10 +8,12 @@ export var FormContext = /*#__PURE__*/createContext({
   getValidators: function getValidators() {
     return {};
   },
-  setFormErrorMessage: function setFormErrorMessage() {}
+  setFormErrorMessage: function setFormErrorMessage() {},
+  enableEditView: undefined
 });
 var FormContextProvider = function FormContextProvider(_ref) {
-  var children = _ref.children;
+  var enableEditView = _ref.enableEditView,
+    children = _ref.children;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     error = _useState2[0],
@@ -42,7 +44,8 @@ var FormContextProvider = function FormContextProvider(_ref) {
       assignValidator: assignValidator,
       getValidators: getValidators,
       setFormErrorMessage: setFormErrorMessage,
-      formErrorMessage: error
+      formErrorMessage: error,
+      enableEditView: enableEditView
     }
   }, children);
 };

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useForm, useFormState } from 'react-final-form';
+import { useIntl } from 'react-intl-next';
+import LoadingButton from '@atlaskit/button/loading-button';
+import { LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../../../common/constants';
+import { useFormContext } from '../../../../controllers/form-context';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { FormSpy } from '../../form-spy';
+import { messages } from './messages';
+export var EditButton = function EditButton() {
+  var intl = useIntl();
+  var _useFormState = useFormState(),
+    submitting = _useFormState.submitting;
+  var _useForm = useForm(),
+    submit = _useForm.submit,
+    mutators = _useForm.mutators;
+  var _useFormContext = useFormContext(),
+    enableEditView = _useFormContext.enableEditView;
+  if (!enableEditView) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FormSpy, null, function (_ref) {
+    var values = _ref.values;
+    return /*#__PURE__*/React.createElement(LoadingButton, {
+      type: "button",
+      testId: "link-create-form-button-edit",
+      isLoading:
+      /**
+       * Should only be in a loading state if submitting is because we clicked
+       * the edit button
+       */
+      submitting && values[LINK_CREATE_FORM_POST_CREATE_FIELD] === true,
+      onClick: function onClick() {
+        var _mutators$setField;
+        /**
+         * Setting this field to true indicates that the edit button was clicked and that
+         * we have the intention of triggering the edit/post create flow
+         */
+        (_mutators$setField = mutators.setField) === null || _mutators$setField === void 0 || _mutators$setField.call(mutators, LINK_CREATE_FORM_POST_CREATE_FIELD, true);
+        submit();
+      }
+    }, intl.formatMessage(messages.edit));
+  });
+};

package/dist/esm/ui/create-form/form-footer/edit-button/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  edit: {
+    id: 'linkCreate.createForm.button.edit',
+    defaultMessage: 'Edit',
+    description: 'Button to edit the Create object'
+  }
+});

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

@@ -1,10 +1,14 @@
 /** @jsx jsx */
+import { Fragment } from 'react';
 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 ErrorIcon from '@atlaskit/icon/glyph/error';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { EditButton } from './edit-button';
 import { messages } from './messages';
+import { SubmitButton } from './submit-button';
 var formFooterWrapperStyles = css({
   display: 'flex',
   marginTop: "var(--ds-space-300, 24px)",
@@ -40,7 +44,7 @@ export function CreateFormFooter(_ref) {
     appearance: "subtle",
     onClick: handleCancel,
     testId: "".concat(testId, "-button-cancel")
-  }, intl.formatMessage(messages.close)), jsx(LoadingButton, {
+  }, intl.formatMessage(messages.close)), getBooleanFF('platform.linking-platform.link-create.enable-edit') ? jsx(Fragment, null, jsx(EditButton, null), jsx(SubmitButton, null)) : jsx(LoadingButton, {
     type: "submit",
     appearance: "primary",
     isLoading: submitting,

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useForm, useFormState } from 'react-final-form';
+import { useIntl } from 'react-intl-next';
+import LoadingButton from '@atlaskit/button/loading-button';
+import { LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../../../common/constants';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { FormSpy } from '../../form-spy';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { messages } from '../messages';
+export var SubmitButton = function SubmitButton() {
+  var intl = useIntl();
+  var _useFormState = useFormState(),
+    submitting = _useFormState.submitting;
+  var _useForm = useForm(),
+    mutators = _useForm.mutators;
+  return /*#__PURE__*/React.createElement(FormSpy, null, function (_ref) {
+    var values = _ref.values;
+    return /*#__PURE__*/React.createElement(LoadingButton, {
+      type: "submit",
+      appearance: "primary",
+      isLoading:
+      /**
+       * Should only be in a loading state if submitting is because we clicked
+       * the edit button
+       */
+      submitting && values[LINK_CREATE_FORM_POST_CREATE_FIELD] === false,
+      testId: "link-create-form-button-submit",
+      onClick: function onClick() {
+        var _mutators$setField;
+        (_mutators$setField = mutators.setField) === null || _mutators$setField === void 0 || _mutators$setField.call(mutators, LINK_CREATE_FORM_POST_CREATE_FIELD, false);
+      }
+    }, intl.formatMessage(messages.create));
+  });
+};

package/dist/esm/ui/main.js

@@ -16,7 +16,7 @@ var LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE__
 }));
 export var PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "1.1.2" || '',
+  packageVersion: "1.2.0" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

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

@@ -2,3 +2,4 @@ export declare const ANALYTICS_CHANNEL = "media";
 export declare const COMPONENT_NAME = "linkCreate";
 export declare const CREATE_FORM_MAX_WIDTH_IN_PX = "480";
 export declare const CREATE_FORM_MIN_HEIGHT_IN_PX = "200";
+export declare const LINK_CREATE_FORM_POST_CREATE_FIELD = "__post_create__";

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

@@ -5,9 +5,17 @@ interface FormContextType {
     assignValidator: (name: string, validators: Validator[]) => void;
     setFormErrorMessage: (errorMessage?: string) => void;
     formErrorMessage?: string;
+    /**
+     * Callback that updates link create to tell it that it should/should not open the current plugins
+     * edit view after creation. Should be `undefined` if the plugin does not provide an edit view, or if `onComplete`
+     * is not defined as a prop at the `LinkCreate` props level
+     */
+    enableEditView?: ((editButtonClicked: boolean) => void) | undefined;
 }
 export declare const FormContext: React.Context<FormContextType>;
-declare const FormContextProvider: React.FC<{}>;
+declare const FormContextProvider: React.FC<{
+    enableEditView?: (editButtonClicked: boolean) => void;
+}>;
 declare const useFormContext: () => FormContextType;
 export { FormContextProvider, useFormContext };
 export declare const withLinkCreateFormContext: <P extends LinkCreateProps>(WrappedComponent: React.ComponentType<P>) => (props: P) => JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EditButton: () => JSX.Element | null;

package/dist/types/ui/create-form/form-footer/edit-button/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    edit: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 export interface CreateFormFooterProps {
     formErrorMessage: string | undefined;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SubmitButton: () => JSX.Element;

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

@@ -2,3 +2,4 @@ export declare const ANALYTICS_CHANNEL = "media";
 export declare const COMPONENT_NAME = "linkCreate";
 export declare const CREATE_FORM_MAX_WIDTH_IN_PX = "480";
 export declare const CREATE_FORM_MIN_HEIGHT_IN_PX = "200";
+export declare const LINK_CREATE_FORM_POST_CREATE_FIELD = "__post_create__";

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

@@ -5,9 +5,17 @@ interface FormContextType {
     assignValidator: (name: string, validators: Validator[]) => void;
     setFormErrorMessage: (errorMessage?: string) => void;
     formErrorMessage?: string;
+    /**
+     * Callback that updates link create to tell it that it should/should not open the current plugins
+     * edit view after creation. Should be `undefined` if the plugin does not provide an edit view, or if `onComplete`
+     * is not defined as a prop at the `LinkCreate` props level
+     */
+    enableEditView?: ((editButtonClicked: boolean) => void) | undefined;
 }
 export declare const FormContext: React.Context<FormContextType>;
-declare const FormContextProvider: React.FC<{}>;
+declare const FormContextProvider: React.FC<{
+    enableEditView?: (editButtonClicked: boolean) => void;
+}>;
 declare const useFormContext: () => FormContextType;
 export { FormContextProvider, useFormContext };
 export declare const withLinkCreateFormContext: <P extends LinkCreateProps>(WrappedComponent: React.ComponentType<P>) => (props: P) => JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EditButton: () => JSX.Element | null;

package/dist/types-ts4.5/ui/create-form/form-footer/edit-button/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    edit: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 export interface CreateFormFooterProps {
     formErrorMessage: string | undefined;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SubmitButton: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-create",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "The driver component of meta creation flow",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,12 +35,13 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.10.0",
+    "@atlaskit/button": "^16.12.0",
     "@atlaskit/empty-state": "^7.6.0",
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/intl-messages-provider": "^1.0.0",
     "@atlaskit/modal-dialog": "^12.8.0",
+    "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/select": "^16.7.0",
     "@atlaskit/spinner": "^15.6.0",
     "@atlaskit/textfield": "^5.6.0",
@@ -57,9 +58,10 @@
   },
   "devDependencies": {
     "@af/visual-regression": "*",
-    "@atlaskit/link-test-helpers": "^6.1.0",
+    "@atlaskit/link-test-helpers": "^6.2.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@atlassian/feature-flags-test-utils": "^0.1.2",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
     "@types/debounce-promise": "^3.1.2",
@@ -107,5 +109,10 @@
       ]
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0",
+  "platform-feature-flags": {
+    "platform.linking-platform.link-create.enable-edit": {
+      "type": "boolean"
+    }
+  }
 }