feat(ui): Add "delete ORT run" button

With the new endpoint implemented, add the corresponding feature to the UI, as a "trash icon" action button in the ORT runs table. Clicking the button takes the user to a confirmation dialog which informs the user about the repository URL and Run index of the ORT run which is about to be deleted. Resolves #1505. Signed-off-by: Jyrki Keisala <jyrki.keisala@doubleopen.org>
eclipse-apoapsis · Nov 30, 2024 · 3cd1167 · 3cd1167
1 parent 91d3fa0
commit 3cd1167
Showing 1 changed file with 116 additions and 48 deletions.
diff --git a/...ons/$orgId/products/$productId/repositories/$repoId/-components/repository-runs-table.tsx b/...ons/$orgId/products/$productId/repositories/$repoId/-components/repository-runs-table.tsx
@@ -17,17 +17,26 @@
  * License-Filename: LICENSE
  */
 
+import { useQueryClient } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
 import {
   createColumnHelper,
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table';
 import { Repeat, View } from 'lucide-react';
+import { useState } from 'react';
 
-import { useRepositoriesServiceGetOrtRunsByRepositoryId } from '@/api/queries';
-import { OrtRunSummary } from '@/api/requests';
+import {
+  useRepositoriesServiceDeleteOrtRunByIndex,
+  useRepositoriesServiceGetOrtRunsByRepositoryId,
+  useRepositoriesServiceGetOrtRunsByRepositoryIdKey,
+} from '@/api/queries';
+import { useRepositoriesServiceGetRepositoryByIdSuspense } from '@/api/queries/suspense';
+import { ApiError, OrtRunSummary } from '@/api/requests';
 import { DataTable } from '@/components/data-table/data-table';
+import { DeleteDialog } from '@/components/delete-dialog';
+import { DeleteIconButton } from '@/components/delete-icon-button';
 import { LoadingIndicator } from '@/components/loading-indicator';
 import { OrtRunJobStatus } from '@/components/ort-run-job-status';
 import { RunDuration } from '@/components/run-duration';
@@ -120,52 +129,111 @@ const columns = [
   columnHelper.display({
     id: 'actions',
     header: () => <div>Actions</div>,
-    cell: ({ row }) => (
-      <div className='flex gap-2'>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant='outline' asChild size='sm'>
-              <Link
-                to={
-                  '/organizations/$orgId/products/$productId/repositories/$repoId/runs/$runIndex'
-                }
-                params={{
-                  orgId: row.original.organizationId.toString(),
-                  productId: row.original.productId.toString(),
-                  repoId: row.original.repositoryId.toString(),
-                  runIndex: row.original.index.toString(),
-                }}
-              >
-                <View className='h-4 w-4' />
-              </Link>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>View the details of this run</TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant='outline' asChild size='sm'>
-              <Link
-                to='/organizations/$orgId/products/$productId/repositories/$repoId/create-run'
-                params={{
-                  orgId: row.original.organizationId.toString(),
-                  productId: row.original.productId.toString(),
-                  repoId: row.original.repositoryId.toString(),
-                }}
-                search={{
-                  rerunIndex: row.original.index,
-                }}
-              >
-                <Repeat className='h-4 w-4' />
-              </Link>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            Create a new ORT run based on this run
-          </TooltipContent>
-        </Tooltip>
-      </div>
-    ),
+    cell: function Row({ row }) {
+      const queryClient = useQueryClient();
+      const [openDelDialog, setOpenDelDialog] = useState(false);
+
+      const repository = useRepositoriesServiceGetRepositoryByIdSuspense({
+        repositoryId: row.original.repositoryId,
+      });
+
+      const { mutateAsync: deleteRun, isPending } =
+        useRepositoriesServiceDeleteOrtRunByIndex({
+          onSuccess() {
+            setOpenDelDialog(false);
+            toast.info('Delete ORT Run', {
+              description: `ORT Run "${row.original.index}" deleted successfully.`,
+            });
+            queryClient.invalidateQueries({
+              queryKey: [
+                useRepositoriesServiceGetOrtRunsByRepositoryIdKey,
+                row.original.repositoryId,
+              ],
+            });
+          },
+          onError(error: ApiError) {
+            toast.error(error.message, {
+              description: <ToastError error={error} />,
+              duration: Infinity,
+              cancel: {
+                label: 'Dismiss',
+                onClick: () => {},
+              },
+            });
+          },
+        });
+
+      async function handleDelete() {
+        await deleteRun({
+          ortRunIndex: row.original.index,
+          repositoryId: row.original.repositoryId,
+        });
+      }
+
+      return (
+        <div className='flex gap-2'>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant='outline' asChild size='sm'>
+                <Link
+                  to={
+                    '/organizations/$orgId/products/$productId/repositories/$repoId/runs/$runIndex'
+                  }
+                  params={{
+                    orgId: row.original.organizationId.toString(),
+                    productId: row.original.productId.toString(),
+                    repoId: row.original.repositoryId.toString(),
+                    runIndex: row.original.index.toString(),
+                  }}
+                >
+                  <View className='h-4 w-4' />
+                </Link>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>View the details of this run</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant='outline' asChild size='sm'>
+                <Link
+                  to='/organizations/$orgId/products/$productId/repositories/$repoId/create-run'
+                  params={{
+                    orgId: row.original.organizationId.toString(),
+                    productId: row.original.productId.toString(),
+                    repoId: row.original.repositoryId.toString(),
+                  }}
+                  search={{
+                    rerunIndex: row.original.index,
+                  }}
+                >
+                  <Repeat className='h-4 w-4' />
+                </Link>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              Create a new ORT run based on this run
+            </TooltipContent>
+          </Tooltip>
+          <DeleteDialog
+            open={openDelDialog}
+            setOpen={setOpenDelDialog}
+            item={{
+              descriptor: 'ORT run',
+              freetext: (
+                <>
+                  Please confirm the deletion of Run index{' '}
+                  <strong>{row.original.index}</strong> from repository{' '}
+                  <strong>{repository.data.url}</strong>
+                </>
+              ),
+            }}
+            onDelete={handleDelete}
+            isPending={isPending}
+            trigger={<DeleteIconButton className='text-red-500' />}
+          />
+        </div>
+      );
+    },
   }),
 ];