iguazio.dashboard-react-controls 1.7.0 → 1.8.0

package/dist/components/Button/Button.js

@@ -14,7 +14,7 @@ var _types = require("../../types");
 var _constants = require("../../constants");
 require("./Button.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "density", "icon", "label", "tooltip", "variant"];
+var _excluded = ["className", "density", "icon", "id", "label", "tooltip", "variant"];
 /*
 Copyright 2022 Iguazio Systems Ltd.
 Licensed under the Apache License, Version 2.0 (the "License") with
@@ -45,6 +45,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
     density = _ref.density,
     icon = _ref.icon,
+    id = _ref.id,
     label = _ref.label,
     tooltip = _ref.tooltip,
     variant = _ref.variant,
@@ -53,20 +54,23 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", _objectSpread(_objectSpread({}, restProps), {}, {
     className: buttonClassName,
     ref: ref,
-    children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+    "data-testid": id,
+    children: [icon, tooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
       template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
         text: tooltip
       }),
-      hidden: !tooltip,
-      children: label && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: label
       })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: label
     })]
   }));
 });
 Button.defaultProps = {
   className: '',
   density: 'normal',
+  id: 'btn',
   label: 'Button',
   tooltip: '',
   variant: _constants.TERTIARY_BUTTON
@@ -75,6 +79,7 @@ Button.propTypes = {
   className: _propTypes.default.string,
   density: _propTypes.default.oneOf(['dense', 'normal', 'medium', 'chunky']),
   icon: _propTypes.default.element,
+  id: _propTypes.default.string,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
   tooltip: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
   variant: _types.BUTTON_VARIANTS

package/dist/components/FormCheckBox/FormCheckBox.js

@@ -58,11 +58,12 @@ var FormCheckBox = function FormCheckBox(_ref) {
       var input = _ref2.input;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: formFieldClassNames,
+        "data-testid": "form-field-checkbox",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
           ref: inputRef,
           className: (0, _classnames.default)(input.checked ? 'checked' : 'unchecked'),
           type: "checkbox",
-          "data-testid": "checkbox",
+          "data-testid": name ? "".concat(name, "-form-checkbox") : 'form-checkbox',
           id: (_inputProps$value = inputProps.value) !== null && _inputProps$value !== void 0 ? _inputProps$value : name
         }, _objectSpread(_objectSpread({}, input), inputProps)), {}, {
           value: String(input.checked)

package/dist/components/FormChipCell/FormChipCell.js

@@ -268,6 +268,7 @@ var FormChipCell = function FormChipCell(_ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: chipsClassName,
+    "data-testid": "".concat(name, "-chips"),
     children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "chips__label",
       children: label

package/dist/components/FormChipCell/FormChipCellView.js

@@ -137,6 +137,7 @@ var FormChipCellView = /*#__PURE__*/_react.default.forwardRef(function (_ref, _r
               children: chips.hiddenChipsNumber
             })]
           }), isEditable && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            "data-testid": "".concat(name, "-add-chip"),
             className: buttonAddClassNames,
             onClick: function onClick(e) {
               return handleAddNewChip(e, fields);

package/dist/components/FormChipCell/formChipCell.util.js

@@ -22,6 +22,6 @@ such restriction.
 */
 var uniquenessError = {
   name: 'uniqueness',
-  label: 'Key should be unique'
+  label: 'Key must be unique'
 };
 exports.uniquenessError = uniquenessError;

package/dist/components/FormCombobox/FormCombobox.js

@@ -331,6 +331,7 @@ var FormCombobox = function FormCombobox(_ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: comboboxClassNames,
         ref: comboboxRef,
+        "data-testid": name ? "".concat(name, "-form-combobox") : 'form-combobox',
         children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: labelClassNames,
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
@@ -391,6 +392,7 @@ var FormCombobox = function FormCombobox(_ref) {
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
             className: inputClassNames,
+            "data-testid": name ? "".concat(name, "-form-combobox-input") : 'form-combobox-input',
             id: input.name,
             onChange: handleInputChange,
             onFocus: inputOnFocus,
@@ -412,6 +414,7 @@ var FormCombobox = function FormCombobox(_ref) {
               children: [!hideSearchInput && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: "form-field-combobox__search-wrapper",
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  "data-testid": name ? "".concat(name, "-form-combobox-search") : 'form-combobox-search',
                   className: "form-field-combobox__search form-field__control",
                   onChange: suggestionListSearchChange,
                   onFocus: function onFocus() {

package/dist/components/FormInput/FormInput.js

@@ -231,13 +231,13 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         if (inputProps.max && +valueToValidate > +inputProps.max) {
           validationError = {
             name: 'maxValue',
-            label: "The maximum value should be ".concat(inputProps.max)
+            label: "The maximum value must be ".concat(inputProps.max)
           };
         }
         if (inputProps.min && +valueToValidate < +inputProps.min) {
           validationError = {
             name: 'minValue',
-            label: "The minimum value should be ".concat(inputProps.min)
+            label: "The minimum value must be ".concat(inputProps.min)
           };
         }
       }
@@ -321,10 +321,11 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         ref: ref,
         className: formFieldClassNames,
+        "data-testid": name ? "".concat(name, "-form-field-input") : 'form-field-input',
         children: [label && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: labelClassNames,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-            "data-testid": "label",
+            "data-testid": name ? "".concat(name, "-form-label") : 'form-label',
             htmlFor: input.name,
             children: [label, (required || validationRules.find(function (rule) {
               return rule.name === 'required';
@@ -354,7 +355,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "form-field__control",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
-              "data-testid": "input",
+              "data-testid": name ? "".concat(name, "-form-input") : 'form-input',
               id: input.name,
               ref: inputRef,
               required: isInvalid || required

package/dist/components/FormKeyValueTable/FormKeyValueTable.js

@@ -31,7 +31,8 @@ such restriction.
 */
 
 var FormKeyValueTable = function FormKeyValueTable(_ref) {
-  var addNewItemLabel = _ref.addNewItemLabel,
+  var actionButtonId = _ref.actionButtonId,
+    addNewItemLabel = _ref.addNewItemLabel,
     className = _ref.className,
     defaultKey = _ref.defaultKey,
     disabled = _ref.disabled,
@@ -63,6 +64,7 @@ var FormKeyValueTable = function FormKeyValueTable(_ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: tableClassNames,
+    "data-testid": fieldsPath,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "form-table__row form-table__header-row no-hover",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -98,7 +100,7 @@ var FormKeyValueTable = function FormKeyValueTable(_ref) {
                   required: isKeyRequired,
                   validationRules: [{
                     name: 'uniqueness',
-                    label: 'Name should be unique',
+                    label: 'Name must be unique',
                     pattern: function pattern(newValue) {
                       return uniquenessValidator(fields, newValue);
                     }
@@ -156,6 +158,7 @@ var FormKeyValueTable = function FormKeyValueTable(_ref) {
             disabled: disabled,
             hidden: editingItem === null || editingItem === void 0 ? void 0 : (_editingItem$ui = editingItem.ui) === null || _editingItem$ui === void 0 ? void 0 : _editingItem$ui.isNew,
             fields: fields,
+            id: actionButtonId,
             label: addNewItemLabel,
             onClick: function onClick() {
               for (var _len = arguments.length, addRowArgs = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -176,6 +179,7 @@ var FormKeyValueTable = function FormKeyValueTable(_ref) {
   });
 };
 FormKeyValueTable.defaultProps = {
+  actionButtonId: '',
   addNewItemLabel: 'Add new item',
   className: '',
   defaultKey: '',
@@ -190,6 +194,7 @@ FormKeyValueTable.defaultProps = {
   valueLabel: 'Value'
 };
 FormKeyValueTable.propTypes = {
+  actionButtonId: _propTypes.default.string,
   addNewItemLabel: _propTypes.default.string,
   className: _propTypes.default.string,
   defaultKey: _propTypes.default.string,

package/dist/components/FormRadio/FormRadio.js

@@ -51,10 +51,11 @@ var FormRadio = function FormRadio(_ref) {
       var input = _ref2.input;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: formFieldClassNames,
+        "data-testid": name ? "".concat(name, "-").concat(inputProps.value, "-form-radio") : 'form-field-radio',
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
           className: (0, _classnames.default)(input.checked ? 'checked' : 'unchecked'),
           type: "radio",
-          "data-testid": "radio-".concat(inputProps.value)
+          "data-testid": name ? "".concat(name, "-").concat(inputProps.value, "-radio") : 'form-radio'
         }, _objectSpread(_objectSpread({}, input), inputProps)), {}, {
           checked: input.checked,
           id: name + inputProps.value

package/dist/components/FormSelect/FormSelect.js

@@ -243,14 +243,14 @@ var FormSelect = function FormSelect(_ref) {
         }),
         hidden: !tooltip,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          "data-testid": "select",
+          "data-testid": name ? "".concat(name, "-form-field-select") : 'form-field-select',
           ref: selectRef,
           className: "form-field-select ".concat(className),
           onClick: toggleOpen,
           children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: selectLabelClassName,
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-              "data-testid": "select-label",
+              "data-testid": name ? "".concat(name, "-form-select-label") : 'form-select-label',
               children: [label, meta.error && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "form-field__label-mandatory",
                 children: " *"

package/dist/components/FormToggle/FormToggle.js

@@ -52,11 +52,12 @@ var FormToggle = function FormToggle(_ref) {
       var input = _ref2.input;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
         className: "form-field-toggle",
+        "data-testid": name ? "".concat(name, "-form-field-toggle") : 'form-field-toggle',
         children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "form-field__label",
           children: label
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
-          "data-testid": "toggle",
+          "data-testid": name ? "".concat(name, "-form-toggle") : 'form-toggle',
           id: name
         }, _objectSpread(_objectSpread({}, input), inputProps)), {}, {
           onChange: function onChange(event) {

package/dist/components/RoundedIcon/RoundedIcon.js

@@ -45,6 +45,7 @@ var RoundedIcon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     "data-testid": id,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
       hidden: !tooltipText,
+      id: id,
       template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
         text: tooltipText
       }),
@@ -52,7 +53,6 @@ var RoundedIcon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         onClick: onClick,
         disabled: disabled,
         className: IconClassNames,
-        id: id,
         children: children
       })
     })

package/dist/components/Tooltip/Tooltip.js

@@ -47,6 +47,7 @@ var Tooltip = function Tooltip(_ref) {
   var children = _ref.children,
     className = _ref.className,
     hidden = _ref.hidden,
+    id = _ref.id,
     renderChildAsHtml = _ref.renderChildAsHtml,
     template = _ref.template,
     textShow = _ref.textShow;
@@ -151,14 +152,14 @@ var Tooltip = function Tooltip(_ref) {
   }, [clearStyles, style]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [renderChildAsHtml ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      "data-testid": "tooltip-wrapper",
+      "data-testid": id ? "".concat(id, "-tooltip-wrapper") : 'tooltip-wrapper',
       ref: parentRef,
       className: tooltipClassNames,
       dangerouslySetInnerHTML: {
         __html: children
       }
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      "data-testid": "tooltip-wrapper",
+      "data-testid": id ? "".concat(id, "-tooltip-wrapper") : 'tooltip-wrapper',
       ref: parentRef,
       className: tooltipClassNames,
       children: children
@@ -168,7 +169,7 @@ var Tooltip = function Tooltip(_ref) {
       timeout: duration,
       unmountOnExit: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        "data-testid": "tooltip",
+        "data-testid": id ? "".concat(id, "-tooltip") : 'tooltip',
         ref: tooltipRef,
         style: _objectSpread({}, style),
         className: "tooltip",
@@ -179,12 +180,14 @@ var Tooltip = function Tooltip(_ref) {
 };
 Tooltip.defaultProps = {
   hidden: false,
+  id: '',
   renderChildAsHtml: false,
   textShow: false
 };
 Tooltip.propTypes = {
   className: _propTypes.default.string,
   hidden: _propTypes.default.bool,
+  id: _propTypes.default.string,
   renderChildAsHtml: _propTypes.default.bool,
   template: _propTypes.default.element.isRequired,
   textShow: _propTypes.default.bool

package/dist/components/Wizard/Wizard.js

@@ -139,6 +139,7 @@ var Wizard = function Wizard(_ref) {
     var defaultActions = [];
     if (activeStepNumber !== 0) {
       defaultActions.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        id: "wizard-btn-back",
         onClick: goToPreviousStep,
         disabled: activeStepNumber === 0,
         label: "Back",
@@ -146,6 +147,7 @@ var Wizard = function Wizard(_ref) {
       }));
     }
     defaultActions.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      id: "wizard-btn-next",
       disabled: stepConfig.nextIsDisabled || isLastStep,
       onClick: goToNextStep,
       label: 'Next',

package/dist/elements/FormActionButton/FormActionButton.js

@@ -9,43 +9,47 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _plus = require("../../images/plus.svg");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/*
-Copyright 2019 Iguazio Systems Ltd.
-
-Licensed under the Apache License, Version 2.0 (the "License") with
-an addition restriction as set forth herein. You may not use this
-file except in compliance with the License. You may obtain a copy of
-the License at http://www.apache.org/licenses/LICENSE-2.0.
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-implied. See the License for the specific language governing
-permissions and limitations under the License.
-
-In addition, you may not use the software for any purposes that are
-illegal under applicable law, and the grant of the foregoing license
-under the Apache 2.0 license is conditioned upon your compliance with
-such restriction.
-*/
-
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /*
+                                                                                                                                                                                                                                                                                                                                                                                              Copyright 2019 Iguazio Systems Ltd.
+                                                                                                                                                                                                                                                                                                                                                                                              
+                                                                                                                                                                                                                                                                                                                                                                                              Licensed under the Apache License, Version 2.0 (the "License") with
+                                                                                                                                                                                                                                                                                                                                                                                              an addition restriction as set forth herein. You may not use this
+                                                                                                                                                                                                                                                                                                                                                                                              file except in compliance with the License. You may obtain a copy of
+                                                                                                                                                                                                                                                                                                                                                                                              the License at http://www.apache.org/licenses/LICENSE-2.0.
+                                                                                                                                                                                                                                                                                                                                                                                              
+                                                                                                                                                                                                                                                                                                                                                                                              Unless required by applicable law or agreed to in writing, software
+                                                                                                                                                                                                                                                                                                                                                                                              distributed under the License is distributed on an "AS IS" BASIS,
+                                                                                                                                                                                                                                                                                                                                                                                              WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+                                                                                                                                                                                                                                                                                                                                                                                              implied. See the License for the specific language governing
+                                                                                                                                                                                                                                                                                                                                                                                              permissions and limitations under the License.
+                                                                                                                                                                                                                                                                                                                                                                                              
+                                                                                                                                                                                                                                                                                                                                                                                              In addition, you may not use the software for any purposes that are
+                                                                                                                                                                                                                                                                                                                                                                                              illegal under applicable law, and the grant of the foregoing license
+                                                                                                                                                                                                                                                                                                                                                                                              under the Apache 2.0 license is conditioned upon your compliance with
+                                                                                                                                                                                                                                                                                                                                                                                              such restriction.
+                                                                                                                                                                                                                                                                                                                                                                                              */
 var FormActionButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _jsxs2;
   var disabled = _ref.disabled,
     fields = _ref.fields,
     fieldsPath = _ref.fieldsPath,
     hidden = _ref.hidden,
+    id = _ref.id,
     label = _ref.label,
     _onClick = _ref.onClick;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [!hidden && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "form-table__row form-table__action-row no-hover",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", (_jsxs2 = {
+        "data-testid": "".concat(fieldsPath, "-add-btn"),
         onClick: function onClick(event) {
           return _onClick(event, fields, fieldsPath);
         },
-        disabled: disabled,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_plus.ReactComponent, {}), label]
-      })
+        disabled: disabled
+      }, _defineProperty(_jsxs2, "data-testid", id), _defineProperty(_jsxs2, "children", [/*#__PURE__*/(0, _jsxRuntime.jsx)(_plus.ReactComponent, {}), label]), _jsxs2))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       ref: ref
     })]
@@ -53,12 +57,14 @@ var FormActionButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
 });
 FormActionButton.defaultProps = {
   disabled: false,
+  id: '',
   label: 'Add new item'
 };
 FormActionButton.propTypes = {
   disabled: _propTypes.default.bool,
   fields: _propTypes.default.shape({}).isRequired,
   fieldsPath: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string,
   label: _propTypes.default.string,
   onClick: _propTypes.default.func.isRequired
 };

package/dist/elements/FormRowActions/FormRowActions.js

@@ -35,7 +35,7 @@ such restriction.
 */
 
 var FormRowActions = function FormRowActions(_ref) {
-  var _editingItem$ui, _editingItem$ui2, _editingItem$ui3;
+  var _editingItem$ui, _editingItem$ui2, _editingItem$ui3, _editingItem$ui4;
   var applyChanges = _ref.applyChanges,
     deleteButtonIsHidden = _ref.deleteButtonIsHidden,
     deleteRow = _ref.deleteRow,
@@ -47,10 +47,11 @@ var FormRowActions = function FormRowActions(_ref) {
     index = _ref.index;
   return hidden ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "form-table__cell form-table__actions-cell"
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "form-table__cell form-table__actions-cell",
-    children: (editingItem === null || editingItem === void 0 ? void 0 : (_editingItem$ui = editingItem.ui) === null || _editingItem$ui === void 0 ? void 0 : _editingItem$ui.index) === index ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(editingItem === null || editingItem === void 0 ? void 0 : (_editingItem$ui = editingItem.ui) === null || _editingItem$ui === void 0 ? void 0 : _editingItem$ui.index) === index && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RoundedIcon, {
+        id: "apply-btn",
         onClick: function onClick(event) {
           return applyChanges(event, index);
         },
@@ -58,6 +59,7 @@ var FormRowActions = function FormRowActions(_ref) {
         disabled: disabled,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkmark.ReactComponent, {})
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RoundedIcon, {
+        id: "delete-discard-btn",
         onClick: function onClick(event) {
           return discardOrDelete(event, fieldsPath, index);
         },
@@ -65,8 +67,9 @@ var FormRowActions = function FormRowActions(_ref) {
         disabled: disabled,
         children: (_editingItem$ui3 = editingItem.ui) !== null && _editingItem$ui3 !== void 0 && _editingItem$ui3.isNew ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.ReactComponent, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_close.ReactComponent, {})
       })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    }), (!editingItem || (editingItem === null || editingItem === void 0 ? void 0 : (_editingItem$ui4 = editingItem.ui) === null || _editingItem$ui4 === void 0 ? void 0 : _editingItem$ui4.index) !== index) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RoundedIcon, {
+        id: "edit-btn",
         onClick: function onClick(event) {
           event.preventDefault();
         },
@@ -74,6 +77,7 @@ var FormRowActions = function FormRowActions(_ref) {
         disabled: disabled,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_edit.ReactComponent, {})
       }), !deleteButtonIsHidden && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RoundedIcon, {
+        id: "delete-btn",
         onClick: function onClick(event) {
           deleteRow(event, fieldsPath, index);
         },
@@ -81,7 +85,7 @@ var FormRowActions = function FormRowActions(_ref) {
         disabled: disabled,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.ReactComponent, {})
       })]
-    })
+    })]
   });
 };
 FormRowActions.defaultProps = {

package/dist/scss/common.scss

@@ -96,9 +96,12 @@ textarea {
 
 .link {
   color: $cornflowerBlue;
+  cursor: pointer;
+  line-height: 20px;
 
   &:hover {
     text-decoration: underline;
+    text-underline-offset: 3px;
   }
 }
 
@@ -180,7 +183,7 @@ textarea {
     }
 
     &.form-table__row_invalid {
-      background-color: rgba($amaranth, 0.15)
+      background-color: rgba($amaranth, 0.15);
     }
 
     &_multiline {

package/dist/utils/common.util.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.openPopUp = exports.openConfirmPopUp = exports.isEveryObjectValueEmpty = exports.getTransitionEndEventName = exports.getErrorDetail = exports.areArraysEqual = void 0;
+exports.openPopUp = exports.openConfirmPopUp = exports.isEveryObjectValueEmpty = exports.getTransitionEndEventName = exports.getErrorMsg = exports.getErrorDetail = exports.areArraysEqual = void 0;
 var _reactModalPromise = require("react-modal-promise");
 var _lodash = require("lodash");
 var _components = require("../components");
@@ -60,9 +60,16 @@ var areArraysEqual = function areArraysEqual(firstArray, secondArray) {
     return (0, _lodash.isEqual)((0, _lodash.omit)(a, omitBy), (0, _lodash.omit)(b, omitBy));
   }));
 };
+
+/**
+ * Get error information from the error object.
+ *
+ * @param {Error} error - The error object.
+ * @returns {string} - The detailed error information.
+ */
 exports.areArraysEqual = areArraysEqual;
 var getErrorDetail = function getErrorDetail(error) {
-  var errorDetail = (0, _lodash.get)(error, 'response.data.detail', '');
+  var errorDetail = (0, _lodash.get)(error, 'response.data.detail', null);
   if (typeof errorDetail === 'string') {
     return errorDetail;
   } else {
@@ -70,12 +77,30 @@ var getErrorDetail = function getErrorDetail(error) {
   }
 };
 
+/**
+ * Get the error message from the error object or a default error message.
+ *
+ * @param {Error} error - The error object.
+ * @param {string} defaultError - The default error message.
+ * @returns {string} - The error message.
+ */
+exports.getErrorDetail = getErrorDetail;
+var getErrorMsg = function getErrorMsg(error, defaultError) {
+  var errorDetail = getErrorDetail(error);
+  var errorMsg = errorDetail || error.message;
+  if ((!errorMsg || errorMsg === 'Not Found' || errorMsg.startsWith('Request failed with status code')) && defaultError) {
+    return defaultError;
+  } else {
+    return errorMsg || '';
+  }
+};
+
 /**
  * Retrieves the appropriate transition end event name based on the browser.
  *
  * @returns {string} The transition end event name.
  */
-exports.getErrorDetail = getErrorDetail;
+exports.getErrorMsg = getErrorMsg;
 var getTransitionEndEventName = function getTransitionEndEventName() {
   var transitions = {
     transition: 'transitionend',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "1.7.0",
+    "version": "1.8.0",
     "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
     "main": "dist/index.js",
     "module": "dist/index.js",