diff --git a/app/components/CategoryModal/index.tsx b/app/components/CategoryModal/index.tsx index 0cf1507..bb1668b 100644 --- a/app/components/CategoryModal/index.tsx +++ b/app/components/CategoryModal/index.tsx @@ -329,7 +329,7 @@ function CategoryModal(props: Props) { )} > - {`Are you sure you want to delete "${categories?.find((item) => item.id === deletingId)?.name || 'this category'}"? This action cannot be undone.`} + {`Deleting "${categories?.find((item) => item.id === deletingId)?.name || 'this category'}" will also delete every report that uses it. This action cannot be undone. Are you sure?`} )} diff --git a/app/components/EditDeleteActions/index.tsx b/app/components/EditDeleteActions/index.tsx index 66e6e72..e1ba55b 100644 --- a/app/components/EditDeleteActions/index.tsx +++ b/app/components/EditDeleteActions/index.tsx @@ -1,4 +1,5 @@ import { + type ReactNode, useCallback, useState, } from 'react'; @@ -24,6 +25,8 @@ export interface Props { itemTitle: string; to: keyof RoutesMap; deleteMode?: 'delete' | 'deactivate'; + deleteHeading?: string; + deleteMessage?: ReactNode; } const deleteCopy = { @@ -48,6 +51,8 @@ function EditDeleteActions(props: Props) { member, dashboard, deleteMode = 'delete', + deleteHeading, + deleteMessage, } = props; const copy = deleteCopy[deleteMode]; @@ -101,7 +106,7 @@ function EditDeleteActions(props: Props) { {showDeleteModal && ( )} > - {copy.message(itemTitle || 'this item')} + {deleteMessage ?? copy.message(itemTitle || 'this item')} )} diff --git a/app/utils/common.ts b/app/utils/common.ts index 7298f27..6d57b98 100644 --- a/app/utils/common.ts +++ b/app/utils/common.ts @@ -3,6 +3,7 @@ import { isNotDefined, } from '@togglecorp/fujs'; import { nonFieldError } from '@togglecorp/toggle-form'; +import type { CombinedError } from 'urql'; import type { AdminAreaLevel } from '#generated/types/graphql'; @@ -49,6 +50,10 @@ export const statusFilterOptions = [ export const errorMessage = 'Something went wrong. Please try again. '; +export function getErrorMessage(error: CombinedError | undefined) { + return error?.graphQLErrors?.[0]?.message || errorMessage; +} + export function getReadableFileSize(bytes: number | null | undefined): string { if (!bytes || bytes <= 0) { return '0 B'; diff --git a/app/views/CapacityAndResources/ResourceDashboards/index.tsx b/app/views/CapacityAndResources/ResourceDashboards/index.tsx index f631d0c..fc30fb0 100644 --- a/app/views/CapacityAndResources/ResourceDashboards/index.tsx +++ b/app/views/CapacityAndResources/ResourceDashboards/index.tsx @@ -37,6 +37,7 @@ import useRegionMap from '#hooks/useRegionMap'; import useRouting from '#hooks/useRouting'; import { errorMessage, + getErrorMessage, idSelector, } from '#utils/common'; import createDragHandleColumn from '#utils/table'; @@ -134,7 +135,7 @@ function ResourceDashboards() { } alert.show('Dashboard deleted successfully', { variant: 'success' }); } else { - alert.show(errorMessage, { variant: 'danger' }); + alert.show(getErrorMessage(resp.error), { variant: 'danger' }); } }).catch(() => { alert.show(errorMessage, { variant: 'danger' }); diff --git a/app/views/CapacityAndResources/index.tsx b/app/views/CapacityAndResources/index.tsx index 2fe8eff..4373246 100644 --- a/app/views/CapacityAndResources/index.tsx +++ b/app/views/CapacityAndResources/index.tsx @@ -29,6 +29,7 @@ import useFilterState from '#hooks/useFilterState'; import useRouting from '#hooks/useRouting'; import { errorMessage, + getErrorMessage, idSelector, } from '#utils/common'; @@ -101,7 +102,7 @@ function CapacityAndResourcesList() { } alert.show('Resource deleted successfully', { variant: 'success' }); } else { - alert.show(errorMessage, { variant: 'danger' }); + alert.show(getErrorMessage(resp.error), { variant: 'danger' }); } }).catch(() => { alert.show(errorMessage, { variant: 'danger' }); diff --git a/app/views/Documents/DocumentsFilters/index.tsx b/app/views/Documents/DocumentsFilters/index.tsx index 62fe36c..a599188 100644 --- a/app/views/Documents/DocumentsFilters/index.tsx +++ b/app/views/Documents/DocumentsFilters/index.tsx @@ -1,6 +1,5 @@ import { Button, - DateInput, TextInput, } from '@ifrc-go/ui'; import { type EntriesAsList } from '@togglecorp/toggle-form'; @@ -19,18 +18,6 @@ function DocumentsFilters({ }: Props) { return ( <> - - (); + const [, updateDashboard] = useHomeUpdateExternalDashboardMutation(); const queryVariables = useMemo(() => ({ @@ -120,27 +129,39 @@ function Home() { reExecuteQuickLinksQuery(); alert.show('Added to quick links', { variant: 'success' }); } else { - alert.show(errorMessage, { variant: 'danger' }); + alert.show(getErrorMessage(resp.error), { variant: 'danger' }); } }).catch(() => { alert.show(errorMessage, { variant: 'danger' }); }); }, [updateDashboard, reExecuteMainQuery, reExecuteQuickLinksQuery, alert]); - const handleRemoveFromQuickLinks = useCallback((id: string) => { - updateDashboard({ id, data: { showOnHome: false } }).then((resp) => { + const handleRemoveClick = useCallback((id: string) => { + setRemovingId(id); + }, []); + + const handleRemoveCancel = useCallback(() => { + setRemovingId(undefined); + }, []); + + const handleRemoveConfirm = useCallback(() => { + if (isNotDefined(removingId)) { + return; + } + setRemovingId(undefined); + updateDashboard({ id: removingId, data: { showOnHome: false } }).then((resp) => { const result = resp.data?.updateExternalDashboard; if (result?.ok) { reExecuteMainQuery(); reExecuteQuickLinksQuery(); alert.show('Removed from quick links', { variant: 'success' }); } else { - alert.show(errorMessage, { variant: 'danger' }); + alert.show(getErrorMessage(resp.error), { variant: 'danger' }); } }).catch(() => { alert.show(errorMessage, { variant: 'danger' }); }); - }, [updateDashboard, reExecuteMainQuery, reExecuteQuickLinksQuery, alert]); + }, [removingId, updateDashboard, reExecuteMainQuery, reExecuteQuickLinksQuery, alert]); const quickLinksColumns = useMemo(() => [ createNumberColumn( @@ -162,17 +183,17 @@ function Home() { 'action', (item) => ({ children: ( - Remove - + ), }), ), - ], [handleRemoveFromQuickLinks]); + ], [handleRemoveClick]); const columns = useMemo(() => [ createNumberColumn( @@ -277,6 +298,33 @@ function Home() { pending={dashboardsPending || pageOptionsPending} /> + {isDefined(removingId) && ( + + + + + )} + > + {`Are you sure you want to remove "${quickLinksResults?.find((item) => item.id === removingId)?.title || 'this dashboard'}" from quick links?`} + + )} ); } diff --git a/app/views/Links/index.tsx b/app/views/Links/index.tsx index 5e73665..55bf0ad 100644 --- a/app/views/Links/index.tsx +++ b/app/views/Links/index.tsx @@ -41,6 +41,7 @@ import useUrlSearchState from '#hooks/useUrlSearchState'; import routes from '#root/config/routes'; import { errorMessage, + getErrorMessage, idSelector, } from '#utils/common'; @@ -116,7 +117,7 @@ function Links() { reExecuteQuery(); alert.show('Link deleted successfully', { variant: 'success' }); } else { - alert.show(errorMessage, { variant: 'danger' }); + alert.show(getErrorMessage(resp.error), { variant: 'danger' }); } }).catch(() => { alert.show(errorMessage, { variant: 'danger' }); diff --git a/app/views/Login/index.tsx b/app/views/Login/index.tsx index 7c08915..dbdb4e6 100644 --- a/app/views/Login/index.tsx +++ b/app/views/Login/index.tsx @@ -97,7 +97,7 @@ function Login() { }); if (apiError) { - alert.show('Incorrect username/password', { + alert.show('Incorrect email/password', { variant: 'danger', }); return; @@ -190,7 +190,7 @@ function Login() { > { alert.show(errorMessage, { variant: 'danger' }); diff --git a/app/views/Preparedness/index.tsx b/app/views/Preparedness/index.tsx index 6c861b6..6432445 100644 --- a/app/views/Preparedness/index.tsx +++ b/app/views/Preparedness/index.tsx @@ -33,6 +33,7 @@ import useRegionMap from '#hooks/useRegionMap'; import useRouting from '#hooks/useRouting'; import { errorMessage, + getErrorMessage, idSelector, } from '#utils/common'; import createDragHandleColumn from '#utils/table'; @@ -127,7 +128,7 @@ function PreparednessList() { } alert.show('Dashboard deleted successfully', { variant: 'success' }); } else { - alert.show(errorMessage, { variant: 'danger' }); + alert.show(getErrorMessage(resp.error), { variant: 'danger' }); } }).catch(() => { alert.show(errorMessage, { variant: 'danger' }); diff --git a/app/views/Teams/TeamMembers/index.tsx b/app/views/Teams/TeamMembers/index.tsx index 317605e..ffa13ff 100644 --- a/app/views/Teams/TeamMembers/index.tsx +++ b/app/views/Teams/TeamMembers/index.tsx @@ -38,6 +38,7 @@ import useRegionMap from '#hooks/useRegionMap'; import useRouting from '#hooks/useRouting'; import { errorMessage, + getErrorMessage, idSelector, } from '#utils/common'; @@ -110,7 +111,7 @@ function TeamMembers() { reExecuteQuery(); alert.show('Team member deleted successfully', { variant: 'success' }); } else { - alert.show(errorMessage, { variant: 'danger' }); + alert.show(getErrorMessage(resp.error), { variant: 'danger' }); } }).catch(() => { alert.show(errorMessage, { variant: 'danger' }); diff --git a/app/views/Teams/index.tsx b/app/views/Teams/index.tsx index 6193a49..4c6571e 100644 --- a/app/views/Teams/index.tsx +++ b/app/views/Teams/index.tsx @@ -29,6 +29,7 @@ import useFilterState from '#hooks/useFilterState'; import useRouting from '#hooks/useRouting'; import { errorMessage, + getErrorMessage, idSelector, } from '#utils/common'; @@ -97,7 +98,7 @@ function Teams() { reExecuteQuery(); alert.show('Team deleted successfully', { variant: 'success' }); } else { - alert.show(errorMessage, { variant: 'danger' }); + alert.show(getErrorMessage(resp.error), { variant: 'danger' }); } }).catch(() => { alert.show(errorMessage, { variant: 'danger' }); diff --git a/app/views/Users/index.tsx b/app/views/Users/index.tsx index 62cf991..577c9fd 100644 --- a/app/views/Users/index.tsx +++ b/app/views/Users/index.tsx @@ -34,6 +34,7 @@ import useRegionMap from '#hooks/useRegionMap'; import useRouting from '#hooks/useRouting'; import { errorMessage, + getErrorMessage, idSelector, } from '#utils/common'; @@ -138,7 +139,7 @@ function UsersList() { reExecuteQuery(); alert.show('User deactivated successfully', { variant: 'success' }); } else { - alert.show(errorMessage, { variant: 'danger' }); + alert.show(getErrorMessage(resp.error), { variant: 'danger' }); } }).catch(() => { alert.show(errorMessage, { variant: 'danger' });