fix(data-integrity): add indicator for slow checks (#604)

* fix(data-integrity): add indicator for slow checks

* fix: update run all checks label

* fix: use chip for indicator, add tooltip

* refactor: remove unnecessary css

* style: run prettier

* fix: use tag instead of chip

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-03-05T14:54:55.437Z\n"
-"PO-Revision-Date: 2024-03-05T14:54:55.437Z\n"
+"POT-Creation-Date: 2024-03-13T13:19:06.504Z\n"
+"PO-Revision-Date: 2024-03-13T13:19:06.504Z\n"
 
 msgid "Something went wrong"
 msgstr "Something went wrong"
@@ -57,15 +57,21 @@ msgstr "Something went wrong whilst fetching options"
 msgid "Checks to run"
 msgstr "Checks to run"
 
-msgid "Run all available checks"
-msgstr "Run all available checks"
+msgid "Run all standard checks"
+msgstr "Run all standard checks"
 
 msgid "Only run selected checks"
 msgstr "Only run selected checks"
 
 msgid "Severity"
 msgstr "Severity"
 
+msgid "Slow checks are resource intensive and should be run with caution"
+msgstr "Slow checks are resource intensive and should be run with caution"
+
+msgid "Slow"
+msgstr "Slow"
+
 msgid "Select checks to run."
 msgstr "Select checks to run."
 

src/components/FormFields/Custom/DataIntegrityChecksField.js

@@ -8,9 +8,11 @@ import {
     Radio,
     Transfer,
     TransferOption,
+    Tooltip,
     ReactFinalForm,
     InputFieldFF,
     Help,
+    Tag,
 } from '@dhis2/ui'
 import cx from 'classnames'
 import { useParameterOption } from '../../../hooks/parameter-options'
@@ -83,7 +85,7 @@ const DataIntegrityChecksField = ({ label, name }) => {
             <Radio
                 name={'checksToRun'}
                 value={'false'}
-                label={i18n.t('Run all available checks')}
+                label={i18n.t('Run all standard checks')}
                 checked={!runSelected}
                 onChange={toggle}
             />
@@ -108,19 +110,30 @@ const DataIntegrityChecksField = ({ label, name }) => {
     )
 }
 
-const LabelComponent = ({ label, severity, highlighted, disabled }) => (
+const LabelComponent = ({ label, severity, highlighted, disabled, isSlow }) => (
     <div
         className={cx(styles.transferOption, {
             [styles.highlighted]: highlighted,
             [styles.disabled]: disabled,
         })}
     >
         <div className={styles.optionName}>{label}</div>
-        <div
-            className={cx(styles.optionSeverity, {
-                [styles.highlighted]: highlighted,
-            })}
-        >{`${i18n.t('Severity')}: ${severity}`}</div>
+        <div className={styles.optionSubtitle}>
+            <span
+                className={cx(styles.optionSeverity, {
+                    [styles.highlighted]: highlighted,
+                })}
+            >{`${i18n.t('Severity')}: ${severity}`}</span>
+            {isSlow && (
+                <Tooltip
+                    content={i18n.t(
+                        'Slow checks are resource intensive and should be run with caution'
+                    )}
+                >
+                    <Tag>{i18n.t('Slow')}</Tag>
+                </Tooltip>
+            )}
+        </div>
     </div>
 )
 

src/components/FormFields/Custom/DataIntegrityChecksField.module.css

@@ -1,20 +1,28 @@
 .transfer {
-    margin-top: 8px;
+    margin-block-start: var(--spacers-dp8);
 }
 
 .transferOption {
+    display: flex;
+    flex-direction: column;
     font-size: 14px;
     padding: 4px 0;
+    gap: 6px;
 }
 
 .optionName {
     font-weight: 500;
-    margin-bottom: 4px;
 }
 
-.optionSeverity {
+.optionSubtitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     font-weight: 400;
     font-size: 13px;
+}
+
+.optionSeverity {
     color: var(--colors-grey600);
 }