iguazio.dashboard-react-controls 1.8.9 → 1.8.11

package/dist/components/FormChipCell/FormChipCell.js

@@ -61,6 +61,7 @@ var FormChipCell = function FormChipCell(_ref) {
     shortChips = _ref.shortChips,
     validationRules = _ref.validationRules,
     validator = _ref.validator,
+    onExitEditModeCallback = _ref.onExitEditModeCallback,
     visibleChipsMaxLength = _ref.visibleChipsMaxLength;
   var chipsClassName = (0, _classnames.default)('chips', className);
   var _useChipCell = (0, _hooks.useChipCell)(isEditable, visibleChipsMaxLength),
@@ -129,8 +130,9 @@ var FormChipCell = function FormChipCell(_ref) {
       return index !== chipIndex;
     }).value());
     fields.remove(chipIndex);
+    onExitEditModeCallback && onExitEditModeCallback();
     event && event.stopPropagation();
-  }, [checkChipsList, formState, name]);
+  }, [checkChipsList, formState, name, onExitEditModeCallback]);
   var handleEditChip = (0, _react.useCallback)(function (event, fields, nameEvent) {
     var _fields$value$editCon = fields.value[editConfig.chipIndex],
       key = _fields$value$editCon.key,
@@ -147,12 +149,14 @@ var FormChipCell = function FormChipCell(_ref) {
         isValueFocused: false,
         isNewChip: false
       });
+      isChipNotEmpty && onExitEditModeCallback && onExitEditModeCallback();
     } else if (nameEvent === _constants.TAB) {
       if (!isChipNotEmpty) {
         handleRemoveChip(event, fields, editConfig.chipIndex);
       }
       setEditConfig(function (prevState) {
         var lastChipSelected = prevState.chipIndex + 1 > fields.value.length - 1;
+        isChipNotEmpty && lastChipSelected && onExitEditModeCallback && onExitEditModeCallback();
         return {
           chipIndex: lastChipSelected ? null : prevState.chipIndex + 1,
           isEdit: !lastChipSelected,
@@ -167,6 +171,7 @@ var FormChipCell = function FormChipCell(_ref) {
       }
       setEditConfig(function (prevState) {
         var isPrevChipIndexExists = prevState.chipIndex - 1 < 0;
+        isChipNotEmpty && isPrevChipIndexExists && onExitEditModeCallback && onExitEditModeCallback();
         return {
           chipIndex: isPrevChipIndexExists ? null : prevState.chipIndex - 1,
           isEdit: !isPrevChipIndexExists,
@@ -178,7 +183,7 @@ var FormChipCell = function FormChipCell(_ref) {
     }
     checkChipsList((0, _lodash.get)(formState.values, name));
     event && event.preventDefault();
-  }, [editConfig.chipIndex, handleRemoveChip, checkChipsList, formState.values, name]);
+  }, [editConfig.chipIndex, checkChipsList, formState.values, name, onExitEditModeCallback, handleRemoveChip]);
   var handleToEditMode = (0, _react.useCallback)(function (event, index) {
     if (isEditable) {
       event.stopPropagation();
@@ -278,6 +283,7 @@ var FormChipCell = function FormChipCell(_ref) {
         chipOptions: chipOptions,
         chips: chips,
         editConfig: editConfig,
+        formState: formState,
         handleAddNewChip: handleAddNewChip,
         handleEditChip: handleEditChip,
         handleRemoveChip: handleRemoveChip,

package/dist/components/FormChipCell/FormChipCellView.js

@@ -40,6 +40,7 @@ var FormChipCellView = /*#__PURE__*/_react.default.forwardRef(function (_ref, _r
   var chipOptions = _ref.chipOptions,
     chips = _ref.chips,
     editConfig = _ref.editConfig,
+    formState = _ref.formState,
     handleAddNewChip = _ref.handleAddNewChip,
     _handleEditChip = _ref.handleEditChip,
     _handleRemoveChip = _ref.handleRemoveChip,
@@ -63,6 +64,7 @@ var FormChipCellView = /*#__PURE__*/_react.default.forwardRef(function (_ref, _r
   var chipClassNames = (0, _classnames.default)('chip', 'chip__content', isEditable && 'data-ellipsis', shortChips && 'chip_short', chips.hiddenChips && 'chip_hidden', chipOptions.density && "chip-density_".concat(chipOptions.density), chipOptions.borderRadius && "chip-border_".concat(chipOptions.borderRadius), chipOptions.background && "chip-background_".concat(chipOptions.background), chipOptions.borderColor && "chip-border_".concat(chipOptions.borderColor), chipOptions.font && "chip-font_".concat(chipOptions.font), isEditable && 'editable', (showChips || isEditable) && 'chip_visible');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
     name: name,
+    initialValue: formState.initialValues[name],
     validate: validateFields,
     children: function children(_ref3) {
       var fields = _ref3.fields,
@@ -79,8 +81,9 @@ var FormChipCellView = /*#__PURE__*/_react.default.forwardRef(function (_ref, _r
           className: wrapperClassNames,
           ref: chipsWrapperRef,
           children: [fields.map(function (contentItem, index) {
+            var _chips$visibleChips;
             var chipData = fields.value[index];
-            return index < chips.visibleChips.length && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            return index < ((_chips$visibleChips = chips.visibleChips) === null || _chips$visibleChips === void 0 ? void 0 : _chips$visibleChips.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "chip-block",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
                 hidden: editConfig.isEdit,
@@ -166,6 +169,7 @@ FormChipCellView.propTypes = {
   chipOptions: _types.CHIP_OPTIONS,
   chips: _propTypes.default.object.isRequired,
   editConfig: _propTypes.default.object.isRequired,
+  formState: _propTypes.default.object.isRequired,
   handleAddNewChip: _propTypes.default.func.isRequired,
   handleEditChip: _propTypes.default.func.isRequired,
   handleRemoveChip: _propTypes.default.func.isRequired,

package/dist/components/FormInput/FormInput.js

@@ -22,7 +22,7 @@ var _popout = require("../../images/popout.svg");
 var _warning = require("../../images/warning.svg");
 require("./formInput.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["async", "className", "customRequiredLabel", "density", "disabled", "focused", "iconClass", "iconClick", "inputIcon", "invalidText", "label", "link", "name", "onBlur", "onChange", "onFocus", "pattern", "required", "suggestionList", "tip", "validationRules", "validator", "withoutBorder"];
+var _excluded = ["async", "className", "customRequiredLabel", "density", "disabled", "focused", "iconClass", "iconClick", "inputIcon", "invalidText", "label", "link", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "pattern", "required", "suggestionList", "tip", "validationRules", "validator", "withoutBorder"];
 /*
 Copyright 2022 Iguazio Systems Ltd.
 Licensed under the Apache License, Version 2.0 (the "License") with
@@ -76,6 +76,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     onBlur = _ref.onBlur,
     onChange = _ref.onChange,
     onFocus = _ref.onFocus,
+    onKeyDown = _ref.onKeyDown,
     pattern = _ref.pattern,
     required = _ref.required,
     suggestionList = _ref.suggestionList,
@@ -183,9 +184,13 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   };
   var handleInputFocus = function handleInputFocus(event) {
     input.onFocus && input.onFocus(event);
-    onFocus && onFocus();
+    onFocus && onFocus(event);
     setIsFocused(true);
   };
+  var handleInputKeyDown = function handleInputKeyDown(event) {
+    input.onKeyDown && input.onKeyDown(event);
+    onKeyDown && onKeyDown(event);
+  };
   var handleScroll = function handleScroll(event) {
     if (inputRef.current && inputRef.current.contains(event.target)) return;
     if (!event.target.closest('.options-menu') && !event.target.classList.contains('form-field-input')) {
@@ -368,6 +373,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
             }, inputProps), input)), {}, {
               autoComplete: (_inputProps$autocompl = inputProps.autocomplete) !== null && _inputProps$autocompl !== void 0 ? _inputProps$autocompl : 'off',
               onBlur: handleInputBlur,
+              onKeyDown: handleInputKeyDown,
               onFocus: handleInputFocus
             }))
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/dist/components/FormKeyValueTable/FormKeyValueTable.js

@@ -11,25 +11,30 @@ var _reactFinalFormArrays = require("react-final-form-arrays");
 var _components = require("../../components");
 var _elements = require("../../elements");
 var _hooks = require("../../hooks");
+var _types = require("../../types");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/*
-Copyright 2022 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } /*
+                                                                                                                                                                                    Copyright 2022 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 FormKeyValueTable = function FormKeyValueTable(_ref) {
   var actionButtonId = _ref.actionButtonId,
     addNewItemLabel = _ref.addNewItemLabel,
@@ -44,10 +49,13 @@ var FormKeyValueTable = function FormKeyValueTable(_ref) {
     keyHeader = _ref.keyHeader,
     keyLabel = _ref.keyLabel,
     keyOptions = _ref.keyOptions,
+    keyValidationRules = _ref.keyValidationRules,
+    onExitEditModeCallback = _ref.onExitEditModeCallback,
     valueHeader = _ref.valueHeader,
-    valueLabel = _ref.valueLabel;
+    valueLabel = _ref.valueLabel,
+    valueValidationRules = _ref.valueValidationRules;
   var tableClassNames = (0, _classnames.default)('form-table form-key-value-table', className);
-  var _useFormTable = (0, _hooks.useFormTable)(formState, exitEditModeTriggerItem),
+  var _useFormTable = (0, _hooks.useFormTable)(formState, exitEditModeTriggerItem, onExitEditModeCallback),
     addNewRow = _useFormTable.addNewRow,
     applyChanges = _useFormTable.applyChanges,
     bottomScrollRef = _useFormTable.bottomScrollRef,
@@ -59,7 +67,7 @@ var FormKeyValueTable = function FormKeyValueTable(_ref) {
   var uniquenessValidator = function uniquenessValidator(fields, newValue) {
     return !fields.value.some(function (_ref2, index) {
       var key = _ref2.data.key;
-      return newValue.trim() === key && index !== editingItem.ui.index;
+      return newValue.trim() === key.trim() && index !== editingItem.ui.index;
     });
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -98,13 +106,13 @@ var FormKeyValueTable = function FormKeyValueTable(_ref) {
                   density: "normal",
                   name: "".concat(rowPath, ".data.key"),
                   required: isKeyRequired,
-                  validationRules: [{
+                  validationRules: [].concat(_toConsumableArray(keyValidationRules), [{
                     name: 'uniqueness',
                     label: 'Name must be unique',
                     pattern: function pattern(newValue) {
                       return uniquenessValidator(fields, newValue);
                     }
-                  }]
+                  }])
                 })
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: "form-table__cell form-table__cell_1",
@@ -113,7 +121,8 @@ var FormKeyValueTable = function FormKeyValueTable(_ref) {
                   placeholder: valueLabel,
                   density: "normal",
                   name: "".concat(rowPath, ".data.value"),
-                  required: isValueRequired
+                  required: isValueRequired,
+                  validationRules: valueValidationRules
                 })
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_elements.FormRowActions, {
                 applyChanges: applyChanges,
@@ -190,8 +199,11 @@ FormKeyValueTable.defaultProps = {
   keyHeader: 'Key',
   keyLabel: 'Key',
   keyOptions: null,
+  keyValidationRules: [],
+  onExitEditModeCallback: function onExitEditModeCallback() {},
   valueHeader: 'Value',
-  valueLabel: 'Value'
+  valueLabel: 'Value',
+  valueValidationRules: []
 };
 FormKeyValueTable.propTypes = {
   actionButtonId: _propTypes.default.string,
@@ -210,8 +222,11 @@ FormKeyValueTable.propTypes = {
     label: _propTypes.default.string.isRequired,
     id: _propTypes.default.string.isRequired
   })),
+  keyValidationRules: _types.INPUT_VALIDATION_RULES,
+  onExitEditModeCallback: _propTypes.default.func,
   valueHeader: _propTypes.default.string,
-  valueLabel: _propTypes.default.string
+  valueLabel: _propTypes.default.string,
+  valueValidationRules: _types.INPUT_VALIDATION_RULES
 };
 var _default = FormKeyValueTable;
 exports.default = _default;

package/dist/components/FormTextarea/FormTextarea.js

@@ -79,6 +79,9 @@ var FormTextarea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var formFieldClassNames = (0, _classnames.default)('form-field-textarea', className);
   var labelClassNames = (0, _classnames.default)('form-field__label', disabled && 'form-field__label-disabled');
   var textAreaClassNames = (0, _classnames.default)('form-field__wrapper', disabled && 'form-field__wrapper-disabled', isInvalid && 'form-field__wrapper-invalid', withoutBorder && 'without-border');
+  (0, _react.useLayoutEffect)(function () {
+    setTextAreaCount(input.value.length);
+  }, [input.value.length]);
   (0, _react.useEffect)(function () {
     if (focused) {
       textAreaRef.current.focus();
@@ -93,7 +96,6 @@ var FormTextarea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   };
   var handleInputChange = function handleInputChange(event) {
     input.onChange(event);
-    setTextAreaCount(event.target.value.length);
     onChange && onChange(event.target.value);
   };
   var handleInputFocus = function handleInputFocus(event) {

package/dist/components/Wizard/Wizard.js

@@ -108,7 +108,7 @@ var Wizard = function Wizard(_ref) {
         stepIsActive: stepIsActive
       }) : null;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: !stepIsActive ? 'wizard-form__hidden-content-item' : '',
+        className: !stepIsActive ? 'wizard-form__hidden-content-item' : 'wizard-form__visible-content-item',
         children: newChild
       }, idx);
     });

package/dist/components/Wizard/Wizard.scss

@@ -26,7 +26,15 @@
     height: 100%;
 
     .wizard-form__hidden-content-item {
-      display: none;
+      position: absolute;
+      visibility: hidden;
+      height: 0;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .wizard-form__visible-content-item {
+      height: 100%;
     }
   }
 }

package/dist/hooks/useFormTable.hook.js

@@ -37,7 +37,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /*
                                                                       under the Apache 2.0 license is conditioned upon your compliance with
                                                                       such restriction.
                                                                       */
-var useFormTable = function useFormTable(formState, exitEditModeTriggerItem) {
+var useFormTable = function useFormTable(formState, exitEditModeTriggerItem, onExitEditModeCallback) {
   // `editingItem` should contain the `data` object with all fields that are used in the `formState`.
   // Properties that aren't used in the `formState` should be placed directly in the `editingItem` object
   // `editingItem` also has an `ui` property which is used internally in this hook
@@ -63,6 +63,7 @@ var useFormTable = function useFormTable(formState, exitEditModeTriggerItem) {
   var editingItemErrorsRef = (0, _react.useRef)(null);
   var formStateRef = (0, _react.useRef)(null);
   var bottomScrollRef = (0, _react.useRef)(null);
+  var onExitEditModeCallbackRef = (0, _react.useRef)(onExitEditModeCallback);
   (0, _react.useLayoutEffect)(function () {
     var tableErrors = (0, _lodash.get)(formState === null || formState === void 0 ? void 0 : formState.errors, editingItem === null || editingItem === void 0 ? void 0 : editingItem.ui.fieldsPath, []);
     editingItemErrorsRef.current = (0, _lodash.get)(tableErrors, editingItem === null || editingItem === void 0 ? void 0 : editingItem.ui.index, null);
@@ -70,40 +71,55 @@ var useFormTable = function useFormTable(formState, exitEditModeTriggerItem) {
   (0, _react.useLayoutEffect)(function () {
     formStateRef.current = formState;
   }, [formState]);
-  var applyOrDiscardOrDeleteInEffect = (0, _react.useCallback)(function () {
-    if (editingItemRef !== null && editingItemRef !== void 0 && editingItemRef.current) {
-      if (!editingItemErrorsRef.current) {
-        exitEditMode();
-      } else {
-        var _editingItemRef$curre, _editingItemRef$curre2;
-        if ((_editingItemRef$curre = editingItemRef.current) !== null && _editingItemRef$curre !== void 0 && (_editingItemRef$curre2 = _editingItemRef$curre.ui) !== null && _editingItemRef$curre2 !== void 0 && _editingItemRef$curre2.isNew) {
-          var _editingItemRef$curre3;
-          var values = (0, _lodash.get)(formStateRef.current.values, (_editingItemRef$curre3 = editingItemRef.current) === null || _editingItemRef$curre3 === void 0 ? void 0 : _editingItemRef$curre3.ui.fieldsPath);
-          if ((values === null || values === void 0 ? void 0 : values.length) > 1) {
-            var _editingItemRef$curre4, _editingItemRef$curre5;
-            formStateRef.current.form.mutators.remove((_editingItemRef$curre4 = editingItemRef.current) === null || _editingItemRef$curre4 === void 0 ? void 0 : _editingItemRef$curre4.ui.fieldsPath, (_editingItemRef$curre5 = editingItemRef.current) === null || _editingItemRef$curre5 === void 0 ? void 0 : _editingItemRef$curre5.ui.index);
+  (0, _react.useLayoutEffect)(function () {
+    onExitEditModeCallbackRef.current = onExitEditModeCallback;
+  }, [onExitEditModeCallback]);
+  var exitEditMode = function exitEditMode() {
+    var _editingItemRef$curre;
+    if ((_editingItemRef$curre = editingItemRef.current) !== null && _editingItemRef$curre !== void 0 && _editingItemRef$curre.data) {
+      var _editingItemRef$curre2;
+      Object.entries((_editingItemRef$curre2 = editingItemRef.current) === null || _editingItemRef$curre2 === void 0 ? void 0 : _editingItemRef$curre2.data).forEach(function (_ref) {
+        var _formStateRef$current, _editingItemRef$curre3, _editingItemRef$curre4;
+        var _ref2 = _slicedToArray(_ref, 1),
+          fieldName = _ref2[0];
+        (_formStateRef$current = formStateRef.current) === null || _formStateRef$current === void 0 ? void 0 : _formStateRef$current.form.mutators.setFieldState("".concat((_editingItemRef$curre3 = editingItemRef.current) === null || _editingItemRef$curre3 === void 0 ? void 0 : _editingItemRef$curre3.ui.fieldsPath, "[").concat((_editingItemRef$curre4 = editingItemRef.current) === null || _editingItemRef$curre4 === void 0 ? void 0 : _editingItemRef$curre4.ui.index, "].data.").concat(fieldName), {
+          modified: false
+        });
+      });
+    }
+    editingItemRef.current = null;
+    setEditingItem(null);
+    (onExitEditModeCallbackRef === null || onExitEditModeCallbackRef === void 0 ? void 0 : onExitEditModeCallbackRef.current) && onExitEditModeCallbackRef.current();
+  };
+  (0, _react.useEffect)(function () {
+    var applyOrDiscardOrDeleteInEffect = function applyOrDiscardOrDeleteInEffect() {
+      if (editingItemRef !== null && editingItemRef !== void 0 && editingItemRef.current) {
+        if (!editingItemErrorsRef.current) {
+          exitEditMode();
+        } else {
+          var _editingItemRef$curre5, _editingItemRef$curre6;
+          if ((_editingItemRef$curre5 = editingItemRef.current) !== null && _editingItemRef$curre5 !== void 0 && (_editingItemRef$curre6 = _editingItemRef$curre5.ui) !== null && _editingItemRef$curre6 !== void 0 && _editingItemRef$curre6.isNew) {
+            var _editingItemRef$curre7;
+            var values = (0, _lodash.get)(formStateRef.current.values, (_editingItemRef$curre7 = editingItemRef.current) === null || _editingItemRef$curre7 === void 0 ? void 0 : _editingItemRef$curre7.ui.fieldsPath);
+            if ((values === null || values === void 0 ? void 0 : values.length) > 1) {
+              var _editingItemRef$curre8, _editingItemRef$curre9;
+              formStateRef.current.form.mutators.remove((_editingItemRef$curre8 = editingItemRef.current) === null || _editingItemRef$curre8 === void 0 ? void 0 : _editingItemRef$curre8.ui.fieldsPath, (_editingItemRef$curre9 = editingItemRef.current) === null || _editingItemRef$curre9 === void 0 ? void 0 : _editingItemRef$curre9.ui.index);
+            } else {
+              var _editingItemRef$curre10;
+              formStateRef.current.form.change((_editingItemRef$curre10 = editingItemRef.current) === null || _editingItemRef$curre10 === void 0 ? void 0 : _editingItemRef$curre10.ui.fieldsPath, []);
+            }
           } else {
-            var _editingItemRef$curre6;
-            formStateRef.current.form.change((_editingItemRef$curre6 = editingItemRef.current) === null || _editingItemRef$curre6 === void 0 ? void 0 : _editingItemRef$curre6.ui.fieldsPath, []);
+            var _editingItemRef$curre11, _editingItemRef$curre12;
+            formStateRef.current.form.mutators.update((_editingItemRef$curre11 = editingItemRef.current) === null || _editingItemRef$curre11 === void 0 ? void 0 : _editingItemRef$curre11.ui.fieldsPath, (_editingItemRef$curre12 = editingItemRef.current) === null || _editingItemRef$curre12 === void 0 ? void 0 : _editingItemRef$curre12.ui.index, (0, _lodash.omit)(editingItemRef.current, ['ui']));
           }
-        } else {
-          var _editingItemRef$curre7, _editingItemRef$curre8;
-          formStateRef.current.form.mutators.update((_editingItemRef$curre7 = editingItemRef.current) === null || _editingItemRef$curre7 === void 0 ? void 0 : _editingItemRef$curre7.ui.fieldsPath, (_editingItemRef$curre8 = editingItemRef.current) === null || _editingItemRef$curre8 === void 0 ? void 0 : _editingItemRef$curre8.ui.index, (0, _lodash.omit)(editingItemRef.current, ['ui']));
+          exitEditMode();
         }
-        exitEditMode();
       }
-    }
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (editingItemRef !== null && editingItemRef !== void 0 && editingItemRef.current) {
-      applyOrDiscardOrDeleteInEffect();
-    }
-  }, [applyOrDiscardOrDeleteInEffect, exitEditModeTriggerItem]);
-  (0, _react.useEffect)(function () {
+    };
     return function () {
       applyOrDiscardOrDeleteInEffect();
     };
-  }, [applyOrDiscardOrDeleteInEffect]);
+  }, [exitEditModeTriggerItem]);
   var addNewRow = function addNewRow(event, fields, fieldsPath, newItem) {
     applyOrDiscardOrDelete(event);
     formStateRef.current.form.mutators.push(fieldsPath, newItem);
@@ -124,19 +140,19 @@ var useFormTable = function useFormTable(formState, exitEditModeTriggerItem) {
   var applyChanges = function applyChanges(event, index) {
     if (editingItemRef.current) {
       if (!editingItemErrorsRef.current) {
-        var _editingItemRef$curre9;
-        if ((_editingItemRef$curre9 = editingItemRef.current) !== null && _editingItemRef$curre9 !== void 0 && _editingItemRef$curre9.ui.isNew) {
+        var _editingItemRef$curre13;
+        if ((_editingItemRef$curre13 = editingItemRef.current) !== null && _editingItemRef$curre13 !== void 0 && _editingItemRef$curre13.ui.isNew) {
           scrollIntoView();
         }
         exitEditMode();
       } else {
         var _editingItemErrorsRef;
         // Mark all empty fields as `modified` in order to highlight the error if the field is invalid
-        Object.entries((_editingItemErrorsRef = editingItemErrorsRef.current) === null || _editingItemErrorsRef === void 0 ? void 0 : _editingItemErrorsRef.data).forEach(function (_ref) {
-          var _formStateRef$current, _editingItemRef$curre10;
-          var _ref2 = _slicedToArray(_ref, 1),
-            fieldName = _ref2[0];
-          (_formStateRef$current = formStateRef.current) === null || _formStateRef$current === void 0 ? void 0 : _formStateRef$current.form.mutators.setFieldState("".concat((_editingItemRef$curre10 = editingItemRef.current) === null || _editingItemRef$curre10 === void 0 ? void 0 : _editingItemRef$curre10.ui.fieldsPath, "[").concat(index, "].data.").concat(fieldName), {
+        Object.entries((_editingItemErrorsRef = editingItemErrorsRef.current) === null || _editingItemErrorsRef === void 0 ? void 0 : _editingItemErrorsRef.data).forEach(function (_ref3) {
+          var _formStateRef$current2, _editingItemRef$curre14;
+          var _ref4 = _slicedToArray(_ref3, 1),
+            fieldName = _ref4[0];
+          (_formStateRef$current2 = formStateRef.current) === null || _formStateRef$current2 === void 0 ? void 0 : _formStateRef$current2.form.mutators.setFieldState("".concat((_editingItemRef$curre14 = editingItemRef.current) === null || _editingItemRef$curre14 === void 0 ? void 0 : _editingItemRef$curre14.ui.fieldsPath, "[").concat(index, "].data.").concat(fieldName), {
             modified: true
           });
         });
@@ -162,8 +178,8 @@ var useFormTable = function useFormTable(formState, exitEditModeTriggerItem) {
     event && event.stopPropagation();
   };
   var discardOrDelete = function discardOrDelete(event, fieldsPath, index) {
-    var _editingItemRef$curre11, _editingItemRef$curre12;
-    if (!editingItemRef.current || (_editingItemRef$curre11 = editingItemRef.current) !== null && _editingItemRef$curre11 !== void 0 && (_editingItemRef$curre12 = _editingItemRef$curre11.ui) !== null && _editingItemRef$curre12 !== void 0 && _editingItemRef$curre12.isNew) {
+    var _editingItemRef$curre15, _editingItemRef$curre16;
+    if (!editingItemRef.current || (_editingItemRef$curre15 = editingItemRef.current) !== null && _editingItemRef$curre15 !== void 0 && (_editingItemRef$curre16 = _editingItemRef$curre15.ui) !== null && _editingItemRef$curre16 !== void 0 && _editingItemRef$curre16.isNew) {
       deleteRow(event, fieldsPath, index);
     } else {
       discardChanges(event, fieldsPath, index);
@@ -173,11 +189,11 @@ var useFormTable = function useFormTable(formState, exitEditModeTriggerItem) {
     var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     if (editingItemRef !== null && editingItemRef !== void 0 && editingItemRef.current) {
       if (!editingItemErrorsRef.current) {
-        var _editingItemRef$curre13;
-        applyChanges(event, (_editingItemRef$curre13 = editingItemRef.current) === null || _editingItemRef$curre13 === void 0 ? void 0 : _editingItemRef$curre13.ui.index);
+        var _editingItemRef$curre17;
+        applyChanges(event, (_editingItemRef$curre17 = editingItemRef.current) === null || _editingItemRef$curre17 === void 0 ? void 0 : _editingItemRef$curre17.ui.index);
       } else {
-        var _editingItemRef$curre14, _editingItemRef$curre15;
-        discardOrDelete(event, (_editingItemRef$curre14 = editingItemRef.current) === null || _editingItemRef$curre14 === void 0 ? void 0 : _editingItemRef$curre14.ui.fieldsPath, (_editingItemRef$curre15 = editingItemRef.current) === null || _editingItemRef$curre15 === void 0 ? void 0 : _editingItemRef$curre15.ui.index);
+        var _editingItemRef$curre18, _editingItemRef$curre19;
+        discardOrDelete(event, (_editingItemRef$curre18 = editingItemRef.current) === null || _editingItemRef$curre18 === void 0 ? void 0 : _editingItemRef$curre18.ui.fieldsPath, (_editingItemRef$curre19 = editingItemRef.current) === null || _editingItemRef$curre19 === void 0 ? void 0 : _editingItemRef$curre19.ui.index);
       }
     }
   };
@@ -197,22 +213,6 @@ var useFormTable = function useFormTable(formState, exitEditModeTriggerItem) {
       });
     });
   };
-  var exitEditMode = function exitEditMode() {
-    var _editingItemRef$curre16;
-    if ((_editingItemRef$curre16 = editingItemRef.current) !== null && _editingItemRef$curre16 !== void 0 && _editingItemRef$curre16.data) {
-      var _editingItemRef$curre17;
-      Object.entries((_editingItemRef$curre17 = editingItemRef.current) === null || _editingItemRef$curre17 === void 0 ? void 0 : _editingItemRef$curre17.data).forEach(function (_ref3) {
-        var _formStateRef$current2, _editingItemRef$curre18, _editingItemRef$curre19;
-        var _ref4 = _slicedToArray(_ref3, 1),
-          fieldName = _ref4[0];
-        (_formStateRef$current2 = formStateRef.current) === null || _formStateRef$current2 === void 0 ? void 0 : _formStateRef$current2.form.mutators.setFieldState("".concat((_editingItemRef$curre18 = editingItemRef.current) === null || _editingItemRef$curre18 === void 0 ? void 0 : _editingItemRef$curre18.ui.fieldsPath, "[").concat((_editingItemRef$curre19 = editingItemRef.current) === null || _editingItemRef$curre19 === void 0 ? void 0 : _editingItemRef$curre19.ui.index, "].data.").concat(fieldName), {
-          modified: false
-        });
-      });
-    }
-    editingItemRef.current = null;
-    setEditingItem(null);
-  };
   var scrollIntoView = function scrollIntoView() {
     if (bottomScrollRef.current) {
       setTimeout(function () {

package/dist/scss/mixins.scss

@@ -996,6 +996,8 @@
   width: 100%;
 
   &__label {
+    display: flex;
+    align-items: center;
     margin-bottom: 5px;
     color: $topaz;
     font-size: 12px;

package/dist/scss/variables.scss

@@ -19,3 +19,8 @@ $fieldDense: 36px;
 $fieldNormal: 40px;
 $fieldMedium: 44px;
 $fieldChunky: 48px;
+
+$headerRowHeight: 40;
+$headerRowHeightBig: 50;
+$rowHeight: 57;
+$rowHeightExtended: 82;

package/dist/utils/validation.util.js

@@ -50,7 +50,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  * // => 'a–z, A–Z, –, _, *'
  */
 var convertToLabel = function convertToLabel(chars) {
-  return chars.replace(/-/g, '–').replace(/\s/g, ', ').replace(/\bs\b/);
+  return chars.replace(/-/g, '–').replace(/\s/g, ', ').replace(/\bs\b/, 'spaces');
 };
 
 /**
@@ -58,8 +58,7 @@ var convertToLabel = function convertToLabel(chars) {
  * @param {string} chars - characters to convert
  * @returns {string} - converted string
  * @example
- * convertToPattern('a-z A-Z - _ *');
- * // => 'a-zA-Z\-\_\*'
+ * convertToPattern('a-z A-Z - _ *') => 'a-zA-Z\-\_\*'
  */
 var convertToPattern = function convertToPattern(chars) {
   return chars.split(' ').map(function (patternItem) {
@@ -283,22 +282,67 @@ var generateRule = {
     };
   }
 };
+var commonRules = {
+  prefixedQualifiedName: [{
+    name: 'nameValidCharacters',
+    label: "[Name] ".concat(_constants.validation.VALID_CHARACTERS, " : a\u2013z, A\u2013Z, 0\u20139, \u2013, _, ."),
+    pattern: /^([^/]+\/)?[\w.-]+$/
+  }, {
+    name: 'nameBeginEnd',
+    label: "[Name] ".concat(_constants.validation.BEGIN_END_WITH, ": a\u2013z, A\u2013Z, 0\u20139"),
+    pattern: /^([^/]+\/)?([A-Za-z0-9][^/]*)?[A-Za-z0-9]$/
+  }, {
+    name: 'nameMaxLength',
+    label: '[Name] Max length - 63 characters',
+    pattern: /^([^/]+\/)?[^/]{1,63}$/
+  }, {
+    name: 'prefixValidCharacters',
+    label: "[Prefix] ".concat(_constants.validation.VALID_CHARACTERS, ": a\u2013z, 0\u20139, \u2013, ."),
+    pattern: /^([a-z0-9.-]+\/)?[^/]+$/
+  }, {
+    name: 'prefixBeginEnd',
+    label: "[Prefix] ".concat(_constants.validation.BEGIN_END_WITH, ": a\u2013z, 0\u20139"),
+    pattern: /^([a-z0-9]([^/]*[a-z0-9])?\/)?[^/]+$/
+  }, {
+    name: 'prefixMaxLength',
+    label: '[Prefix] Max length - 253 characters',
+    pattern: /^(?![^/]{254,}\/)/
+  }],
+  k8sLabels: {
+    value: [{
+      name: 'valueBeginEnd',
+      label: "[Value] ".concat(_constants.validation.BEGIN_END_WITH, " : a\u2013z, A\u2013Z, 0\u20139"),
+      pattern: /^([^/]+\/)?([A-Za-z0-9][^/]*)?[A-Za-z0-9]$/
+    }, {
+      name: 'valueMaxLength',
+      label: '[Value] Max length - 63 characters',
+      pattern: /^([^/]+\/)?[^/]{1,63}$/
+    }, {
+      name: 'valueValidCharacters',
+      label: "[Value] ".concat(_constants.validation.VALID_CHARACTERS, ": a\u2013z, A\u2013Z, 0\u20139, \u2013, _, ."),
+      pattern: /^[a-zA-Z0-9\-_.]+$/
+    }]
+  }
+  // email: [
+  //   generateRule.beginEndNotWith('@ .'),
+  //   {
+  //     name: 'exactlyOne',
+  //     label: ValidationConstants.MUST_CONTAIN_EXACTLY_ONE + ': @',
+  //     pattern: /^[^@]+@[^@]+$/
+  //   },
+  //   {
+  //     name: 'dotAfterAt',
+  //     label: ValidationConstants.MUST_HAVE_DOT_AFTER_AT,
+  //     pattern: /@.+\..+$/
+  //   }
+  // ]
+};
 
-//const commonRules = {
-// email: [
-//   generateRule.beginEndNotWith('@ .'),
-//   {
-//     name: 'exactlyOne',
-//     label: ValidationConstants.MUST_CONTAIN_EXACTLY_ONE + ': @',
-//     pattern: /^[^@]+@[^@]+$/
-//   },
-//   {
-//     name: 'dotAfterAt',
-//     label: ValidationConstants.MUST_HAVE_DOT_AFTER_AT,
-//     pattern: /@.+\..+$/
-//   }
-// ]
-//}
+commonRules.k8sLabels.key = commonRules.prefixedQualifiedName.concat({
+  name: 'prefixNotStart',
+  label: "[Prefix] Must not start with 'kubernetes.io', 'k8s.io'",
+  pattern: /^(?!kubernetes\.io\/)(?!k8s\.io\/)/
+});
 var validationRules = {
   artifact: {
     name: [generateRule.validCharacters('a-z A-Z 0-9 - _ .'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({
@@ -334,7 +378,15 @@ var validationRules = {
   project: {
     name: [generateRule.validCharacters('a-z 0-9 -'), generateRule.beginWith('a-z'), generateRule.endWith('a-z 0-9'), generateRule.length({
       max: 63
-    }), generateRule.required()]
+    }), generateRule.required()],
+    labels: {
+      key: commonRules.k8sLabels.key,
+      value: commonRules.k8sLabels.value
+    },
+    params: {
+      key: [generateRule.beginEndNotWith('s')],
+      value: [generateRule.beginEndNotWith('s')]
+    }
   },
   environmentVariables: {
     secretName: [generateRule.validCharacters('a-z A-Z 0-9 - _ .'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.noConsecutiveCharacters('.., .–, –.'), generateRule.maxLengthBetweenDelimiters(/[\.\-\_]/, 63, 'periods'), generateRule.length({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "1.8.9",
+    "version": "1.8.11",
     "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",