From aa3c70be929387548e3779e1a627a42c432f40ee Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 26 Aug 2022 07:55:21 -0700
Subject: [PATCH] Fleet UI: Label errors (#7406)

---
 ...sue-7196-label-name-description-char-limit |  1 +
 .../hosts/ManageHostsPage/ManageHostsPage.tsx | 32 +++++++++++++++++++
 .../components/LabelForm/LabelForm.tsx        |  3 ++
 3 files changed, 36 insertions(+)
 create mode 100644 changes/issue-7196-label-name-description-char-limit

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<string>(
     selectedLabel?.description || ""
   );
+  const [descriptionError, setDescriptionError] = useState<string>("");
   const [query, setQuery] = useState<string>(selectedLabel?.query || "");
   const [queryError, setQueryError] = useState<string>("");
   const [platform, setPlatform] = useState<string>(
@@ -88,6 +89,7 @@ const LabelForm = ({
 
   useEffect(() => {
     setNameError(backendValidators.name);
+    setDescriptionError(backendValidators.description);
   }, [backendValidators]);
 
   useEffect(() => {
@@ -206,6 +208,7 @@ const LabelForm = ({
         placeholder="Label name"
       />
       <InputField
+        error={descriptionError}
         name="description"
         onChange={onDescriptionChange}
         value={description}