feat: add bypass DHIS2 version [DHIS2-15905] (#193)

* feat: add bypass component to general settings * feat: add users info as help text * feat: add info label to new form * feat: regenerate en.pot
dhis2 · May 30, 2024 · 906591c · 906591c
1 parent 507d10b
commit 906591c
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 26 deletions.
diff --git a/i18n/en.pot b/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-04-19T17:37:56.854Z\n"
-"PO-Revision-Date: 2024-04-19T17:37:56.854Z\n"
+"POT-Creation-Date: 2024-05-28T14:13:22.879Z\n"
+"PO-Revision-Date: 2024-05-28T14:13:22.879Z\n"
 
 msgid ""
 "The initial configuration of the app has been completed and it is now ready "
@@ -407,8 +407,11 @@ msgstr "Save"
 msgid "Skip DHIS2 version validation"
 msgstr "Skip DHIS2 version validation"
 
-msgid "Bypass the validation process for DHIS2 version compatibility"
-msgstr "Bypass the validation process for DHIS2 version compatibility"
+msgid "Bypass the validation process for DHIS2 version compatibility."
+msgstr "Bypass the validation process for DHIS2 version compatibility."
+
+msgid "Only applicable for users using Android app version 3.0 or later."
+msgstr "Only applicable for users using Android app version 3.0 or later."
 
 msgid "30 Minutes"
 msgstr "30 Minutes"
@@ -988,6 +991,9 @@ msgstr ""
 "inputs for all value types have been redesigned, with a improved selection "
 "mode and increased tappable areas and texts."
 
+msgid "Only applicable for users using Android app versions 2.9, 2.9.1, and 2.9.2."
+msgstr "Only applicable for users using Android app versions 2.9, 2.9.1, and 2.9.2."
+
 msgid "Overview: Android Settings App"
 msgstr "Overview: Android Settings App"
 

diff --git a/src/components/field/BypassDHIS2Version.js b/src/components/field/BypassDHIS2Version.js
@@ -1,8 +1,54 @@
 import i18n from '@dhis2/d2-i18n'
+import { CheckboxField as UICheckboxField } from '@dhis2/ui'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import DialogBypass from '../dialog/DialogBypass'
-import { CheckboxField } from './CheckboxField'
+import { FieldSection } from './FieldSection'
+
+const HelpText = ({ helpText, warning, type }) => {
+    if (!warning) {
+        return helpText
+    }
+
+    return (
+        <>
+            <span>
+                {helpText}
+                <span
+                    className={cx('prefix', {
+                        prefixInfo: type === 'info',
+                    })}
+                >
+                    {warning}
+                </span>
+            </span>
+
+            <style>{`
+                .prefix {
+                font - family: monospace;
+                font-size: 13px;
+                color: var(--colors-grey800);
+                background: var(--colors-grey300);
+                padding: 2px var(--spacers-dp4);
+                margin-right: var(--spacers-dp4);
+                border-radius: 3px;
+            }
+
+                .prefixInfo {
+                color: var(--colors-blue800);
+                background: var(--colors-blue050);
+            }
+            `}</style>
+        </>
+    )
+}
+
+HelpText.propTypes = {
+    helpText: PropTypes.string,
+    warning: PropTypes.string,
+    type: PropTypes.string,
+}
 
 const CODE = 'bypassDHIS2VersionCheck'
 
@@ -26,16 +72,27 @@ export const BypassDHIS2Version = ({ value, onChange, ...props }) => {
 
     return (
         <>
-            <CheckboxField
-                name={CODE}
-                label={i18n.t('Skip DHIS2 version validation')}
-                helpText={i18n.t(
-                    'Bypass the validation process for DHIS2 version compatibility'
-                )}
-                checked={value[CODE]}
-                onChange={handleCheckbox}
-                {...props}
-            />
+            <FieldSection>
+                <UICheckboxField
+                    label={i18n.t('Skip DHIS2 version validation')}
+                    name={CODE}
+                    checked={value[CODE]}
+                    type="checkbox"
+                    onChange={handleCheckbox}
+                    helpText={
+                        <HelpText
+                            helpText={i18n.t(
+                                'Bypass the validation process for DHIS2 version compatibility.'
+                            )}
+                            warning={i18n.t(
+                                'Only applicable for users using Android app version 3.0 or later.'
+                            )}
+                            type="info"
+                        />
+                    }
+                    {...props}
+                />
+            </FieldSection>
 
             <DialogBypass
                 openDialog={open}

diff --git a/src/modules/populateDefaultSettings.js b/src/modules/populateDefaultSettings.js
@@ -1,4 +1,5 @@
 import {
+    defaultBypassDHIS2Version,
     defaultShareScreen,
     defaultTrackerImporterVersion,
     newTrackerVersion,
@@ -21,6 +22,7 @@ export const populateObject = (type) => {
                 reservedValues: androidSettingsDefault.reservedValues,
                 encryptDB: androidSettingsDefault.encryptDB,
                 allowScreenCapture: defaultShareScreen,
+                bypassDHIS2VersionCheck: defaultBypassDHIS2Version,
                 experimentalFeatures: ['newFormLayout'],
             }
             break

diff --git a/src/pages/General/GeneralSettings.js b/src/pages/General/GeneralSettings.js
@@ -4,6 +4,7 @@ import isEqual from 'lodash/isEqual'
 import React, { useEffect, useState } from 'react'
 import { useIsAuthorized } from '../../auth'
 import {
+    BypassDHIS2Version,
     EncryptDB,
     MatomoId,
     MatomoUrl,
@@ -121,6 +122,11 @@ const GeneralSettings = () => {
                         onChange={setSettings}
                         disabled={disable}
                     />
+                    <BypassDHIS2Version
+                        value={settings}
+                        onChange={setSettings}
+                        disabled={disable}
+                    />
                     <DisableSettings disabled={disable} />
                     <ExperimentalFeatures
                         value={settings}

diff --git a/src/pages/General/experimentalFeatures/ExperimentalFeatures.js b/src/pages/General/experimentalFeatures/ExperimentalFeatures.js
@@ -8,6 +8,7 @@ import { MoreOptions } from '../../../components/moreOptions'
 import { getValidKeysList } from '../helper'
 import styles from './ExperimentalFeatures.module.css'
 import { featureList } from './feature-list'
+import { HelpText } from './HelperText'
 
 const CODE = 'experimentalFeatures'
 
@@ -46,17 +47,25 @@ export const ExperimentalFeatures = ({ onChange, value, ...props }) => {
                         )}
                     </Legend>
 
-                    {featureList.map(({ name, label, description }) => (
-                        <CheckboxField
-                            key={name}
-                            name={name}
-                            label={label}
-                            helpText={description}
-                            checked={options[name]}
-                            onChange={handleCheckbox}
-                            {...props}
-                        />
-                    ))}
+                    {featureList.map(
+                        ({ name, label, description, warning }) => (
+                            <CheckboxField
+                                key={name}
+                                name={name}
+                                label={label}
+                                helpText={
+                                    <HelpText
+                                        helpText={description}
+                                        warning={warning}
+                                        type={warning ? 'info' : undefined}
+                                    />
+                                }
+                                checked={options[name]}
+                                onChange={handleCheckbox}
+                                {...props}
+                            />
+                        )
+                    )}
                 </>
             </MoreOptions>
         </>

diff --git a/src/pages/General/experimentalFeatures/HelperText.js b/src/pages/General/experimentalFeatures/HelperText.js
@@ -0,0 +1,47 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const HelpText = ({ helpText, warning, type }) => {
+    if (!warning) {
+        return helpText
+    }
+
+    return (
+        <>
+            <span>
+                {helpText}
+                <span
+                    className={cx('prefix', {
+                        prefixInfo: type === 'info',
+                    })}
+                >
+                    {warning}
+                </span>
+            </span>
+
+            <style>{`
+                .prefix {
+                font - family: monospace;
+                font-size: 13px;
+                color: var(--colors-grey800);
+                background: var(--colors-grey300);
+                padding: 2px var(--spacers-dp4);
+                margin-right: var(--spacers-dp4);
+                border-radius: 3px;
+            }
+
+                .prefixInfo {
+                color: var(--colors-blue800);
+                background: var(--colors-blue050);
+            }
+            `}</style>
+        </>
+    )
+}
+
+HelpText.propTypes = {
+    helpText: PropTypes.string,
+    warning: PropTypes.string,
+    type: PropTypes.string,
+}
diff --git a/src/pages/General/experimentalFeatures/feature-list.js b/src/pages/General/experimentalFeatures/feature-list.js
@@ -7,5 +7,8 @@ export const featureList = [
         description: i18n.t(
             'Enable/Disable the new data entry form with new inputs per value type. The inputs for all value types have been redesigned, with a improved selection mode and increased tappable areas and texts.'
         ),
+        warning: i18n.t(
+            'Only applicable for users using Android app versions 2.9, 2.9.1, and 2.9.2.'
+        ),
     },
 ]
diff --git a/src/pages/General/helper.js b/src/pages/General/helper.js
@@ -1,6 +1,7 @@
 import isNil from 'lodash/isNil'
 import map from 'lodash/map'
 import {
+    defaultBypassDHIS2Version,
     defaultEncryptDB,
     defaultReservedValues,
     defaultShareScreen,
@@ -47,6 +48,8 @@ export const createInitialValues = (prevGeneralDetails) => ({
     encryptDB: prevGeneralDetails.encryptDB || defaultEncryptDB,
     allowScreenCapture:
         prevGeneralDetails.allowScreenCapture || defaultShareScreen,
+    bypassDHIS2VersionCheck:
+        prevGeneralDetails.bypassDHIS2VersionCheck || defaultBypassDHIS2Version,
     experimentalFeatures: prevGeneralDetails.experimentalFeatures || [
         'newFormLayout',
     ],