Add retrigger button and mutation for the region in geo area project

edit page
the-deep · Dec 5, 2024 · 5ca9c26 · 5ca9c26
1 parent 7bdd90f
commit 5ca9c26
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 20 deletions.
diff --git a/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/AddAdminLevelForm/index.tsx b/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/AddAdminLevelForm/index.tsx
@@ -151,6 +151,7 @@ interface Props {
     value: PartialAdminLevel;
     isPublished?: boolean;
     adminLevelOptions?: AdminLevelType[];
+    onAdminLevelAddSuccess: () => void;
 }
 
 function AddAdminLevelForm(props: Props) {
@@ -160,6 +161,7 @@ function AddAdminLevelForm(props: Props) {
         onSave,
         value: valueFromProps,
         isPublished,
+        onAdminLevelAddSuccess,
         onDelete,
     } = props;
 
@@ -268,6 +270,7 @@ function AddAdminLevelForm(props: Props) {
                 }
 
                 if (isDefined(result) && ok) {
+                    onAdminLevelAddSuccess();
                     alert.show(
                         'Admin level is successfully updated!',
                         { variant: 'success' },

diff --git a/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/index.tsx b/app/views/ProjectEdit/GeoAreas/RegionCard/AddAdminLevelPane/index.tsx
@@ -18,6 +18,7 @@ interface Props {
     adminLevelOptions?: AdminLevelType[];
     name: string;
     regionId: string;
+    onAdminLevelAddSuccess: () => void;
 }
 
 function AddAdminLevelPane(props: Props) {
@@ -28,6 +29,7 @@ function AddAdminLevelPane(props: Props) {
         isPublished,
         adminLevelOptions,
         name,
+        onAdminLevelAddSuccess,
         regionId,
     } = props;
 
@@ -36,6 +38,7 @@ function AddAdminLevelPane(props: Props) {
             name={name}
         >
             <AddAdminLevelForm
+                onAdminLevelAddSuccess={onAdminLevelAddSuccess}
                 regionId={regionId}
                 value={value}
                 onSave={onSave}

diff --git a/app/views/ProjectEdit/GeoAreas/RegionCard/index.tsx b/app/views/ProjectEdit/GeoAreas/RegionCard/index.tsx
@@ -17,6 +17,7 @@ import {
     IoTrashBinOutline,
     IoInformationCircleOutline,
     IoAdd,
+    IoReload,
 } from 'react-icons/io5';
 import {
     gql,
@@ -37,6 +38,7 @@ import {
     List,
     useAlert,
 } from '@the-deep/deep-ui';
+import NonFieldError from '#components/NonFieldError';
 import {
     RegionsForGeoAreasQuery,
     PublishRegionMutation,
@@ -48,6 +50,8 @@ import {
     DeleteRegionMutationVariables,
     DeleteAdminLevelMutation,
     DeleteAdminLevelMutationVariables,
+    RetriggerRegionMutation,
+    RetriggerRegionMutationVariables,
 } from '#generated/types';
 import {
     ObjectError,
@@ -74,6 +78,15 @@ const PUBLISH_REGION = gql`
     }
 `;
 
+const RETRIGGER_REGION = gql`
+    mutation RetriggerRegion($regionId: ID!) {
+        retriggerRegion(regionId: $regionId) {
+            ok
+            errors
+        }
+    }
+`;
+
 const DELETE_REGION = gql`
     mutation DeleteRegion($projectId: ID!, $regionId: [ID!]) {
         project(id: $projectId) {
@@ -122,7 +135,7 @@ const DELETE_ADMIN_LEVEL = gql`
     }
 `;
 
-interface Props {
+export interface Props {
     region: Region;
     className?: string;
     activeProject: string;
@@ -135,8 +148,10 @@ interface Props {
     onAdminLevelUpdate?: () => void;
     navigationDisabled?: boolean;
     isPublished: boolean;
+    onAdminLevelAddSuccess: () => void;
+    onRegionRetriggerSuccess: () => void;
     onRegionPublishSuccess: () => void;
-    onRegionRemoveSuccess: () => void;
+    onRegionDeleteSuccess: () => void;
 }
 
 function RegionCard(props: Props) {
@@ -153,8 +168,10 @@ function RegionCard(props: Props) {
         onTempAdminLevelChange,
         navigationDisabled,
         onAdminLevelUpdate,
+        onAdminLevelAddSuccess,
+        onRegionRetriggerSuccess,
         onRegionPublishSuccess,
-        onRegionRemoveSuccess,
+        onRegionDeleteSuccess,
     } = props;
 
     // setting this so that when user add an admin level, it is updated
@@ -226,6 +243,48 @@ function RegionCard(props: Props) {
         },
     );
 
+    const [
+        retriggerRegion,
+        {
+            loading: retriggerRegionPending,
+        },
+    ] = useMutation<RetriggerRegionMutation, RetriggerRegionMutationVariables>(
+        RETRIGGER_REGION,
+        {
+            onCompleted: (response) => {
+                if (!response.retriggerRegion) {
+                    return;
+                }
+
+                const { ok, errors } = response.retriggerRegion;
+
+                if (errors) {
+                    const formError = transformToFormError(
+                        removeNull(response.retriggerRegion.errors) as ObjectError[],
+                    );
+                    alert.show(
+                        formError?.[internal] as string,
+                        { variant: 'error' },
+                    );
+                }
+
+                if (ok) {
+                    alert.show(
+                        'Selected region retrigger successfully',
+                        { variant: 'success' },
+                    );
+                    onRegionRetriggerSuccess();
+                }
+            },
+            onError: () => {
+                alert.show(
+                    'Failed to retrigger region.',
+                    { variant: 'error' },
+                );
+            },
+        },
+    );
+
     const [
         deleteAdminLevel,
         {
@@ -300,7 +359,7 @@ function RegionCard(props: Props) {
                         'Region is successfully deleted!',
                         { variant: 'success' },
                     );
-                    onRegionRemoveSuccess();
+                    onRegionDeleteSuccess();
                 }
             },
             onError: () => {
@@ -312,6 +371,19 @@ function RegionCard(props: Props) {
         },
     );
 
+    const handleRegionRetriggerClick = useCallback(
+        () => {
+            if (region.id) {
+                retriggerRegion({
+                    variables: {
+                        regionId: region.id,
+                    },
+                });
+            }
+        },
+        [retriggerRegion, region],
+    );
+
     const handleDeleteRegionClick = useCallback(
         () => {
             if (region.id) {
@@ -460,13 +532,15 @@ function RegionCard(props: Props) {
             isPublished,
             adminLevelOptions: adminLevels,
             regionId: region.id,
+            onAdminLevelAddSuccess,
         }),
         [
             region.id,
             isPublished,
             adminLevels,
             handleAdminLevelSave,
             handleAdminLevelDelete,
+            onAdminLevelAddSuccess,
         ],
     );
 
@@ -497,20 +571,36 @@ function RegionCard(props: Props) {
             onExpansionChange={handleExpansion}
             expansionTriggerArea="arrow"
             headerActions={(
-                <QuickActionConfirmButton
-                    name="deleteButton"
-                    title="Remove geo area from this project"
-                    onConfirm={handleDeleteRegionClick}
-                    message="Removing the geo area will remove all the tagged geo data under your project.
-                    The removal of tags cannot be undone.
-                    Are you sure you want to remove this geo area from the project?"
-                    showConfirmationInitially={false}
-                    disabled={navigationDisabled}
-                >
-                    <IoTrashBinOutline />
-                </QuickActionConfirmButton>
+                <>
+                    {!isPublished && region.status === 'FAILED' && (
+                        <QuickActionConfirmButton
+                            name="retrigger"
+                            title="Retrigger region"
+                            message="Are you sure you want to retrigger the selected region?"
+                            onConfirm={handleRegionRetriggerClick}
+                            disabled={retriggerRegionPending}
+                        >
+                            <IoReload />
+                        </QuickActionConfirmButton>
+                    )}
+                    <QuickActionConfirmButton
+                        name="deleteButton"
+                        title="Remove geo area from this project"
+                        onConfirm={handleDeleteRegionClick}
+                        message="Removing the geo area will remove all the tagged geo data under your project.
+                        The removal of tags cannot be undone.
+                        Are you sure you want to remove this geo area from the project?"
+                        showConfirmationInitially={false}
+                        disabled={navigationDisabled}
+                    >
+                        <IoTrashBinOutline />
+                    </QuickActionConfirmButton>
+                </>
             )}
         >
+            {!isPublished && region.status === 'FAILED' && (
+                <NonFieldError error="An error occurred. Please check all values and retrigger the action" />
+            )}
             {!isPublished && (
                 <Message
                     icon={(<IoInformationCircleOutline />)}
@@ -547,6 +637,7 @@ function RegionCard(props: Props) {
                             navigationDisabled
                             || pendingPublishRegion
                             || adminLevels.length < 1
+                            || region.status === 'FAILED'
                         )}
                     >
                         Publish Area

diff --git a/app/views/ProjectEdit/GeoAreas/index.tsx b/app/views/ProjectEdit/GeoAreas/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
     IoAdd,
 } from 'react-icons/io5';
@@ -21,7 +21,7 @@ import {
 import _ts from '#ts';
 
 import RegionsMap from './RegionsMap';
-import RegionCard from './RegionCard';
+import RegionCard, { Props as RegionCardProps } from './RegionCard';
 import CustomGeoAddModal from './CustomGeoAddModal';
 
 import styles from './styles.css';
@@ -47,6 +47,7 @@ const REGIONS_FOR_GEO_AREAS = gql`
                 }
                 title
                 public
+                status
             }
         }
     }
@@ -97,6 +98,8 @@ function GeoAreas(props: Props) {
         data: regions,
         loading: regionsLoading,
         refetch: regionsRefetch,
+        startPolling,
+        stopPolling,
     } = useQuery<RegionsForGeoAreasQuery, RegionsForGeoAreasQueryVariables>(
         REGIONS_FOR_GEO_AREAS,
         {
@@ -106,6 +109,21 @@ function GeoAreas(props: Props) {
         },
     );
 
+    const shouldPoll = useMemo(() => regions?.project?.regions?.some(
+        (region) => region.status === 'INITIATED',
+    ), [regions?.project?.regions]);
+
+    useEffect(
+        () => {
+            if (shouldPoll) {
+                startPolling(500);
+            } else {
+                stopPolling();
+            }
+        },
+        [shouldPoll, startPolling, stopPolling],
+    );
+
     const handleRegionSet = useCallback(
         (value: string | undefined) => {
             setActiveRegion(value);
@@ -137,7 +155,7 @@ function GeoAreas(props: Props) {
     );
 
     const regionRendererParams = useCallback(
-        (_: number, data: Region) => {
+        (_: number, data: Region): RegionCardProps => {
             const isExpanded = data.id === activeRegion;
             return {
                 region: data,
@@ -151,7 +169,9 @@ function GeoAreas(props: Props) {
                 onTempAdminLevelChange: isExpanded ? setTempAdminLevel : undefined,
                 onAdminLevelUpdate: isExpanded ? updateMapTriggerId : undefined,
                 onRegionPublishSuccess: regionsRefetch,
-                onRegionRemoveSuccess: regionsRefetch,
+                onRegionDeleteSuccess: regionsRefetch,
+                onAdminLevelAddSuccess: regionsRefetch,
+                onRegionRetriggerSuccess: regionsRefetch,
                 navigationDisabled,
             };
         },