Move validate button to main local units table

Author: frozenhelium

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

@@ -261,6 +261,8 @@ function LocalUnitsMap(props: Props) {
                     properties: {
                         id: localUnit.id,
                         localUnitId: localUnit.id,
+                        // NOTE: we're adding radius here because of some bug in mapbox (not sure)
+                        // which doesn't render circle if there aren't any expressions
                         radius: 12,
                         type: localUnit.type,
                         subType: localUnit.type === TYPE_HEALTH_CARE
@@ -386,6 +388,8 @@ function LocalUnitsMap(props: Props) {
                             layerOptions={{
                                 type: 'circle',
                                 paint: {
+                                    // NOTE: we're using expression for radius here because
+                                    // of a bug in mapbox (potentially)
                                     'circle-radius': ['get', 'radius'],
                                     'circle-color': COLOR_PRIMARY_RED,
                                     'circle-opacity': 0.7,

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/i18n.json

@@ -5,6 +5,7 @@
         "localUnitsView": "View",
         "localUnitsDelete": "Delete",
         "localUnitsValidate": "Validate",
+        "localUnitsValidated": "Validated",
         "deleteLocalUnitHeading": "Delete Local Unit Confirmation",
         "deleteLocalUnitMessage": "Are you sure you want to delete \"{localUnitName}\"?",
         "validationMessage": "{localUnitName} was validated.",

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { TableActions } from '@ifrc-go/ui';
+import { ConfirmButton, TableActions } from '@ifrc-go/ui';
 import {
     useBooleanState,
     useTranslation,
@@ -19,6 +19,7 @@ import LocalUnitsFormModal from '../../LocalUnitsFormModal';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
+import { CheckboxCircleLineIcon } from '@ifrc-go/icons';
 
 export interface Props {
     countryId: number;
@@ -92,6 +93,7 @@ function LocalUnitsTableActions(props: Props) {
     return (
         <>
             <TableActions
+                className={styles.localUnitTableActions}
                 persistent
                 extraActions={(
                     <>
@@ -113,30 +115,29 @@ function LocalUnitsTableActions(props: Props) {
                                 {strings.localUnitsEdit}
                             </DropdownMenuItem>
                         )}
-                        <DropdownMenuItem
-                            persist
-                            // NOTE sending an empty post request to validate the local unit
-                            name={null}
-                            type="confirm-button"
-                            variant="tertiary"
-                            className={styles.button}
-                            confirmHeading={strings.validateLocalUnitHeading}
-                            confirmMessage={resolveToString(
-                                strings.validateLocalUnitMessage,
-                                { localUnitName: localUnitName ?? '' },
-                            )}
-                            onConfirm={validateLocalUnit}
-                            disabled={
-                                validateLocalUnitPending
-                            || !hasValidatePermission
-                            || isValidated
-                            }
-                        >
-                            {strings.localUnitsValidate}
-                        </DropdownMenuItem>
                     </>
                 )}
-            />
+            >
+                <ConfirmButton
+                    // NOTE sending an empty post request to validate the local unit
+                    name={null}
+                    spacing="compact"
+                    confirmHeading={strings.validateLocalUnitHeading}
+                    confirmMessage={resolveToString(
+                        strings.validateLocalUnitMessage,
+                        { localUnitName: localUnitName ?? '' },
+                    )}
+                    onConfirm={validateLocalUnit}
+                    disabled={
+                        validateLocalUnitPending
+                        || !hasValidatePermission
+                        || isValidated
+                    }
+                    icons={isValidated && <CheckboxCircleLineIcon className={styles.icon} />}
+                >
+                    {isValidated ? strings.localUnitsValidated : strings.localUnitsValidate}
+                </ConfirmButton>
+            </TableActions>
             {(showLocalUnitViewModal || showLocalUnitEditModal) && (
                 <LocalUnitsFormModal
                     onClose={handleLocalUnitsFormModalClose}

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/styles.module.css

@@ -1,3 +1,5 @@
-.button {
-    padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);
+.local-unit-table-actions {
+    .icon {
+        font-size: var(--go-ui-height-icon-multiplier);
+    }
 }

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/i18n.json

@@ -6,7 +6,6 @@
         "localUnitsTableType": "Type",
         "localUnitsTableFocal": "Focal Person",
         "localUnitsTablePhoneNumber": "Phone Number",
-        "localUnitsTableEmail": "Email",
-        "localUnitsTableValidated": "Validated"
+        "localUnitsTableEmail": "Email"
     }
 }

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

@@ -122,22 +122,19 @@ function LocalUnitsTable(props: Props) {
                 strings.localUnitsTableEmail,
                 (item) => item.email,
             ),
-            createBooleanColumn<LocalUnitsTableListItem, number>(
-                'validated',
-                strings.localUnitsTableValidated,
-                (item) => item.validated,
-            ),
             createElementColumn<LocalUnitsTableListItem, number, LocalUnitsTableActionsProps>(
                 'actions',
                 '',
                 LocalUnitsTableActions,
+                // FIXME: this should be added to a callback
                 (_, item) => ({
                     countryId: item.country,
                     localUnitId: item.id,
                     isValidated: item.validated,
                     localUnitName: item.local_branch_name ?? item.english_branch_name,
                     onActionSuccess: refetchLocalUnits,
                 }),
+                { columnClassName: styles.actions },
             ),
         ]),
         [
@@ -147,7 +144,6 @@ function LocalUnitsTable(props: Props) {
             strings.localUnitsTableFocal,
             strings.localUnitsTablePhoneNumber,
             strings.localUnitsTableEmail,
-            strings.localUnitsTableValidated,
             refetchLocalUnits,
         ],
     );

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/styles.module.css

@@ -5,4 +5,9 @@
         width: 8rem;
         min-width: 8rem;
     }
+
+    .actions {
+        width: 11rem;
+        min-width: 11rem;
+    }
 }