Fix product list crash when description contains empty object, remove…

… html tags and   (#4887)

* Improve description in product datagrid

* Add changeset

* Fix typo

* Remove comment

* Cut too long description

.changeset/loud-rice-hug.md

@@ -0,0 +1,6 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix product list crash when description contains empty object
+Improve description by removing html tags and  

src/products/components/ProductListDatagrid/datagrid.test.ts

@@ -8,14 +8,42 @@ describe("getDescriptionValue", () => {
       ),
     ).toBe("description");
   });
+
   it("should return empty string when no description data", () => {
     expect(getDescriptionValue('{"blocks": [{"data": {}, "type": "paragraph"}]}')).toBe("");
   });
-  it("should return empty string when description contains &nbsp", () => {
+
+  it("should replace all   with empty string", () => {
+    expect(
+      getDescriptionValue(
+        '{"time": 1637142885936, "blocks": [{"data": {"text": "    description  "}, "type": "paragraph"}], "version": "2.20.0"}',
+      ),
+    ).toBe("description");
+  });
+
+  it("should replace all html tags with empty string", () => {
+    expect(
+      getDescriptionValue(
+        '{"time": 1637142885936, "blocks": [{"data": {"text": "<b><a href=http://fooflw.pl>Link</a><i> description</i></b>"}, "type": "paragraph"}], "version": "2.20.0"}',
+      ),
+    ).toBe("Link description");
+  });
+
+  it("should omit blocks with empty text", () => {
+    expect(
+      getDescriptionValue(
+        '{"time": 1634014163888, "blocks": [{"data": {"text": ""}, "type": "heading"},{"data": {"text": ""}, "type": "paragraph"},{"data": {"text": "description"}, "type": "paragraph"}], "version": "2.20.0"}',
+      ),
+    ).toBe("description");
+  });
+
+  it("should cut description when too long", () => {
     expect(
       getDescriptionValue(
-        '{"time": 1637142885936, "blocks": [{"data": {"text": "&nbsp;"}, "type": "paragraph"}], "version": "2.20.0"}',
+        '{"time": 1634014163888, "blocks": [{"data": {"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, nisi sed dapibus eleifend, nisl tellus tempor mi, tristique pretium."}, "type": "heading"},{"data": {"text": ""}, "type": "paragraph"},{"data": {"text": "description"}, "type": "paragraph"}], "version": "2.20.0"}',
       ),
-    ).toBe("");
+    ).toBe(
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, nisi sed dapibus eleifend, nisl ...",
+    );
   });
 });

src/products/components/ProductListDatagrid/datagrid.ts

@@ -366,18 +366,43 @@ function getAttributeCellContent(
   return readonlyTextCell("");
 }
 
+const MAX_DESCRIPTION_LENGHT = 100;
+
 export function getDescriptionValue(value: string) {
-  const parsed = JSON.parse(value);
+  try {
+    const parsed = JSON.parse(value);
+
+    if (parsed) {
+      const descriptionFirstParagraph = findFirstBlockWithText(parsed?.blocks);
 
-  if (parsed) {
-    const descriptionFirstParagraph = parsed?.blocks.find(block => block.type === "paragraph");
+      if (descriptionFirstParagraph) {
+        const description = (descriptionFirstParagraph.data?.text ?? "")
+          // Regular expression to identify HTML tags in
+          // the input string. Replacing the identified
+          // HTML tag with a null string.
+          .replace(/(<([^>]+)>)/gi, "")
+          .replace(/&nbsp;/g, "");
 
-    if (descriptionFirstParagraph) {
-      return (descriptionFirstParagraph.data?.text ?? "").replace("&nbsp;", "");
+        if (description.length > MAX_DESCRIPTION_LENGHT) {
+          return description.slice(0, MAX_DESCRIPTION_LENGHT) + "...";
+        }
+
+        return description;
+      }
     }
+
+    return "";
+  } catch (e) {
+    return "";
+  }
+}
+
+function findFirstBlockWithText(blocks?: Array<{ id: string; data: { text: string } }>) {
+  if (!blocks) {
+    return undefined;
   }
 
-  return "";
+  return blocks.find(block => block?.data?.text?.length > 0);
 }
 
 export function getColumnMetadata(column: string) {