Add error notifications for api response

danielfdsilva · danielfdsilva · commit 5165cd23fc7b · 2025-03-03T17:07:40.000Z
diff --git a/packages/client/src/components/Notifications.tsx b/packages/client/src/components/Notifications.tsx
@@ -0,0 +1,235 @@
+import {
+  Badge,
+  Box,
+  Button,
+  Flex,
+  Heading,
+  IconButton,
+  Text,
+  useToast
+} from '@chakra-ui/react';
+import {
+  CollecticonBell,
+  CollecticonCircleExclamation,
+  CollecticonXmarkSmall
+} from '@devseed-ui/collecticons-chakra';
+import React, { useEffect } from 'react';
+
+interface DetailResponse {
+  status: 400;
+  statusText: string;
+  detail: {
+    detail: { loc: string[]; msg: string }[];
+    body: any;
+  };
+}
+
+export type AppNotification =
+  | {
+      type: 'validation-error';
+      id: number;
+      title?: string;
+      path: string;
+      message: string;
+    }
+  | {
+      type: 'error';
+      id: number;
+      title?: string;
+      message: string;
+    };
+
+export function parseResponseForNotifications(response: DetailResponse) {
+  if (response.status === 400 && response.detail.detail) {
+    const notifications = response.detail.detail.reduce((acc, error, i) => {
+      let p: string[] = error.loc.slice(1);
+      const last = error.loc[error.loc.length - 1];
+
+      if (last === 'float' || last === 'int') {
+        p = p.slice(0, -1);
+      }
+
+      const path = p.join('.');
+
+      return acc.has(path)
+        ? acc
+        : acc.set(path, {
+            id: i,
+            type: 'validation-error',
+            path,
+            message: error.msg
+          });
+    }, new Map<string, AppNotification>());
+
+    return Array.from(notifications.values());
+  }
+  return [
+    {
+      id: 0,
+      type: 'error',
+      title: `Error ${response.status}`,
+      message: 'An error occurred: ' + response.statusText
+    } as AppNotification
+  ];
+}
+
+interface NotificationButtonProps {
+  notifications: AppNotification[];
+}
+
+function useNotificationsToast(notifications: AppNotification[]) {
+  const toast = useToast();
+
+  const show = () => {
+    if (!toast.isActive('notifications')) {
+      toast({
+        id: 'notifications',
+        position: 'bottom-right',
+        duration: null,
+        render: () => (
+          <NotificationBox
+            notifications={notifications}
+            onCloseClick={() => {
+              toast.close('notifications');
+            }}
+          />
+        )
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (notifications.length !== 0) {
+      show();
+    } else {
+      toast.close('notifications');
+    }
+  }, [notifications.length]);
+
+  return {
+    show,
+    hide: () => {
+      toast.close('notifications');
+    }
+  };
+}
+
+export function NotificationButton(props: NotificationButtonProps) {
+  const { notifications } = props;
+
+  const toast = useNotificationsToast(notifications);
+
+  return (
+    <Button
+      aria-label='Notifications'
+      variant='outline'
+      onClick={() => {
+        toast.show();
+      }}
+    >
+      <CollecticonBell />
+      {!!notifications.length && (
+        <Badge
+          variant='solid'
+          color='white'
+          bg='base.400a'
+          position='absolute'
+          top='-0.5rem'
+          right='-0.5rem'
+          px={2}
+        >
+          {notifications.length < 10
+            ? `0${notifications.length}`
+            : notifications.length}
+        </Badge>
+      )}
+    </Button>
+  );
+}
+
+interface NotificationBoxProps {
+  onCloseClick: () => void;
+  notifications: AppNotification[];
+}
+
+export function NotificationBox(props: NotificationBoxProps) {
+  const { onCloseClick, notifications } = props;
+  return (
+    <Box
+      shadow='md'
+      borderRadius='md'
+      bg='surface.500'
+      w={80}
+      overflow='hidden'
+    >
+      <Flex
+        p={4}
+        borderBottom='1px solid'
+        borderColor='base.100'
+        boxShadow='0 1px 0 0 rgba(0, 0, 0, 0.08)'
+        position='relative'
+        alignItems='center'
+        gap={4}
+      >
+        <Heading size='xs'>Notifications</Heading>
+
+        {!!notifications.length && (
+          <Badge variant='solid' color='white' bg='base.400a' px={2}>
+            {' '}
+            {notifications.length < 10
+              ? `0${notifications.length}`
+              : notifications.length}
+          </Badge>
+        )}
+        <IconButton
+          icon={<CollecticonXmarkSmall />}
+          aria-label='Close notifications'
+          size='sm'
+          variant='outline'
+          onClick={onCloseClick}
+          ml='auto'
+        />
+      </Flex>
+      <Box overflowY='scroll' maxH='30rem'>
+        {notifications.length ? (
+          notifications.map((n) => <ErrorNotification key={n.id} {...n} />)
+        ) : (
+          <Flex height={20} alignItems='center' justifyContent='center' px={8}>
+            Nothing to show besides this satellite 🛰️
+          </Flex>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+function ErrorNotification(props: AppNotification) {
+  const { message, title } = props;
+
+  return (
+    <Flex boxShadow='0 -1px 0 0 rgba(0, 0, 0, 0.08)' position='relative'>
+      <Flex bg='danger.200' p={4}>
+        <CollecticonCircleExclamation color='danger.500' />
+      </Flex>
+      <Box p={4}>
+        <Text fontWeight='bold' mb={2}>
+          {title || props.type === 'validation-error'
+            ? 'Validation error'
+            : 'Error'}
+        </Text>
+        {props.type === 'validation-error' && (
+          <>
+            <Text as='span' fontWeight='bold'>
+              At:
+            </Text>{' '}
+            <Text as='span' fontStyle='italic'>
+              {props.path}
+            </Text>
+            <br />
+          </>
+        )}
+        <Text>{message}</Text>
+      </Box>
+    </Flex>
+  );
+}
diff --git a/packages/client/src/pages/CollectionForm/EditForm.tsx b/packages/client/src/pages/CollectionForm/EditForm.tsx
@@ -16,14 +16,16 @@ import {
 
 import { InnerPageHeaderSticky } from '$components/InnerPageHeader';
 import { CollecticonForm } from '$components/icons/form';
+import { AppNotification, NotificationButton } from '$components/Notifications';
 
 type FormView = 'fields' | 'json';
 
 export function EditForm(props: {
   initialData?: any;
   onSubmit: (data: any, formikHelpers: FormikHelpers<any>) => void;
+  notifications?: AppNotification[];
 }) {
-  const { initialData, onSubmit } = props;
+  const { initialData, onSubmit, notifications = [] } = props;
   const [stacData, setStacData] = useState(initialData || {});
 
   const { plugins, formData, toOutData, isLoading } =
@@ -75,17 +77,18 @@ export function EditForm(props: {
                       : 'New Collection'
                   }
                   actions={
-                    <>
+                    <Flex gap={4}>
+                      <NotificationButton notifications={notifications} />
                       <Button
                         type='submit'
                         isDisabled={isSubmitting}
                         colorScheme='primary'
-                        size='sm'
+                        size='md'
                         leftIcon={<CollecticonTickSmall />}
                       >
                         {initialData ? 'Save' : 'Create'}
                       </Button>
-                    </>
+                    </Flex>
                   }
                 />
                 <Flex alignItems='center' justifyContent='space-between' p={4}>
diff --git a/packages/client/src/pages/CollectionForm/index.tsx b/packages/client/src/pages/CollectionForm/index.tsx
@@ -8,6 +8,10 @@ import { StacCollection } from 'stac-ts';
 import usePageTitle from '$hooks/usePageTitle';
 import Api from 'src/api';
 import { EditForm } from './EditForm';
+import {
+  AppNotification,
+  parseResponseForNotifications
+} from '$components/Notifications';
 
 export function CollectionForm() {
   const { collectionId } = useParams();
@@ -24,9 +28,14 @@ export function CollectionFormNew() {
 
   const toast = useToast();
   const navigate = useNavigate();
+  const [notifications, setNotifications] = useState<
+    AppNotification[] | undefined
+  >();
 
   const onSubmit = async (data: any, formikHelpers: FormikHelpers<any>) => {
     try {
+      toast.closeAll();
+      setNotifications(undefined);
       toast({
         id: 'collection-submit',
         title: 'Creating collection...',
@@ -46,24 +55,22 @@ export function CollectionFormNew() {
 
       navigate(`/collections/${data.id}`);
     } catch (error: any) {
-      toast.update('collection-submit', {
-        title: 'Collection creation failed',
-        description: error.detail?.code,
-        status: 'error',
-        duration: 8000,
-        isClosable: true
-      });
+      toast.close('collection-submit');
+      setNotifications(parseResponseForNotifications(error));
     }
     formikHelpers.setSubmitting(false);
   };
 
-  return <EditForm onSubmit={onSubmit} />;
+  return <EditForm onSubmit={onSubmit} notifications={notifications} />;
 }
 
 export function CollectionFormEdit(props: { id: string }) {
   const { id } = props;
   const { collection, state, error } = useCollection(id);
   const [triedLoading, setTriedLoading] = useState(!!collection);
+  const [notifications, setNotifications] = useState<
+    AppNotification[] | undefined
+  >();
 
   usePageTitle(collection ? `Edit collection ${id}` : 'Edit collection');
 
@@ -87,14 +94,15 @@ export function CollectionFormEdit(props: { id: string }) {
 
   const onSubmit = async (data: any, formikHelpers: FormikHelpers<any>) => {
     try {
+      toast.closeAll();
+      setNotifications(undefined);
       toast({
         id: 'collection-submit',
         title: 'Updating collection...',
         status: 'loading',
         duration: null,
         position: 'bottom-right'
       });
-
       await collectionTransaction().update(id, data);
 
       toast.update('collection-submit', {
@@ -106,18 +114,19 @@ export function CollectionFormEdit(props: { id: string }) {
 
       navigate(`/collections/${data.id}`);
     } catch (error: any) {
-      toast.update('collection-submit', {
-        title: 'Collection update failed',
-        description: error.detail?.code,
-        status: 'error',
-        duration: 8000,
-        isClosable: true
-      });
+      toast.close('collection-submit');
+      setNotifications(parseResponseForNotifications(error));
     }
     formikHelpers.setSubmitting(false);
   };
 
-  return <EditForm onSubmit={onSubmit} initialData={collection} />;
+  return (
+    <EditForm
+      onSubmit={onSubmit}
+      initialData={collection}
+      notifications={notifications}
+    />
+  );
 }
 
 type collectionTransactionType = {
