diff --git a/commit_message b/commit_message index eed25917..6cd58e14 100644 --- a/commit_message +++ b/commit_message @@ -1,7 +1,6 @@ -Create a new dist version 2.0.10 +Create a new dist version 2.0.11 Collecting: -- Impl [UI] Add metric type icons to Metrics Selector dropdown (#283) -- Impl [Models endpoints monitoring] Graph over time (#284) +- Fix [Jobs] Filtering through custom labels isn't working as intended (#286) diff --git a/dist/components/FormChipCell/FormChipCellView.js b/dist/components/FormChipCell/FormChipCellView.js index 4ad31780..31f7a115 100644 --- a/dist/components/FormChipCell/FormChipCellView.js +++ b/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", { diff --git a/dist/components/FormChipCell/NewChipForm/NewChipForm.js b/dist/components/FormChipCell/NewChipForm/NewChipForm.js index 0d861e1f..a4c428ac 100644 --- a/dist/components/FormChipCell/NewChipForm/NewChipForm.js +++ b/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() diff --git a/dist/components/FormChipCell/NewChipForm/newChipForm.scss b/dist/components/FormChipCell/NewChipForm/newChipForm.scss index cbea27b7..a800f1ea 100644 --- a/dist/components/FormChipCell/NewChipForm/newChipForm.scss +++ b/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 { diff --git a/dist/scss/mixins.scss b/dist/scss/mixins.scss index 0db192d2..a0da67c5 100644 --- a/dist/scss/mixins.scss +++ b/dist/scss/mixins.scss @@ -307,6 +307,10 @@ &_purple { @include editableChipFont($amethyst); } + + &_disabled { + @include editableChipFont($spunPearl) + } } @else if $component == Chip { &_white { @include chipFont($white); diff --git a/dist/utils/validation.util.js b/dist/utils/validation.util.js index ecdf8c7e..4568f736 100644 --- a/dist/utils/validation.util.js +++ b/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.} [additionalRules] - Additional rules to append. - * @returns {Array.} the rule list of type `type` with `additionalRules` appended to it if provided. + * @param {Array.} [customData] - Additional data to be passed to the custom rule functions. + * @returns {Array.} 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; \ No newline at end of file diff --git a/package.json b/package.json index 5d59b0f6..a3403de5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "iguazio.dashboard-react-controls", - "version": "2.0.10", + "version": "2.0.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",