fix: add proptypes

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

@@ -1,14 +1,16 @@
 import { useConfig, useTimeZoneConversion } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { Button, IconSync16 } from '@dhis2/ui'
+import PropTypes from 'prop-types'
 import React, { useEffect, 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 './DetailsIssues.js'
+import { CheckIssues } from './CheckIssues.js'
+import { checkProps } from './checkProps.js'
 import { Notice } from './Notice.js'
 import { useDataIntegrityDetails } from './use-data-integrity-details.js'
 
@@ -50,6 +52,10 @@ export const CheckDetails = ({ check }) => {
     )
 }
 
+CheckDetails.propTypes = {
+    check: checkProps
+}
+
 export const DetailsHeader = ({ name, description }) => {
     return (
         <header>
@@ -59,6 +65,9 @@ export const DetailsHeader = ({ name, description }) => {
     )
 }
 
+DetailsHeader.propTypes = {
+}
+
 const DetailsContent = ({
     detailsCheck,
     summaryCheck,

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

@@ -1,4 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
+import React from 'react'
 import { CheckDetails } from './CheckDetails.js'
 import css from './CheckDetails.module.css'
 
@@ -10,10 +11,15 @@ export const CheckDetailsView = ({ selectedCheck }) => {
     )
 }
 
+CheckDetailsView.propTypes = {
+    selectedCheck: CheckDetails.propTypes.check,
+}
+
 const ChooseCheck = () => (
     <div className={css.chooseCheckMessage}>
         {i18n.t(
             'Choose a check to run from the list, or run all checks from the toolbar above'
         )}
     </div>
 )
+

src/pages/data-integrity/details/DetailsIssues.js → src/pages/data-integrity/details/CheckIssues.js

@@ -1,13 +1,15 @@
 import { useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 import React from 'react'
 import css from './CheckDetails.module.css'
+import { checkProps } from './checkProps.js'
 import { getIssueLink } from './getIssueLink.js'
 import { Notice } from './Notice.js'
 
 export const CheckIssues = ({ detailsCheck }) => {
     const { baseUrl } = useConfig()
-    // const maintenance
+
     const numberOfErrors = detailsCheck.issues.length
     return (
         <Notice
@@ -28,6 +30,10 @@ export const CheckIssues = ({ detailsCheck }) => {
     )
 }
 
+CheckIssues.propTypes = {
+    detailsCheck: checkProps
+}
+
 const Issue = ({ issue, issuesIdType, baseUrl }) => {
     const { id, name } = issue
 
@@ -44,6 +50,12 @@ const Issue = ({ issue, issuesIdType, baseUrl }) => {
     )
 }
 
+Issue.propTypes = {
+    baseUrl: PropTypes.string,
+    issue: PropTypes.shape({ id: PropTypes.string, name: PropTypes.string }),
+    issuesIdType: PropTypes.string
+}
+
 const IssueLink = ({ href, children }) => {
     if (!href) {
         return children
@@ -54,3 +66,8 @@ const IssueLink = ({ href, children }) => {
         </a>
     )
 }
+
+IssueLink.propTypes = {
+    children: PropTypes.node,
+    href: PropTypes.string,
+}

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

@@ -1,13 +1,22 @@
 import propTypes from 'prop-types'
 
-export const checkProps = {
-    name: propTypes.string.isRequired,
+export const checkProps = propTypes.shape({
     displayName: propTypes.string.isRequired,
+    name: propTypes.string.isRequired,
     description: propTypes.string,
+    finishedTime: propTypes.string,
     intoduction: propTypes.string,
+    isSlow: propTypes.bool,
+    issues: propTypes.arrayOf(
+        propTypes.shape({
+            comment: propTypes.string,
+            id: propTypes.string,
+            name: propTypes.string,
+            refs: propTypes.array,
+        })
+    ),
+    issuesIdType: propTypes.string,
     recommendation: propTypes.string,
+    section: propTypes.string,
     startTime: propTypes.string,
-    finishedTime: propTypes.string,
-    Selection: propTypes.string,
-    isSlow: propTypes.bool,
-}
+})

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

@@ -1,5 +1,5 @@
 import { useDataMutation, useDataQuery } from '@dhis2/app-runtime'
-import React, { useEffect, useMemo, useCallback } from 'react'
+import React, { useEffect, useCallback } from 'react'
 import { useLazyInterval } from '../../../hooks/use-poll.js'
 
 const detailsQuery = {

src/pages/data-integrity/list/DataIntegrityList.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React, { useState, useMemo } from 'react'
 import { CircularLoaderCentered } from '../../../components/Loading/CircularLoaderCentered.js'
 import { CheckDetailsView } from '../details/CheckDetailsView.js'
@@ -52,7 +53,10 @@ export const DataIntegrityList = () => {
                         checks={filteredChecks}
                     />
                 )}
-                <CheckDetailsView key={selectedCheck?.name} selectedCheck={selectedCheck} />
+                <CheckDetailsView
+                    key={selectedCheck?.name}
+                    selectedCheck={selectedCheck}
+                />
             </ListDetailsLayout>
         </div>
     )
@@ -61,3 +65,7 @@ export const DataIntegrityList = () => {
 const ListDetailsLayout = ({ children }) => {
     return <div className={css.listDetailsWrapper}>{children}</div>
 }
+
+ListDetailsLayout.propTypes = {
+    children: PropTypes.node,
+}

src/pages/data-integrity/list/LastRunTime.js

@@ -1,5 +1,6 @@
 import { useTimeZoneConversion } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
+import PropTypes from 'prop-types'
 import React from 'react'
 import { getRelativeTime } from '../../../utils/relativeTime.js'
 
@@ -21,3 +22,8 @@ export const LastRunTime = ({ className, value }) => {
         </span>
     )
 }
+
+LastRunTime.propTypes = {
+    className: PropTypes.string,
+    value: PropTypes.string,
+}

src/pages/data-integrity/list/List.js

@@ -1,25 +1,31 @@
 import cx from 'classnames'
+import PropTypes from 'prop-types'
 import React from 'react'
 import { LastRunTime } from './LastRunTime.js'
 import css from './List.module.css'
 import { StatusIcon } from './StatusIcon.js'
 
 export const List = ({ setSelectedCheck, selectedCheck, checks }) => {
-
     return (
         <div className={css.list}>
             {checks?.map((check) => (
-                    <ListItem
-                        key={check.name}
-                        setSelectedCheck={setSelectedCheck}
-                        check={check}
-                        selected={check.name === selectedCheck?.name}
-                    />
-                ))}
+                <ListItem
+                    key={check.name}
+                    setSelectedCheck={setSelectedCheck}
+                    check={check}
+                    selected={check.name === selectedCheck?.name}
+                />
+            ))}
         </div>
     )
 }
 
+List.propTypes = {
+    setSelectedCheck: PropTypes.func.isRequired,
+    checks: PropTypes.array,
+    selectedCheck: PropTypes.object,
+}
+
 export const ListItem = ({ setSelectedCheck, check, selected }) => {
     return (
         <div
@@ -34,8 +40,17 @@ export const ListItem = ({ setSelectedCheck, check, selected }) => {
                 </div>
             </div>
             <span className={css.statusIcon}>
-                <StatusIcon count={check?.runInfo?.count} loading={check.loading} />
+                <StatusIcon
+                    count={check?.runInfo?.count}
+                    loading={check.loading}
+                />
             </span>
         </div>
     )
 }
+
+ListItem.propTypes = {
+    check: PropTypes.object.isRequired,
+    selected: PropTypes.bool.isRequired,
+    setSelectedCheck: PropTypes.func.isRequired,
+}

src/pages/data-integrity/list/ListToolbar.js

@@ -1,5 +1,6 @@
 import i18n from '@dhis2/d2-i18n'
 import { Button, Input, SingleSelect, SingleSelectOption } from '@dhis2/ui'
+import PropTypes from 'prop-types'
 import React from 'react'
 import css from './List.module.css'
 import { SORT_OPTIONS } from './sorter.js'
@@ -44,3 +45,12 @@ export const ListToolbar = ({
         </div>
     )
 }
+
+ListToolbar.propTypes = {
+    filter: PropTypes.string.isRequired,
+    runningAll: PropTypes.bool.isRequired,
+    setFilter: PropTypes.func.isRequired,
+    setSort: PropTypes.func.isRequired,
+    sort: PropTypes.string.isRequired,
+    onRunAll: PropTypes.func.isRequired,
+}

src/pages/data-integrity/list/StatusIcon.js

@@ -1,6 +1,7 @@
 import {
     CircularLoader, IconCheckmarkCircle16, IconErrorFilled16
 } from '@dhis2/ui'
+import PropTypes from 'prop-types'
 import React from 'react'
 import css from './List.module.css'
 
@@ -13,6 +14,10 @@ export const ErrorIcon = ({ numberOfErrors }) => {
     )
 }
 
+ErrorIcon.propTypes = {
+    numberOfErrors: PropTypes.number.isRequired,
+}
+
 export const SuccessIcon = () => <IconCheckmarkCircle16 color="green" />
 
 export const LoadingIcon = () => <CircularLoader small />
@@ -31,3 +36,8 @@ export const StatusIcon = ({ count, loading }) => {
     }
     return null
 }
+
+StatusIcon.propTypes = {
+    count: PropTypes.number,
+    loading: PropTypes.bool,
+}

src/pages/data-integrity/use-data-integrity-summary.js

@@ -1,5 +1,5 @@
 import { useDataMutation, useDataQuery } from '@dhis2/app-runtime'
-import React, { useMemo, useEffect } from 'react'
+import React, { useMemo, useEffect, useCallback } from 'react'
 import { useLazyInterval } from '../../hooks/use-poll.js'
 import { useDataIntegrityChecks } from './use-data-integrity-checks.js'
 
@@ -42,14 +42,19 @@ export const useDataIntegritySummary = () => {
     } = useDataQuery(summaryQuery)
 
     const { start, cancel, started: isPolling } = useLazyInterval(fetchSummary, 2000)
-    const [startDataIntegrityCheck, { loading: mutationLoading }] =
+    const [runMutation, { loading: mutationLoading }] =
         useDataMutation(startDataIntegrityCheckMutation, {
             onComplete: (data) => {
                 setLastJob(data.response)
                 start()
             },
         })
 
+    const startDataIntegrityCheck = useCallback(() => {
+        setLastJob(null)
+        runMutation()
+}, [runMutation])
+
     const formattedData = useMemo(() => {
         if (!checks) {
             return
@@ -58,22 +63,23 @@ export const useDataIntegritySummary = () => {
         const mergedRunResult = summaryData ? mergeRunResult(checks, summaryData.result) : checks
 
         return mergedRunResult.map((check) => {
-            let loading = isPolling
+            if(check.isSlow) {
+                return check
+            }
+            let loading = isPolling || mutationLoading
             if (check.runInfo && lastJob) {
                 // if check was started after the last job was created, it was propably
                 // started by last job
                 const ranByLastJob =
                     check.runInfo.startTime >= lastJob.created
-                // slow checks are not run, so don't show loading
-                loading = !check.isSlow && !ranByLastJob
+                loading = !ranByLastJob
             }
-
             return {
                 ...check,
                 loading
             }
         })
-    }, [summaryData, checks, lastJob, isPolling])
+    }, [summaryData, checks, lastJob, isPolling, mutationLoading])
 
     useEffect(() => {
         if (summaryError || formattedData?.every((check) => !check.loading)) {