From b9e469a50037500fcded9c6c7d05f2c8ba6f4849 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Wed, 28 Aug 2024 10:19:40 +0545
Subject: [PATCH 1/3] Remove ellipsizeHeading from map pop up heading

---
 .../NationalSocietyLocalUnits/LocalUnitsMap/index.tsx            | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
index 954b719ea..6acc6a4c2 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
@@ -423,7 +423,6 @@ function LocalUnitsMap(props: Props) {
                             errored={isDefined(localUnitDetailError)}
                             errorMessage={localUnitDetailError?.value.messageForNotification}
                             compactMessage
-                            ellipsizeHeading
                         >
                             <TextOutput
                                 label={strings.localUnitDetailLastUpdate}

From 41022e607fa3fed78a8703cb7b96926ce2b8acd8 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Thu, 29 Aug 2024 17:16:51 +0545
Subject: [PATCH 2/3] Add edit button in local unit view modal

---
 .../LocalUnitValidateButton/index.tsx               |  5 ++++-
 .../LocalUnitValidateButton/styles.module.css       |  9 +++++++++
 .../LocalUnitsFormModal/LocalUnitsForm/i18n.json    |  3 ++-
 .../LocalUnitsFormModal/LocalUnitsForm/index.tsx    | 10 ++++++++++
 .../LocalUnitsFormModal/index.tsx                   | 13 +++++++++++--
 .../LocalUnitsTable/LocalUnitTableActions/index.tsx |  2 +-
 6 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/index.tsx
index fb1c97ed2..507d4af73 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/index.tsx
@@ -3,6 +3,7 @@ import { CheckboxCircleLineIcon } from '@ifrc-go/icons';
 import { ConfirmButton } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
+import { _cs } from '@togglecorp/fujs';
 
 import usePermissions from '#hooks/domain/usePermissions';
 import useAlert from '#hooks/useAlert';
@@ -95,7 +96,9 @@ function LocalUnitValidateButton(props: Props) {
 
     return (
         <ConfirmButton
-            className={styles.localUnitValidateButton}
+            className={_cs(isValidated
+                ? styles.localUnitValidatedButton
+                : styles.localUnitValidateButton)}
             // NOTE sending an empty post request to validate the local unit
             name={null}
             spacing="compact"
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/styles.module.css b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/styles.module.css
index a9d1ef4ea..9bf2a8579 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/styles.module.css
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/styles.module.css
@@ -3,3 +3,12 @@
         font-size: var(--go-ui-height-icon-multiplier);
     }
 }
+
+.local-unit-validated-button {
+    background-color: var(--go-ui-color-gray-40);
+    border: none;
+
+    .icon {
+        font-size: var(--go-ui-height-icon-multiplier);
+    }
+}
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/i18n.json b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/i18n.json
index c658e996e..180d103e3 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/i18n.json
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/i18n.json
@@ -72,6 +72,7 @@
         "otherMedicalHeal": "Other medical heal",
         "otherProfiles": "Other profiles",
         "commentsNS": "Comments by the NS",
-        "submitButtonLabel": "Submit"
+        "submitButtonLabel": "Submit",
+        "editButtonLabel": "Edit"
     }
 }
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx
index 451190158..86647a57f 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx
@@ -108,6 +108,7 @@ function FormColumnContainer(props: FormColumnContainerProps) {
 interface Props {
     readOnly?: boolean;
     onSuccess?: () => void;
+    onEditButtonClick?: () => void;
     localUnitId?: number;
     actionsContainerRef?: RefObject<HTMLDivElement>;
     headingDescriptionRef?: RefObject<HTMLDivElement>;
@@ -118,6 +119,7 @@ function LocalUnitsForm(props: Props) {
     const {
         readOnly = false,
         onSuccess,
+        onEditButtonClick,
         localUnitId,
         actionsContainerRef,
         headingDescriptionRef,
@@ -387,6 +389,14 @@ function LocalUnitsForm(props: Props) {
                                             onActionSuccess={onSuccess}
                                             disabled={!pristine}
                                         />
+                                        {readOnly && (
+                                            <Button
+                                                name=""
+                                                onClick={onEditButtonClick}
+                                            >
+                                                {strings.editButtonLabel}
+                                            </Button>
+                                        )}
                                         <LocalUnitValidateButton
                                             countryId={Number(countryId)}
                                             localUnitId={localUnitId}
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/index.tsx
index 6688c117e..acadb1d34 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/index.tsx
@@ -1,6 +1,7 @@
 import {
     useCallback,
     useRef,
+    useState,
 } from 'react';
 import { Modal } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -12,7 +13,7 @@ import styles from './styles.module.css';
 
 interface Props {
     localUnitId?: number;
-    readOnly?: boolean;
+    viewMode?: boolean;
     onClose: (requestDone?: boolean) => void;
 }
 
@@ -20,7 +21,7 @@ function LocalUnitsFormModal(props: Props) {
     const {
         onClose,
         localUnitId,
-        readOnly,
+        viewMode = false,
     } = props;
 
     const strings = useTranslation(i18n);
@@ -28,11 +29,18 @@ function LocalUnitsFormModal(props: Props) {
     const headingDescriptionRef = useRef<HTMLDivElement>(null);
     const headerDescriptionRef = useRef<HTMLDivElement>(null);
 
+    const [readOnly, setReadOnly] = useState<boolean>(viewMode);
+
     const handleSuccess = useCallback(
         () => { onClose(true); },
         [onClose],
     );
 
+    const handleEditButtonClick = useCallback(
+        () => { setReadOnly(false); },
+        [],
+    );
+
     return (
         <Modal
             className={styles.localUnitsFormModal}
@@ -58,6 +66,7 @@ function LocalUnitsFormModal(props: Props) {
                 localUnitId={localUnitId}
                 onSuccess={handleSuccess}
                 readOnly={readOnly}
+                onEditButtonClick={handleEditButtonClick}
                 actionsContainerRef={actionsContainerRef}
                 headingDescriptionRef={headingDescriptionRef}
                 headerDescriptionRef={headerDescriptionRef}
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx
index 10cc12918..0e2ddd3e0 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx
@@ -105,7 +105,7 @@ function LocalUnitsTableActions(props: Props) {
                 <LocalUnitsFormModal
                     onClose={handleLocalUnitsFormModalClose}
                     localUnitId={localUnitId}
-                    readOnly={showLocalUnitViewModal}
+                    viewMode={showLocalUnitViewModal}
                 />
             )}
         </>

From 4192da190dd0250063b12761b760613d629a0055 Mon Sep 17 00:00:00 2001
From: shreeyash07 <shresthashree0807@gmail.com>
Date: Fri, 30 Aug 2024 11:25:49 +0545
Subject: [PATCH 3/3] Add local unit modal in map popup

---
 .changeset/six-hounds-film.md                 |  9 ++++
 .../LocalUnitValidateButton/styles.module.css |  2 +-
 .../LocalUnitsForm/index.tsx                  | 33 +++++++------
 .../LocalUnitsFormModal/index.tsx             | 26 ++++++-----
 .../LocalUnitsMap/index.tsx                   | 46 ++++++++++++++++++-
 .../LocalUnitTableActions/index.tsx           | 45 ++++++++++++------
 6 files changed, 115 insertions(+), 46 deletions(-)
 create mode 100644 .changeset/six-hounds-film.md

diff --git a/.changeset/six-hounds-film.md b/.changeset/six-hounds-film.md
new file mode 100644
index 000000000..e405b99f7
--- /dev/null
+++ b/.changeset/six-hounds-film.md
@@ -0,0 +1,9 @@
+---
+"go-web-app": patch
+---
+
+- Local Units popup, view/edit mode improvements in [#1178](https://github.com/IFRCGo/go-web-app/issues/1178)
+  - Remove ellipsize heading option in local units map popup
+  - Local units title on popup are now clickable that opens up a modal to show details
+  - Added an Edit button to the View Mode for users with edit permissions
+  - Users will now see a **disabled grey button** when the content is already validated
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/styles.module.css b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/styles.module.css
index 9bf2a8579..32f3f51f1 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/styles.module.css
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/styles.module.css
@@ -5,8 +5,8 @@
 }
 
 .local-unit-validated-button {
-    background-color: var(--go-ui-color-gray-40);
     border: none;
+    background-color: var(--go-ui-color-gray-40);
 
     .icon {
         font-size: var(--go-ui-height-icon-multiplier);
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx
index 86647a57f..72f254872 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx
@@ -110,7 +110,7 @@ interface Props {
     onSuccess?: () => void;
     onEditButtonClick?: () => void;
     localUnitId?: number;
-    actionsContainerRef?: RefObject<HTMLDivElement>;
+    actionsContainerRef: RefObject<HTMLDivElement>;
     headingDescriptionRef?: RefObject<HTMLDivElement>;
     headerDescriptionRef: RefObject<HTMLDivElement>;
 }
@@ -316,14 +316,21 @@ function LocalUnitsForm(props: Props) {
 
     return (
         <div className={styles.localUnitsForm}>
-            {!readOnly
-                && isDefined(actionsContainerRef)
-                && isDefined(actionsContainerRef.current)
-                && (
-                    <Portal container={actionsContainerRef.current}>
-                        {submitButton}
-                    </Portal>
-                )}
+            {readOnly && isDefined(actionsContainerRef.current) && (
+                <Portal container={actionsContainerRef.current}>
+                    <Button
+                        name={undefined}
+                        onClick={onEditButtonClick}
+                    >
+                        {strings.editButtonLabel}
+                    </Button>
+                </Portal>
+            )}
+            {!readOnly && isDefined(actionsContainerRef.current) && (
+                <Portal container={actionsContainerRef.current}>
+                    {submitButton}
+                </Portal>
+            )}
             {isDefined(headingDescriptionRef) && isDefined(headingDescriptionRef.current) && (
                 <Portal container={headingDescriptionRef.current}>
                     <div className={styles.lastUpdateLabel}>
@@ -389,14 +396,6 @@ function LocalUnitsForm(props: Props) {
                                             onActionSuccess={onSuccess}
                                             disabled={!pristine}
                                         />
-                                        {readOnly && (
-                                            <Button
-                                                name=""
-                                                onClick={onEditButtonClick}
-                                            >
-                                                {strings.editButtonLabel}
-                                            </Button>
-                                        )}
                                         <LocalUnitValidateButton
                                             countryId={Number(countryId)}
                                             localUnitId={localUnitId}
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/index.tsx
index acadb1d34..839223838 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/index.tsx
@@ -1,10 +1,10 @@
 import {
     useCallback,
     useRef,
-    useState,
 } from 'react';
 import { Modal } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
+import { isDefined } from '@togglecorp/fujs';
 
 import LocalUnitsForm from './LocalUnitsForm';
 
@@ -13,7 +13,8 @@ import styles from './styles.module.css';
 
 interface Props {
     localUnitId?: number;
-    viewMode?: boolean;
+    readOnly?: boolean;
+    setReadOnly?: React.Dispatch<React.SetStateAction<boolean>>;
     onClose: (requestDone?: boolean) => void;
 }
 
@@ -21,7 +22,8 @@ function LocalUnitsFormModal(props: Props) {
     const {
         onClose,
         localUnitId,
-        viewMode = false,
+        readOnly,
+        setReadOnly,
     } = props;
 
     const strings = useTranslation(i18n);
@@ -29,16 +31,20 @@ function LocalUnitsFormModal(props: Props) {
     const headingDescriptionRef = useRef<HTMLDivElement>(null);
     const headerDescriptionRef = useRef<HTMLDivElement>(null);
 
-    const [readOnly, setReadOnly] = useState<boolean>(viewMode);
-
     const handleSuccess = useCallback(
-        () => { onClose(true); },
+        () => {
+            onClose(true);
+        },
         [onClose],
     );
 
     const handleEditButtonClick = useCallback(
-        () => { setReadOnly(false); },
-        [],
+        () => {
+            if (isDefined(setReadOnly)) {
+                setReadOnly(false);
+            }
+        },
+        [setReadOnly],
     );
 
     return (
@@ -49,9 +55,7 @@ function LocalUnitsFormModal(props: Props) {
             size="pageWidth"
             withHeaderBorder
             headingLevel={2}
-            actions={!readOnly && (
-                <div ref={actionsContainerRef} />
-            )}
+            actions={<div ref={actionsContainerRef} />}
             headingContainerClassName={styles.headingContainer}
             headingDescription={
                 <div ref={headingDescriptionRef} />
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
index 6acc6a4c2..eb58cc495 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
@@ -16,7 +16,10 @@ import {
     List,
     TextOutput,
 } from '@ifrc-go/ui';
-import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
 import {
     numericIdSelector,
     stringNameSelector,
@@ -65,6 +68,7 @@ import {
     VALIDATED,
 } from '../common';
 import type { FilterValue } from '../Filters';
+import LocalUnitsFormModal from '../LocalUnitsFormModal';
 import { TYPE_HEALTH_CARE } from '../LocalUnitsFormModal/LocalUnitsForm/schema';
 
 import i18n from './i18n.json';
@@ -132,6 +136,12 @@ function LocalUnitsMap(props: Props) {
     } = props;
     const { countryResponse } = useOutletContext<CountryOutletContext>();
 
+    const [showLocalUnitModal, {
+        setTrue: setShowLocalUnitViewModalTrue,
+        setFalse: setShowLocalUnitViewModalFalse,
+    }] = useBooleanState(false);
+    const [readOnlyLocalUnitModal, setReadOnlyLocalUnitModal] = useState(true);
+
     const urlQuery = useMemo<GoApiUrlQuery<'/api/v2/public-local-units/'>>(
         () => ({
             limit: MAX_PAGE_LIMIT,
@@ -305,6 +315,22 @@ function LocalUnitsMap(props: Props) {
         [setClickedPointProperties],
     );
 
+    const handleLocalUnitHeadingClick = useCallback(
+        () => {
+            setReadOnlyLocalUnitModal(true);
+            setShowLocalUnitViewModalTrue();
+        },
+        [setShowLocalUnitViewModalTrue],
+    );
+
+    const handleLocalUnitsFormModalClose = useCallback(
+        () => {
+            setShowLocalUnitViewModalFalse();
+            setReadOnlyLocalUnitModal(true);
+        },
+        [setShowLocalUnitViewModalFalse],
+    );
+
     const emailRendererParams = useCallback(
         (_: string, email: string): LinkProps => ({
             className: styles.email,
@@ -417,7 +443,15 @@ function LocalUnitsMap(props: Props) {
                             popupClassName={styles.mapPopup}
                             coordinates={clickedPointProperties.lngLat}
                             onCloseButtonClick={handlePointClose}
-                            heading={localUnitName}
+                            heading={(
+                                <Button
+                                    name=""
+                                    variant="tertiary"
+                                    onClick={handleLocalUnitHeadingClick}
+                                >
+                                    {localUnitName}
+                                </Button>
+                            )}
                             contentViewType="vertical"
                             pending={localUnitDetailPending}
                             errored={isDefined(localUnitDetailError)}
@@ -543,6 +577,14 @@ function LocalUnitsMap(props: Props) {
                     iconElementClassName={styles.legendIcon}
                 />
             )}
+            {(showLocalUnitModal && (
+                <LocalUnitsFormModal
+                    onClose={handleLocalUnitsFormModalClose}
+                    localUnitId={clickedPointProperties?.localUnitId}
+                    readOnly={readOnlyLocalUnitModal}
+                    setReadOnly={setReadOnlyLocalUnitModal}
+                />
+            ))}
         </Container>
     );
 }
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx
index 0e2ddd3e0..5782af847 100644
--- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx
+++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx
@@ -1,4 +1,7 @@
-import { useCallback } from 'react';
+import {
+    useCallback,
+    useState,
+} from 'react';
 import { TableActions } from '@ifrc-go/ui';
 import {
     useBooleanState,
@@ -39,26 +42,37 @@ function LocalUnitsTableActions(props: Props) {
 
     const hasValidatePermission = !isGuestUser && (isSuperUser || isCountryAdmin(countryId));
 
-    const [showLocalUnitViewModal, {
-        setTrue: setShowLocalUnitViewModalTrue,
-        setFalse: setShowLocalUnitViewModalFalse,
-    }] = useBooleanState(false);
+    const [readOnlyLocalUnitModal, setReadOnlyLocalUnitModal] = useState(false);
 
-    const [showLocalUnitEditModal, {
-        setTrue: setShowLocalUnitEditModalTrue,
-        setFalse: setShowLocalUnitEditModalFalse,
+    const [showLocalUnitModal, {
+        setTrue: setShowLocalUnitModalTrue,
+        setFalse: setShowLocalUnitModalFalse,
     }] = useBooleanState(false);
 
     const handleLocalUnitsFormModalClose = useCallback(
         (shouldUpdate?: boolean) => {
-            setShowLocalUnitEditModalFalse();
-            setShowLocalUnitViewModalFalse();
+            setShowLocalUnitModalFalse();
 
             if (shouldUpdate) {
                 onActionSuccess();
             }
         },
-        [setShowLocalUnitViewModalFalse, setShowLocalUnitEditModalFalse, onActionSuccess],
+        [setShowLocalUnitModalFalse, onActionSuccess],
+    );
+
+    const handleViewLocalUnitClick = useCallback(
+        () => {
+            setReadOnlyLocalUnitModal(true);
+            setShowLocalUnitModalTrue();
+        },
+        [setShowLocalUnitModalTrue],
+    );
+    const handleEditLocalUnitClick = useCallback(
+        () => {
+            setReadOnlyLocalUnitModal(false);
+            setShowLocalUnitModalTrue();
+        },
+        [setShowLocalUnitModalTrue],
     );
 
     return (
@@ -70,7 +84,7 @@ function LocalUnitsTableActions(props: Props) {
                         <DropdownMenuItem
                             type="button"
                             name={localUnitId}
-                            onClick={setShowLocalUnitViewModalTrue}
+                            onClick={handleViewLocalUnitClick}
                             disabled={!hasValidatePermission}
                         >
                             {strings.localUnitsView}
@@ -78,7 +92,7 @@ function LocalUnitsTableActions(props: Props) {
                         <DropdownMenuItem
                             type="button"
                             name={localUnitId}
-                            onClick={setShowLocalUnitEditModalTrue}
+                            onClick={handleEditLocalUnitClick}
                             disabled={!hasValidatePermission}
                         >
                             {strings.localUnitsEdit}
@@ -101,11 +115,12 @@ function LocalUnitsTableActions(props: Props) {
                     localUnitId={localUnitId}
                 />
             </TableActions>
-            {(showLocalUnitViewModal || showLocalUnitEditModal) && (
+            {showLocalUnitModal && (
                 <LocalUnitsFormModal
                     onClose={handleLocalUnitsFormModalClose}
                     localUnitId={localUnitId}
-                    viewMode={showLocalUnitViewModal}
+                    readOnly={readOnlyLocalUnitModal}
+                    setReadOnly={setReadOnlyLocalUnitModal}
                 />
             )}
         </>