From 9e819e95b3ca8d805f08b165effbeb7515aecf94 Mon Sep 17 00:00:00 2001
From: Bruno Raimbault <bruno@dhis2.org>
Date: Thu, 20 Nov 2025 17:35:43 +0100
Subject: [PATCH 1/3] chore: refactor OrgUnitDialog to functional component

---
 src/components/edit/orgUnit/OrgUnitDialog.jsx | 204 +++++++++---------
 1 file changed, 97 insertions(+), 107 deletions(-)

diff --git a/src/components/edit/orgUnit/OrgUnitDialog.jsx b/src/components/edit/orgUnit/OrgUnitDialog.jsx
index 9ceae1ff5..0c5070f95 100644
--- a/src/components/edit/orgUnit/OrgUnitDialog.jsx
+++ b/src/components/edit/orgUnit/OrgUnitDialog.jsx
@@ -1,7 +1,7 @@
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
+import React, { useEffect, useState, useCallback } from 'react'
+import { useDispatch } from 'react-redux'
 import {
     setRadiusLow,
     setOrganisationUnitColor,
@@ -20,122 +20,112 @@ import OrgUnitSelect from '../../orgunits/OrgUnitSelect.jsx'
 import Labels from '../shared/Labels.jsx'
 import styles from '../styles/LayerDialog.module.css'
 
-class OrgUnitDialog extends Component {
-    static propTypes = {
-        setOrganisationUnitColor: PropTypes.func.isRequired,
-        setRadiusLow: PropTypes.func.isRequired,
-        validateLayer: PropTypes.bool.isRequired,
-        onLayerValidation: PropTypes.func.isRequired,
-        organisationUnitColor: PropTypes.string,
-        radiusLow: PropTypes.number,
-        rows: PropTypes.array,
-    }
+const OrgUnitDialog = ({
+    validateLayer,
+    onLayerValidation,
+    organisationUnitColor,
+    radiusLow,
+    rows,
+}) => {
+    const dispatch = useDispatch()
 
-    state = {
-        tab: 'orgunits',
-    }
+    const [tab, setTab] = useState('orgunits')
+    const [orgUnitsError, setOrgUnitsError] = useState(null)
 
-    componentDidUpdate(prev) {
-        const { validateLayer, onLayerValidation } = this.props
-
-        if (validateLayer && validateLayer !== prev.validateLayer) {
-            onLayerValidation(this.validate())
+    // --------------------------
+    // Validation (was componentDidUpdate)
+    // --------------------------
+    useEffect(() => {
+        if (validateLayer) {
+            onLayerValidation(validate())
         }
-    }
-
-    render() {
-        const {
-            radiusLow,
-            organisationUnitColor,
-            setOrganisationUnitColor,
-            setRadiusLow,
-        } = this.props
-
-        const { tab, orgUnitsError } = this.state
-
-        return (
-            <div className={styles.content} data-test="orgunitdialog">
-                <Tabs value={tab} onChange={(tab) => this.setState({ tab })}>
-                    <Tab value="orgunits">{i18n.t('Organisation Units')}</Tab>
-                    <Tab value="style">{i18n.t('Style')}</Tab>
-                </Tabs>
-                <div className={styles.tabContent}>
-                    {tab === 'orgunits' && (
-                        <OrgUnitSelect warning={orgUnitsError} />
-                    )}
-                    {tab === 'style' && (
-                        <div
-                            className={styles.flexColumnFlow}
-                            data-test="orgunitdialog-styletab"
-                        >
-                            <div className={styles.flexColumn}>
-                                <Labels />
-                                <ColorPicker
-                                    label={i18n.t('Boundary color')}
-                                    color={
-                                        organisationUnitColor || ORG_UNIT_COLOR
-                                    }
-                                    onChange={setOrganisationUnitColor}
-                                    className={styles.narrowField}
-                                />
-                                <NumberField
-                                    label={i18n.t('Point radius')}
-                                    min={MIN_RADIUS}
-                                    max={MAX_RADIUS}
-                                    value={
-                                        radiusLow !== undefined
-                                            ? radiusLow
-                                            : ORG_UNIT_RADIUS
-                                    }
-                                    onChange={setRadiusLow}
-                                    className={styles.narrowFieldIcon}
-                                />
-                            </div>
-                            <div className={styles.flexColumn}>
-                                <StyleByGroupSet
-                                    defaultStyleType={STYLE_TYPE_COLOR}
-                                />
-                            </div>
-                        </div>
-                    )}
-                </div>
-            </div>
-        )
-    }
-
-    // TODO: Add to parent class?
-    setErrorState(key, message, tab) {
-        this.setState({
-            [key]: message,
-            tab,
-        })
+    }, [validateLayer])
 
+    // --------------------------
+    // Validation handler
+    // --------------------------
+    const setErrorState = useCallback((message, tabName) => {
+        setOrgUnitsError(message)
+        setTab(tabName)
         return false
-    }
-
-    validate() {
-        const { rows } = this.props
+    }, [])
 
+    const validate = useCallback(() => {
         if (!getOrgUnitsFromRows(rows).length) {
-            return this.setErrorState(
-                'orgUnitsError',
+            return setErrorState(
                 i18n.t('No organisation units are selected'),
                 'orgunits'
             )
         }
-
         return true
-    }
+    }, [rows, setErrorState])
+
+    // --------------------------
+    // Render
+    // --------------------------
+    return (
+        <div className={styles.content} data-test="orgunitdialog">
+            <Tabs value={tab} onChange={setTab}>
+                <Tab value="orgunits">{i18n.t('Organisation Units')}</Tab>
+                <Tab value="style">{i18n.t('Style')}</Tab>
+            </Tabs>
+
+            <div className={styles.tabContent}>
+                {tab === 'orgunits' && (
+                    <OrgUnitSelect warning={orgUnitsError} />
+                )}
+
+                {tab === 'style' && (
+                    <div
+                        className={styles.flexColumnFlow}
+                        data-test="orgunitdialog-styletab"
+                    >
+                        <div className={styles.flexColumn}>
+                            <Labels />
+                            <ColorPicker
+                                label={i18n.t('Boundary color')}
+                                color={organisationUnitColor || ORG_UNIT_COLOR}
+                                onChange={(color) =>
+                                    dispatch(setOrganisationUnitColor(color))
+                                }
+                                className={styles.narrowField}
+                            />
+                            <NumberField
+                                label={i18n.t('Point radius')}
+                                min={MIN_RADIUS}
+                                max={MAX_RADIUS}
+                                value={
+                                    radiusLow !== undefined
+                                        ? radiusLow
+                                        : ORG_UNIT_RADIUS
+                                }
+                                onChange={(value) =>
+                                    dispatch(setRadiusLow(value))
+                                }
+                                className={styles.narrowFieldIcon}
+                            />
+                        </div>
+
+                        <div className={styles.flexColumn}>
+                            <StyleByGroupSet
+                                defaultStyleType={STYLE_TYPE_COLOR}
+                            />
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+OrgUnitDialog.propTypes = {
+    setOrganisationUnitColor: PropTypes.func,
+    setRadiusLow: PropTypes.func,
+    validateLayer: PropTypes.bool.isRequired,
+    onLayerValidation: PropTypes.func.isRequired,
+    organisationUnitColor: PropTypes.string,
+    radiusLow: PropTypes.number,
+    rows: PropTypes.array,
 }
 
-export default connect(
-    null,
-    {
-        setRadiusLow,
-        setOrganisationUnitColor,
-    },
-    null,
-    {
-        forwardRef: true,
-    }
-)(OrgUnitDialog)
+export default OrgUnitDialog

From eac84a90b85b07a4cf15705bdbc1f819965fdcbf Mon Sep 17 00:00:00 2001
From: Bruno Raimbault <bruno@dhis2.org>
Date: Thu, 20 Nov 2025 17:51:18 +0100
Subject: [PATCH 2/3] chore: fix lint errors

---
 src/components/edit/orgUnit/OrgUnitDialog.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/edit/orgUnit/OrgUnitDialog.jsx b/src/components/edit/orgUnit/OrgUnitDialog.jsx
index 0c5070f95..6d72deb6a 100644
--- a/src/components/edit/orgUnit/OrgUnitDialog.jsx
+++ b/src/components/edit/orgUnit/OrgUnitDialog.jsx
@@ -39,7 +39,7 @@ const OrgUnitDialog = ({
         if (validateLayer) {
             onLayerValidation(validate())
         }
-    }, [validateLayer])
+    }, [validateLayer, validate, onLayerValidation])
 
     // --------------------------
     // Validation handler
@@ -119,8 +119,6 @@ const OrgUnitDialog = ({
 }
 
 OrgUnitDialog.propTypes = {
-    setOrganisationUnitColor: PropTypes.func,
-    setRadiusLow: PropTypes.func,
     validateLayer: PropTypes.bool.isRequired,
     onLayerValidation: PropTypes.func.isRequired,
     organisationUnitColor: PropTypes.string,

From 118f3c7728007b7d0b672374d96bb2035b878859 Mon Sep 17 00:00:00 2001
From: Bruno Raimbault <bruno@dhis2.org>
Date: Thu, 20 Nov 2025 18:03:53 +0100
Subject: [PATCH 3/3] fix: update OrgUnitDialog

---
 src/components/edit/orgUnit/OrgUnitDialog.jsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/edit/orgUnit/OrgUnitDialog.jsx b/src/components/edit/orgUnit/OrgUnitDialog.jsx
index 6d72deb6a..99b43ff92 100644
--- a/src/components/edit/orgUnit/OrgUnitDialog.jsx
+++ b/src/components/edit/orgUnit/OrgUnitDialog.jsx
@@ -32,15 +32,6 @@ const OrgUnitDialog = ({
     const [tab, setTab] = useState('orgunits')
     const [orgUnitsError, setOrgUnitsError] = useState(null)
 
-    // --------------------------
-    // Validation (was componentDidUpdate)
-    // --------------------------
-    useEffect(() => {
-        if (validateLayer) {
-            onLayerValidation(validate())
-        }
-    }, [validateLayer, validate, onLayerValidation])
-
     // --------------------------
     // Validation handler
     // --------------------------
@@ -60,6 +51,15 @@ const OrgUnitDialog = ({
         return true
     }, [rows, setErrorState])
 
+    // --------------------------
+    // Validation (was componentDidUpdate)
+    // --------------------------
+    useEffect(() => {
+        if (validateLayer) {
+            onLayerValidation(validate())
+        }
+    }, [validateLayer, validate, onLayerValidation])
+
     // --------------------------
     // Render
     // --------------------------