refactor: implement helper fn for rendering expressions

This handles the ERROR case, showing the error message from the API.
dhis2 · Nov 29, 2024 · 8416879 · 8416879
1 parent 371e80a
commit 8416879
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 37 deletions.
diff --git a/src/components/DataDimension/Info/CalculationInfo.js b/src/components/DataDimension/Info/CalculationInfo.js
@@ -3,7 +3,11 @@ import PropTypes from 'prop-types'
 import React, { useCallback, useEffect, useState } from 'react'
 import { validateIndicatorExpressionMutation } from '../../../api/expression.js'
 import i18n from '../../../locales/index.js'
-import { getCommonFields, InfoTable } from './InfoTable.js'
+import {
+    getCommonFields,
+    renderHumanReadableExpression,
+    InfoTable,
+} from './InfoTable.js'
 import styles from './styles/InfoPopover.style.js'
 
 const calculationQuery = {
@@ -40,8 +44,8 @@ export const CalculationInfo = ({ id, displayNameProp }) => {
                 expression: calculation.expression,
             })
 
-            if (result?.description) {
-                calculation.humanReadableExpression = result.description
+            if (result) {
+                calculation.humanReadableExpression = result
             }
         }
 
@@ -66,9 +70,9 @@ export const CalculationInfo = ({ id, displayNameProp }) => {
                     <th>{i18n.t('Expression description')}</th>
                     <td>
                         {data?.calculation.humanReadableExpression ? (
-                            <span className="code">
-                                {data.calculation.humanReadableExpression}
-                            </span>
+                            renderHumanReadableExpression(
+                                data.calculation.humanReadableExpression
+                            )
                         ) : (
                             <span className="none">{i18n.t('None')}</span>
                         )}

diff --git a/src/components/DataDimension/Info/IndicatorInfo.js b/src/components/DataDimension/Info/IndicatorInfo.js
@@ -3,7 +3,11 @@ import PropTypes from 'prop-types'
 import React, { useCallback, useEffect, useState } from 'react'
 import { validateIndicatorExpressionMutation } from '../../../api/expression.js'
 import i18n from '../../../locales/index.js'
-import { getCommonFields, InfoTable } from './InfoTable.js'
+import {
+    getCommonFields,
+    renderHumanReadableExpression,
+    InfoTable,
+} from './InfoTable.js'
 import styles from './styles/InfoPopover.style.js'
 
 const indicatorQuery = {
@@ -40,9 +44,8 @@ export const IndicatorInfo = ({ id, displayNameProp }) => {
                 expression: indicator.denominator,
             })
 
-            if (result?.description) {
-                indicator.humanReadableDenominatorExpression =
-                    result.description
+            if (result) {
+                indicator.humanReadableDenominatorExpression = result
             }
         }
 
@@ -51,8 +54,8 @@ export const IndicatorInfo = ({ id, displayNameProp }) => {
                 expression: indicator.numerator,
             })
 
-            if (result?.description) {
-                indicator.humanReadableNumeratorExpression = result.description
+            if (result) {
+                indicator.humanReadableNumeratorExpression = result
             }
         }
 
@@ -69,37 +72,44 @@ export const IndicatorInfo = ({ id, displayNameProp }) => {
             <InfoTable data={data?.indicator} loading={loading} error={error}>
                 <tr>
                     <th>{i18n.t('Numerator description')}</th>
-                    <td>{data?.indicator.displayNumeratorDescription}</td>
+                    <td>
+                        {data?.indicator.displayNumeratorDescription ? (
+                            data.indicator.displayNumeratorDescription
+                        ) : (
+                            <span className="none">{i18n.t('None')}</span>
+                        )}
+                    </td>
                 </tr>
                 <tr>
                     <th>{i18n.t('Numerator expression')}</th>
                     <td>
                         {data?.indicator.humanReadableNumeratorExpression ? (
-                            <span className="code">
-                                {
-                                    data.indicator
-                                        .humanReadableNumeratorExpression
-                                }
-                            </span>
+                            renderHumanReadableExpression(
+                                data.indicator.humanReadableNumeratorExpression
+                            )
                         ) : (
                             <span className="none">{i18n.t('None')}</span>
                         )}
                     </td>
                 </tr>
                 <tr>
                     <th>{i18n.t('Denominator description')}</th>
-                    <td>{data?.indicator.displayDenominatorDescription}</td>
+                    <td>
+                        {data?.indicator.displayDenominatorDescription ? (
+                            data.indicator.displayDenominatorDescription
+                        ) : (
+                            <span className="none">{i18n.t('None')}</span>
+                        )}
+                    </td>
                 </tr>
                 <tr>
                     <th>{i18n.t('Denominator expression')}</th>
                     <td>
                         {data?.indicator.humanReadableDenominatorExpression ? (
-                            <span className="code">
-                                {
-                                    data.indicator
-                                        .humanReadableDenominatorExpression
-                                }
-                            </span>
+                            renderHumanReadableExpression(
+                                data.indicator
+                                    .humanReadableDenominatorExpression
+                            )
                         ) : (
                             <span className="none">{i18n.t('None')}</span>
                         )}

diff --git a/src/components/DataDimension/Info/InfoTable.js b/src/components/DataDimension/Info/InfoTable.js
@@ -15,6 +15,17 @@ export const capitalizeText = (text) =>
 export const sentenceCaseText = (text) =>
     text && capitalizeText(text.replaceAll('_', ' ').toLowerCase())
 
+export const renderHumanReadableExpression = (expressionData) => (
+    <>
+        {expressionData.status === 'ERROR' ? (
+            <span className="none">{expressionData.message}</span>
+        ) : (
+            <span className="code">{expressionData.description}</span>
+        )}
+        <style jsx>{styles}</style>
+    </>
+)
+
 export const InfoTable = ({ data, error, loading, children }) => {
     const { fromServerDate } = useTimeZoneConversion()
 

diff --git a/src/components/DataDimension/Info/ProgramIndicatorInfo.js b/src/components/DataDimension/Info/ProgramIndicatorInfo.js
@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import React, { useCallback, useEffect, useState } from 'react'
 import { validateProgramIndicatorExpressionMutation } from '../../../api/expression.js'
 import i18n from '../../../locales/index.js'
-import { getCommonFields, sentenceCaseText, InfoTable } from './InfoTable.js'
+import {
+    getCommonFields,
+    renderHumanReadableExpression,
+    sentenceCaseText,
+    InfoTable,
+} from './InfoTable.js'
 import styles from './styles/InfoPopover.style.js'
 
 const dataElementQuery = {
@@ -62,8 +67,8 @@ export const ProgramIndicatorInfo = ({ id, displayNameProp }) => {
                 expression: programIndicator.expression,
             })
 
-            if (result?.description) {
-                programIndicator.humanReadableExpression = result.description
+            if (result) {
+                programIndicator.humanReadableExpression = result
             }
         }
 
@@ -72,8 +77,8 @@ export const ProgramIndicatorInfo = ({ id, displayNameProp }) => {
                 expression: programIndicator.filter,
             })
 
-            if (result?.description) {
-                programIndicator.humanReadableFilter = result.description
+            if (result) {
+                programIndicator.humanReadableFilter = result
             }
         }
 
@@ -219,9 +224,9 @@ export const ProgramIndicatorInfo = ({ id, displayNameProp }) => {
                     <th>{i18n.t('Expression')}</th>
                     <td>
                         {data?.programIndicator.humanReadableExpression ? (
-                            <span className="code">
-                                {data.programIndicator.humanReadableExpression}
-                            </span>
+                            renderHumanReadableExpression(
+                                data.programIndicator.humanReadableExpression
+                            )
                         ) : (
                             <span className="none">{i18n.t('None')}</span>
                         )}
@@ -231,9 +236,9 @@ export const ProgramIndicatorInfo = ({ id, displayNameProp }) => {
                     <th>{i18n.t('Filter')}</th>
                     <td>
                         {data?.programIndicator.humanReadableFilter ? (
-                            <span className="code">
-                                {data.programIndicator.humanReadableFilter}
-                            </span>
+                            renderHumanReadableExpression(
+                                data.programIndicator.humanReadableFilter
+                            )
                         ) : (
                             <span className="none">{i18n.t('None')}</span>
                         )}