iguazio.dashboard-react-controls 1.2.3 → 1.3.0

package/dist/components/FormCheckBox/FormCheckBox.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactFinalForm = require("react-final-form");
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./formCheckBox.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "className", "highlightLabel", "label", "name"];
+var _excluded = ["children", "className", "highlightLabel", "label", "name", "readOnly"];
 /*
 Copyright 2022 Iguazio Systems Ltd.
 Licensed under the Apache License, Version 2.0 (the "License") with
@@ -29,6 +29,8 @@ under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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; }
@@ -42,9 +44,11 @@ var FormCheckBox = function FormCheckBox(_ref) {
     highlightLabel = _ref.highlightLabel,
     label = _ref.label,
     name = _ref.name,
+    readOnly = _ref.readOnly,
     inputProps = _objectWithoutProperties(_ref, _excluded);
-  var formFieldClassNames = (0, _classnames.default)('form-field-checkbox', className);
+  var formFieldClassNames = (0, _classnames.default)('form-field-checkbox', readOnly && 'form-field-checkbox_readonly', className);
   var labelClassNames = (0, _classnames.default)(highlightLabel && 'highlighted');
+  var inputRef = (0, _react.useRef)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
     name: name,
     value: inputProps.value,
@@ -55,6 +59,7 @@ var FormCheckBox = function FormCheckBox(_ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: formFieldClassNames,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+          ref: inputRef,
           className: (0, _classnames.default)(input.checked ? 'checked' : 'unchecked'),
           type: "checkbox",
           "data-testid": "checkbox",
@@ -73,13 +78,15 @@ var FormCheckBox = function FormCheckBox(_ref) {
 FormCheckBox.defaultProps = {
   className: '',
   highlightLabel: false,
-  label: ''
+  label: '',
+  readOnly: false
 };
 FormCheckBox.propTypes = {
   className: _propTypes.default.string,
   highlightLabel: _propTypes.default.bool,
   name: _propTypes.default.string.isRequired,
-  label: _propTypes.default.string
+  label: _propTypes.default.string,
+  readOnly: _propTypes.default.bool
 };
 var _default = /*#__PURE__*/_react.default.memo(FormCheckBox);
 exports.default = _default;

package/dist/components/FormCheckBox/formCheckBox.scss

@@ -7,6 +7,10 @@
   justify-content: flex-start;
   color: $primary;
 
+  &_readonly {
+    @include radioCheckReadonly;
+  }
+
   input[type='checkbox'] {
     @include radioCheckField;
 

package/dist/components/FormCombobox/FormCombobox.js

@@ -272,8 +272,7 @@ var FormCombobox = function FormCombobox(_ref) {
     }
   }, [input, onBlur, onFocus, showSelectDropdown]);
   var validateField = function validateField(value, allValues) {
-    var _value$split$;
-    var valueToValidate = (_value$split$ = value.split(selectValue.id)[1]) !== null && _value$split$ !== void 0 ? _value$split$ : '';
+    var valueToValidate = value.startsWith(selectValue.id) ? value.substring(selectValue.id.length) : value !== null && value !== void 0 ? value : '';
     var validationError = null;
     if (!(0, _lodash.isEmpty)(validationRules)) {
       var _checkPatternsValidit = (0, _validation.checkPatternsValidity)(rules, valueToValidate),

package/dist/components/FormRadio/FormRadio.js

@@ -11,7 +11,7 @@ var _reactFinalForm = require("react-final-form");
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./FormRadio.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "name", "label"];
+var _excluded = ["className", "name", "label", "readOnly"];
 /*
 Copyright 2022 Iguazio Systems Ltd.
 Licensed under the Apache License, Version 2.0 (the "License") with
@@ -40,8 +40,9 @@ var FormRadio = function FormRadio(_ref) {
   var className = _ref.className,
     name = _ref.name,
     label = _ref.label,
+    readOnly = _ref.readOnly,
     inputProps = _objectWithoutProperties(_ref, _excluded);
-  var formFieldClassNames = (0, _classnames.default)('form-field-radio', className);
+  var formFieldClassNames = (0, _classnames.default)('form-field-radio', readOnly && 'form-field-radio_readonly', className);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
     name: name,
     value: inputProps.value,
@@ -51,9 +52,9 @@ var FormRadio = function FormRadio(_ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: formFieldClassNames,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, input), inputProps)), {}, {
-          id: inputProps.value
+          id: name + inputProps.value
         })), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          htmlFor: inputProps.value,
+          htmlFor: name + inputProps.value,
           children: label
         })]
       });
@@ -62,12 +63,13 @@ var FormRadio = function FormRadio(_ref) {
 };
 FormRadio.defaultProps = {
   className: '',
-  label: ''
+  readOnly: false
 };
 FormRadio.propTypes = {
   className: _propTypes.default.string,
+  label: _propTypes.default.string.isRequired,
   name: _propTypes.default.string.isRequired,
-  label: _propTypes.default.string.isRequired
+  readOnly: _propTypes.default.bool
 };
 var _default = /*#__PURE__*/_react.default.memo(FormRadio);
 exports.default = _default;

package/dist/components/FormRadio/FormRadio.scss

@@ -6,6 +6,11 @@
   align-items: center;
   justify-content: flex-start;
   color: $primary;
+  margin-right: 15px;
+
+  &_readonly {
+    @include radioCheckReadonly;
+  }
 
   input[type='radio'] {
     @include radioCheckField;

package/dist/components/FormToggle/FormToggle.js

@@ -0,0 +1,91 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactFinalForm = require("react-final-form");
+require("./formToggle.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "label", "name", "onChange", "readOnly"];
+/*
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var FormToggle = function FormToggle(_ref) {
+  var className = _ref.className,
+    label = _ref.label,
+    name = _ref.name,
+    _onChange = _ref.onChange,
+    readOnly = _ref.readOnly,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+    name: name,
+    value: inputProps.value,
+    type: "checkbox",
+    children: function children(_ref2) {
+      var input = _ref2.input;
+      var toggleClassName = (0, _classnames.default)('form-field-toggle', className, readOnly && 'form-field-toggle_readonly', input.checked && 'form-field-toggle_checked');
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+        className: toggleClassName,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+          "data-testid": "toggle",
+          id: name
+        }, _objectSpread(_objectSpread({}, input), inputProps)), {}, {
+          onChange: function onChange(event) {
+            _onChange && _onChange(event);
+            input.onChange(event);
+          },
+          type: "checkbox"
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "form-field-toggle__switch",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "form-field-toggle__switch-button"
+          })
+        }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "form-field-toggle__label",
+          children: label
+        })]
+      });
+    }
+  });
+};
+FormToggle.defaultProps = {
+  className: '',
+  label: '',
+  onChange: function onChange() {},
+  readOnly: false
+};
+FormToggle.propTypes = {
+  className: _propTypes.default.string,
+  label: _propTypes.default.string,
+  name: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func,
+  readOnly: _propTypes.default.bool
+};
+var _default = FormToggle;
+exports.default = _default;

package/dist/components/FormToggle/formToggle.scss

@@ -0,0 +1,65 @@
+@import '~igz-controls/scss/colors';
+
+.form-field-toggle {
+  position: relative;
+  display: flex;
+  font-size: 16px;
+  line-height: 24px;
+
+  &__switch {
+    height: 24px;
+    width: 48px;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    background-color: $alto;
+    border-radius: 20px;
+    transition: all 0.2s ease;
+
+    &-button {
+      width: 20px;
+      height: 20px;
+      background-color: $white;
+      border-radius: 50%;
+      transform: translateX(2px);
+      transition: all 0.2s ease;
+    }
+  }
+
+  &__label {
+    margin-left: 10px;
+  }
+
+  &_readonly {
+    opacity: 0.5;
+    pointer-events: none;
+
+    .form-field-toggle__switch {
+      cursor: default;
+    }
+
+    &.form-field-toggle_checked {
+      .form-field-toggle__switch {
+        &-button {
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+
+  &_checked {
+    .form-field-toggle__switch {
+      background-color: $malibu;
+
+      &-button {
+        transform: translateX(26px);
+      }
+    }
+  }
+
+  input[type='checkbox'] {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}

package/dist/components/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "FormTextarea", {
     return _FormTextarea.default;
   }
 });
+Object.defineProperty(exports, "FormToggle", {
+  enumerable: true,
+  get: function get() {
+    return _FormToggle.default;
+  }
+});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function get() {
@@ -109,7 +115,9 @@ var _Button = _interopRequireDefault(require("./Button/Button"));
 var _ConfirmDialog = _interopRequireDefault(require("./ConfirmDialog/ConfirmDialog"));
 var _FormCheckBox = _interopRequireDefault(require("./FormCheckBox/FormCheckBox"));
 var _FormChipCell = _interopRequireDefault(require("./FormChipCell/FormChipCell"));
+var _FormCombobox = _interopRequireDefault(require("./FormCombobox/FormCombobox"));
 var _FormInput = _interopRequireDefault(require("./FormInput/FormInput"));
+var _FormToggle = _interopRequireDefault(require("./FormToggle/FormToggle"));
 var _FormKeyValueTable = _interopRequireDefault(require("./FormKeyValueTable/FormKeyValueTable"));
 var _FormRadio = _interopRequireDefault(require("./FormRadio/FormRadio"));
 var _FormSelect = _interopRequireDefault(require("./FormSelect/FormSelect"));
@@ -121,5 +129,4 @@ var _TextTooltipTemplate = _interopRequireDefault(require("./TooltipTemplate/Tex
 var _Tip = _interopRequireDefault(require("./Tip/Tip"));
 var _Tooltip = _interopRequireDefault(require("./Tooltip/Tooltip"));
 var _Wizard = _interopRequireDefault(require("./Wizard/Wizard"));
-var _FormCombobox = _interopRequireDefault(require("./FormCombobox/FormCombobox"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/elements/FormRowActions/FormRowActions.js

@@ -37,7 +37,9 @@ such restriction.
 var FormRowActions = function FormRowActions(_ref) {
   var _editingItem$ui, _editingItem$ui2, _editingItem$ui3;
   var applyChanges = _ref.applyChanges,
+    deleteIsDisabled = _ref.deleteIsDisabled,
     deleteRow = _ref.deleteRow,
+    disabled = _ref.disabled,
     discardOrDelete = _ref.discardOrDelete,
     editingItem = _ref.editingItem,
     fieldsPath = _ref.fieldsPath,
@@ -50,12 +52,14 @@ var FormRowActions = function FormRowActions(_ref) {
           return applyChanges(event, index);
         },
         tooltipText: "Apply",
+        disabled: disabled,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkmark.ReactComponent, {})
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RoundedIcon, {
         onClick: function onClick(event) {
           return discardOrDelete(event, fieldsPath, index);
         },
         tooltipText: (_editingItem$ui2 = editingItem.ui) !== null && _editingItem$ui2 !== void 0 && _editingItem$ui2.isNew ? 'Delete' : 'Discard changes',
+        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)("div", {
@@ -65,23 +69,29 @@ var FormRowActions = function FormRowActions(_ref) {
           event.preventDefault();
         },
         tooltipText: "Edit",
+        disabled: disabled,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_edit.ReactComponent, {})
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RoundedIcon, {
         onClick: function onClick(event) {
           deleteRow(event, fieldsPath, index);
         },
         tooltipText: "Delete",
+        disabled: disabled || deleteIsDisabled,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.ReactComponent, {})
       })]
     })
   });
 };
 FormRowActions.defaultProps = {
+  deleteIsDisabled: false,
+  disabled: false,
   editingItem: null
 };
 FormRowActions.propTypes = {
   applyChanges: _propTypes.default.func.isRequired,
+  deleteIsDisabled: _propTypes.default.bool,
   deleteRow: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool,
   discardOrDelete: _propTypes.default.func.isRequired,
   editingItem: _types.FORM_TABLE_EDITING_ITEM,
   fieldsPath: _propTypes.default.string.isRequired,

package/dist/scss/common.scss

@@ -127,6 +127,7 @@ textarea {
 .form-table {
   $tableHeaderHeight: 50px;
 
+  width: 100%;
   max-height: 500px;
   overflow: hidden;
   overflow-y: auto;
@@ -152,7 +153,8 @@ textarea {
 
       .form-table__cell {
         &:not(.form-table__actions-cell) {
-          padding: 10px 15px;
+          padding-top: 6px;
+          padding-bottom: 6px;
         }
       }
     }
@@ -215,7 +217,7 @@ textarea {
     display: flex;
     overflow: hidden;
     align-items: center;
-    padding: 3px 15px;
+    padding: 3px 10px;
     color: $primary;
 
     &.disabled {
@@ -223,6 +225,11 @@ textarea {
     }
   }
 
+  .form-table__cell_min {
+    flex: 0.1;
+    min-width: 30px;
+  }
+
   .form-table__cell_1 {
     flex: 1;
   }

package/dist/scss/mixins.scss

@@ -999,9 +999,12 @@
     color: $topaz;
     font-size: 12px;
     text-align: left;
-    text-transform: capitalize;
     background-color: transparent;
 
+    &::first-letter {
+      text-transform: uppercase;
+    }
+
     &-mandatory {
       color: $amaranth;
     }
@@ -1074,6 +1077,18 @@
   }
 }
 
+@mixin radioCheckReadonly {
+  input {
+    pointer-events: none;
+    opacity: 0.5;
+
+    ~ label {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+  }
+}
+
 @mixin radioCheckField {
   position: relative;
   background: $white;
@@ -1099,6 +1114,7 @@
     color: $spunPearl;
     border-color: currentColor;
     cursor: not-allowed;
+    pointer-events: none;
 
     &:hover {
       color: $spunPearl;
@@ -1111,11 +1127,6 @@
     }
   }
 
-  &:focus:not(:disabled),
-  &:active:not(:disabled) {
-    animation: pulse-animation 0.5s ease-out;
-  }
-
   @keyframes pulse-animation {
     20% {
       box-shadow: 0 0 0 0 rgba($cornflowerBlue, 0.5);
@@ -1125,9 +1136,16 @@
     }
   }
 
-  &:hover {
-    color: $cornflowerBlue;
-    border-color: currentColor;
+  &:not(:disabled) {
+    &:focus,
+    &:active {
+      animation: pulse-animation 0.5s ease-out;
+    }
+
+    &:hover {
+      color: $cornflowerBlue;
+      border-color: currentColor;
+    }
   }
 
   ~ label {

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.areArraysEqual = void 0;
+exports.openPopUp = exports.openConfirmPopUp = exports.isEveryObjectValueEmpty = exports.getTransitionEndEventName = exports.getErrorDetail = exports.areArraysEqual = void 0;
 var _reactModalPromise = require("react-modal-promise");
 var _lodash = require("lodash");
 var _components = require("../components");
@@ -60,13 +60,22 @@ var areArraysEqual = function areArraysEqual(firstArray, secondArray) {
     return (0, _lodash.isEqual)((0, _lodash.omit)(a, omitBy), (0, _lodash.omit)(b, omitBy));
   }));
 };
+exports.areArraysEqual = areArraysEqual;
+var getErrorDetail = function getErrorDetail(error) {
+  var errorDetail = (0, _lodash.get)(error, 'response.data.detail', '');
+  if (typeof errorDetail === 'string') {
+    return errorDetail;
+  } else {
+    return (0, _lodash.get)(errorDetail, 'reason', '');
+  }
+};
 
 /**
  * Retrieves the appropriate transition end event name based on the browser.
  *
  * @returns {string} The transition end event name.
  */
-exports.areArraysEqual = areArraysEqual;
+exports.getErrorDetail = getErrorDetail;
 var getTransitionEndEventName = function getTransitionEndEventName() {
   var transitions = {
     transition: 'transitionend',

package/package.json

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