From f0d637425947aa209fa278d15e91a79d33e2c144 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 19 Nov 2024 10:15:34 +0100
Subject: [PATCH] fix: info popover style and content adjustments
---
.../DataDimension/Info/CalculationInfo.js | 9 +-
.../DataDimension/Info/DataSetInfo.js | 38 ++++----
.../DataDimension/Info/IndicatorInfo.js | 72 +++++++++------
.../DataDimension/Info/InfoTable.js | 24 ++++-
.../Info/ProgramIndicatorInfo.js | 87 +++++++++++--------
.../Info/styles/InfoPopover.style.js | 44 ++++++++--
6 files changed, 187 insertions(+), 87 deletions(-)
diff --git a/src/components/DataDimension/Info/CalculationInfo.js b/src/components/DataDimension/Info/CalculationInfo.js
index 444b348d6..da2a8373b 100644
--- a/src/components/DataDimension/Info/CalculationInfo.js
+++ b/src/components/DataDimension/Info/CalculationInfo.js
@@ -57,8 +57,13 @@ export const CalculationInfo = ({ id, displayNameProp }) => {
| {i18n.t('Expression description')} |
- {data?.calculation.humanReadableExpression ||
- i18n.t('None')}
+ {data?.calculation.humanReadableExpression ? (
+
+ {data.calculation.humanReadableExpression}
+
+ ) : (
+ {i18n.t('None')}
+ )}
|
diff --git a/src/components/DataDimension/Info/DataSetInfo.js b/src/components/DataDimension/Info/DataSetInfo.js
index 74728f83e..ebcf7bcc6 100644
--- a/src/components/DataDimension/Info/DataSetInfo.js
+++ b/src/components/DataDimension/Info/DataSetInfo.js
@@ -36,15 +36,17 @@ export const DataSetInfo = ({ id, displayNameProp }) => {
data.dataSet.dataSetElements[0].dataElement
.displayName
) : (
-
- {data?.dataSet.dataSetElements.map(
- ({ dataElement }) => (
- -
- {dataElement.displayName}
-
- )
- )}
-
+
+
+ {data?.dataSet.dataSetElements.map(
+ ({ dataElement }) => (
+ -
+ {dataElement.displayName}
+
+ )
+ )}
+
+
{data?.dataSet.indicators.length === 1 ? (
data.dataSet.indicators[0].displayName
+ ) : data?.dataSet.indicators.length > 1 ? (
+
+
+ {data.dataSet.indicators.map(
+ ({ id, displayName }) => (
+ - {displayName}
+ )
+ )}
+
+
- {data?.dataSet.indicators.map(
- ({ id, displayName }) => (
- - {displayName}
- )
- )}
-
+ {i18n.t('None')}
)}
|
diff --git a/src/components/DataDimension/Info/IndicatorInfo.js b/src/components/DataDimension/Info/IndicatorInfo.js
index a0fc4f34c..8a9842132 100644
--- a/src/components/DataDimension/Info/IndicatorInfo.js
+++ b/src/components/DataDimension/Info/IndicatorInfo.js
@@ -74,8 +74,16 @@ export const IndicatorInfo = ({ id, displayNameProp }) => {
| {i18n.t('Numerator expression')} |
- {data?.indicator.humanReadableNumeratorExpression ||
- i18n.t('None')}
+ {data?.indicator.humanReadableNumeratorExpression ? (
+
+ {
+ data.indicator
+ .humanReadableNumeratorExpression
+ }
+
+ ) : (
+ {i18n.t('None')}
+ )}
|
@@ -85,8 +93,16 @@ export const IndicatorInfo = ({ id, displayNameProp }) => {
| {i18n.t('Denominator expression')} |
- {data?.indicator.humanReadableDenominatorExpression ||
- i18n.t('None')}
+ {data?.indicator.humanReadableDenominatorExpression ? (
+
+ {
+ data.indicator
+ .humanReadableDenominatorExpression
+ }
+
+ ) : (
+ {i18n.t('None')}
+ )}
|
@@ -114,13 +130,15 @@ export const IndicatorInfo = ({ id, displayNameProp }) => {
{data.indicator.dataSets.length === 1 ? (
data.indicator.dataSets[0].displayName
) : (
-
- {data.indicator.dataSets.map(
- ({ id, displayName }) => (
- - {displayName}
- )
- )}
-
+
+
+ {data.indicator.dataSets.map(
+ ({ id, displayName }) => (
+ - {displayName}
+ )
+ )}
+
+
@@ -131,13 +149,15 @@ export const IndicatorInfo = ({ id, displayNameProp }) => {
{data?.indicator.indicatorGroups.length === 1 ? (
data.indicator.indicatorGroups[0].displayName
) : (
-
- {data?.indicator.indicatorGroups.map(
- ({ id, displayName }) => (
- - {displayName}
- )
- )}
-
+
+
+ {data?.indicator.indicatorGroups.map(
+ ({ id, displayName }) => (
+ - {displayName}
+ )
+ )}
+
+
- {data.indicator.legendSets.map(
- ({ id, displayName }) => (
- - {displayName}
- )
- )}
-
+
+
+ {data.indicator.legendSets.map(
+ ({ id, displayName }) => (
+ - {displayName}
+ )
+ )}
+
+
| {i18n.t('Description')} |
- {data.displayDescription || i18n.t('None')}
+ {data.displayDescription ? (
+
+ {data.displayDescription}
+
+ ) : (
+
+ {i18n.t('None')}
+
+ )}
|
| {i18n.t('Code')} |
- {data.code} |
+
+ {data.code ? (
+ data.code
+ ) : (
+
+ {i18n.t('None')}
+
+ )}
+ |
| {i18n.t('ID')} |
- {data.id} |
+
+ {data.id}
+ |
| {i18n.t('Last updated date')} |
diff --git a/src/components/DataDimension/Info/ProgramIndicatorInfo.js b/src/components/DataDimension/Info/ProgramIndicatorInfo.js
index 5eb3bc101..853a1599f 100644
--- a/src/components/DataDimension/Info/ProgramIndicatorInfo.js
+++ b/src/components/DataDimension/Info/ProgramIndicatorInfo.js
@@ -87,45 +87,58 @@ export const ProgramIndicatorInfo = ({ id, displayNameProp }) => {
| {i18n.t('Analytics period boundaries')} |
-
- {data?.programIndicator.analyticsPeriodBoundaries.map(
- ({
- analyticsPeriodBoundaryType,
- boundaryTarget,
- id,
- offsetPeriodType,
- offsetPeriods,
- }) => (
- -
- {`${i18n.t(
- 'Type'
- )}: ${analyticsPeriodBoundaryType}`}
- {`${i18n.t(
- 'Target'
- )}: ${boundaryTarget}`}
- {offsetPeriods && offsetPeriodType && (
+
+
+ {data?.programIndicator.analyticsPeriodBoundaries.map(
+ ({
+ analyticsPeriodBoundaryType,
+ boundaryTarget,
+ id,
+ offsetPeriodType,
+ offsetPeriods,
+ }) => (
+ -
{`${i18n.t(
- 'Offset'
- )}: ${offsetPeriodType} x ${offsetPeriods}`}
- )}
-
- )
- )}
-
+ 'Type'
+ )}: ${analyticsPeriodBoundaryType}`}
+ {`${i18n.t(
+ 'Target'
+ )}: ${boundaryTarget}`}
+ {offsetPeriods &&
+ offsetPeriodType && (
+ {`${i18n.t(
+ 'Offset'
+ )}: ${offsetPeriodType} x ${offsetPeriods}`}
+ )}
+
+ )
+ )}
+
+ |
| {i18n.t('Expression')} |
- {data?.programIndicator.humanReadableExpression ||
- i18n.t('None')}
+ {data?.programIndicator.humanReadableExpression ? (
+
+ {data.programIndicator.humanReadableExpression}
+
+ ) : (
+ {i18n.t('None')}
+ )}
|
- | {i18n.t('Filter expression')} |
+ {i18n.t('Filter')} |
- {data?.programIndicator.humanReadableFilter ||
- i18n.t('None')}
+ {data?.programIndicator.humanReadableFilter ? (
+
+ {data.programIndicator.humanReadableFilter}
+
+ ) : (
+ {i18n.t('None')}
+ )}
|
@@ -145,13 +158,15 @@ export const ProgramIndicatorInfo = ({ id, displayNameProp }) => {
{data.programIndicator.legendSets.length === 1 ? (
data.programIndicator.legendSets[0].displayName
) : (
-
- {data.programIndicator.legendSets.map(
- ({ id, displayName }) => (
- - {displayName}
- )
- )}
-
+
+
+ {data.programIndicator.legendSets.map(
+ ({ id, displayName }) => (
+ - {displayName}
+ )
+ )}
+
+
diff --git a/src/components/DataDimension/Info/styles/InfoPopover.style.js b/src/components/DataDimension/Info/styles/InfoPopover.style.js
index be8e1c54f..fd0d486e1 100644
--- a/src/components/DataDimension/Info/styles/InfoPopover.style.js
+++ b/src/components/DataDimension/Info/styles/InfoPopover.style.js
@@ -18,23 +18,57 @@ export default css`
width: 100%;
border-collapse: collapse;
font-size: 13px;
+ line-height: 17px;
margin: ${spacers.dp4} 0 0 0;
color: ${colors.grey900};
}
.data-table th {
text-align: left;
font-weight: 500;
- padding: 6px 0 0 12px;
+ padding: 8px 0 8px 12px;
width: 128px;
- vertical-align: baseline;
+ vertical-align: top;
}
.data-table td {
- padding: 6px 4px 6px 8px;
+ padding: 8px 4px 8px 16px;
+ vertical-align: top;
}
- .data-table .code {
- font-family: monospace;
+ .data-table .content-wrap {
+ max-height: 240px;
+ overflow-y: auto;
}
.data-table tr:hover {
background: ${colors.grey100};
}
+
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style: inside;
+ }
+ li + li {
+ margin: ${spacers.dp4} 0 0 0;
+ }
+
+ details ul {
+ margin: ${spacers.dp4} 0 0 ${spacers.dp16};
+ }
+
+ .data-table .code {
+ font-size: 11px;
+ line-height: 15px;
+ display: inline-block;
+ border-radius: 2px;
+ background-color: ${colors.grey200};
+ // Use outline to give illusion of padding while keeping text aligned vertically with other values
+ outline: 3px solid ${colors.grey200};
+ color: ${colors.grey900};
+ font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo,
+ Consolas, 'DejaVu Sans Mono', monospace;
+ font-weight: normal;
+ }
+
+ .data-table .none {
+ color: ${colors.grey600};
+ }
`