Merge pull request #1333 from IFRCGo/fix/local-unit-pop-up-heading

Local Unit Design Audit Fixes

Author: samshara

.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

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"

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 {
+    border: none;
+    background-color: var(--go-ui-color-gray-40);
+
+    .icon {
+        font-size: var(--go-ui-height-icon-multiplier);
+    }
+}

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"
     }
 }

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx

@@ -108,8 +108,9 @@ function FormColumnContainer(props: FormColumnContainerProps) {
 interface Props {
     readOnly?: boolean;
     onSuccess?: () => void;
+    onEditButtonClick?: () => void;
     localUnitId?: number;
-    actionsContainerRef?: RefObject<HTMLDivElement>;
+    actionsContainerRef: RefObject<HTMLDivElement>;
     headingDescriptionRef?: RefObject<HTMLDivElement>;
     headerDescriptionRef: RefObject<HTMLDivElement>;
 }
@@ -118,6 +119,7 @@ function LocalUnitsForm(props: Props) {
     const {
         readOnly = false,
         onSuccess,
+        onEditButtonClick,
         localUnitId,
         actionsContainerRef,
         headingDescriptionRef,
@@ -314,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}>

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/index.tsx

@@ -4,6 +4,7 @@ import {
 } 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,6 +14,7 @@ import styles from './styles.module.css';
 interface Props {
     localUnitId?: number;
     readOnly?: boolean;
+    setReadOnly?: React.Dispatch<React.SetStateAction<boolean>>;
     onClose: (requestDone?: boolean) => void;
 }
 
@@ -21,6 +23,7 @@ function LocalUnitsFormModal(props: Props) {
         onClose,
         localUnitId,
         readOnly,
+        setReadOnly,
     } = props;
 
     const strings = useTranslation(i18n);
@@ -29,10 +32,21 @@ function LocalUnitsFormModal(props: Props) {
     const headerDescriptionRef = useRef<HTMLDivElement>(null);
 
     const handleSuccess = useCallback(
-        () => { onClose(true); },
+        () => {
+            onClose(true);
+        },
         [onClose],
     );
 
+    const handleEditButtonClick = useCallback(
+        () => {
+            if (isDefined(setReadOnly)) {
+                setReadOnly(false);
+            }
+        },
+        [setReadOnly],
+    );
+
     return (
         <Modal
             className={styles.localUnitsFormModal}
@@ -41,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} />
@@ -58,6 +70,7 @@ function LocalUnitsFormModal(props: Props) {
                 localUnitId={localUnitId}
                 onSuccess={handleSuccess}
                 readOnly={readOnly}
+                onEditButtonClick={handleEditButtonClick}
                 actionsContainerRef={actionsContainerRef}
                 headingDescriptionRef={headingDescriptionRef}
                 headerDescriptionRef={headerDescriptionRef}

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,13 +443,20 @@ 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)}
                             errorMessage={localUnitDetailError?.value.messageForNotification}
                             compactMessage
-                            ellipsizeHeading
                         >
                             <TextOutput
                                 label={strings.localUnitDetailLastUpdate}
@@ -544,6 +577,14 @@ function LocalUnitsMap(props: Props) {
                     iconElementClassName={styles.legendIcon}
                 />
             )}
+            {(showLocalUnitModal && (
+                <LocalUnitsFormModal
+                    onClose={handleLocalUnitsFormModalClose}
+                    localUnitId={clickedPointProperties?.localUnitId}
+                    readOnly={readOnlyLocalUnitModal}
+                    setReadOnly={setReadOnlyLocalUnitModal}
+                />
+            ))}
         </Container>
     );
 }

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,15 +84,15 @@ function LocalUnitsTableActions(props: Props) {
                         <DropdownMenuItem
                             type="button"
                             name={localUnitId}
-                            onClick={setShowLocalUnitViewModalTrue}
+                            onClick={handleViewLocalUnitClick}
                             disabled={!hasValidatePermission}
                         >
                             {strings.localUnitsView}
                         </DropdownMenuItem>
                         <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}
-                    readOnly={showLocalUnitViewModal}
+                    readOnly={readOnlyLocalUnitModal}
+                    setReadOnly={setReadOnlyLocalUnitModal}
                 />
             )}
         </>