@oronts/vendure-data-hub-plugin 0.1.1 → 0.1.2

package/dist/dashboard/routes/pipelines/PipelineDetail.tsx

@@ -0,0 +1,211 @@
+import * as React from 'react';
+import {
+    Button,
+    DashboardRouteDefinition,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageTitle,
+    PermissionGuard,
+    detailPageRouteLoader,
+    useDetailPage,
+} from '@vendure/dashboard';
+import { AnyRoute, useNavigate } from '@tanstack/react-router';
+import { useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { getErrorMessage } from '../../../shared';
+import { DATAHUB_PERMISSIONS, ROUTES, TOAST_PIPELINE } from '../../constants';
+import {
+    createPipelineDocument,
+    pipelineDetailDocument,
+    updatePipelineDocument,
+    pipelineKeys,
+} from '../../hooks';
+import type { PipelineDefinition, ValidationIssue, PipelineEntity } from '../../types';
+import { PipelineRunsBlock } from './PipelineRunsBlock';
+import {
+    DryRunDialog,
+    VersionHistoryDialog,
+    ValidationPanel,
+    PipelineActionButtons,
+    PipelineWebhookInfo,
+    PipelineEditorToggle,
+    PipelineFormFields,
+    ReviewActionsPanel,
+} from './components';
+import { usePipelineValidation } from './hooks';
+
+export const pipelineDetail: DashboardRouteDefinition = {
+    path: `${ROUTES.PIPELINES}/$id`,
+    loader: detailPageRouteLoader({
+        queryDocument: pipelineDetailDocument,
+        breadcrumb: (isNew, entity) => [
+            { path: ROUTES.PIPELINES, label: 'Data Hub' },
+            isNew ? 'New pipeline' : entity?.name,
+        ],
+    }),
+    component: route => (
+        <PermissionGuard requires={[DATAHUB_PERMISSIONS.READ_PIPELINE]}>
+            <PipelineDetailPage route={route} />
+        </PermissionGuard>
+    ),
+};
+
+function PipelineDetailPage({ route }: { route: AnyRoute }) {
+    const params = route.useParams();
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+    const creating = params.id === 'new';
+
+    const { form, submitHandler, entity, isPending, resetForm, refreshEntity } = useDetailPage({
+        queryDocument: pipelineDetailDocument,
+        createDocument: createPipelineDocument,
+        updateDocument: updatePipelineDocument,
+        setValuesForCreate: () => ({
+            code: '',
+            name: '',
+            enabled: true,
+            definition: { steps: [] },
+        }),
+        setValuesForUpdate: p => ({
+            id: p?.id ?? '',
+            code: p?.code ?? '',
+            name: p?.name ?? '',
+            enabled: p?.enabled ?? true,
+            definition: p?.definition ?? {},
+        }),
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast.success(TOAST_PIPELINE.SAVE_SUCCESS);
+            resetForm();
+            if (creating) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast.error(TOAST_PIPELINE.SAVE_ERROR, {
+                description: getErrorMessage(err),
+            });
+        },
+    });
+
+    // Dialog states
+    const [dryRunOpen, setDryRunOpen] = React.useState(false);
+    const [historyOpen, setHistoryOpen] = React.useState(false);
+    const [issuesOpen, setIssuesOpen] = React.useState(false);
+
+    // Validation
+    const watchedDefinition = form.watch('definition');
+    const { validation, validationPending, setValidation } = usePipelineValidation(watchedDefinition);
+
+    // Callbacks
+    const handleImport = React.useCallback((def: PipelineDefinition) => {
+        form.setValue('definition', def, { shouldDirty: true });
+    }, [form]);
+
+    const handleValidationFailed = React.useCallback((issues: ValidationIssue[]) => {
+        setValidation({ isValid: false, count: issues.length, issues, warnings: [] });
+        setIssuesOpen(true);
+    }, [setValidation]);
+
+    const handleStatusChange = React.useCallback(() => {
+        queryClient.invalidateQueries({ queryKey: pipelineKeys.lists() });
+        refreshEntity();
+    }, [queryClient, refreshEntity]);
+
+    // Scroll to runs section if hash is #runs
+    React.useEffect(() => {
+        if (typeof window !== 'undefined' && window.location.hash === '#runs') {
+            const el = document.getElementById('runs');
+            if (el) {
+                try { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } catch { el.scrollIntoView(); }
+            }
+        }
+    }, []);
+
+    const pipelineEntity = entity as PipelineEntity | undefined;
+
+    return (
+        <>
+            <Page pageId="data-hub-pipeline-detail" form={form} submitHandler={submitHandler}>
+                <PageTitle>{creating ? 'New pipeline' : entity?.name ?? ''}</PageTitle>
+                <PageActionBar>
+                    <PageActionBarRight>
+                        <PermissionGuard requires={[DATAHUB_PERMISSIONS.UPDATE_PIPELINE]}>
+                            <Button
+                                type="submit"
+                                disabled={
+                                    !form.formState.isDirty ||
+                                    !form.formState.isValid ||
+                                    isPending ||
+                                    validationPending ||
+                                    validation.isValid === false
+                                }
+                                title={validation.isValid === false ? `Cannot save: ${validation.count} validation error(s)` : undefined}
+                            >
+                                {creating ? 'Create' : 'Update'}
+                            </Button>
+                        </PermissionGuard>
+                        <PipelineActionButtons
+                            entityId={entity?.id}
+                            status={pipelineEntity?.status}
+                            definition={form.getValues('definition') as PipelineDefinition | undefined}
+                            creating={creating}
+                            onImport={handleImport}
+                            onOpenDryRun={() => setDryRunOpen(true)}
+                            onOpenHistory={() => setHistoryOpen(true)}
+                            onValidationFailed={handleValidationFailed}
+                            onStatusChange={handleStatusChange}
+                        />
+                    </PageActionBarRight>
+                </PageActionBar>
+                <div className="w-full space-y-4">
+                    <PageBlock column="main" blockId="main-form">
+                        <PipelineFormFields
+                            form={form}
+                            creating={creating}
+                            entity={pipelineEntity}
+                            validation={validation}
+                            validationPending={validationPending}
+                            onShowIssues={() => setIssuesOpen(true)}
+                        />
+                        {!creating && (
+                            <PermissionGuard requires={[DATAHUB_PERMISSIONS.UPDATE_PIPELINE]}>
+                                <div className="mt-6">
+                                    <ReviewActionsPanel
+                                        entityId={entity?.id}
+                                        status={pipelineEntity?.status}
+                                        onStatusChange={handleStatusChange}
+                                    />
+                                </div>
+                            </PermissionGuard>
+                        )}
+                        <PipelineEditorToggle form={form} issues={validation.issues} />
+                        <PipelineWebhookInfo definition={() => form.getValues('definition') as PipelineDefinition | undefined} />
+                    </PageBlock>
+                    {!creating && <PipelineRunsBlock pipelineId={entity?.id} />}
+                </div>
+            </Page>
+
+            <ValidationPanel
+                validation={validation}
+                isLoading={validationPending}
+                open={issuesOpen}
+                onOpenChange={setIssuesOpen}
+            />
+
+            <DryRunDialog
+                open={dryRunOpen}
+                onOpenChange={setDryRunOpen}
+                pipelineId={entity?.id}
+            />
+
+            <VersionHistoryDialog
+                open={historyOpen}
+                onOpenChange={setHistoryOpen}
+                pipelineId={entity?.id}
+            />
+        </>
+    );
+}

package/dist/dashboard/routes/pipelines/PipelineRunsBlock.tsx

@@ -0,0 +1,377 @@
+import * as React from 'react';
+import {
+    Badge,
+    Button,
+    DataTable,
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    PageBlock,
+    PermissionGuard,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+    Drawer,
+    DrawerContent,
+    DrawerHeader,
+    DrawerTitle,
+    DrawerDescription,
+} from '@vendure/dashboard';
+import { Link } from '@tanstack/react-router';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+import { toast } from 'sonner';
+import { Eye, ScrollText, Play, XCircle, ShieldCheck } from 'lucide-react';
+import { ErrorState, LoadingState } from '../../components/shared';
+import { formatDateTime } from '../../utils';
+import {
+    DATAHUB_PERMISSIONS,
+    QUERY_LIMITS,
+    ROUTES,
+    RUN_STATUS,
+    FILTER_VALUES,
+    SELECT_WIDTHS,
+    TOAST_PIPELINE,
+    getRunStatusBadgeVariant,
+} from '../../constants';
+import {
+    usePipelineRuns,
+    useCancelRun,
+    useRunPipeline,
+    handleMutationError,
+} from '../../hooks';
+import { useOptionValues } from '../../hooks/api/use-config-options';
+import { RunDetailsPanel } from './RunDetailsPanel';
+import { getErrorMessage } from '../../../shared';
+import type { RunRow } from '../../types';
+
+/**
+ * Terminal run statuses — intentionally hardcoded rather than derived from backend.
+ * These are a fundamental system invariant: a run is either still in progress or it has
+ * reached one of these four terminal states. Adding `isFinished` metadata to the GraphQL
+ * `DataHubOptionValue` type would require schema + codegen changes for no practical benefit,
+ * since the set of terminal statuses is fixed by the execution engine contract.
+ */
+const FINISHED_STATUSES = [RUN_STATUS.COMPLETED, RUN_STATUS.FAILED, RUN_STATUS.CANCELLED, RUN_STATUS.TIMEOUT] as string[];
+
+export function PipelineRunsBlock({ pipelineId }: { pipelineId?: string }) {
+    const { options: statusOptions } = useOptionValues('runStatuses');
+    const [page, setPage] = React.useState(1);
+    const [itemsPerPage, setItemsPerPage] = React.useState(QUERY_LIMITS.PAGINATION_DEFAULT);
+    const [sorting, setSorting] = React.useState<SortingState>([
+        { id: 'startedAt', desc: true },
+    ]);
+    const [status, setStatus] = React.useState<string>('');
+    const [selectedRun, setSelectedRun] = React.useState<RunRow | null>(null);
+    const [cancelConfirmRunId, setCancelConfirmRunId] = React.useState<string | null>(null);
+    const [cancellingRunId, setCancellingRunId] = React.useState<string | null>(null);
+
+    const sortVar = sorting.length
+        ? { [sorting[0].id]: sorting[0].desc ? 'DESC' : 'ASC' }
+        : undefined;
+
+    const { data, isLoading, isError, error, refetch } = usePipelineRuns(pipelineId, {
+        take: itemsPerPage,
+        skip: (page - 1) * itemsPerPage,
+        sort: sortVar as Record<string, 'ASC' | 'DESC'> | undefined,
+        filter: status ? { status: { eq: status } } : undefined,
+    });
+
+    const cancelRun = useCancelRun();
+    const runPipeline = useRunPipeline();
+
+    const runs: RunRow[] = data?.items ?? [];
+    const totalItems = data?.totalItems ?? 0;
+
+    const handleSelectRun = React.useCallback((run: RunRow) => {
+        setSelectedRun(run);
+    }, []);
+
+    const handleCancelRun = React.useCallback((runId: string) => {
+        setCancelConfirmRunId(runId);
+    }, []);
+
+    const handleConfirmCancel = React.useCallback(() => {
+        if (!cancelConfirmRunId) return;
+        setCancellingRunId(cancelConfirmRunId);
+        cancelRun.mutate(cancelConfirmRunId, {
+            onSettled: () => {
+                setCancellingRunId(null);
+            },
+        });
+        setCancelConfirmRunId(null);
+    }, [cancelConfirmRunId, cancelRun.mutate]);
+
+    const handleStatusChange = React.useCallback((v: string) => {
+        setPage(1);
+        setStatus(v === FILTER_VALUES.ALL ? '' : v);
+    }, []);
+
+    const handlePageChange = React.useCallback((_table: unknown, newPage: number, newItemsPerPage: number) => {
+        setPage(newPage);
+        setItemsPerPage(newItemsPerPage);
+    }, []);
+
+    const handleSortChange = React.useCallback((_table: unknown, newSorting: SortingState) => {
+        setSorting(newSorting);
+    }, []);
+
+    const handleCloseDrawer = React.useCallback((open: boolean) => {
+        if (!open) setSelectedRun(null);
+    }, []);
+
+    const handleOnRerun = React.useCallback((id: string) => {
+        runPipeline.mutate(id, {
+            onSuccess: () => toast.success(TOAST_PIPELINE.RUN_STARTED),
+            onError: (err) => handleMutationError('start pipeline run', err),
+        });
+    }, [runPipeline.mutate]);
+
+    const columns: ColumnDef<RunRow, unknown>[] = React.useMemo(() => [
+        {
+            id: 'id',
+            header: 'ID',
+            accessorFn: row => row.id,
+            cell: ({ row }) => (
+                <button
+                    type="button"
+                    className="font-mono text-muted-foreground underline-offset-2 hover:underline"
+                    onClick={() => handleSelectRun(row.original)}
+                    aria-label={`View run ${row.original.id}`}
+                >
+                    {row.original.id}
+                </button>
+            ),
+            enableSorting: false,
+        },
+        {
+            id: 'status',
+            header: 'Status',
+            accessorFn: row => row.status,
+            cell: ({ row }) => {
+                const st = row.original.status;
+                const isPaused = st === RUN_STATUS.PAUSED;
+                return (
+                    <Badge
+                        variant={getRunStatusBadgeVariant(st) as 'default' | 'secondary' | 'destructive' | 'outline'}
+                        className={isPaused ? 'border-amber-400 dark:border-amber-600 text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30' : undefined}
+                    >
+                        {isPaused ? 'AWAITING APPROVAL' : st}
+                    </Badge>
+                );
+            },
+        },
+        {
+            id: 'startedAt',
+            header: 'Started',
+            accessorFn: row => row.startedAt ?? '',
+            cell: ({ row }) => formatDateTime(row.original.startedAt),
+        },
+        {
+            id: 'finishedAt',
+            header: 'Finished',
+            accessorFn: row => row.finishedAt ?? '',
+            cell: ({ row }) => formatDateTime(row.original.finishedAt),
+        },
+        {
+            id: 'processed',
+            header: 'Processed',
+            accessorFn: row => Number((row.metrics?.processed ?? 0)),
+            cell: ({ row }) => Number(row.original.metrics?.processed ?? 0),
+            enableSorting: false,
+        },
+        {
+            id: 'actions',
+            header: 'Actions',
+            cell: ({ row }) => {
+                const st = row.original.status;
+                const isFinished = FINISHED_STATUSES.includes(st);
+                const canCancel = st === RUN_STATUS.RUNNING || st === RUN_STATUS.PENDING;
+                const isPaused = st === RUN_STATUS.PAUSED;
+
+                return (
+                    <div className="flex items-center gap-0.5">
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleSelectRun(row.original)} aria-label="View details">
+                                    <Eye className="h-3.5 w-3.5" />
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>View details</TooltipContent>
+                        </Tooltip>
+
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Button variant="ghost" size="icon" className="h-7 w-7" asChild>
+                                    <Link to={`${ROUTES.LOGS}?runId=${row.original.id}`} aria-label="View logs">
+                                        <ScrollText className="h-3.5 w-3.5" />
+                                    </Link>
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>View logs</TooltipContent>
+                        </Tooltip>
+
+                        {isPaused && (
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Button variant="ghost" size="icon" className="h-7 w-7 text-amber-600" onClick={() => handleSelectRun(row.original)} aria-label="Approve gate">
+                                        <ShieldCheck className="h-3.5 w-3.5" />
+                                    </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>Approve gate</TooltipContent>
+                            </Tooltip>
+                        )}
+
+                        {isFinished && pipelineId && (
+                            <PermissionGuard requires={[DATAHUB_PERMISSIONS.RUN_PIPELINE]}>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleOnRerun(pipelineId)} aria-label="Re-run pipeline">
+                                            <Play className="h-3.5 w-3.5" />
+                                        </Button>
+                                    </TooltipTrigger>
+                                    <TooltipContent>Re-run pipeline</TooltipContent>
+                                </Tooltip>
+                            </PermissionGuard>
+                        )}
+
+                        {canCancel && (
+                            <PermissionGuard requires={[DATAHUB_PERMISSIONS.RUN_PIPELINE]}>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <Button variant="ghost" size="icon" className="h-7 w-7 text-destructive" onClick={() => handleCancelRun(row.original.id)} disabled={cancellingRunId === row.original.id} aria-label="Cancel run">
+                                            <XCircle className="h-3.5 w-3.5" />
+                                        </Button>
+                                    </TooltipTrigger>
+                                    <TooltipContent>Cancel run</TooltipContent>
+                                </Tooltip>
+                            </PermissionGuard>
+                        )}
+                    </div>
+                );
+            },
+            enableSorting: false,
+        },
+    ], [handleSelectRun, handleCancelRun, handleOnRerun, cancellingRunId, pipelineId]);
+
+    let content: React.ReactNode;
+
+    if (isError && !data) {
+        content = (
+            <PageBlock column="main" blockId="runs-error">
+                <ErrorState
+                    title="Failed to load pipeline runs"
+                    message={getErrorMessage(error)}
+                    onRetry={() => refetch()}
+                />
+            </PageBlock>
+        );
+    } else if (isLoading && runs.length === 0) {
+        content = (
+            <PageBlock column="main" blockId="runs-loading">
+                <LoadingState type="table" rows={5} message="Loading pipeline runs..." />
+            </PageBlock>
+        );
+    } else {
+        content = (
+            <>
+                <PageBlock column="main" blockId="runs">
+                    <div className="flex items-center justify-between mb-2">
+                        <h3 className="text-base font-semibold">Runs</h3>
+                        <div className="flex items-center gap-2">
+                            <Select value={status || FILTER_VALUES.ALL} onValueChange={handleStatusChange}>
+                                <SelectTrigger className={SELECT_WIDTHS.RUN_STATUS} data-testid="datahub-run-status-filter">
+                                    <SelectValue placeholder="All statuses" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value={FILTER_VALUES.ALL}>All</SelectItem>
+                                    {statusOptions.map(opt => (
+                                        <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                            <Button variant="ghost" onClick={() => refetch()} disabled={isLoading} data-testid="datahub-run-history-refresh-button">
+                                Refresh
+                            </Button>
+                        </div>
+                    </div>
+                    <TooltipProvider>
+                        <DataTable
+                            columns={columns}
+                            data={runs}
+                            totalItems={totalItems}
+                            isLoading={isLoading}
+                            page={page}
+                            itemsPerPage={itemsPerPage}
+                            sorting={sorting}
+                            onPageChange={handlePageChange}
+                            onSortChange={handleSortChange}
+                            onRefresh={refetch}
+                            disableViewOptions
+                            data-testid="datahub-run-history-table"
+                        />
+                    </TooltipProvider>
+                </PageBlock>
+                <Drawer open={!!selectedRun} onOpenChange={handleCloseDrawer}>
+                    <DrawerContent>
+                        <DrawerHeader>
+                            <DrawerTitle>Run details</DrawerTitle>
+                            <DrawerDescription>
+                                {selectedRun ? `Run ${selectedRun.id}` : 'Details'}
+                            </DrawerDescription>
+                        </DrawerHeader>
+                        {selectedRun && (
+                            <RunDetailsPanel
+                                runId={selectedRun.id}
+                                initialData={selectedRun}
+                                onCancel={handleCancelRun}
+                                onRerun={handleOnRerun}
+                                isCancelling={cancellingRunId === selectedRun.id}
+                            />
+                        )}
+                    </DrawerContent>
+                </Drawer>
+                <Dialog open={!!cancelConfirmRunId} onOpenChange={(open) => { if (!open) setCancelConfirmRunId(null); }}>
+                    <DialogContent className="max-w-md">
+                        <DialogHeader>
+                            <DialogTitle>Cancel Pipeline Run</DialogTitle>
+                            <DialogDescription>
+                                This will request cancellation of the running pipeline. This action cannot be undone.
+                            </DialogDescription>
+                        </DialogHeader>
+                        <DialogFooter>
+                            <Button
+                                variant="outline"
+                                onClick={() => setCancelConfirmRunId(null)}
+                            >
+                                Keep Running
+                            </Button>
+                            <Button
+                                variant="destructive"
+                                onClick={handleConfirmCancel}
+                            >
+                                Cancel Run
+                            </Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
+            </>
+        );
+    }
+
+    return (
+        <PermissionGuard requires={[DATAHUB_PERMISSIONS.VIEW_RUNS]}>
+            <div id="runs">
+                {content}
+            </div>
+        </PermissionGuard>
+    );
+}

package/dist/dashboard/routes/pipelines/PipelinesList.tsx

@@ -0,0 +1,87 @@
+import {
+    Badge,
+    Button,
+    DashboardRouteDefinition,
+    DetailPageButton,
+    ListPage,
+    PageActionBarRight,
+    PermissionGuard,
+} from '@vendure/dashboard';
+import { Link } from '@tanstack/react-router';
+import { Download, PlusIcon, Upload } from 'lucide-react';
+import { DATAHUB_NAV_ID, DATAHUB_NAV_SECTION, DATAHUB_PERMISSIONS, ROUTES, getStatusBadgeVariant, PIPELINE_STATUS } from '../../constants';
+import { pipelinesListDocument, deletePipelineDocument } from '../../hooks';
+import type { DataHubPipeline } from '../../types';
+
+function StatusBadge({ status }: { status?: string | null }) {
+    const pipelineStatus = status || PIPELINE_STATUS.DRAFT;
+    return (
+        <Badge variant={getStatusBadgeVariant(pipelineStatus)}>
+            {pipelineStatus}
+        </Badge>
+    );
+}
+
+export const pipelinesList: DashboardRouteDefinition = {
+    navMenuItem: {
+        sectionId: DATAHUB_NAV_SECTION,
+        id: DATAHUB_NAV_ID,
+        url: ROUTES.PIPELINES,
+        title: 'Pipelines',
+    },
+    path: ROUTES.PIPELINES,
+    loader: () => ({ breadcrumb: 'Data Hub' }),
+    component: route => (
+        <PermissionGuard requires={[DATAHUB_PERMISSIONS.READ_PIPELINE]}>
+            <ListPage
+                pageId="data-hub-pipelines-list"
+                title="Pipelines"
+                listQuery={pipelinesListDocument}
+                deleteMutation={deletePipelineDocument}
+                route={route}
+                defaultColumns={['name', 'code', 'status', 'version', 'enabled', 'createdAt']}
+                customizeColumns={{
+                    name: {
+                        header: 'Name',
+                        cell: ({ row }) => (
+                            <DetailPageButton id={row.original.id} label={row.original.name} />
+                        ),
+                    },
+                    status: {
+                        header: 'Status',
+                        cell: ({ row }) => <StatusBadge status={(row.original as DataHubPipeline).status} />,
+                    },
+                    version: {
+                        header: 'Version',
+                        cell: ({ row }) => (
+                            <span className="text-muted-foreground">
+                                v{(row.original as DataHubPipeline).version ?? 0}
+                            </span>
+                        ),
+                    },
+                }}
+            >
+                <PageActionBarRight>
+                    <Button variant="outline" asChild data-testid="datahub-import-wizard-button">
+                        <Link to="./import-wizard">
+                            <Upload className="mr-2 h-4 w-4" />
+                            Import Wizard
+                        </Link>
+                    </Button>
+                    <Button variant="outline" asChild data-testid="datahub-export-wizard-button">
+                        <Link to="./export-wizard">
+                            <Download className="mr-2 h-4 w-4" />
+                            Export Wizard
+                        </Link>
+                    </Button>
+                    <Button asChild data-testid="datahub-pipeline-create-button">
+                        <Link to="./new">
+                            <PlusIcon className="mr-2 h-4 w-4" />
+                            New pipeline
+                        </Link>
+                    </Button>
+                </PageActionBarRight>
+            </ListPage>
+        </PermissionGuard>
+    ),
+};