Fix: truncate attribute plainText (#5225)

* Truncate attribute plainText

* add changeset

* extract messages

* refactor: improve message

.changeset/light-squids-shave.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+The value of attribute type `plainText` is now capped. This prevents the UI from freezing when the value is very large.

locale/defaultMessages.json

@@ -1779,6 +1779,10 @@
   "A+g/VP": {
     "string": "Unsaved preset"
   },
+  "A02NDR": {
+    "context": "plain text attribute value was truncated",
+    "string": "Attribute value too long and truncated at {length} characters."
+  },
   "A0Wlg7": {
     "context": "product discount removed title",
     "string": "{productName} discount was removed by"

src/attributes/components/AttributeDetails/messages.tsx

@@ -56,6 +56,11 @@ export const messages = defineMessages({
 });
 
 export const inputTypeMessages = defineMessages({
+  plainTextTruncated: {
+    id: "A02NDR",
+    defaultMessage: "Attribute value too long and truncated at {length} characters.",
+    description: "plain text attribute value was truncated",
+  },
   dropdown: {
     id: "bZksto",
     defaultMessage: "Dropdown",

src/components/Attributes/AttributeRow.tsx

@@ -14,6 +14,7 @@ import {
   getReferenceDisplayValue,
   getSingleChoices,
   getSingleDisplayValue,
+  getTruncatedTextValue,
 } from "@dashboard/components/Attributes/utils";
 import FileUploadField from "@dashboard/components/FileUploadField";
 import RichTextEditor from "@dashboard/components/RichTextEditor";
@@ -130,26 +131,38 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
           fetchMoreAttributeValues={fetchMoreAttributeValues}
         />
       );
-    case AttributeInputTypeEnum.PLAIN_TEXT:
+    case AttributeInputTypeEnum.PLAIN_TEXT: {
+      const MAX_LENGTH = 255;
+      const isTooLong = attribute.value[0]?.length > MAX_LENGTH;
+
+      const value = getTruncatedTextValue(attribute.value[0], MAX_LENGTH);
+
       return (
         <BasicAttributeRow
           label={attribute.label}
           description={intl.formatMessage(inputTypeMessages.plainText)}
         >
           <Input
-            disabled={disabled}
+            disabled={isTooLong || disabled}
             error={!!error}
             label=""
             name={`attribute:${attribute.label}`}
             onChange={event => onChange(attribute.id, event.target.value)}
             type="text"
-            value={attribute.value[0]}
+            value={value}
             size="small"
             id={`attribute:${attribute.label}`}
-            helperText={getErrorMessage(error, intl)}
+            helperText={
+              isTooLong
+                ? intl.formatMessage(inputTypeMessages.plainTextTruncated, {
+                    length: MAX_LENGTH,
+                  })
+                : getErrorMessage(error, intl)
+            }
           />
         </BasicAttributeRow>
       );
+    }
     case AttributeInputTypeEnum.RICH_TEXT: {
       const { getShouldMount, getDefaultValue, getMountEditor, getHandleChange } = richTextGetters;
       const defaultValue = getDefaultValue(attribute.id);

src/components/Attributes/utils.test.ts

@@ -0,0 +1,19 @@
+import { getTruncatedTextValue } from "./utils";
+
+describe("getTruncatedTextValue", () => {
+  it("should truncate the value if it is longer than the specified length", () => {
+    expect(getTruncatedTextValue("Hello, world!", 5)).toBe("Hello...");
+  });
+
+  it("should return the value if it is shorter than the specified length", () => {
+    expect(getTruncatedTextValue("Hello", 10)).toBe("Hello");
+  });
+
+  it("should return the value if it is exactly the specified length", () => {
+    expect(getTruncatedTextValue("Hello", 5)).toBe("Hello");
+  });
+
+  it("should return the value if it is empty", () => {
+    expect(getTruncatedTextValue("", 5)).toBe("");
+  });
+});

src/components/Attributes/utils.ts

@@ -183,3 +183,7 @@ export function getBooleanDropdownOptions(intl: IntlShape) {
     },
   ];
 }
+
+export function getTruncatedTextValue(value: string, length: number) {
+  return value.length > length ? value.slice(0, length) + "..." : value;
+}