@atlaskit/link-create 1.1.1 → 1.2.0

package/dist/cjs/ui/main.js

@@ -22,13 +22,12 @@ var LinkCreateWithAnalyticsContext = (0, _analytics.withLinkCreateAnalyticsConte
   var props = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_ref), _ref));
   return (0, _react2.jsx)(_linkCreate.default, props);
 }));
-var PACKAGE_DATA = {
-  packageName: "@atlaskit/link-create",
-  packageVersion: "1.1.1",
+var PACKAGE_DATA = exports.PACKAGE_DATA = {
+  packageName: "@atlaskit/link-create" || '',
+  packageVersion: "1.2.0" || '',
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };
-exports.PACKAGE_DATA = PACKAGE_DATA;
 var ComposedLinkCreate = /*#__PURE__*/(0, _react.memo)(function (props) {
   return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
     data: PACKAGE_DATA
@@ -37,5 +36,4 @@ var ComposedLinkCreate = /*#__PURE__*/(0, _react.memo)(function (props) {
     loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale
   }, (0, _react2.jsx)(LinkCreateWithAnalyticsContext, props)));
 });
-var _default = ComposedLinkCreate;
-exports.default = _default;
+var _default = exports.default = ComposedLinkCreate;

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

@@ -14,8 +14,8 @@ const LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE
   return jsx(LinkCreate, props);
 }));
 export const PACKAGE_DATA = {
-  packageName: "@atlaskit/link-create",
-  packageVersion: "1.1.1",
+  packageName: "@atlaskit/link-create" || '',
+  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/link-create/error-boundary/index.js

@@ -9,10 +9,10 @@ export var ErrorBoundary = function ErrorBoundary(_ref) {
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var handleError = useCallback(function (error, info) {
-    var _window, _window$navigator, _info$componentStack;
+    var _window, _info$componentStack;
     // Fire Analytics event
     createAnalyticsEvent(createEventPayload('operational.linkCreate.unhandledErrorCaught', {
-      browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
+      browserInfo: ((_window = window) === null || _window === void 0 || (_window = _window.navigator) === null || _window === void 0 ? void 0 : _window.userAgent) || 'unknown',
       error: error.toString(),
       componentStack: (_info$componentStack = info === null || info === void 0 ? void 0 : info.componentStack) !== null && _info$componentStack !== void 0 ? _info$componentStack : ''
     })).fire(ANALYTICS_CHANNEL);

package/dist/esm/ui/main.js

@@ -15,8 +15,8 @@ var LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE__
   return jsx(LinkCreate, props);
 }));
 export var PACKAGE_DATA = {
-  packageName: "@atlaskit/link-create",
-  packageVersion: "1.1.1",
+  packageName: "@atlaskit/link-create" || '',
+  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.1",
+  "version": "1.2.0",
   "description": "The driver component of meta creation flow",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,16 +35,17 @@
   },
   "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.7.0",
+    "@atlaskit/modal-dialog": "^12.8.0",
+    "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/select": "^16.7.0",
-    "@atlaskit/spinner": "^15.4.0",
+    "@atlaskit/spinner": "^15.6.0",
     "@atlaskit/textfield": "^5.6.0",
-    "@atlaskit/tokens": "^1.25.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "debounce-promise": "^3.1.2",
@@ -57,11 +58,13 @@
   },
   "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",
     "fetch-mock": "^8.0.0",
     "react-dom": "^16.8.0",
     "typescript": "~4.9.5",
@@ -106,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"
+    }
+  }
 }