diff --git a/changes/issue-7196-label-name-description-char-limit b/changes/issue-7196-label-name-description-char-limit new file mode 100644 index 0000000000..473c75d257 --- /dev/null +++ b/changes/issue-7196-label-name-description-char-limit @@ -0,0 +1 @@ +* Fleet UI: Show user errors for creating/editing a label with a label name or label description that is too long \ No newline at end of file diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx index 4c9cfd037d..2101256122 100644 --- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx +++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx @@ -984,6 +984,22 @@ const ManageHostsPage = ({ setLabelValidator({ name: "A label with this name already exists", }); + } else if ( + updateError.data.errors[0].reason.includes( + "Data too long for column 'name'" + ) + ) { + setLabelValidator({ + name: "Label name is too long", + }); + } else if ( + updateError.data.errors[0].reason.includes( + "Data too long for column 'description'" + ) + ) { + setLabelValidator({ + description: "Label description is too long", + }); } else { renderFlash("error", "Could not create label. Please try again."); } @@ -1011,6 +1027,22 @@ const ManageHostsPage = ({ setLabelValidator({ name: "A label with this name already exists", }); + } else if ( + updateError.data.errors[0].reason.includes( + "Data too long for column 'name'" + ) + ) { + setLabelValidator({ + name: "Label name is too long", + }); + } else if ( + updateError.data.errors[0].reason.includes( + "Data too long for column 'description'" + ) + ) { + setLabelValidator({ + description: "Label description is too long", + }); } else { renderFlash("error", "Could not create label. Please try again."); } diff --git a/frontend/pages/hosts/ManageHostsPage/components/LabelForm/LabelForm.tsx b/frontend/pages/hosts/ManageHostsPage/components/LabelForm/LabelForm.tsx index 3ff458cbed..ab4fd12533 100644 --- a/frontend/pages/hosts/ManageHostsPage/components/LabelForm/LabelForm.tsx +++ b/frontend/pages/hosts/ManageHostsPage/components/LabelForm/LabelForm.tsx @@ -66,6 +66,7 @@ const LabelForm = ({ const [description, setDescription] = useState( selectedLabel?.description || "" ); + const [descriptionError, setDescriptionError] = useState(""); const [query, setQuery] = useState(selectedLabel?.query || ""); const [queryError, setQueryError] = useState(""); const [platform, setPlatform] = useState( @@ -88,6 +89,7 @@ const LabelForm = ({ useEffect(() => { setNameError(backendValidators.name); + setDescriptionError(backendValidators.description); }, [backendValidators]); useEffect(() => { @@ -206,6 +208,7 @@ const LabelForm = ({ placeholder="Label name" />