@balena/ui-shared-components 14.0.3 → 14.1.0-build-limit-field-lengths-2d063da12c2b1e3b691fc126191269d24d81aae1-1

package/dist/components/RJST/Actions/Tags.js

@@ -8,6 +8,7 @@ import { useQuery } from '@tanstack/react-query';
 import { Spinner } from '../../Spinner';
 import { TagManagementDialog } from '../../TagManagementDialog';
 export const Tags = ({ selected, rjstContext, schema, setIsBusyMessage, refresh, onDone, }) => {
+    var _a;
     const { t } = useTranslation();
     const { sdk, internalPineFilter, checkedState } = rjstContext;
     const getAllTags = (sdk === null || sdk === void 0 ? void 0 : sdk.tags) && 'getAll' in sdk.tags ? sdk.tags.getAll : null;
@@ -81,7 +82,10 @@ export const Tags = ({ selected, rjstContext, schema, setIsBusyMessage, refresh,
     if (!rjstContext.tagField || !rjstContext.nameField || !items) {
         return null;
     }
-    return (_jsx(Spinner, { show: isPending, sx: { width: '100%', height: '100%' }, children: _jsx(TagManagementDialog, { items: items, itemType: rjstContext.resource, titleField: getItemName !== null && getItemName !== void 0 ? getItemName : rjstContext.nameField, tagField: rjstContext.tagField, done: async (tagSubmitInfo) => {
+    const tagSchema = (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[rjstContext.tagField];
+    return (_jsx(Spinner, { show: isPending, sx: { width: '100%', height: '100%' }, children: _jsx(TagManagementDialog, { items: items, itemType: rjstContext.resource, titleField: getItemName !== null && getItemName !== void 0 ? getItemName : rjstContext.nameField, tagField: rjstContext.tagField, tagSchema: tagSchema != null && typeof tagSchema === 'object'
+                ? tagSchema
+                : undefined, done: async (tagSubmitInfo) => {
                 await changeTags(tagSubmitInfo);
                 onDone();
             }, cancel: () => {

package/dist/components/TagManagementDialog/AddTagForm.d.ts

@@ -1,11 +1,16 @@
 import type { ResourceTagInfo } from './models';
-import type { TFunction } from '../../hooks/useTranslations';
+import type { JSONSchema7 as JSONSchema } from 'json-schema';
 interface AddTagFormProps<T> {
-    t: TFunction;
     itemType: string;
+    /**
+     * This is atm only used for constraint validation,
+     * but in the future it would be great if this becomes mandatory
+     * and we use an autogenerated form.
+     */
+    schema?: JSONSchema;
     existingTags: Array<ResourceTagInfo<T>>;
     overridableTags?: Array<ResourceTagInfo<T>>;
     addTag: (tag: ResourceTagInfo<T>) => void;
 }
-export declare const AddTagForm: <T extends object>({ itemType, existingTags, overridableTags, addTag, }: AddTagFormProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const AddTagForm: <T extends object>({ itemType, schema, existingTags, overridableTags, addTag, }: AddTagFormProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TagManagementDialog/AddTagForm.js

@@ -10,33 +10,63 @@ import { stopKeyDownEvent, withPreventDefault, } from '../../utils/eventHandling
 import { SimpleConfirmationDialog, } from '../SimpleConfirmationDialog';
 import { useRandomUUID } from '../../hooks/useRandomUUID';
 const RESERVED_NAMESPACES = ['io.resin.', 'io.balena.'];
-const newTagValidationRules = (t, key, existingTags) => {
+const newTagValidationRules = (t, schema, existingTags, key, value) => {
+    var _a, _b;
+    const tagKeySchema = (_a = schema === null || schema === void 0 ? void 0 : schema.properties) === null || _a === void 0 ? void 0 : _a.tag_key;
+    const tagValueSchema = (_b = schema === null || schema === void 0 ? void 0 : schema.properties) === null || _b === void 0 ? void 0 : _b.value;
+    const tagKeyMaxLength = tagKeySchema != null && typeof tagKeySchema === 'object'
+        ? tagKeySchema.maxLength
+        : null;
+    const tagValueMaxLength = tagValueSchema != null && typeof tagValueSchema === 'object'
+        ? tagValueSchema.maxLength
+        : null;
     return [
         {
             test: () => !key || isEmpty(key),
+            field: 'tag_key',
             message: t('fields_errors.tag_name_cannot_be_empty'),
         },
         {
             test: () => /\s/.test(key),
+            field: 'tag_key',
             message: t('fields_errors.tag_names_cannot_contain_whitespace'),
         },
         {
             test: () => RESERVED_NAMESPACES.some((reserved) => startsWith(key, reserved)),
+            field: 'tag_key',
             message: t(`fields_errors.some_tag_keys_are_reserved`, {
                 namespace: RESERVED_NAMESPACES.join(', '),
             }),
         },
         {
             test: () => existingTags.some((tag) => tag.state !== 'deleted' && tag.tag_key === key),
+            field: 'tag_key',
             message: t('fields_errors.tag_with_same_name_exists'),
         },
+        ...(tagKeyMaxLength != null
+            ? [
+                {
+                    test: () => key.length > tagKeyMaxLength,
+                    field: 'tag_key',
+                    message: t('fields_errors.tag_name_cannot_longer_than_maximum_characters', { maximum: tagKeyMaxLength }),
+                },
+            ]
+            : []),
+        ...(tagValueMaxLength != null
+            ? [
+                {
+                    test: () => value.length > tagValueMaxLength,
+                    field: 'value',
+                    message: t('fields_errors.tag_value_cannot_longer_than_maximum_characters', { maximum: tagValueMaxLength }),
+                },
+            ]
+            : []),
     ];
 };
-export const AddTagForm = ({ itemType, existingTags, overridableTags = [], addTag, }) => {
+export const AddTagForm = ({ itemType, schema, existingTags, overridableTags = [], addTag, }) => {
     const { t } = useTranslation();
     const [tagKey, setTagKey] = React.useState('');
     const [value, setValue] = React.useState('');
-    const [tagKeyIsInvalid, setTagKeyIsInvalid] = React.useState(false);
     const [error, setError] = React.useState();
     const [canSubmit, setCanSubmit] = React.useState(false);
     const [confirmationDialogOptions, setConfirmationDialogOptions] = React.useState();
@@ -45,9 +75,8 @@ export const AddTagForm = ({ itemType, existingTags, overridableTags = [], addTa
     const formId = useRandomUUID();
     const formUuid = `add-tag-form-${formId}`;
     const checkNewTagValidity = (key) => {
-        const failedRule = newTagValidationRules(t, key, existingTags).find((rule) => rule.test());
+        const failedRule = newTagValidationRules(t, schema, existingTags, key, value).find((rule) => rule.test());
         const hasErrors = !!failedRule;
-        setTagKeyIsInvalid(hasErrors);
         setError(failedRule);
         setCanSubmit(!hasErrors);
         return hasErrors;
@@ -92,7 +121,6 @@ export const AddTagForm = ({ itemType, existingTags, overridableTags = [], addTa
             });
             setTagKey('');
             setValue('');
-            setTagKeyIsInvalid(false);
             setError(undefined);
             setCanSubmit(false);
             if (tagKeyInput === null || tagKeyInput === void 0 ? void 0 : tagKeyInput.current) {
@@ -112,13 +140,13 @@ export const AddTagForm = ({ itemType, existingTags, overridableTags = [], addTa
                         }, fullWidth: true, ref: tagKeyInput, onChange: (e) => {
                             setTagKey(e.target.value);
                             checkNewTagValidity(e.target.value);
-                        }, value: tagKey, error: tagKeyIsInvalid, placeholder: t('labels.tag_name') }), _jsx(TextField, { slotProps: {
+                        }, value: tagKey, error: (error === null || error === void 0 ? void 0 : error.field) === 'tag_key', placeholder: t('labels.tag_name') }), _jsx(TextField, { slotProps: {
                             htmlInput: {
                                 form: formUuid,
                             },
                         }, fullWidth: true, ref: valueInput, onChange: (e) => {
                             setValue(e.target.value);
-                        }, value: value, placeholder: t('labels.value') }), _jsx("form", { id: formUuid, onSubmit: internalAddTag, children: _jsx(Button, { sx: {
+                        }, value: value, error: (error === null || error === void 0 ? void 0 : error.field) === 'value', placeholder: t('labels.value') }), _jsx("form", { id: formUuid, onSubmit: internalAddTag, children: _jsx(Button, { sx: {
                                 width: 120,
                             }, onClick: internalAddTag, disabled: !canSubmit, children: t('actions.add_tag') }) }), confirmationDialogOptions && (_jsx(SimpleConfirmationDialog, Object.assign({}, confirmationDialogOptions)))] }), error && _jsx(Callout, { severity: "danger", children: error.message })] }));
 };

package/dist/components/TagManagementDialog/index.d.ts

@@ -1,3 +1,4 @@
+import type { JSONSchema7 as JSONSchema } from 'json-schema';
 import type { ResourceTagSubmitInfo, SubmitInfo, TaggedResource } from './models';
 export interface TagManagementDialogProps<T> {
     /** Selected items to tag */
@@ -8,9 +9,11 @@ export interface TagManagementDialogProps<T> {
     titleField: keyof T | ((item: T) => string);
     /** Tags property in the selected item */
     tagField: keyof T;
+    /** The schema of the tag resource */
+    tagSchema?: JSONSchema;
     /** On cancel press event */
     cancel: () => void;
     /** On done press event */
     done: (tagSubmitInfo: SubmitInfo<ResourceTagSubmitInfo, ResourceTagSubmitInfo>) => void;
 }
-export declare const TagManagementDialog: <T extends TaggedResource>({ items, itemType, titleField, tagField, cancel, done, }: TagManagementDialogProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TagManagementDialog: <T extends TaggedResource>({ items, itemType, titleField, tagField, tagSchema, cancel, done, }: TagManagementDialogProps<T>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/TagManagementDialog/index.js

@@ -98,11 +98,16 @@ const PreviousTagProperty = styled(TagProperty) `
 		}
 	}
 `;
-export const TagManagementDialog = ({ items, itemType, titleField, tagField, cancel, done, }) => {
+export const TagManagementDialog = ({ items, itemType, titleField, tagField, tagSchema, cancel, done, }) => {
+    var _a;
     const { t } = useTranslation();
     const [editingTag, setEditingTag] = React.useState();
     const [tags, setTags] = React.useState();
     const [partialTags, setPartialTags] = React.useState();
+    const tagValueSchema = (_a = tagSchema === null || tagSchema === void 0 ? void 0 : tagSchema.properties) === null || _a === void 0 ? void 0 : _a.value;
+    const tagValueMaxLength = tagValueSchema != null && typeof tagValueSchema === 'object'
+        ? tagValueSchema.maxLength
+        : null;
     const tagDiffs = React.useMemo(() => getResourceTagSubmitInfo(tags !== null && tags !== void 0 ? tags : []), [tags]);
     React.useEffect(() => {
         const allTags = groupResourcesByTags(items, tagField);
@@ -191,7 +196,7 @@ export const TagManagementDialog = ({ items, itemType, titleField, tagField, can
             : toString(item[titleField]);
         return title || `(${t('no_data.no_name_set')})`;
     };
-    return (_jsxs(DialogWithCloseButton, { open: true, title: _jsxs(Stack, { children: [_jsxs(Typography, { variant: "h3", mt: 0, mb: 10, children: [items.length > 1 && _jsxs("span", { children: [t('labels.shared'), " "] }), t('labels.tags')] }), _jsx(CollectionSummary, { items: items.map(getItemTitle).sort(), itemsType: t('resource.' + itemType, { count: items.length }), maxVisibleItemCount: 10 })] }), children: [_jsxs(DialogContent, { children: [_jsx(AddTagForm, { itemType: itemType, existingTags: tags, overridableTags: partialTags, addTag: addTag, t: t }), _jsxs(Table, { children: [_jsxs(TableHead, { children: [_jsx(TableCell, {}), _jsx(TableCell, { children: t('labels.tag_name') }), _jsx(TableCell, { children: t('labels.value') }), _jsx(TableCell, {})] }), _jsx(TableBody, { children: !tags.length ? (_jsxs(TableRow, { children: [_jsx(TableCell, {}), _jsx(TableCell, { children: t(`errors.no_tags_for_selected_itemtype`, {
+    return (_jsxs(DialogWithCloseButton, { open: true, title: _jsxs(Stack, { children: [_jsxs(Typography, { variant: "h3", mt: 0, mb: 10, children: [items.length > 1 && _jsxs("span", { children: [t('labels.shared'), " "] }), t('labels.tags')] }), _jsx(CollectionSummary, { items: items.map(getItemTitle).sort(), itemsType: t('resource.' + itemType, { count: items.length }), maxVisibleItemCount: 10 })] }), children: [_jsxs(DialogContent, { children: [_jsx(AddTagForm, { itemType: itemType, schema: tagSchema, existingTags: tags, overridableTags: partialTags, addTag: addTag }), _jsxs(Table, { children: [_jsxs(TableHead, { children: [_jsx(TableCell, {}), _jsx(TableCell, { children: t('labels.tag_name') }), _jsx(TableCell, { children: t('labels.value') }), _jsx(TableCell, {})] }), _jsx(TableBody, { children: !tags.length ? (_jsxs(TableRow, { children: [_jsx(TableCell, {}), _jsx(TableCell, { children: t(`errors.no_tags_for_selected_itemtype`, {
                                                 count: items.length,
                                                 itemType,
                                             }) })] })) : (tags.map((tag) => {
@@ -216,7 +221,9 @@ export const TagManagementDialog = ({ items, itemType, titleField, tagField, can
                                                             setEditingTagValue(e.target.value);
                                                         }, onBlur: () => {
                                                             endTagEdit();
-                                                        }, value: editingTag.value, placeholder: t('labels.tag_value') }))] }), _jsx(TableCell, { children: tag.state && (_jsx(Button, { variant: "text", startIcon: _jsx(FontAwesomeIcon, { icon: faUndo }), onClick: () => {
+                                                        }, value: editingTag.value, placeholder: t('labels.tag_value'), inputProps: tagValueMaxLength != null
+                                                            ? { maxLength: tagValueMaxLength }
+                                                            : undefined }))] }), _jsx(TableCell, { children: tag.state && (_jsx(Button, { variant: "text", startIcon: _jsx(FontAwesomeIcon, { icon: faUndo }), onClick: () => {
                                                         undoTagChanges(tag);
                                                     }, sx: {
                                                         width: UndoButtonMinWidth,

package/dist/hooks/useTranslations.js

@@ -31,6 +31,8 @@ const translationMap = {
     'errors.no_tags_for_selected_itemtype_plural': 'The selected {{itemType}}s have no tags in common',
     'fields_errors.tag_name_cannot_be_empty': "The tag name can't be empty.",
     'fields_errors.tag_names_cannot_contain_whitespace': 'Tag names cannot contain whitespace',
+    'fields_errors.tag_name_cannot_longer_than_maximum_characters': `The tag name can't be longer than {{maximum}} characters.`,
+    'fields_errors.tag_value_cannot_longer_than_maximum_characters': `The tag value can't be longer than {{maximum}} characters.`,
     'fields_errors.some_tag_keys_are_reserved': 'Tag names beginning with {{namespace}} are reserved',
     'fields_errors.tag_with_same_name_exists': 'A tag with the same name already exists',
     'fields_errors.does_not_satisfy_minimum': 'Must be greater than or equal to {{minimum}}',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "14.0.3",
+  "version": "14.1.0-build-limit-field-lengths-2d063da12c2b1e3b691fc126191269d24d81aae1-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -132,7 +132,7 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-09-15T12:00:29.168Z"
+    "publishedAt": "2025-09-15T12:30:23.623Z"
   },
   "overrides": {
     "storybook": "$storybook"