@atlaskit/link-create 1.1.2 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/common/constants.js +3 -2
- package/dist/cjs/controllers/form-context/main.js +6 -3
- package/dist/cjs/ui/create-form/form-footer/edit-button/index.js +52 -0
- package/dist/cjs/ui/create-form/form-footer/edit-button/messages.js +14 -0
- package/dist/cjs/ui/create-form/form-footer/main.js +12 -8
- package/dist/cjs/ui/create-form/form-footer/submit-button/index.js +43 -0
- package/dist/cjs/ui/main.js +1 -1
- package/dist/es2019/common/constants.js +2 -1
- package/dist/es2019/controllers/form-context/main.js +5 -2
- package/dist/es2019/ui/create-form/form-footer/edit-button/index.js +46 -0
- package/dist/es2019/ui/create-form/form-footer/edit-button/messages.js +8 -0
- package/dist/es2019/ui/create-form/form-footer/main.js +5 -1
- package/dist/es2019/ui/create-form/form-footer/submit-button/index.js +35 -0
- package/dist/es2019/ui/main.js +1 -1
- package/dist/esm/common/constants.js +2 -1
- package/dist/esm/controllers/form-context/main.js +6 -3
- package/dist/esm/ui/create-form/form-footer/edit-button/index.js +44 -0
- package/dist/esm/ui/create-form/form-footer/edit-button/messages.js +8 -0
- package/dist/esm/ui/create-form/form-footer/main.js +5 -1
- package/dist/esm/ui/create-form/form-footer/submit-button/index.js +34 -0
- package/dist/esm/ui/main.js +1 -1
- package/dist/types/common/constants.d.ts +1 -0
- package/dist/types/common/types.d.ts +9 -0
- package/dist/types/controllers/form-context/main.d.ts +9 -1
- package/dist/types/ui/create-form/form-footer/edit-button/index.d.ts +2 -0
- package/dist/types/ui/create-form/form-footer/edit-button/messages.d.ts +7 -0
- package/dist/types/ui/create-form/form-footer/main.d.ts +0 -1
- package/dist/types/ui/create-form/form-footer/submit-button/index.d.ts +2 -0
- package/dist/types-ts4.5/common/constants.d.ts +1 -0
- package/dist/types-ts4.5/common/types.d.ts +9 -0
- package/dist/types-ts4.5/controllers/form-context/main.d.ts +9 -1
- package/dist/types-ts4.5/ui/create-form/form-footer/edit-button/index.d.ts +2 -0
- package/dist/types-ts4.5/ui/create-form/form-footer/edit-button/messages.d.ts +7 -0
- package/dist/types-ts4.5/ui/create-form/form-footer/main.d.ts +0 -1
- package/dist/types-ts4.5/ui/create-form/form-footer/submit-button/index.d.ts +2 -0
- package/example-helpers/mock-plugin-form.tsx +1 -0
- package/package.json +11 -4
- package/report.api.md +1 -0
- package/tmp/api-report-tmp.d.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/link-create
|
|
2
2
|
|
|
3
|
+
## 1.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#41722](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41722) [`0bcdc0cc988`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0bcdc0cc988) - EDM-8055 Add ARI to link create callback
|
|
8
|
+
|
|
9
|
+
## 1.2.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#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
|
|
14
|
+
|
|
3
15
|
## 1.1.2
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.CREATE_FORM_MIN_HEIGHT_IN_PX = exports.CREATE_FORM_MAX_WIDTH_IN_PX = exports.COMPONENT_NAME = exports.ANALYTICS_CHANNEL = void 0;
|
|
6
|
+
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;
|
|
7
7
|
var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
|
|
8
8
|
var COMPONENT_NAME = exports.COMPONENT_NAME = 'linkCreate';
|
|
9
9
|
var CREATE_FORM_MAX_WIDTH_IN_PX = exports.CREATE_FORM_MAX_WIDTH_IN_PX = '480';
|
|
10
|
-
var CREATE_FORM_MIN_HEIGHT_IN_PX = exports.CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
|
|
10
|
+
var CREATE_FORM_MIN_HEIGHT_IN_PX = exports.CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
|
|
11
|
+
var LINK_CREATE_FORM_POST_CREATE_FIELD = exports.LINK_CREATE_FORM_POST_CREATE_FIELD = '__post_create__';
|
|
@@ -18,10 +18,12 @@ var FormContext = exports.FormContext = /*#__PURE__*/(0, _react.createContext)({
|
|
|
18
18
|
getValidators: function getValidators() {
|
|
19
19
|
return {};
|
|
20
20
|
},
|
|
21
|
-
setFormErrorMessage: function setFormErrorMessage() {}
|
|
21
|
+
setFormErrorMessage: function setFormErrorMessage() {},
|
|
22
|
+
enableEditView: undefined
|
|
22
23
|
});
|
|
23
24
|
var FormContextProvider = exports.FormContextProvider = function FormContextProvider(_ref) {
|
|
24
|
-
var
|
|
25
|
+
var enableEditView = _ref.enableEditView,
|
|
26
|
+
children = _ref.children;
|
|
25
27
|
var _useState = (0, _react.useState)(),
|
|
26
28
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
27
29
|
error = _useState2[0],
|
|
@@ -52,7 +54,8 @@ var FormContextProvider = exports.FormContextProvider = function FormContextProv
|
|
|
52
54
|
assignValidator: assignValidator,
|
|
53
55
|
getValidators: getValidators,
|
|
54
56
|
setFormErrorMessage: setFormErrorMessage,
|
|
55
|
-
formErrorMessage: error
|
|
57
|
+
formErrorMessage: error,
|
|
58
|
+
enableEditView: enableEditView
|
|
56
59
|
}
|
|
57
60
|
}, children);
|
|
58
61
|
};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.EditButton = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _reactFinalForm = require("react-final-form");
|
|
10
|
+
var _reactIntlNext = require("react-intl-next");
|
|
11
|
+
var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
|
|
12
|
+
var _constants = require("../../../../common/constants");
|
|
13
|
+
var _formContext = require("../../../../controllers/form-context");
|
|
14
|
+
var _formSpy = require("../../form-spy");
|
|
15
|
+
var _messages = require("./messages");
|
|
16
|
+
// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
|
|
17
|
+
|
|
18
|
+
var EditButton = exports.EditButton = function EditButton() {
|
|
19
|
+
var intl = (0, _reactIntlNext.useIntl)();
|
|
20
|
+
var _useFormState = (0, _reactFinalForm.useFormState)(),
|
|
21
|
+
submitting = _useFormState.submitting;
|
|
22
|
+
var _useForm = (0, _reactFinalForm.useForm)(),
|
|
23
|
+
submit = _useForm.submit,
|
|
24
|
+
mutators = _useForm.mutators;
|
|
25
|
+
var _useFormContext = (0, _formContext.useFormContext)(),
|
|
26
|
+
enableEditView = _useFormContext.enableEditView;
|
|
27
|
+
if (!enableEditView) {
|
|
28
|
+
return null;
|
|
29
|
+
}
|
|
30
|
+
return /*#__PURE__*/_react.default.createElement(_formSpy.FormSpy, null, function (_ref) {
|
|
31
|
+
var values = _ref.values;
|
|
32
|
+
return /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
|
|
33
|
+
type: "button",
|
|
34
|
+
testId: "link-create-form-button-edit",
|
|
35
|
+
isLoading:
|
|
36
|
+
/**
|
|
37
|
+
* Should only be in a loading state if submitting is because we clicked
|
|
38
|
+
* the edit button
|
|
39
|
+
*/
|
|
40
|
+
submitting && values[_constants.LINK_CREATE_FORM_POST_CREATE_FIELD] === true,
|
|
41
|
+
onClick: function onClick() {
|
|
42
|
+
var _mutators$setField;
|
|
43
|
+
/**
|
|
44
|
+
* Setting this field to true indicates that the edit button was clicked and that
|
|
45
|
+
* we have the intention of triggering the edit/post create flow
|
|
46
|
+
*/
|
|
47
|
+
(_mutators$setField = mutators.setField) === null || _mutators$setField === void 0 || _mutators$setField.call(mutators, _constants.LINK_CREATE_FORM_POST_CREATE_FIELD, true);
|
|
48
|
+
submit();
|
|
49
|
+
}
|
|
50
|
+
}, intl.formatMessage(_messages.messages.edit));
|
|
51
|
+
});
|
|
52
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.messages = void 0;
|
|
7
|
+
var _reactIntlNext = require("react-intl-next");
|
|
8
|
+
var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
|
|
9
|
+
edit: {
|
|
10
|
+
id: 'linkCreate.createForm.button.edit',
|
|
11
|
+
defaultMessage: 'Edit',
|
|
12
|
+
description: 'Button to edit the Create object'
|
|
13
|
+
}
|
|
14
|
+
});
|
|
@@ -6,22 +6,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.CreateFormFooter = CreateFormFooter;
|
|
9
|
-
var _react = require("
|
|
9
|
+
var _react = require("react");
|
|
10
|
+
var _react2 = require("@emotion/react");
|
|
10
11
|
var _reactIntlNext = require("react-intl-next");
|
|
11
12
|
var _button = _interopRequireWildcard(require("@atlaskit/button"));
|
|
12
13
|
var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
|
|
13
14
|
var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
|
|
15
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
16
|
+
var _editButton = require("./edit-button");
|
|
14
17
|
var _messages = require("./messages");
|
|
18
|
+
var _submitButton = require("./submit-button");
|
|
15
19
|
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); }
|
|
16
20
|
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; }
|
|
17
21
|
/** @jsx jsx */
|
|
18
22
|
|
|
19
|
-
var formFooterWrapperStyles = (0,
|
|
23
|
+
var formFooterWrapperStyles = (0, _react2.css)({
|
|
20
24
|
display: 'flex',
|
|
21
25
|
marginTop: "var(--ds-space-300, 24px)",
|
|
22
26
|
justifyContent: 'flex-end'
|
|
23
27
|
});
|
|
24
|
-
var errorStyles = (0,
|
|
28
|
+
var errorStyles = (0, _react2.css)({
|
|
25
29
|
display: 'flex',
|
|
26
30
|
alignItems: 'center',
|
|
27
31
|
marginRight: 'auto'
|
|
@@ -37,21 +41,21 @@ function CreateFormFooter(_ref) {
|
|
|
37
41
|
submitting = _ref.submitting,
|
|
38
42
|
testId = _ref.testId;
|
|
39
43
|
var intl = (0, _reactIntlNext.useIntl)();
|
|
40
|
-
return (0,
|
|
44
|
+
return (0, _react2.jsx)("footer", {
|
|
41
45
|
"data-testid": "".concat(testId, "-footer"),
|
|
42
46
|
css: formFooterWrapperStyles
|
|
43
|
-
}, formErrorMessage && (0,
|
|
47
|
+
}, formErrorMessage && (0, _react2.jsx)("div", {
|
|
44
48
|
css: errorStyles,
|
|
45
49
|
"data-testid": "".concat(testId, "-error")
|
|
46
|
-
}, (0,
|
|
50
|
+
}, (0, _react2.jsx)(_error.default, {
|
|
47
51
|
label: formErrorMessage,
|
|
48
52
|
primaryColor: "var(--ds-icon-danger, #E34935)"
|
|
49
|
-
}), formErrorMessage), (0,
|
|
53
|
+
}), formErrorMessage), (0, _react2.jsx)(_button.ButtonGroup, null, (0, _react2.jsx)(_button.default, {
|
|
50
54
|
type: "button",
|
|
51
55
|
appearance: "subtle",
|
|
52
56
|
onClick: handleCancel,
|
|
53
57
|
testId: "".concat(testId, "-button-cancel")
|
|
54
|
-
}, intl.formatMessage(_messages.messages.close)), (0, _react.jsx)(_loadingButton.default, {
|
|
58
|
+
}, 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, {
|
|
55
59
|
type: "submit",
|
|
56
60
|
appearance: "primary",
|
|
57
61
|
isLoading: submitting,
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.SubmitButton = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _reactFinalForm = require("react-final-form");
|
|
10
|
+
var _reactIntlNext = require("react-intl-next");
|
|
11
|
+
var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
|
|
12
|
+
var _constants = require("../../../../common/constants");
|
|
13
|
+
var _formSpy = require("../../form-spy");
|
|
14
|
+
var _messages = require("../messages");
|
|
15
|
+
// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
|
|
16
|
+
|
|
17
|
+
// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
|
|
18
|
+
|
|
19
|
+
var SubmitButton = exports.SubmitButton = function SubmitButton() {
|
|
20
|
+
var intl = (0, _reactIntlNext.useIntl)();
|
|
21
|
+
var _useFormState = (0, _reactFinalForm.useFormState)(),
|
|
22
|
+
submitting = _useFormState.submitting;
|
|
23
|
+
var _useForm = (0, _reactFinalForm.useForm)(),
|
|
24
|
+
mutators = _useForm.mutators;
|
|
25
|
+
return /*#__PURE__*/_react.default.createElement(_formSpy.FormSpy, null, function (_ref) {
|
|
26
|
+
var values = _ref.values;
|
|
27
|
+
return /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
|
|
28
|
+
type: "submit",
|
|
29
|
+
appearance: "primary",
|
|
30
|
+
isLoading:
|
|
31
|
+
/**
|
|
32
|
+
* Should only be in a loading state if submitting is because we clicked
|
|
33
|
+
* the edit button
|
|
34
|
+
*/
|
|
35
|
+
submitting && values[_constants.LINK_CREATE_FORM_POST_CREATE_FIELD] === false,
|
|
36
|
+
testId: "link-create-form-button-submit",
|
|
37
|
+
onClick: function onClick() {
|
|
38
|
+
var _mutators$setField;
|
|
39
|
+
(_mutators$setField = mutators.setField) === null || _mutators$setField === void 0 || _mutators$setField.call(mutators, _constants.LINK_CREATE_FORM_POST_CREATE_FIELD, false);
|
|
40
|
+
}
|
|
41
|
+
}, intl.formatMessage(_messages.messages.create));
|
|
42
|
+
});
|
|
43
|
+
};
|
package/dist/cjs/ui/main.js
CHANGED
|
@@ -24,7 +24,7 @@ var LinkCreateWithAnalyticsContext = (0, _analytics.withLinkCreateAnalyticsConte
|
|
|
24
24
|
}));
|
|
25
25
|
var PACKAGE_DATA = exports.PACKAGE_DATA = {
|
|
26
26
|
packageName: "@atlaskit/link-create" || '',
|
|
27
|
-
packageVersion: "1.
|
|
27
|
+
packageVersion: "1.3.0" || '',
|
|
28
28
|
componentName: _constants.COMPONENT_NAME,
|
|
29
29
|
source: _constants.COMPONENT_NAME
|
|
30
30
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export const ANALYTICS_CHANNEL = 'media';
|
|
2
2
|
export const COMPONENT_NAME = 'linkCreate';
|
|
3
3
|
export const CREATE_FORM_MAX_WIDTH_IN_PX = '480';
|
|
4
|
-
export const CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
|
|
4
|
+
export const CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
|
|
5
|
+
export const LINK_CREATE_FORM_POST_CREATE_FIELD = '__post_create__';
|
|
@@ -2,9 +2,11 @@ import React, { createContext, useCallback, useContext, useState } from 'react';
|
|
|
2
2
|
export const FormContext = /*#__PURE__*/createContext({
|
|
3
3
|
assignValidator: () => {},
|
|
4
4
|
getValidators: () => ({}),
|
|
5
|
-
setFormErrorMessage: () => {}
|
|
5
|
+
setFormErrorMessage: () => {},
|
|
6
|
+
enableEditView: undefined
|
|
6
7
|
});
|
|
7
8
|
const FormContextProvider = ({
|
|
9
|
+
enableEditView,
|
|
8
10
|
children
|
|
9
11
|
}) => {
|
|
10
12
|
const [error, setError] = useState();
|
|
@@ -32,7 +34,8 @@ const FormContextProvider = ({
|
|
|
32
34
|
assignValidator,
|
|
33
35
|
getValidators,
|
|
34
36
|
setFormErrorMessage,
|
|
35
|
-
formErrorMessage: error
|
|
37
|
+
formErrorMessage: error,
|
|
38
|
+
enableEditView
|
|
36
39
|
}
|
|
37
40
|
}, children);
|
|
38
41
|
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useForm, useFormState } from 'react-final-form';
|
|
3
|
+
import { useIntl } from 'react-intl-next';
|
|
4
|
+
import LoadingButton from '@atlaskit/button/loading-button';
|
|
5
|
+
import { LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../../../common/constants';
|
|
6
|
+
import { useFormContext } from '../../../../controllers/form-context';
|
|
7
|
+
// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
|
|
8
|
+
import { FormSpy } from '../../form-spy';
|
|
9
|
+
import { messages } from './messages';
|
|
10
|
+
export const EditButton = () => {
|
|
11
|
+
const intl = useIntl();
|
|
12
|
+
const {
|
|
13
|
+
submitting
|
|
14
|
+
} = useFormState();
|
|
15
|
+
const {
|
|
16
|
+
submit,
|
|
17
|
+
mutators
|
|
18
|
+
} = useForm();
|
|
19
|
+
const {
|
|
20
|
+
enableEditView
|
|
21
|
+
} = useFormContext();
|
|
22
|
+
if (!enableEditView) {
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
return /*#__PURE__*/React.createElement(FormSpy, null, ({
|
|
26
|
+
values
|
|
27
|
+
}) => /*#__PURE__*/React.createElement(LoadingButton, {
|
|
28
|
+
type: "button",
|
|
29
|
+
testId: "link-create-form-button-edit",
|
|
30
|
+
isLoading:
|
|
31
|
+
/**
|
|
32
|
+
* Should only be in a loading state if submitting is because we clicked
|
|
33
|
+
* the edit button
|
|
34
|
+
*/
|
|
35
|
+
submitting && values[LINK_CREATE_FORM_POST_CREATE_FIELD] === true,
|
|
36
|
+
onClick: () => {
|
|
37
|
+
var _mutators$setField;
|
|
38
|
+
/**
|
|
39
|
+
* Setting this field to true indicates that the edit button was clicked and that
|
|
40
|
+
* we have the intention of triggering the edit/post create flow
|
|
41
|
+
*/
|
|
42
|
+
(_mutators$setField = mutators.setField) === null || _mutators$setField === void 0 ? void 0 : _mutators$setField.call(mutators, LINK_CREATE_FORM_POST_CREATE_FIELD, true);
|
|
43
|
+
submit();
|
|
44
|
+
}
|
|
45
|
+
}, intl.formatMessage(messages.edit)));
|
|
46
|
+
};
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
+
import { Fragment } from 'react';
|
|
2
3
|
import { css, jsx } from '@emotion/react';
|
|
3
4
|
import { useIntl } from 'react-intl-next';
|
|
4
5
|
import Button, { ButtonGroup } from '@atlaskit/button';
|
|
5
6
|
import LoadingButton from '@atlaskit/button/loading-button';
|
|
6
7
|
import ErrorIcon from '@atlaskit/icon/glyph/error';
|
|
8
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
9
|
+
import { EditButton } from './edit-button';
|
|
7
10
|
import { messages } from './messages';
|
|
11
|
+
import { SubmitButton } from './submit-button';
|
|
8
12
|
const formFooterWrapperStyles = css({
|
|
9
13
|
display: 'flex',
|
|
10
14
|
marginTop: "var(--ds-space-300, 24px)",
|
|
@@ -41,7 +45,7 @@ export function CreateFormFooter({
|
|
|
41
45
|
appearance: "subtle",
|
|
42
46
|
onClick: handleCancel,
|
|
43
47
|
testId: `${testId}-button-cancel`
|
|
44
|
-
}, intl.formatMessage(messages.close)), jsx(LoadingButton, {
|
|
48
|
+
}, intl.formatMessage(messages.close)), getBooleanFF('platform.linking-platform.link-create.enable-edit') ? jsx(Fragment, null, jsx(EditButton, null), jsx(SubmitButton, null)) : jsx(LoadingButton, {
|
|
45
49
|
type: "submit",
|
|
46
50
|
appearance: "primary",
|
|
47
51
|
isLoading: submitting,
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useForm, useFormState } from 'react-final-form';
|
|
3
|
+
import { useIntl } from 'react-intl-next';
|
|
4
|
+
import LoadingButton from '@atlaskit/button/loading-button';
|
|
5
|
+
import { LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../../../common/constants';
|
|
6
|
+
// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
|
|
7
|
+
import { FormSpy } from '../../form-spy';
|
|
8
|
+
// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
|
|
9
|
+
import { messages } from '../messages';
|
|
10
|
+
export const SubmitButton = () => {
|
|
11
|
+
const intl = useIntl();
|
|
12
|
+
const {
|
|
13
|
+
submitting
|
|
14
|
+
} = useFormState();
|
|
15
|
+
const {
|
|
16
|
+
mutators
|
|
17
|
+
} = useForm();
|
|
18
|
+
return /*#__PURE__*/React.createElement(FormSpy, null, ({
|
|
19
|
+
values
|
|
20
|
+
}) => /*#__PURE__*/React.createElement(LoadingButton, {
|
|
21
|
+
type: "submit",
|
|
22
|
+
appearance: "primary",
|
|
23
|
+
isLoading:
|
|
24
|
+
/**
|
|
25
|
+
* Should only be in a loading state if submitting is because we clicked
|
|
26
|
+
* the edit button
|
|
27
|
+
*/
|
|
28
|
+
submitting && values[LINK_CREATE_FORM_POST_CREATE_FIELD] === false,
|
|
29
|
+
testId: "link-create-form-button-submit",
|
|
30
|
+
onClick: () => {
|
|
31
|
+
var _mutators$setField;
|
|
32
|
+
(_mutators$setField = mutators.setField) === null || _mutators$setField === void 0 ? void 0 : _mutators$setField.call(mutators, LINK_CREATE_FORM_POST_CREATE_FIELD, false);
|
|
33
|
+
}
|
|
34
|
+
}, intl.formatMessage(messages.create)));
|
|
35
|
+
};
|
package/dist/es2019/ui/main.js
CHANGED
|
@@ -15,7 +15,7 @@ const LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE
|
|
|
15
15
|
}));
|
|
16
16
|
export const PACKAGE_DATA = {
|
|
17
17
|
packageName: "@atlaskit/link-create" || '',
|
|
18
|
-
packageVersion: "1.
|
|
18
|
+
packageVersion: "1.3.0" || '',
|
|
19
19
|
componentName: COMPONENT_NAME,
|
|
20
20
|
source: COMPONENT_NAME
|
|
21
21
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export var ANALYTICS_CHANNEL = 'media';
|
|
2
2
|
export var COMPONENT_NAME = 'linkCreate';
|
|
3
3
|
export var CREATE_FORM_MAX_WIDTH_IN_PX = '480';
|
|
4
|
-
export var CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
|
|
4
|
+
export var CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
|
|
5
|
+
export var LINK_CREATE_FORM_POST_CREATE_FIELD = '__post_create__';
|
|
@@ -8,10 +8,12 @@ export var FormContext = /*#__PURE__*/createContext({
|
|
|
8
8
|
getValidators: function getValidators() {
|
|
9
9
|
return {};
|
|
10
10
|
},
|
|
11
|
-
setFormErrorMessage: function setFormErrorMessage() {}
|
|
11
|
+
setFormErrorMessage: function setFormErrorMessage() {},
|
|
12
|
+
enableEditView: undefined
|
|
12
13
|
});
|
|
13
14
|
var FormContextProvider = function FormContextProvider(_ref) {
|
|
14
|
-
var
|
|
15
|
+
var enableEditView = _ref.enableEditView,
|
|
16
|
+
children = _ref.children;
|
|
15
17
|
var _useState = useState(),
|
|
16
18
|
_useState2 = _slicedToArray(_useState, 2),
|
|
17
19
|
error = _useState2[0],
|
|
@@ -42,7 +44,8 @@ var FormContextProvider = function FormContextProvider(_ref) {
|
|
|
42
44
|
assignValidator: assignValidator,
|
|
43
45
|
getValidators: getValidators,
|
|
44
46
|
setFormErrorMessage: setFormErrorMessage,
|
|
45
|
-
formErrorMessage: error
|
|
47
|
+
formErrorMessage: error,
|
|
48
|
+
enableEditView: enableEditView
|
|
46
49
|
}
|
|
47
50
|
}, children);
|
|
48
51
|
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useForm, useFormState } from 'react-final-form';
|
|
3
|
+
import { useIntl } from 'react-intl-next';
|
|
4
|
+
import LoadingButton from '@atlaskit/button/loading-button';
|
|
5
|
+
import { LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../../../common/constants';
|
|
6
|
+
import { useFormContext } from '../../../../controllers/form-context';
|
|
7
|
+
// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
|
|
8
|
+
import { FormSpy } from '../../form-spy';
|
|
9
|
+
import { messages } from './messages';
|
|
10
|
+
export var EditButton = function EditButton() {
|
|
11
|
+
var intl = useIntl();
|
|
12
|
+
var _useFormState = useFormState(),
|
|
13
|
+
submitting = _useFormState.submitting;
|
|
14
|
+
var _useForm = useForm(),
|
|
15
|
+
submit = _useForm.submit,
|
|
16
|
+
mutators = _useForm.mutators;
|
|
17
|
+
var _useFormContext = useFormContext(),
|
|
18
|
+
enableEditView = _useFormContext.enableEditView;
|
|
19
|
+
if (!enableEditView) {
|
|
20
|
+
return null;
|
|
21
|
+
}
|
|
22
|
+
return /*#__PURE__*/React.createElement(FormSpy, null, function (_ref) {
|
|
23
|
+
var values = _ref.values;
|
|
24
|
+
return /*#__PURE__*/React.createElement(LoadingButton, {
|
|
25
|
+
type: "button",
|
|
26
|
+
testId: "link-create-form-button-edit",
|
|
27
|
+
isLoading:
|
|
28
|
+
/**
|
|
29
|
+
* Should only be in a loading state if submitting is because we clicked
|
|
30
|
+
* the edit button
|
|
31
|
+
*/
|
|
32
|
+
submitting && values[LINK_CREATE_FORM_POST_CREATE_FIELD] === true,
|
|
33
|
+
onClick: function onClick() {
|
|
34
|
+
var _mutators$setField;
|
|
35
|
+
/**
|
|
36
|
+
* Setting this field to true indicates that the edit button was clicked and that
|
|
37
|
+
* we have the intention of triggering the edit/post create flow
|
|
38
|
+
*/
|
|
39
|
+
(_mutators$setField = mutators.setField) === null || _mutators$setField === void 0 || _mutators$setField.call(mutators, LINK_CREATE_FORM_POST_CREATE_FIELD, true);
|
|
40
|
+
submit();
|
|
41
|
+
}
|
|
42
|
+
}, intl.formatMessage(messages.edit));
|
|
43
|
+
});
|
|
44
|
+
};
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
+
import { Fragment } from 'react';
|
|
2
3
|
import { css, jsx } from '@emotion/react';
|
|
3
4
|
import { useIntl } from 'react-intl-next';
|
|
4
5
|
import Button, { ButtonGroup } from '@atlaskit/button';
|
|
5
6
|
import LoadingButton from '@atlaskit/button/loading-button';
|
|
6
7
|
import ErrorIcon from '@atlaskit/icon/glyph/error';
|
|
8
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
9
|
+
import { EditButton } from './edit-button';
|
|
7
10
|
import { messages } from './messages';
|
|
11
|
+
import { SubmitButton } from './submit-button';
|
|
8
12
|
var formFooterWrapperStyles = css({
|
|
9
13
|
display: 'flex',
|
|
10
14
|
marginTop: "var(--ds-space-300, 24px)",
|
|
@@ -40,7 +44,7 @@ export function CreateFormFooter(_ref) {
|
|
|
40
44
|
appearance: "subtle",
|
|
41
45
|
onClick: handleCancel,
|
|
42
46
|
testId: "".concat(testId, "-button-cancel")
|
|
43
|
-
}, intl.formatMessage(messages.close)), jsx(LoadingButton, {
|
|
47
|
+
}, intl.formatMessage(messages.close)), getBooleanFF('platform.linking-platform.link-create.enable-edit') ? jsx(Fragment, null, jsx(EditButton, null), jsx(SubmitButton, null)) : jsx(LoadingButton, {
|
|
44
48
|
type: "submit",
|
|
45
49
|
appearance: "primary",
|
|
46
50
|
isLoading: submitting,
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useForm, useFormState } from 'react-final-form';
|
|
3
|
+
import { useIntl } from 'react-intl-next';
|
|
4
|
+
import LoadingButton from '@atlaskit/button/loading-button';
|
|
5
|
+
import { LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../../../common/constants';
|
|
6
|
+
// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
|
|
7
|
+
import { FormSpy } from '../../form-spy';
|
|
8
|
+
// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
|
|
9
|
+
import { messages } from '../messages';
|
|
10
|
+
export var SubmitButton = function SubmitButton() {
|
|
11
|
+
var intl = useIntl();
|
|
12
|
+
var _useFormState = useFormState(),
|
|
13
|
+
submitting = _useFormState.submitting;
|
|
14
|
+
var _useForm = useForm(),
|
|
15
|
+
mutators = _useForm.mutators;
|
|
16
|
+
return /*#__PURE__*/React.createElement(FormSpy, null, function (_ref) {
|
|
17
|
+
var values = _ref.values;
|
|
18
|
+
return /*#__PURE__*/React.createElement(LoadingButton, {
|
|
19
|
+
type: "submit",
|
|
20
|
+
appearance: "primary",
|
|
21
|
+
isLoading:
|
|
22
|
+
/**
|
|
23
|
+
* Should only be in a loading state if submitting is because we clicked
|
|
24
|
+
* the edit button
|
|
25
|
+
*/
|
|
26
|
+
submitting && values[LINK_CREATE_FORM_POST_CREATE_FIELD] === false,
|
|
27
|
+
testId: "link-create-form-button-submit",
|
|
28
|
+
onClick: function onClick() {
|
|
29
|
+
var _mutators$setField;
|
|
30
|
+
(_mutators$setField = mutators.setField) === null || _mutators$setField === void 0 || _mutators$setField.call(mutators, LINK_CREATE_FORM_POST_CREATE_FIELD, false);
|
|
31
|
+
}
|
|
32
|
+
}, intl.formatMessage(messages.create));
|
|
33
|
+
});
|
|
34
|
+
};
|
package/dist/esm/ui/main.js
CHANGED
|
@@ -16,7 +16,7 @@ var LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE__
|
|
|
16
16
|
}));
|
|
17
17
|
export var PACKAGE_DATA = {
|
|
18
18
|
packageName: "@atlaskit/link-create" || '',
|
|
19
|
-
packageVersion: "1.
|
|
19
|
+
packageVersion: "1.3.0" || '',
|
|
20
20
|
componentName: COMPONENT_NAME,
|
|
21
21
|
source: COMPONENT_NAME
|
|
22
22
|
};
|
|
@@ -2,3 +2,4 @@ export declare const ANALYTICS_CHANNEL = "media";
|
|
|
2
2
|
export declare const COMPONENT_NAME = "linkCreate";
|
|
3
3
|
export declare const CREATE_FORM_MAX_WIDTH_IN_PX = "480";
|
|
4
4
|
export declare const CREATE_FORM_MIN_HEIGHT_IN_PX = "200";
|
|
5
|
+
export declare const LINK_CREATE_FORM_POST_CREATE_FIELD = "__post_create__";
|
|
@@ -48,6 +48,15 @@ export interface LinkCreatePlugin {
|
|
|
48
48
|
export type CreatePayload = {
|
|
49
49
|
/** The url to the resource created by the create plugin */
|
|
50
50
|
url: string;
|
|
51
|
+
/**
|
|
52
|
+
* ARI of the created resource.
|
|
53
|
+
* https://developer.atlassian.com/platform/atlassian-resource-identifier/spec/ari-latest/
|
|
54
|
+
*
|
|
55
|
+
* It should be returned but it's not required to be on the Jira side:
|
|
56
|
+
* https://stash.atlassian.com/projects/JIRACLOUD/repos/jira-frontend/browse/src/packages/issue-create/issue-create-embed/src/ui/index.tsx
|
|
57
|
+
* https://stash.atlassian.com/projects/JIRACLOUD/repos/jira-frontend/pull-requests/103587/overview?commentId=5778323
|
|
58
|
+
*/
|
|
59
|
+
ari: string | undefined;
|
|
51
60
|
/** The object identifier for the resource created by the create plugin (for analytics) */
|
|
52
61
|
objectId: string;
|
|
53
62
|
/** The type of object created (for analytics) */
|
|
@@ -5,9 +5,17 @@ interface FormContextType {
|
|
|
5
5
|
assignValidator: (name: string, validators: Validator[]) => void;
|
|
6
6
|
setFormErrorMessage: (errorMessage?: string) => void;
|
|
7
7
|
formErrorMessage?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Callback that updates link create to tell it that it should/should not open the current plugins
|
|
10
|
+
* edit view after creation. Should be `undefined` if the plugin does not provide an edit view, or if `onComplete`
|
|
11
|
+
* is not defined as a prop at the `LinkCreate` props level
|
|
12
|
+
*/
|
|
13
|
+
enableEditView?: ((editButtonClicked: boolean) => void) | undefined;
|
|
8
14
|
}
|
|
9
15
|
export declare const FormContext: React.Context<FormContextType>;
|
|
10
|
-
declare const FormContextProvider: React.FC<{
|
|
16
|
+
declare const FormContextProvider: React.FC<{
|
|
17
|
+
enableEditView?: (editButtonClicked: boolean) => void;
|
|
18
|
+
}>;
|
|
11
19
|
declare const useFormContext: () => FormContextType;
|
|
12
20
|
export { FormContextProvider, useFormContext };
|
|
13
21
|
export declare const withLinkCreateFormContext: <P extends LinkCreateProps>(WrappedComponent: React.ComponentType<P>) => (props: P) => JSX.Element;
|
|
@@ -2,3 +2,4 @@ export declare const ANALYTICS_CHANNEL = "media";
|
|
|
2
2
|
export declare const COMPONENT_NAME = "linkCreate";
|
|
3
3
|
export declare const CREATE_FORM_MAX_WIDTH_IN_PX = "480";
|
|
4
4
|
export declare const CREATE_FORM_MIN_HEIGHT_IN_PX = "200";
|
|
5
|
+
export declare const LINK_CREATE_FORM_POST_CREATE_FIELD = "__post_create__";
|
|
@@ -48,6 +48,15 @@ export interface LinkCreatePlugin {
|
|
|
48
48
|
export type CreatePayload = {
|
|
49
49
|
/** The url to the resource created by the create plugin */
|
|
50
50
|
url: string;
|
|
51
|
+
/**
|
|
52
|
+
* ARI of the created resource.
|
|
53
|
+
* https://developer.atlassian.com/platform/atlassian-resource-identifier/spec/ari-latest/
|
|
54
|
+
*
|
|
55
|
+
* It should be returned but it's not required to be on the Jira side:
|
|
56
|
+
* https://stash.atlassian.com/projects/JIRACLOUD/repos/jira-frontend/browse/src/packages/issue-create/issue-create-embed/src/ui/index.tsx
|
|
57
|
+
* https://stash.atlassian.com/projects/JIRACLOUD/repos/jira-frontend/pull-requests/103587/overview?commentId=5778323
|
|
58
|
+
*/
|
|
59
|
+
ari: string | undefined;
|
|
51
60
|
/** The object identifier for the resource created by the create plugin (for analytics) */
|
|
52
61
|
objectId: string;
|
|
53
62
|
/** The type of object created (for analytics) */
|
|
@@ -5,9 +5,17 @@ interface FormContextType {
|
|
|
5
5
|
assignValidator: (name: string, validators: Validator[]) => void;
|
|
6
6
|
setFormErrorMessage: (errorMessage?: string) => void;
|
|
7
7
|
formErrorMessage?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Callback that updates link create to tell it that it should/should not open the current plugins
|
|
10
|
+
* edit view after creation. Should be `undefined` if the plugin does not provide an edit view, or if `onComplete`
|
|
11
|
+
* is not defined as a prop at the `LinkCreate` props level
|
|
12
|
+
*/
|
|
13
|
+
enableEditView?: ((editButtonClicked: boolean) => void) | undefined;
|
|
8
14
|
}
|
|
9
15
|
export declare const FormContext: React.Context<FormContextType>;
|
|
10
|
-
declare const FormContextProvider: React.FC<{
|
|
16
|
+
declare const FormContextProvider: React.FC<{
|
|
17
|
+
enableEditView?: (editButtonClicked: boolean) => void;
|
|
18
|
+
}>;
|
|
11
19
|
declare const useFormContext: () => FormContextType;
|
|
12
20
|
export { FormContextProvider, useFormContext };
|
|
13
21
|
export declare const withLinkCreateFormContext: <P extends LinkCreateProps>(WrappedComponent: React.ComponentType<P>) => (props: P) => JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/link-create",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "The driver component of meta creation flow",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -35,12 +35,13 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@atlaskit/analytics-next": "^9.1.0",
|
|
38
|
-
"@atlaskit/button": "^16.
|
|
38
|
+
"@atlaskit/button": "^16.12.0",
|
|
39
39
|
"@atlaskit/empty-state": "^7.6.0",
|
|
40
40
|
"@atlaskit/form": "^8.11.0",
|
|
41
41
|
"@atlaskit/icon": "^21.12.0",
|
|
42
42
|
"@atlaskit/intl-messages-provider": "^1.0.0",
|
|
43
43
|
"@atlaskit/modal-dialog": "^12.8.0",
|
|
44
|
+
"@atlaskit/platform-feature-flags": "^0.2.1",
|
|
44
45
|
"@atlaskit/select": "^16.7.0",
|
|
45
46
|
"@atlaskit/spinner": "^15.6.0",
|
|
46
47
|
"@atlaskit/textfield": "^5.6.0",
|
|
@@ -57,9 +58,10 @@
|
|
|
57
58
|
},
|
|
58
59
|
"devDependencies": {
|
|
59
60
|
"@af/visual-regression": "*",
|
|
60
|
-
"@atlaskit/link-test-helpers": "^6.
|
|
61
|
+
"@atlaskit/link-test-helpers": "^6.2.0",
|
|
61
62
|
"@atlaskit/visual-regression": "*",
|
|
62
63
|
"@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
|
|
64
|
+
"@atlassian/feature-flags-test-utils": "^0.1.2",
|
|
63
65
|
"@testing-library/react": "^12.1.5",
|
|
64
66
|
"@testing-library/user-event": "^14.4.3",
|
|
65
67
|
"@types/debounce-promise": "^3.1.2",
|
|
@@ -107,5 +109,10 @@
|
|
|
107
109
|
]
|
|
108
110
|
}
|
|
109
111
|
},
|
|
110
|
-
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
|
|
112
|
+
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0",
|
|
113
|
+
"platform-feature-flags": {
|
|
114
|
+
"platform.linking-platform.link-create.enable-edit": {
|
|
115
|
+
"type": "boolean"
|
|
116
|
+
}
|
|
117
|
+
}
|
|
111
118
|
}
|
package/report.api.md
CHANGED