chore(inspect): minor UI improvements (#3040)

* Improve query client

* Add a welcome screen

* Invalidate projects after creating a new project

* Fix grid spacing

* Invalidate only after all items are uploaded

Via open-edge-platform/training_extensions#4905

Co-authored-by: João Vilaça <joao.vilaca@intel.com>

* Render toast messages

* Move toast into router provider

This allows us to render components that rely on router contexts such as useParams

* Set font family for sonner

* Fix lint

* Fix cyclic dependencies

---------

Co-authored-by: João Vilaça <joao.vilaca@intel.com>

Author: MarkRedeman

application/ui/src/assets/icons/fire-works.svg

@@ -19,3 +19,4 @@ export { ReactComponent as VideoFile } from './video-file.svg';
 export { ReactComponent as Webcam } from './webcam.svg';
 export { ReactComponent as Webhook } from './webhook.svg';
 export { ReactComponent as Image } from './image.svg';
+export { ReactComponent as Fireworks } from './fire-works.svg';

application/ui/src/assets/icons/index.ts

@@ -5,7 +5,7 @@ import { Button, Heading, IllustratedMessage, View } from '@geti/ui';
 import { NotFound } from '@geti/ui/icons';
 import { isRouteErrorResponse, useRouteError } from 'react-router';
 
-import { paths } from '../../router';
+import { paths } from '../../routes/paths';
 import { redirectTo } from '../../routes/utils';
 
 const useErrorMessage = () => {

application/ui/src/components/error-page/error-page.tsx

@@ -1,4 +1,4 @@
-import { Grid, Heading, minmax, repeat } from '@geti/ui';
+import { Flex, Grid, Heading, minmax, repeat } from '@geti/ui';
 
 import { DatasetItemContainer } from './dataset-item/dataset-item.component';
 import { MediaItem } from './types';
@@ -17,17 +17,20 @@ export const DatasetList = ({ mediaItems }: DatasetItemProps) => {
     ];
 
     return (
-        <Grid
-            flex={1}
-            columns={repeat('auto-fill', minmax('size-1600', '1fr'))}
-            rows={['max-content', '1fr']}
-            gap={'size-100'}
-            alignContent={'start'}
-        >
-            <Heading gridColumn={'1/-1'}>Normal images</Heading>
-            {mediaItemsToRender.map((mediaItem, index) => (
-                <DatasetItemContainer key={mediaItem?.id ?? index} mediaItem={mediaItem} />
-            ))}
-        </Grid>
+        <Flex gap='size-200' direction={'column'}>
+            <Heading>Normal images</Heading>
+
+            <Grid
+                flex={1}
+                columns={repeat('auto-fill', minmax('size-1600', '1fr'))}
+                rows={['max-content', '1fr']}
+                gap={'size-100'}
+                alignContent={'start'}
+            >
+                {mediaItemsToRender.map((mediaItem, index) => (
+                    <DatasetItemContainer key={mediaItem?.id ?? index} mediaItem={mediaItem} />
+                ))}
+            </Grid>
+        </Flex>
     );
 };

application/ui/src/components/notification/notification.component.tsx

@@ -2,7 +2,8 @@ import { Suspense } from 'react';
 
 import { $api } from '@geti-inspect/api';
 import { useProjectIdentifier } from '@geti-inspect/hooks';
-import { Button, Divider, FileTrigger, Flex, Heading, Loading, View } from '@geti/ui';
+import { Button, Divider, FileTrigger, Flex, Heading, Loading, toast, View } from '@geti/ui';
+import { useQueryClient } from '@tanstack/react-query';
 
 import { DatasetList } from './dataset-list.component';
 import { DatasetStatusPanel } from './dataset-status-panel.component';
@@ -25,28 +26,47 @@ const useMediaItems = () => {
 
 const UploadImages = () => {
     const { projectId } = useProjectIdentifier();
+    const queryClient = useQueryClient();
 
     const captureImageMutation = $api.useMutation('post', '/api/projects/{project_id}/capture');
 
-    const captureImage = (file: File) => {
-        const formData = new FormData();
-        formData.append('file', file);
-
-        captureImageMutation.mutate({
-            // @ts-expect-error There is an incorrect type in OpenAPI
-            body: formData,
-            params: {
-                path: {
-                    project_id: projectId,
-                },
-            },
+    const handleAddMediaItem = async (files: File[]) => {
+        const uploadPromises = files.map((file) => {
+            const formData = new FormData();
+            formData.append('file', file);
+
+            return captureImageMutation.mutateAsync({
+                params: { path: { project_id: projectId } },
+                // @ts-expect-error There is an incorrect type in OpenAPI
+                body: formData,
+            });
         });
+
+        const promises = await Promise.allSettled(uploadPromises);
+
+        const succeeded = promises.filter((result) => result.status === 'fulfilled').length;
+        const failed = promises.filter((result) => result.status === 'rejected').length;
+
+        await queryClient.invalidateQueries({
+            queryKey: ['get', '/api/projects/{project_id}/images'],
+        });
+
+        if (failed === 0) {
+            toast({ type: 'success', message: `Uploaded ${succeeded} item(s)` });
+        } else if (succeeded === 0) {
+            toast({ type: 'error', message: `Failed to upload ${failed} item(s)` });
+        } else {
+            toast({
+                type: 'warning',
+                message: `Uploaded ${succeeded} item(s), ${failed} failed`,
+            });
+        }
     };
 
     const captureImages = (files: FileList | null) => {
         if (files === null) return;
 
-        Array.from(files).forEach((file) => captureImage(file));
+        handleAddMediaItem(Array.from(files));
     };
 
     return (

application/ui/src/components/notification/notification.module.scss

@@ -9,7 +9,7 @@ import { SchemaProjectList } from '@geti-inspect/api/spec';
 import { Flex, PhotoPlaceholder, Text, TextField, type TextFieldRef } from '@geti/ui';
 import { useNavigate } from 'react-router';
 
-import { paths } from '../../../../router';
+import { paths } from '../../../../routes/paths';
 
 import styles from './project-list-item.module.scss';
 

application/ui/src/features/inspect/dataset/dataset-list.component.tsx

@@ -50,7 +50,11 @@ interface AddProjectProps {
 }
 
 const AddProjectButton = ({ onSetProjectInEdition, projectsCount }: AddProjectProps) => {
-    const addProjectMutation = $api.useMutation('post', '/api/projects');
+    const addProjectMutation = $api.useMutation('post', '/api/projects', {
+        meta: {
+            invalidates: [['get', '/api/projects']],
+        },
+    });
 
     const addProject = () => {
         const newProjectId = uuid();

application/ui/src/features/inspect/dataset/dataset.component.tsx

@@ -80,3 +80,7 @@ a {
 svg {
     fill: currentColor;
 }
+
+[data-sonner-toaster] {
+    font-family: var(--spectrum-global-font-family-base) !important;
+}