@atlaskit/editor-core 189.5.10 → 189.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-core
 
+## 189.6.0
+
+### Minor Changes
+
+- [#59378](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59378) [`cd8ba004f7ed`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cd8ba004f7ed) - Migrate config-panel tests to RTL, and add testids where necessary
+
+## 189.5.11
+
+### Patch Changes
+
+- [#58565](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58565) [`1f112c9375db`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1f112c9375db) - replace table sticky scrollbar platform feature flag with an editorFeatureFlag
+
 ## 189.5.10
 
 ### Patch Changes

package/dist/cjs/ui/ConfigPanel/ErrorMessage/index.js

@@ -26,7 +26,8 @@ var ConfigPanelErrorMessage = function ConfigPanelErrorMessage(_ref) {
       return /*#__PURE__*/_react.default.createElement(_ErrorImage.default, null);
     },
     size: "narrow",
-    imageHeight: 80
+    imageHeight: 80,
+    testId: "config-panel-error-message"
   });
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(ConfigPanelErrorMessage);

package/dist/cjs/ui/ConfigPanel/FieldMessages.js

@@ -85,11 +85,17 @@ var FieldMessages = function FieldMessages(_ref2) {
   }
   switch (error) {
     case _types.ValidationError.Required:
-      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, intl.formatMessage(_messages.messages.required));
+      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(_messages.messages.required));
     case _types.ValidationError.Invalid:
-      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, intl.formatMessage(_messages.messages.invalid));
+      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(_messages.messages.invalid));
     case _types.FieldTypeError.isMultipleAndRadio:
-      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, intl.formatMessage(_messages.messages.isMultipleAndRadio));
+      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(_messages.messages.isMultipleAndRadio));
     default:
       return null;
   }

package/dist/cjs/ui/ConfigPanel/Fields/Boolean.js

@@ -97,7 +97,8 @@ function Toggle(_ref3) {
     validate: function validate(value) {
       return _validate(value, isRequired);
     },
-    defaultValue: defaultValue
+    defaultValue: defaultValue,
+    testId: "config-panel-toggle-".concat(name)
   }, function (_ref4) {
     var fieldProps = _ref4.fieldProps,
       error = _ref4.error;

package/dist/cjs/ui/ConfigPanel/Fields/ColorPicker.js

@@ -368,6 +368,7 @@ var ColorPickerField = function ColorPickerField(_ref) {
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
+    testId: "config-panel-color-picker-".concat(name),
     validate: function validate(value) {
       return (0, _utils.validate)(field, value || '');
     }

package/dist/cjs/ui/ConfigPanel/Fields/CustomSelect.js

@@ -150,7 +150,8 @@ function CustomSelect(_ref2) {
     defaultValue: defaultValue,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value);
-    }
+    },
+    testId: "config-panel-custom-select-".concat(name)
   }, function (_ref3) {
     var fieldProps = _ref3.fieldProps,
       error = _ref3.error;

package/dist/cjs/ui/ConfigPanel/Fields/Date.js

@@ -30,7 +30,8 @@ function Date(_ref) {
     isRequired: isRequired,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value);
-    }
+    },
+    testId: "config-panel-date-picker-".concat(name)
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error;

package/dist/cjs/ui/ConfigPanel/Fields/DateRange.js

@@ -107,7 +107,8 @@ var DateRange = function DateRange(_ref3) {
     isRequired: field.isRequired,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value || '');
-    }
+    },
+    testId: "config-panel-date-range-".concat(name)
   }, function (_ref5) {
     var fieldProps = _ref5.fieldProps,
       error = _ref5.error;

package/dist/cjs/ui/ConfigPanel/Fields/Number.js

@@ -41,7 +41,8 @@ function Number(_ref) {
     label: label,
     defaultValue: defaultValue === undefined ? '' : String(defaultValue),
     isRequired: isRequired,
-    validate: validateNumber
+    validate: validateNumber,
+    testId: "config-panel-number-".concat(name)
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error,

package/dist/cjs/ui/ConfigPanel/Fields/RadioGroup.js

@@ -34,7 +34,8 @@ function RadioField(_ref) {
     isRequired: field.isRequired,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value);
-    }
+    },
+    testId: "config-panel-radio-group-".concat(field.name)
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error;

package/dist/cjs/ui/ConfigPanel/Fields/Select.js

@@ -29,6 +29,7 @@ function SelectField(_ref) {
     name: name,
     label: field.label,
     defaultValue: (0, _utils.getOptionFromValue)(field.items, field.defaultValue),
+    testId: "config-panel-select-".concat(name),
     isRequired: field.isRequired,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value);

package/dist/cjs/ui/ConfigPanel/Fields/String.js

@@ -34,7 +34,8 @@ function String(_ref) {
     isRequired: isRequired,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value || '');
-    }
+    },
+    testId: "config-panel-string-".concat(name)
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error,
@@ -51,7 +52,8 @@ function String(_ref) {
           fieldProps.onBlur();
           onFieldChange(name, meta.dirty);
         },
-        placeholder: placeholder
+        placeholder: placeholder,
+        "data-testid": "config-panel-textarea-".concat(name)
       })), /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
         error: error,
         description: description

package/dist/cjs/ui/ConfigPanel/Fields/UserSelect.js

@@ -234,7 +234,8 @@ function UserSelect(_ref2) {
     defaultValue: defaultValue,
     validate: function validate(value) {
       return (0, _utils.validate)(field, value);
-    }
+    },
+    testId: "config-panel-user-select-".concat(name)
   }, function (_ref3) {
     var fieldProps = _ref3.fieldProps,
       error = _ref3.error;

package/dist/cjs/ui/ConfigPanel/Header.js

@@ -22,12 +22,12 @@ var iconWidth = 40;
 var buttonWidth = 40;
 var margin = 16;
 var gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
-var item = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-bottom: 24px;\n"])));
+var item = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-bottom: ", ";\n"])), "var(--ds-space-300, 24px)");
 var itemIcon = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid ", "; /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), iconWidth, iconWidth, "var(--ds-border, rgba(223, 225, 229, 0.5))", (0, _constants.borderRadius)(), iconWidth, iconWidth);
-var itemBody = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  margin: 0 16px;\n  flex-grow: 3;\n  max-width: calc(100% - ", "px);\n"])), gapSizeForEllipsis);
+var itemBody = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  margin: 0 ", ";\n  flex-grow: 3;\n  max-width: calc(100% - ", "px);\n"])), "var(--ds-space-200, 16px)", gapSizeForEllipsis);
 var centeredItemTitle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-var itemText = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: 100%;\n  white-space: initial;\n  .item-summary {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
-var descriptionStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 24px;\n"])));
+var itemText = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: 100%;\n  white-space: initial;\n  .item-summary {\n    font-size: ", ";\n    color: ", ";\n    margin-top: ", ";\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
+var descriptionStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", ";\n"])), "var(--ds-space-300, 24px)");
 var closeButtonWrapper = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  text-align: right;\n"])), buttonWidth);
 var Header = function Header(_ref) {
   var icon = _ref.icon,
@@ -55,12 +55,14 @@ var Header = function Header(_ref) {
     css: itemText
   }, (0, _react2.jsx)("div", {
     className: "item-title",
-    id: "context-panel-title"
+    id: "context-panel-title",
+    "data-testId": "context-panel-title"
   }, title), (0, _react2.jsx)("div", {
     className: "item-summary"
   }, summary)) : (0, _react2.jsx)("div", {
     css: centeredItemTitle,
-    id: "context-panel-title"
+    id: "context-panel-title",
+    "data-testId": "context-panel-title"
   }, title)), (0, _react2.jsx)("div", {
     css: closeButtonWrapper
   }, (0, _react2.jsx)(_customThemeButton.default, {
@@ -70,11 +72,13 @@ var Header = function Header(_ref) {
     }),
     onClick: onClose
   }))), (description || documentationUrl) && (0, _react2.jsx)("p", {
-    css: descriptionStyle
+    css: descriptionStyle,
+    "data-testid": "config-panel-header-description"
   }, description && (0, _react2.jsx)(_react.Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (0, _react2.jsx)("a", {
     target: "_blank",
     rel: "noopener noreferrer",
-    href: documentationUrl
+    href: documentationUrl,
+    "data-testid": "config-panel-header-documentation-link"
   }, intl.formatMessage(_messages.messages.documentation))));
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(Header);

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "189.5.10";
+var version = exports.version = "189.6.0";

package/dist/es2019/ui/ConfigPanel/ErrorMessage/index.js

@@ -18,7 +18,8 @@ const ConfigPanelErrorMessage = ({
     description: errorMessage,
     renderImage: () => /*#__PURE__*/React.createElement(ErrorImage, null),
     size: "narrow",
-    imageHeight: 80
+    imageHeight: 80,
+    testId: "config-panel-error-message"
   });
 };
 export default injectIntl(ConfigPanelErrorMessage);

package/dist/es2019/ui/ConfigPanel/FieldMessages.js

@@ -81,11 +81,17 @@ const FieldMessages = function ({
   }
   switch (error) {
     case ValidationError.Required:
-      return /*#__PURE__*/React.createElement(ErrorMessage, null, intl.formatMessage(messages.required));
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(messages.required));
     case ValidationError.Invalid:
-      return /*#__PURE__*/React.createElement(ErrorMessage, null, intl.formatMessage(messages.invalid));
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(messages.invalid));
     case FieldTypeError.isMultipleAndRadio:
-      return /*#__PURE__*/React.createElement(ErrorMessage, null, intl.formatMessage(messages.isMultipleAndRadio));
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(messages.isMultipleAndRadio));
     default:
       return null;
   }

package/dist/es2019/ui/ConfigPanel/Fields/Boolean.js

@@ -87,7 +87,8 @@ function Toggle({
     name: name,
     isRequired: isRequired,
     validate: value => validate(value, isRequired),
-    defaultValue: defaultValue
+    defaultValue: defaultValue,
+    testId: `config-panel-toggle-${name}`
   }, ({
     fieldProps,
     error

package/dist/es2019/ui/ConfigPanel/Fields/ColorPicker.js

@@ -370,6 +370,7 @@ const ColorPickerField = ({
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
+    testId: `config-panel-color-picker-${name}`,
     validate: value => validate(field, value || '')
   }, ({
     fieldProps,

package/dist/es2019/ui/ConfigPanel/Fields/CustomSelect.js

@@ -95,7 +95,8 @@ function CustomSelect({
     label: label,
     isRequired: isRequired,
     defaultValue: defaultValue,
-    validate: value => validate(field, value)
+    validate: value => validate(field, value),
+    testId: `config-panel-custom-select-${name}`
   }, ({
     fieldProps,
     error

package/dist/es2019/ui/ConfigPanel/Fields/Date.js

@@ -24,7 +24,8 @@ function Date({
     label: label,
     defaultValue: defaultValue,
     isRequired: isRequired,
-    validate: value => validate(field, value)
+    validate: value => validate(field, value),
+    testId: `config-panel-date-picker-${name}`
   }, ({
     fieldProps,
     error

package/dist/es2019/ui/ConfigPanel/Fields/DateRange.js

@@ -93,7 +93,8 @@ const DateRange = function ({
     label: field.label,
     defaultValue: currentValue,
     isRequired: field.isRequired,
-    validate: value => validate(field, value || '')
+    validate: value => validate(field, value || ''),
+    testId: `config-panel-date-range-${name}`
   }, ({
     fieldProps,
     error

package/dist/es2019/ui/ConfigPanel/Fields/Number.js

@@ -37,7 +37,8 @@ export default function Number({
     label: label,
     defaultValue: defaultValue === undefined ? '' : String(defaultValue),
     isRequired: isRequired,
-    validate: validateNumber
+    validate: validateNumber,
+    testId: `config-panel-number-${name}`
   }, ({
     fieldProps,
     error,

package/dist/es2019/ui/ConfigPanel/Fields/RadioGroup.js

@@ -20,7 +20,8 @@ export default function RadioField({
     label: field.label,
     defaultValue: field.defaultValue,
     isRequired: field.isRequired,
-    validate: value => validate(field, value)
+    validate: value => validate(field, value),
+    testId: `config-panel-radio-group-${field.name}`
   }, ({
     fieldProps,
     error

package/dist/es2019/ui/ConfigPanel/Fields/Select.js

@@ -20,6 +20,7 @@ export default function SelectField({
     name: name,
     label: field.label,
     defaultValue: getOptionFromValue(field.items, field.defaultValue),
+    testId: `config-panel-select-${name}`,
     isRequired: field.isRequired,
     validate: value => {
       return validate(field, value);

package/dist/es2019/ui/ConfigPanel/Fields/String.js

@@ -23,7 +23,8 @@ export default function String({
     label: label,
     defaultValue: defaultValue || '',
     isRequired: isRequired,
-    validate: value => validate(field, value || '')
+    validate: value => validate(field, value || ''),
+    testId: `config-panel-string-${name}`
   }, ({
     fieldProps,
     error,
@@ -43,7 +44,8 @@ export default function String({
           fieldProps.onBlur();
           onFieldChange(name, meta.dirty);
         },
-        placeholder: placeholder
+        placeholder: placeholder,
+        "data-testid": `config-panel-textarea-${name}`
       })), /*#__PURE__*/React.createElement(FieldMessages, {
         error: error,
         description: description

package/dist/es2019/ui/ConfigPanel/Fields/UserSelect.js

@@ -161,7 +161,8 @@ export default function UserSelect({
     label: label,
     isRequired: isRequired,
     defaultValue: defaultValue,
-    validate: value => validate(field, value)
+    validate: value => validate(field, value),
+    testId: `config-panel-user-select-${name}`
   }, ({
     fieldProps,
     error

package/dist/es2019/ui/ConfigPanel/Header.js

@@ -15,7 +15,7 @@ const margin = 16;
 const gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
 const item = css`
   display: flex;
-  margin-bottom: 24px;
+  margin-bottom: ${"var(--ds-space-300, 24px)"};
 `;
 const itemIcon = css`
   width: ${iconWidth}px;
@@ -40,7 +40,7 @@ const itemBody = css`
   flex-wrap: nowrap;
   justify-content: space-between;
   line-height: 1.4;
-  margin: 0 16px;
+  margin: 0 ${"var(--ds-space-200, 16px)"};
   flex-grow: 3;
   max-width: calc(100% - ${gapSizeForEllipsis}px);
 `;
@@ -55,7 +55,7 @@ const itemText = css`
   .item-summary {
     font-size: ${relativeFontSizeToBase16(11.67)};
     color: ${`var(--ds-text-subtlest, ${N200})`};
-    margin-top: 4px;
+    margin-top: ${"var(--ds-space-050, 4px)"};
 
     white-space: nowrap;
     overflow: hidden;
@@ -63,7 +63,7 @@ const itemText = css`
   }
 `;
 const descriptionStyle = css`
-  margin-bottom: 24px;
+  margin-bottom: ${"var(--ds-space-300, 24px)"};
 `;
 const closeButtonWrapper = css`
   width: ${buttonWidth}px;
@@ -94,12 +94,14 @@ const Header = ({
     css: itemText
   }, jsx("div", {
     className: "item-title",
-    id: "context-panel-title"
+    id: "context-panel-title",
+    "data-testId": "context-panel-title"
   }, title), jsx("div", {
     className: "item-summary"
   }, summary)) : jsx("div", {
     css: centeredItemTitle,
-    id: "context-panel-title"
+    id: "context-panel-title",
+    "data-testId": "context-panel-title"
   }, title)), jsx("div", {
     css: closeButtonWrapper
   }, jsx(Button, {
@@ -109,11 +111,13 @@ const Header = ({
     }),
     onClick: onClose
   }))), (description || documentationUrl) && jsx("p", {
-    css: descriptionStyle
+    css: descriptionStyle,
+    "data-testid": "config-panel-header-description"
   }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && jsx("a", {
     target: "_blank",
     rel: "noopener noreferrer",
-    href: documentationUrl
+    href: documentationUrl,
+    "data-testid": "config-panel-header-documentation-link"
   }, intl.formatMessage(messages.documentation))));
 };
 export default injectIntl(Header);

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "189.5.10";
+export const version = "189.6.0";

package/dist/esm/ui/ConfigPanel/ErrorMessage/index.js

@@ -19,7 +19,8 @@ var ConfigPanelErrorMessage = function ConfigPanelErrorMessage(_ref) {
       return /*#__PURE__*/React.createElement(ErrorImage, null);
     },
     size: "narrow",
-    imageHeight: 80
+    imageHeight: 80,
+    testId: "config-panel-error-message"
   });
 };
 export default injectIntl(ConfigPanelErrorMessage);

package/dist/esm/ui/ConfigPanel/FieldMessages.js

@@ -77,11 +77,17 @@ var FieldMessages = function FieldMessages(_ref2) {
   }
   switch (error) {
     case ValidationError.Required:
-      return /*#__PURE__*/React.createElement(ErrorMessage, null, intl.formatMessage(messages.required));
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(messages.required));
     case ValidationError.Invalid:
-      return /*#__PURE__*/React.createElement(ErrorMessage, null, intl.formatMessage(messages.invalid));
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(messages.invalid));
     case FieldTypeError.isMultipleAndRadio:
-      return /*#__PURE__*/React.createElement(ErrorMessage, null, intl.formatMessage(messages.isMultipleAndRadio));
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(messages.isMultipleAndRadio));
     default:
       return null;
   }

package/dist/esm/ui/ConfigPanel/Fields/Boolean.js

@@ -87,7 +87,8 @@ function Toggle(_ref3) {
     validate: function validate(value) {
       return _validate(value, isRequired);
     },
-    defaultValue: defaultValue
+    defaultValue: defaultValue,
+    testId: "config-panel-toggle-".concat(name)
   }, function (_ref4) {
     var fieldProps = _ref4.fieldProps,
       error = _ref4.error;

package/dist/esm/ui/ConfigPanel/Fields/ColorPicker.js

@@ -363,6 +363,7 @@ var ColorPickerField = function ColorPickerField(_ref) {
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
+    testId: "config-panel-color-picker-".concat(name),
     validate: function validate(value) {
       return _validate(field, value || '');
     }

package/dist/esm/ui/ConfigPanel/Fields/CustomSelect.js

@@ -140,7 +140,8 @@ function CustomSelect(_ref2) {
     defaultValue: defaultValue,
     validate: function validate(value) {
       return _validate(field, value);
-    }
+    },
+    testId: "config-panel-custom-select-".concat(name)
   }, function (_ref3) {
     var fieldProps = _ref3.fieldProps,
       error = _ref3.error;

package/dist/esm/ui/ConfigPanel/Fields/Date.js

@@ -23,7 +23,8 @@ function Date(_ref) {
     isRequired: isRequired,
     validate: function validate(value) {
       return _validate(field, value);
-    }
+    },
+    testId: "config-panel-date-picker-".concat(name)
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error;

package/dist/esm/ui/ConfigPanel/Fields/DateRange.js

@@ -100,7 +100,8 @@ var DateRange = function DateRange(_ref3) {
     isRequired: field.isRequired,
     validate: function validate(value) {
       return _validate(field, value || '');
-    }
+    },
+    testId: "config-panel-date-range-".concat(name)
   }, function (_ref5) {
     var fieldProps = _ref5.fieldProps,
       error = _ref5.error;

package/dist/esm/ui/ConfigPanel/Fields/Number.js

@@ -34,7 +34,8 @@ export default function Number(_ref) {
     label: label,
     defaultValue: defaultValue === undefined ? '' : String(defaultValue),
     isRequired: isRequired,
-    validate: validateNumber
+    validate: validateNumber,
+    testId: "config-panel-number-".concat(name)
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error,

package/dist/esm/ui/ConfigPanel/Fields/RadioGroup.js

@@ -24,7 +24,8 @@ export default function RadioField(_ref) {
     isRequired: field.isRequired,
     validate: function validate(value) {
       return _validate(field, value);
-    }
+    },
+    testId: "config-panel-radio-group-".concat(field.name)
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error;

package/dist/esm/ui/ConfigPanel/Fields/Select.js

@@ -19,6 +19,7 @@ export default function SelectField(_ref) {
     name: name,
     label: field.label,
     defaultValue: getOptionFromValue(field.items, field.defaultValue),
+    testId: "config-panel-select-".concat(name),
     isRequired: field.isRequired,
     validate: function validate(value) {
       return _validate(field, value);

package/dist/esm/ui/ConfigPanel/Fields/String.js

@@ -24,7 +24,8 @@ export default function String(_ref) {
     isRequired: isRequired,
     validate: function validate(value) {
       return _validate(field, value || '');
-    }
+    },
+    testId: "config-panel-string-".concat(name)
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
       error = _ref2.error,
@@ -41,7 +42,8 @@ export default function String(_ref) {
           fieldProps.onBlur();
           onFieldChange(name, meta.dirty);
         },
-        placeholder: placeholder
+        placeholder: placeholder,
+        "data-testid": "config-panel-textarea-".concat(name)
       })), /*#__PURE__*/React.createElement(FieldMessages, {
         error: error,
         description: description

package/dist/esm/ui/ConfigPanel/Fields/UserSelect.js

@@ -224,7 +224,8 @@ export default function UserSelect(_ref2) {
     defaultValue: defaultValue,
     validate: function validate(value) {
       return _validate(field, value);
-    }
+    },
+    testId: "config-panel-user-select-".concat(name)
   }, function (_ref3) {
     var fieldProps = _ref3.fieldProps,
       error = _ref3.error;