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

dhis2 · Mar 11, 2024 · 72bb43d · 72bb43d
1 parent 44adaa2
commit 72bb43d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/src/components/FormFields/Custom/DataIntegrityChecksField.js b/src/components/FormFields/Custom/DataIntegrityChecksField.js
@@ -108,19 +108,26 @@ 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 && (
+                <span className={styles.optionSlowIndicator}>
+                    {i18n.t('Resource intensive')}
+                </span>
+            )}
+        </div>
     </div>
 )
 

diff --git a/src/components/FormFields/Custom/DataIntegrityChecksField.module.css b/src/components/FormFields/Custom/DataIntegrityChecksField.module.css
@@ -1,23 +1,38 @@
 .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);
 }
 
+.optionSlowIndicator {
+    background-color: var(--colors-yellow100);
+    color: var(--colors-grey800);
+    padding: 4px 6px;
+    border-radius: 2px;
+}
+
 .transferOption.highlighted .optionSeverity {
     color: var(--colors-grey300);
 }