fix: refactor - expandable run summary

src/pages/data-integrity/details/CheckDetails.js

@@ -62,17 +62,6 @@ CheckDetails.propTypes = {
     check: checkProps,
 }
 
-export const DetailsHeader = ({ name, description }) => {
-    return (
-        <header>
-            <h2>{name}</h2>
-            <p>{description}</p>
-        </header>
-    )
-}
-
-DetailsHeader.propTypes = {}
-
 const DetailsError = () => {
     return (
         <Notice status="error">

src/pages/data-integrity/details/CheckDetails.module.css

@@ -7,6 +7,7 @@
     flex-direction: column;
     gap: var(--spacers-dp12);
 }
+
 .checkInfo header button {
     flex-shrink: 0;
     flex-grow: 0;
@@ -30,6 +31,7 @@
     display: flex;
     gap: 80px;
 }
+
 .keyInfo {
     display: flex;
     flex-direction: column;
@@ -90,7 +92,10 @@
 }
 
 .runCompletedWrapper {
-    padding: 16px 0px 8px 0px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacers-dp8);
+    padding: var(--spacers-dp16) 0px var(--spacers-dp8);
 }
 
 .runCompletedWrapper header {
@@ -100,14 +105,21 @@
     gap: 16px;
 }
 
-.runCompletedContent {
+.runSummary {
     display: flex;
     flex-direction: column;
     gap: 8px;
     padding: 12px;
 }
 
-.completedTime {
+.completedTimeWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all 0.3s;
+}
+
+.completedDuration {
     color: var(--colors-grey700);
     font-size: 12px;
 }

src/pages/data-integrity/details/CheckRunCompleted.js

@@ -0,0 +1,109 @@
+import { useTimeZoneConversion } from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
+import { IconChevronDown24, IconChevronUp24, NoticeBox } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import {
+    getDurationWithUnitFromDelta,
+    selectedLocale,
+} from '../../../utils/relativeTime.js'
+import { StatusIcon } from '../list/StatusIcon.js'
+import css from './CheckDetails.module.css'
+import { CheckIssues } from './CheckIssues.js'
+import { checkProps } from './checkProps.js'
+import { Notice } from './Notice.js'
+
+export const CheckRunCompleted = ({ detailsCheck }) => {
+    const [expandSummary, setExpandSummary] = useState(true)
+
+    const passed = detailsCheck.issues.length === 0
+
+    return (
+        <div className={css.runCompletedWrapper}>
+            {!passed && (
+                <Recommendation>{detailsCheck.recommendation}</Recommendation>
+            )}
+            <div
+                className={css.completedTimeWrapper}
+                onClick={() => setExpandSummary((prev) => !prev)}
+            >
+                <CompletedTime
+                    finishedTime={detailsCheck.finishedTime}
+                    issuesCount={detailsCheck.issues.length}
+                    expanded={expandSummary}
+                    setExp
+                />
+                {expandSummary ? <IconChevronUp24 /> : <IconChevronDown24 />}
+            </div>
+            {expandSummary && <RunSummary detailsCheck={detailsCheck} />}
+        </div>
+    )
+}
+
+CheckRunCompleted.propTypes = {
+    detailsCheck: checkProps,
+}
+
+const RunSummary = ({ detailsCheck }) => {
+    const jobDurationMs =
+        new Date(detailsCheck.finishedTime).getTime() -
+        new Date(detailsCheck.startTime).getTime()
+
+    const passed = detailsCheck.issues.length === 0
+
+    return (
+        <div className={css.runSummary}>
+            {passed ? (
+                <CheckRunSuccess />
+            ) : (
+                <CheckIssues detailsCheck={detailsCheck} />
+            )}
+            <div className={css.completedDuration}>
+                {i18n.t('Completed in {{time}}', {
+                    time: getDurationWithUnitFromDelta(jobDurationMs),
+                })}
+            </div>
+        </div>
+    )
+}
+
+RunSummary.propTypes = {
+    detailsCheck: checkProps,
+}
+
+const CompletedTime = ({ issuesCount, finishedTime }) => {
+    const { fromServerDate } = useTimeZoneConversion()
+
+    const latestRun = fromServerDate(finishedTime)
+    const formattedLatestRun = Intl.DateTimeFormat([selectedLocale], {
+        dateStyle: 'short',
+        timeStyle: 'short',
+    }).format(latestRun)
+
+    return (
+        <header title={latestRun.getClientZonedISOString()}>
+            {i18n.t('Latest run completed {{time}}', {
+                time: formattedLatestRun,
+                interpolation: { escapeValue: false },
+            })}
+            <StatusIcon count={issuesCount} />
+        </header>
+    )
+}
+
+CompletedTime.propTypes = {
+    finishedTime: PropTypes.string,
+    issuesCount: PropTypes.number,
+}
+
+const CheckRunSuccess = () => {
+    return <Notice status={'success'}>{i18n.t('Passed with 0 errors.')}</Notice>
+}
+
+const Recommendation = ({ children }) => (
+    <NoticeBox title={i18n.t('Reccomendation')}>{children}</NoticeBox>
+)
+
+Recommendation.propTypes = {
+    children: PropTypes.node,
+}

src/pages/data-integrity/details/CheckRunContent.js

@@ -3,13 +3,10 @@ import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
 import {
-    getDurationWithUnitFromDelta,
-    selectedLocale,
+    getDurationWithUnitFromDelta
 } from '../../../utils/relativeTime.js'
-import { StatusIcon } from '../list/StatusIcon.js'
-import css from './CheckDetails.module.css'
-import { CheckIssues } from './CheckIssues.js'
 import { checkProps } from './checkProps.js'
+import { CheckRunCompleted } from './CheckRunCompleted.js'
 import { Notice } from './Notice.js'
 
 export const CheckRunContent = ({
@@ -34,7 +31,7 @@ export const CheckRunContent = ({
         return <Notice status={'loading'} title={i18n.t('Loading')} />
     }
 
-    return <DetailsRunCompleted detailsCheck={detailsCheck} />
+    return <CheckRunCompleted detailsCheck={detailsCheck} />
 }
 
 CheckRunContent.propTypes = {
@@ -44,52 +41,6 @@ CheckRunContent.propTypes = {
     summaryCheck: checkProps,
 }
 
-const DetailsRunCompleted = ({ detailsCheck }) => {
-    const { fromServerDate } = useTimeZoneConversion()
-
-    const latestRun = fromServerDate(detailsCheck.finishedTime)
-
-    const formattedLatestRun = Intl.DateTimeFormat([selectedLocale], {
-        dateStyle: 'short',
-        timeStyle: 'short',
-    }).format(latestRun)
-
-    const durationMs =
-        fromServerDate(detailsCheck.finishedTime).getTime() -
-        fromServerDate(detailsCheck.startTime).getTime()
-
-    return (
-        <div className={css.runCompletedWrapper}>
-            <header title={latestRun.getClientZonedISOString()}>
-                {i18n.t('Latest run completed {{time}}', {
-                    time: formattedLatestRun,
-                    interpolation: { escapeValue: false },
-                })}
-                <StatusIcon count={detailsCheck.issues.length} />
-            </header>
-            <div className={css.runCompletedContent}>
-                {detailsCheck.issues.length === 0 ? (
-                    <DetailsRunSuccess />
-                ) : (
-                    <CheckIssues detailsCheck={detailsCheck} />
-                )}
-                <div className={css.completedTime}>
-                    {i18n.t('Completed in {{time}}', {
-                        time: getDurationWithUnitFromDelta(durationMs),
-                    })}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-DetailsRunCompleted.propTypes = {
-    detailsCheck: checkProps,
-}
-
-const DetailsRunSuccess = () => {
-    return <Notice status={'success'}>{i18n.t('Passed with 0 errors.')}</Notice>
-}
 
 const DetailsRunLoading = ({ detailsCheck, summaryCheck, currentJob }) => {
     const [, setTime] = useState(Date.now())