From ef3cce1a0748fbf197d8a4f36d8de47fa20a9ec6 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birkbjo@gmail.com>
Date: Tue, 7 May 2024 13:43:57 +0200
Subject: [PATCH] fix(section-form): prevent crash when displayOptions are not
 present (#375)

* fix(section-form): prevent crash when displayOptions are not present

* refactor: cleanup
---
 .../section-form/displayOptions.js            | 23 +++++++++++++++++++
 src/data-workspace/section-form/section.js    | 12 +++++-----
 2 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 src/data-workspace/section-form/displayOptions.js

diff --git a/src/data-workspace/section-form/displayOptions.js b/src/data-workspace/section-form/displayOptions.js
new file mode 100644
index 000000000..f00c10b20
--- /dev/null
+++ b/src/data-workspace/section-form/displayOptions.js
@@ -0,0 +1,23 @@
+const defaultDisplayOptions = {
+    beforeSectionText: '',
+    pivotMode: 'n/a',
+    afterSectionText: '',
+    pivotCategory: null,
+}
+export const getDisplayOptions = (section) => {
+    if (!section) {
+        return defaultDisplayOptions
+    }
+
+    try {
+        const { displayOptions: displayOptionString } = section
+
+        return JSON.parse(displayOptionString)
+    } catch (e) {
+        console.error(
+            `Failed to parse displayOptions for section ${section?.displayName}(${section?.id})`,
+            e
+        )
+        return defaultDisplayOptions
+    }
+}
diff --git a/src/data-workspace/section-form/section.js b/src/data-workspace/section-form/section.js
index e7a49bae4..5d0b102d5 100644
--- a/src/data-workspace/section-form/section.js
+++ b/src/data-workspace/section-form/section.js
@@ -15,6 +15,7 @@ import { CategoryComboTableBody } from '../category-combo-table-body/index.js'
 import { PivotedCategoryComboTableBody } from '../category-combo-table-body-pivoted/index.js'
 import { getFieldId } from '../get-field-id.js'
 import { IndicatorsTableBody } from '../indicators-table-body/indicators-table-body.js'
+import { getDisplayOptions } from './displayOptions.js'
 import { SectionDescription } from './section-description.js'
 import styles from './section.module.css'
 
@@ -64,14 +65,13 @@ export function SectionFormSection({ section, dataSetId, globalFilterText }) {
     const filterInputId = `filter-input-${section.id}`
     const headerCellStyles = classNames(styles.headerCell, styles.hideForPrint)
 
-    const { displayOptions: displayOptionString } = section
-    const displayOptions = JSON.parse(displayOptionString)
+    const displayOptions = getDisplayOptions(section)
 
     const isPivotMode =
-        displayOptions.pivotMode === 'move_categories' ||
-        displayOptions.pivotMode === 'pivot'
+        displayOptions?.pivotMode === 'move_categories' ||
+        displayOptions?.pivotMode === 'pivot'
 
-    const TableComponet = isPivotMode
+    const TableComponent = isPivotMode
         ? PivotedCategoryComboTableBody
         : CategoryComboTableBody
 
@@ -129,7 +129,7 @@ export function SectionFormSection({ section, dataSetId, globalFilterText }) {
                 </TableHead>
                 {groupedDataElements.map(
                     ({ categoryCombo, dataElements }, i) => (
-                        <TableComponet
+                        <TableComponent
                             key={i} //if disableDataElementAutoGroup then duplicate catCombo-ids, so have to use index
                             categoryCombo={categoryCombo}
                             dataElements={dataElements}