fix: replace standalone indicators custom forms [DHIS2-21607]

src/data-workspace/custom-form/custom-form-indicator-cell.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { IndicatorTableCell } from '../indicators-table-body/indicator-table-cell.jsx'
+
+export const CustomFormIndicatorCell = ({ indicatorId, metadata }) => {
+    const {
+        denominator,
+        numerator,
+        indicatorType: { factor },
+        decimals,
+    } = metadata.indicators[indicatorId]
+
+    return (
+        <IndicatorTableCell
+            denominator={denominator}
+            numerator={numerator}
+            factor={factor}
+            decimals={decimals}
+        />
+    )
+}
+CustomFormIndicatorCell.propTypes = {
+    indicatorId: PropTypes.string.isRequired,
+    metadata: PropTypes.object.isRequired,
+}
+
+export const replaceIndicatorCell = (indicatorId, metadata) => (
+    <CustomFormIndicatorCell indicatorId={indicatorId} metadata={metadata} />
+)

src/data-workspace/custom-form/custom-form-total-cell.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { useState, useEffect } from 'react'
+import React, { useMemo, useState, useEffect } from 'react'
 import { useValueStore } from '../../shared/index.js'
 import { TotalCell } from '../category-combo-table-body/total-cells.jsx'
 
@@ -18,7 +18,10 @@ const computeTotalValues = (dataElementValues) => {
 
 export const CustomFormTotalCell = ({ dataElementId }) => {
     const dataValues = useValueStore((state) => state.getDataValues())
-    const dataElementValues = dataValues?.[dataElementId] || {}
+    const dataElementValues = useMemo(
+        () => dataValues?.[dataElementId] || {},
+        [dataValues, dataElementId]
+    )
 
     const [total, setTotal] = useState(() =>
         computeTotalValues(dataElementValues)

src/data-workspace/custom-form/parse-html-to-react.test.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { DataEntryField } from '../data-entry-cell/index.js'
+import { CustomFormIndicatorCell } from './custom-form-indicator-cell.jsx'
 import { CustomFormTotalCell } from './custom-form-total-cell.jsx'
 import { parseHtmlToReact } from './parse-html-to-react.jsx'
 
@@ -24,6 +25,50 @@ describe('parseHtmlToReact', () => {
             </div>
         )
     })
+    it('replaces indicator cells inside td elements', () => {
+        const htmlCode =
+            "<td><input id='indicatorRANDOMuid01' name='indicator' indicatorid='RANDOMuid01'/></td>"
+        const metadata = {
+            indicators: {
+                RANDOMuid01: {
+                    indicatorType: { factor: 1 },
+                    numerator: 'numerator',
+                    denominator: 'denominator',
+                    decimals: 2,
+                },
+            },
+        }
+        const result = parseHtmlToReact(htmlCode, metadata)
+        expect(result).toEqual(
+            <CustomFormIndicatorCell
+                indicatorId="RANDOMuid01"
+                metadata={metadata}
+            />
+        )
+    })
+    it('replaces indicator cells outside of elements', () => {
+        const htmlCode =
+            "<div><input id='indicatorRANDOMuid01' name='indicator' indicatorid='RANDOMuid01'/></div>"
+        const metadata = {
+            indicators: {
+                RANDOMuid01: {
+                    indicatorType: { factor: 1 },
+                    numerator: 'numerator',
+                    denominator: 'denominator',
+                    decimals: 2,
+                },
+            },
+        }
+        const result = parseHtmlToReact(htmlCode, metadata)
+        expect(result).toEqual(
+            <div>
+                <CustomFormIndicatorCell
+                    indicatorId="RANDOMuid01"
+                    metadata={metadata}
+                />
+            </div>
+        )
+    })
 
     it('uses disabled entry field when input has disabled attribute', () => {
         const htmlCode =

src/data-workspace/custom-form/replace-input-node.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { selectors } from '../../shared/index.js'
 import { DataEntryField } from '../data-entry-cell/index.js'
+import { replaceIndicatorCell } from './custom-form-indicator-cell.jsx'
 import { replaceTotalCell } from './custom-form-total-cell.jsx'
 
 const INPUT_TYPES = {
@@ -34,6 +35,10 @@ export const replaceInputNode = (domNode, metadata) => {
         return replaceTotalCell(domNode.attribs.dataelementid)
     }
 
+    if (inputType === INPUT_TYPES.INDICATOR) {
+        return replaceIndicatorCell(domNode.attribs.indicatorid, metadata)
+    }
+
     if (inputType !== INPUT_TYPES.ENTRYFIELD) {
         return undefined
     }

src/data-workspace/custom-form/replace-td-node.jsx

@@ -1,26 +1,8 @@
 import { attributesToProps } from 'html-react-parser'
 import React from 'react'
-import { IndicatorTableCell } from '../indicators-table-body/indicator-table-cell.jsx'
+import { replaceIndicatorCell } from './custom-form-indicator-cell.jsx'
 import { replaceTotalCell } from './custom-form-total-cell.jsx'
 
-const replaceIndicatorCell = (indicatorId, metadata) => {
-    const {
-        denominator,
-        numerator,
-        indicatorType: { factor },
-        decimals,
-    } = metadata.indicators[indicatorId]
-
-    return (
-        <IndicatorTableCell
-            denominator={denominator}
-            numerator={numerator}
-            factor={factor}
-            decimals={decimals}
-        />
-    )
-}
-
 const replaceTextCell = (domNode) => {
     const cleanedText = domNode.children[0].nodeValue.trim()
     const props = attributesToProps(domNode.attribs)