iguazio.dashboard-react-controls 2.0.10 → 2.0.12

package/dist/components/FormChipCell/FormChipCellView.js

@@ -90,9 +90,9 @@ const FormChipCellView = /*#__PURE__*/_react.default.forwardRef((_ref, _ref2) =>
             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,
+                hidden: editConfig.isEdit && !chipData.tooltip,
                 template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
-                  text: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  text: chipData.tooltip || /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
                     className: "chip__content",
                     children: [chipData.key, !chipData.isKeyOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
                       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/dist/components/FormChipCell/NewChipForm/NewChipForm.js

@@ -79,10 +79,10 @@ const NewChipForm = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const refInputKey = _react.default.useRef({});
   const refInputValue = _react.default.useRef({});
   const refInputContainer = _react.default.useRef();
-  const labelKeyClassName = (0, _classnames.default)(className, !editConfig.isKeyFocused && 'item_edited', !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', chipIndex, 'key'], [])) && !(0, _lodash.isEmpty)(chipData.key) && 'item_edited_invalid');
-  const labelContainerClassName = (0, _classnames.default)('edit-chip-container', background && "edit-chip-container-background_".concat(background), borderColor && "edit-chip-container-border_".concat(borderColor), font && "edit-chip-container-font_".concat(font), density && "edit-chip-container-density_".concat(density), borderRadius && "edit-chip-container-border_".concat(borderRadius), (editConfig.isEdit || editConfig.isNewChip) && 'edit-chip-container_edited');
+  const labelKeyClassName = (0, _classnames.default)(className, !editConfig.isKeyFocused && 'item_edited', !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', chipIndex, 'key'], [])) && !(0, _lodash.isEmpty)(chipData.key) && !chip.disabled && 'item_edited_invalid');
+  const labelContainerClassName = (0, _classnames.default)('edit-chip-container', background && "edit-chip-container-background_".concat(background), borderColor && "edit-chip-container-border_".concat(borderColor), font && "edit-chip-container-font_".concat(font), density && "edit-chip-container-density_".concat(density), borderRadius && "edit-chip-container-border_".concat(borderRadius), (editConfig.isEdit || editConfig.isNewChip) && 'edit-chip-container_edited', chip.disabled && 'edit-chip-container_disabled edit-chip-container-font_disabled');
   const labelValueClassName = (0, _classnames.default)('input-label-value', !editConfig.isValueFocused && 'item_edited', !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', chipIndex, 'value'], [])) && !(0, _lodash.isEmpty)(chipData.value) && 'item_edited_invalid');
-  const closeButtonClass = (0, _classnames.default)('item-icon-close', (editConfig.chipIndex === chipIndex || !isEditable) && 'item-icon-close_hidden');
+  const closeButtonClass = (0, _classnames.default)('item-icon-close', !chip.disabled && (editConfig.chipIndex === chipIndex || !isEditable) && 'item-icon-close_hidden');
   (0, _react.useLayoutEffect)(() => {
     if (!chipData.keyFieldWidth && !chipData.valueFieldWidth) {
       const currentWidthKeyInput = refInputKey.current.scrollWidth + 1;
@@ -243,11 +243,11 @@ const NewChipForm = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   }, [selectedInput, validationRules]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: labelContainerClassName,
-    onKeyDown: event => editConfig.isEdit && focusChip(event),
+    onKeyDown: event => !chip.disabled && editConfig.isEdit && focusChip(event),
     ref: refInputContainer,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NewChipInput.default, {
       className: labelKeyClassName,
-      disabled: !isEditable || !(0, _lodash.isNil)(editConfig.chipIndex) && editConfig.chipIndex !== chipIndex,
+      disabled: chip.disabled || !isEditable || !(0, _lodash.isNil)(editConfig.chipIndex) && editConfig.chipIndex !== chipIndex,
       name: keyName,
       onChange: handleOnChange,
       onFocus: handleOnFocus,
@@ -261,7 +261,7 @@ const NewChipForm = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       children: ":"
     }), !chipData.isKeyOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NewChipInput.default, {
       className: labelValueClassName,
-      disabled: !isEditable || !(0, _lodash.isNil)(editConfig.chipIndex) && editConfig.chipIndex !== chipIndex,
+      disabled: chip.disabled || !isEditable || !(0, _lodash.isNil)(editConfig.chipIndex) && editConfig.chipIndex !== chipIndex,
       name: valueName,
       onChange: handleOnChange,
       onFocus: handleOnFocus,
@@ -271,10 +271,11 @@ const NewChipForm = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         width: chipData.valueFieldWidth
       }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      disabled: chip.disabled,
       className: closeButtonClass,
-      onClick: event => handleRemoveChip(event, chipIndex),
+      onClick: event => !chip.disabled && handleRemoveChip(event, chipIndex),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_close.ReactComponent, {})
-    }), (editConfig.isKeyFocused ? !(0, _lodash.isEmpty)(chipData.key) : !(0, _lodash.isEmpty)(chipData.value)) && editConfig.chipIndex === chipIndex && !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', editConfig.chipIndex, selectedInput], [])) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, {
+    }), !chip.disabled && (editConfig.isKeyFocused ? !(0, _lodash.isEmpty)(chipData.key) : !(0, _lodash.isEmpty)(chipData.value)) && editConfig.chipIndex === chipIndex && !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', editConfig.chipIndex, selectedInput], [])) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, {
       show: showValidationRules,
       ref: refInputContainer,
       children: getValidationRules()

package/dist/components/FormChipCell/NewChipForm/newChipForm.scss

@@ -56,15 +56,19 @@
       display: flex;
       align-items: center;
       justify-content: center;
-  
+
       &_hidden {
         visibility: hidden;
       }
-  
+
       svg {
         transform: scale(0.7);
       }
     }
+
+    &_disabled {
+      cursor: not-allowed;
+    }
   }
 
   &-separator {

package/dist/scss/colors.scss

@@ -70,5 +70,6 @@ $frenchLilac: #f0e2f6;
 
 :export {
   amethyst: $amethyst;
+  cornflowerBlueTwo: $cornflowerBlueTwo;
   mulledWine: $mulledWine;
 }

package/dist/scss/mixins.scss

@@ -307,6 +307,10 @@
     &_purple {
       @include editableChipFont($amethyst);
     }
+
+    &_disabled {
+      @include editableChipFont($spunPearl)
+    }
   } @else if $component == Chip {
     &_white {
       @include chipFont($white);

package/dist/utils/validation.util.js

@@ -224,6 +224,15 @@ const generateRule = {
       label: _constants.validation.REQUIRED.LABEL,
       pattern: new RegExp('\\S')
     };
+  },
+  checkForValidCustomLabels: internalLabels => {
+    return {
+      name: 'customLabels',
+      label: 'System-defined labels cannot be modified.',
+      pattern: value => {
+        return !internalLabels.includes(value);
+      }
+    };
   }
 };
 const commonRules = {
@@ -316,14 +325,15 @@ const validationRules = {
     tag: [generateRule.validCharacters('a-z A-Z 0-9 - _ .'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({
       max: 56
     })],
-    combobox: [generateRule.required()]
+    combobox: [generateRule.required()],
+    labels: [internalLabels => generateRule.checkForValidCustomLabels(internalLabels)]
   },
   project: {
     name: [generateRule.validCharacters('a-z 0-9 -'), generateRule.beginWith('a-z'), generateRule.endWith('a-z 0-9'), generateRule.length({
       max: 63
     }), generateRule.required()],
     labels: {
-      key: commonRules.k8sLabels.key,
+      key: [...commonRules.k8sLabels.key, internalLabels => generateRule.checkForValidCustomLabels(internalLabels)],
       value: commonRules.k8sLabels.value
     },
     params: {
@@ -350,7 +360,7 @@ const validationRules = {
     label: {
       key: [generateRule.validCharactersWithPrefix('a-z A-Z 0-9 - _ .'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({
         max: 75
-      })],
+      }), internalLabels => generateRule.checkForValidCustomLabels(internalLabels)],
       value: generateRule.length({
         max: 255
       })
@@ -363,9 +373,15 @@ const validationRules = {
  * @function getValidationRules
  * @param {string} type - The property path to the list of validation rules.
  * @param {Array.<Object>} [additionalRules] - Additional rules to append.
- * @returns {Array.<Object>} the rule list of type `type` with `additionalRules` appended to it if provided.
+ * @param {Array.<Object>} [customData] - Additional data to be passed to the custom rule functions.
+ * @returns {Array.<Object>} The rule list of type `type` with `additionalRules` appended to it if provided.
  */
-const getValidationRules = (type, additionalRules) => {
-  return _lodash.default.chain(validationRules).get(type).defaultTo([]).cloneDeep().concat(_lodash.default.defaultTo(additionalRules, [])).value();
+const getValidationRules = (type, additionalRules, customData) => {
+  return _lodash.default.chain(validationRules).get(type).defaultTo([]).cloneDeep().map(rule => {
+    if (typeof rule === 'function') {
+      return rule(customData);
+    }
+    return rule;
+  }).concat(_lodash.default.defaultTo(additionalRules, [])).value();
 };
 exports.getValidationRules = getValidationRules;

package/package.json

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