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

package/dist/dashboard/routes/adapters/AdaptersPage.tsx

@@ -0,0 +1,276 @@
+import * as React from 'react';
+import {
+    Button,
+    Drawer,
+    DrawerContent,
+    DrawerDescription,
+    DrawerHeader,
+    DrawerTitle,
+    PageBlock,
+    PermissionGuard,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    Card,
+    CardContent,
+    Badge,
+    Tabs,
+    TabsContent,
+    TabsList,
+    TabsTrigger,
+} from '@vendure/dashboard';
+import { DATAHUB_NAV_SECTION, ROUTES, DATAHUB_PERMISSIONS, FALLBACK_ADAPTER_TYPE_TABS } from '../../constants';
+import { DashboardRouteDefinition } from '@vendure/dashboard';
+import {
+    RefreshCw,
+    Puzzle,
+    Settings2,
+    Layers,
+} from 'lucide-react';
+import { ErrorState, LoadingState } from '../../components/shared';
+import { cn } from '../../utils';
+import { useAdapters } from '../../hooks';
+import { useOptionValues } from '../../hooks/api/use-config-options';
+import { resolveIconName } from '../../utils/icon-resolver';
+import { AdapterTypeSection } from './AdapterTypeSection';
+import { AdaptersTable } from './AdaptersTable';
+import { AdapterDetail } from './AdapterDetail';
+import { getErrorMessage } from '../../../shared';
+import type { DataHubAdapter } from '../../types';
+
+/** Accent colors per stat position for visual variety */
+const STAT_ACCENTS = [
+    { bg: 'bg-blue-500/15 dark:bg-blue-500/20', text: 'text-blue-600 dark:text-blue-400', ring: 'ring-blue-500/20' },
+    { bg: 'bg-violet-500/15 dark:bg-violet-500/20', text: 'text-violet-600 dark:text-violet-400', ring: 'ring-violet-500/20' },
+    { bg: 'bg-emerald-500/15 dark:bg-emerald-500/20', text: 'text-emerald-600 dark:text-emerald-400', ring: 'ring-emerald-500/20' },
+    { bg: 'bg-amber-500/15 dark:bg-amber-500/20', text: 'text-amber-600 dark:text-amber-400', ring: 'ring-amber-500/20' },
+    { bg: 'bg-rose-500/15 dark:bg-rose-500/20', text: 'text-rose-600 dark:text-rose-400', ring: 'ring-rose-500/20' },
+    { bg: 'bg-cyan-500/15 dark:bg-cyan-500/20', text: 'text-cyan-600 dark:text-cyan-400', ring: 'ring-cyan-500/20' },
+    { bg: 'bg-orange-500/15 dark:bg-orange-500/20', text: 'text-orange-600 dark:text-orange-400', ring: 'ring-orange-500/20' },
+] as const;
+
+export const adaptersList: DashboardRouteDefinition = {
+    navMenuItem: {
+        sectionId: DATAHUB_NAV_SECTION,
+        id: 'data-hub-adapters',
+        url: ROUTES.ADAPTERS,
+        title: 'Adapters',
+    },
+    path: ROUTES.ADAPTERS,
+    loader: () => ({ breadcrumb: 'Adapters' }),
+    component: () => (
+        <PermissionGuard requires={[DATAHUB_PERMISSIONS.MANAGE_ADAPTERS]}>
+            <AdaptersPage />
+        </PermissionGuard>
+    ),
+};
+
+function AdaptersPage() {
+    const { data: rows = [], isLoading, isError, error, refetch } = useAdapters();
+    const { options: adapterTypes } = useOptionValues('adapterTypes');
+    const [selected, setSelected] = React.useState<DataHubAdapter | null>(null);
+
+    const handleCloseDrawer = React.useCallback((open: boolean) => {
+        if (!open) setSelected(null);
+    }, []);
+
+    const tabs = adapterTypes.length > 0 ? adapterTypes : FALLBACK_ADAPTER_TYPE_TABS;
+
+    /** Group adapters by type, keyed by adapter type value */
+    const adaptersByType = React.useMemo(() => {
+        const map: Record<string, DataHubAdapter[]> = {};
+        for (const tab of tabs) {
+            map[tab.value] = rows.filter(r => r.type === tab.value);
+        }
+        return map;
+    }, [rows, tabs]);
+
+    /** Only show tabs that have at least one adapter registered */
+    const activeTabs = React.useMemo(
+        () => tabs.filter(tab => (adaptersByType[tab.value]?.length ?? 0) > 0),
+        [tabs, adaptersByType],
+    );
+
+    const builtInSet = React.useMemo(() => {
+        const set = new Set<string>();
+        for (const adapter of rows) {
+            if (adapter.builtIn !== false) {
+                set.add(adapter.code);
+            }
+        }
+        return set;
+    }, [rows]);
+
+    const isBuiltIn = React.useCallback((code: string) => {
+        return builtInSet.has(code);
+    }, [builtInSet]);
+
+    const customCount = React.useMemo(
+        () => rows.filter(r => !builtInSet.has(r.code)).length,
+        [rows, builtInSet],
+    );
+
+    if (isError) {
+        return (
+            <Page pageId="data-hub-adapters">
+                <PageBlock column="main" blockId="error">
+                    <ErrorState
+                        title="Failed to load adapters"
+                        message={getErrorMessage(error)}
+                        onRetry={() => refetch()}
+                    />
+                </PageBlock>
+            </Page>
+        );
+    }
+
+    if (isLoading && rows.length === 0) {
+        return (
+            <Page pageId="data-hub-adapters">
+                <PageBlock column="main" blockId="loading">
+                    <LoadingState type="card" rows={3} message="Loading adapters..." />
+                </PageBlock>
+            </Page>
+        );
+    }
+
+    const defaultTab = activeTabs.length > 0 ? activeTabs[0].value.toLowerCase() : 'all';
+
+    return (
+        <Page pageId="data-hub-adapters">
+            <PageActionBar>
+                <PageActionBarRight>
+                    <Button variant="ghost" onClick={() => refetch()} disabled={isLoading} data-testid="datahub-adapters-refresh-button">
+                        <RefreshCw className={cn('w-4 h-4 mr-2', isLoading && 'animate-spin')} />
+                        Refresh
+                    </Button>
+                </PageActionBarRight>
+            </PageActionBar>
+
+            <PageBlock column="main" blockId="intro">
+                <Card className="overflow-hidden">
+                    <CardContent className="p-0">
+                        {/* Hero header row */}
+                        <div className="flex items-center justify-between px-6 py-5 border-b bg-muted/20">
+                            <div className="flex items-center gap-3">
+                                <div className="p-2.5 rounded-xl bg-primary/10 text-primary">
+                                    <Layers className="w-6 h-6" />
+                                </div>
+                                <div>
+                                    <h2 className="text-lg font-semibold tracking-tight">Pipeline Adapters</h2>
+                                    <p className="text-sm text-muted-foreground">
+                                        {rows.length} registered &middot; {rows.length - customCount} built-in &middot; {customCount} custom
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Stat chips grid - responsive, uses static grid classes */}
+                        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-3 p-5">
+                            {activeTabs.map((tab, idx) => {
+                                const Icon = resolveIconName(tab.icon);
+                                const accent = STAT_ACCENTS[idx % STAT_ACCENTS.length];
+                                const count = adaptersByType[tab.value]?.length ?? 0;
+                                return (
+                                    <div
+                                        key={tab.value}
+                                        className="group relative flex items-center gap-3 rounded-xl border bg-card p-3.5 transition-all hover:shadow-md hover:border-primary/30"
+                                    >
+                                        <div className={cn('flex-shrink-0 p-2 rounded-lg ring-1', accent.bg, accent.ring)}>
+                                            {Icon
+                                                ? <Icon className={cn('w-4 h-4', accent.text)} />
+                                                : <Puzzle className={cn('w-4 h-4', accent.text)} />
+                                            }
+                                        </div>
+                                        <div className="min-w-0">
+                                            <p className="text-xs text-muted-foreground truncate">{tab.label}</p>
+                                            <p className={cn('text-xl font-bold tabular-nums leading-tight', accent.text)}>
+                                                {count}
+                                            </p>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </CardContent>
+                </Card>
+            </PageBlock>
+
+            <PageBlock column="main" blockId="adapters">
+                <Tabs defaultValue={defaultTab} className="w-full">
+                    <TabsList className="mb-4" data-testid="datahub-adapters-tabs">
+                        {activeTabs.map(tab => {
+                            const Icon = resolveIconName(tab.icon);
+                            const tabKey = tab.value.toLowerCase();
+                            const count = adaptersByType[tab.value]?.length ?? 0;
+                            return (
+                                <TabsTrigger
+                                    key={tab.value}
+                                    value={tabKey}
+                                    className="gap-2"
+                                    data-testid={`datahub-adapters-tab-${tabKey}`}
+                                >
+                                    {Icon && <Icon className="w-4 h-4" />}
+                                    {tab.label}
+                                    <Badge variant="secondary" className="ml-1 px-1.5 py-0 text-xs font-medium">
+                                        {count}
+                                    </Badge>
+                                </TabsTrigger>
+                            );
+                        })}
+                        <TabsTrigger value="all" className="gap-2" data-testid="datahub-adapters-tab-all">
+                            <Settings2 className="w-4 h-4" />
+                            All
+                            <Badge variant="secondary" className="ml-1 px-1.5 py-0 text-xs font-medium">
+                                {rows.length}
+                            </Badge>
+                        </TabsTrigger>
+                    </TabsList>
+
+                    {activeTabs.map(tab => {
+                        const tabKey = tab.value.toLowerCase();
+                        return (
+                            <TabsContent key={tab.value} value={tabKey}>
+                                <AdapterTypeSection
+                                    type={tab.value}
+                                    label={tab.label}
+                                    description={tab.description ?? undefined}
+                                    icon={tab.icon ?? undefined}
+                                    adapters={adaptersByType[tab.value] ?? []}
+                                    onSelect={setSelected}
+                                    isBuiltIn={isBuiltIn}
+                                />
+                            </TabsContent>
+                        );
+                    })}
+
+                    <TabsContent value="all">
+                        <AdaptersTable
+                            adapters={rows}
+                            onSelect={setSelected}
+                            isBuiltIn={isBuiltIn}
+                            isLoading={isLoading}
+                        />
+                    </TabsContent>
+                </Tabs>
+            </PageBlock>
+
+            <Drawer open={!!selected} onOpenChange={handleCloseDrawer}>
+                <DrawerContent data-testid="datahub-adapter-detail-drawer">
+                    <DrawerHeader>
+                        <div className="flex items-center gap-2">
+                            <Badge variant="outline">
+                                {selected?.type}
+                            </Badge>
+                            <DrawerTitle>{selected?.code}</DrawerTitle>
+                        </div>
+                        <DrawerDescription>
+                            {selected?.description || 'No description available'}
+                        </DrawerDescription>
+                    </DrawerHeader>
+                    {selected && <AdapterDetail adapter={selected} />}
+                </DrawerContent>
+            </Drawer>
+        </Page>
+    );
+}

package/dist/dashboard/routes/adapters/AdaptersTable.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import {
+    DataTable,
+    Badge,
+} from '@vendure/dashboard';
+import { ColumnDef } from '@tanstack/react-table';
+import { ADAPTERS_TABLE_PAGE_SIZE } from './AdapterConstants';
+import type { DataHubAdapter } from '../../types';
+
+export function AdaptersTable({
+    adapters,
+    onSelect,
+    isBuiltIn,
+    isLoading,
+}: Readonly<{
+    adapters: DataHubAdapter[];
+    onSelect: (adapter: DataHubAdapter) => void;
+    isBuiltIn: (code: string) => boolean;
+    isLoading: boolean;
+}>) {
+    const [page, setPage] = React.useState(1);
+
+    const handleSelectAdapter = React.useCallback((adapter: DataHubAdapter) => {
+        onSelect(adapter);
+    }, [onSelect]);
+
+    const handlePageChange = React.useCallback((_table: unknown, newPage: number) => {
+        setPage(newPage);
+    }, []);
+
+    const columns: ColumnDef<DataHubAdapter, unknown>[] = React.useMemo(() => [
+        {
+            id: 'type',
+            header: 'Type',
+            accessorFn: row => row.type,
+            cell: ({ row }) => (
+                <Badge variant="outline">
+                    {row.original.type}
+                </Badge>
+            ),
+        },
+        {
+            id: 'code',
+            header: 'Code',
+            accessorFn: row => row.code,
+            cell: function CodeCell({ row }) {
+                const handleClick = React.useCallback(() => {
+                    handleSelectAdapter(row.original);
+                }, [row.original]);
+                return (
+                    <button
+                        type="button"
+                        className="font-mono text-sm underline-offset-2 hover:underline"
+                        onClick={handleClick}
+                    >
+                        {row.original.code}
+                    </button>
+                );
+            },
+        },
+        {
+            id: 'description',
+            header: 'Description',
+            accessorFn: row => row.description ?? '',
+            cell: ({ row }) => (
+                <span className="text-muted-foreground text-sm line-clamp-1">
+                    {row.original.description || '—'}
+                </span>
+            ),
+        },
+        {
+            id: 'fields',
+            header: 'Fields',
+            accessorFn: row => row.schema.fields.length,
+        },
+        {
+            id: 'source',
+            header: 'Source',
+            accessorFn: row => (isBuiltIn(row.code) ? 'Built-in' : 'Custom'),
+            cell: ({ row }) => (
+                <Badge variant={isBuiltIn(row.original.code) ? 'outline' : 'secondary'}>
+                    {isBuiltIn(row.original.code) ? 'Built-in' : 'Custom'}
+                </Badge>
+            ),
+        },
+    ], [handleSelectAdapter, isBuiltIn]);
+
+    // Client-side pagination for the adapters table
+    const paginatedAdapters = React.useMemo(() => {
+        const start = (page - 1) * ADAPTERS_TABLE_PAGE_SIZE;
+        return adapters.slice(start, start + ADAPTERS_TABLE_PAGE_SIZE);
+    }, [adapters, page]);
+
+    return (
+        <DataTable
+            columns={columns}
+            data={paginatedAdapters}
+            isLoading={isLoading}
+            totalItems={adapters.length}
+            itemsPerPage={ADAPTERS_TABLE_PAGE_SIZE}
+            page={page}
+            onPageChange={handlePageChange}
+            disableViewOptions
+            data-testid="datahub-adapters-table"
+        />
+    );
+}

package/dist/dashboard/routes/adapters/index.ts

@@ -0,0 +1 @@
+export { adaptersList } from './AdaptersPage';

package/dist/dashboard/routes/connections/ConnectionDetail.tsx

@@ -0,0 +1,218 @@
+import * as React from 'react';
+import { Button, DashboardRouteDefinition, DetailFormGrid, FormFieldWrapper, Input, Page, PageActionBar, PageActionBarRight, PageBlock, PageLayout, PageTitle, detailPageRouteLoader, useDetailPage, Select, SelectTrigger, SelectContent, SelectItem, SelectValue, PermissionGuard } from '@vendure/dashboard';
+import { AnyRoute, useNavigate } from '@tanstack/react-router';
+import { useWatch } from 'react-hook-form';
+import { toast } from 'sonner';
+import {
+    ConnectionConfigEditor,
+    useConnectionTypeOptions,
+    createDefaultConnectionConfig,
+    normalizeConnectionConfig,
+} from '../../components/common';
+import type { UIConnectionType } from '../../types';
+import { getErrorMessage } from '../../../shared';
+import { CODE_PATTERN } from '../../utils';
+import { FieldError } from '../../components/common';
+import { QUERY_LIMITS, DATAHUB_PERMISSIONS, ROUTES, CONNECTION_DEFAULT_TYPE, SELECT_WIDTHS, TOAST_CONNECTION, ERROR_MESSAGES } from '../../constants';
+import {
+    connectionDetailDocument,
+    createConnectionDocument,
+    updateConnectionDocument,
+    useSecrets,
+} from '../../hooks';
+
+
+export const connectionDetail: DashboardRouteDefinition = {
+    path: `${ROUTES.CONNECTIONS}/$id`,
+    loader: detailPageRouteLoader({ queryDocument: connectionDetailDocument, breadcrumb: (isNew, entity) => ['Data Hub', 'Connections', isNew ? 'New connection' : (entity?.code ?? '')] }),
+    component: route => (
+        <PermissionGuard requires={[DATAHUB_PERMISSIONS.MANAGE_CONNECTIONS]}>
+            <ConnectionDetailPage route={route} />
+        </PermissionGuard>
+    ),
+};
+
+function ConnectionDetailPage({ route }: { route: AnyRoute }) {
+    const params = route.useParams();
+    const navigate = useNavigate();
+    const creating = params.id === 'new';
+
+    const connectionTypeOptions = useConnectionTypeOptions();
+    const { data: secretsData, isError: secretsError } = useSecrets({ take: QUERY_LIMITS.SECRETS_LIST });
+
+    React.useEffect(() => {
+        if (secretsError) {
+            toast.error(TOAST_CONNECTION.SECRETS_LOAD_ERROR);
+        }
+    }, [secretsError]);
+
+    const secretOptions = (secretsData?.items ?? []).map(item => ({
+        code: item.code,
+        provider: item.provider ?? undefined,
+    }));
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        queryDocument: connectionDetailDocument,
+        createDocument: createConnectionDocument,
+        updateDocument: updateConnectionDocument,
+        setValuesForCreate: () => ({
+            code: '',
+            type: CONNECTION_DEFAULT_TYPE,
+            config: createDefaultConnectionConfig(CONNECTION_DEFAULT_TYPE),
+        }),
+        setValuesForUpdate: s => {
+            const type = (s?.type ?? CONNECTION_DEFAULT_TYPE) as UIConnectionType;
+            return {
+                id: s?.id ?? '',
+                code: s?.code ?? '',
+                type,
+                config: normalizeConnectionConfig(type, s?.config ?? {}),
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast.success(TOAST_CONNECTION.SAVE_SUCCESS);
+            resetForm();
+            if (creating) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast.error(TOAST_CONNECTION.SAVE_ERROR, {
+                description: getErrorMessage(err),
+            });
+        },
+    });
+
+    const configCacheRef = React.useRef<Record<string, Record<string, unknown>>>({});
+
+    React.useEffect(() => {
+        if (!entity) {
+            return;
+        }
+        const type = (entity.type ?? form.getValues('type') ?? CONNECTION_DEFAULT_TYPE) as UIConnectionType;
+        const normalized = normalizeConnectionConfig(type, entity.config ?? {});
+        configCacheRef.current[type] = normalized as Record<string, unknown>;
+        form.reset(
+            {
+                id: entity.id ?? '',
+                code: entity.code ?? '',
+                type,
+                config: normalized,
+            },
+            { keepDirty: false, keepTouched: false },
+        );
+    }, [entity?.id, form]);
+
+    const watchedType = useWatch({ control: form.control, name: 'type', defaultValue: entity?.type || CONNECTION_DEFAULT_TYPE });
+    const connectionType = (watchedType || entity?.type || CONNECTION_DEFAULT_TYPE) as UIConnectionType;
+
+    return (
+        <Page pageId="data-hub-connection-detail" form={form} submitHandler={submitHandler}>
+            <PageTitle>{creating ? 'New Connection' : (entity?.code ?? '')}</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <Button type="submit" disabled={!form.formState.isDirty || !form.formState.isValid || isPending}>
+                        {creating ? 'Create' : 'Update'}
+                    </Button>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="main" blockId="connection-form">
+                    <DetailFormGrid>
+                        <FormFieldWrapper
+                            name="code"
+                            label="Code"
+                            control={form.control}
+                            rules={{
+                                required: ERROR_MESSAGES.CODE_REQUIRED,
+                                pattern: {
+                                    value: CODE_PATTERN,
+                                    message: ERROR_MESSAGES.CODE_PATTERN,
+                                },
+                            }}
+                            render={({ field, fieldState }) => (
+                                <div>
+                                    <Input
+                                        {...field}
+                                        placeholder="my-connection"
+                                        className={fieldState.error ? 'border-destructive focus-visible:ring-destructive' : ''}
+                                    />
+                                    <FieldError error={fieldState.error?.message} touched={fieldState.isTouched} />
+                                    {!fieldState.error && (
+                                        <p className="mt-1 text-xs text-muted-foreground">
+                                            Unique identifier for this connection
+                                        </p>
+                                    )}
+                                </div>
+                            )}
+                        />
+                        <FormFieldWrapper
+                            name="type"
+                            label="Connection Type"
+                            control={form.control}
+                            rules={{ required: ERROR_MESSAGES.CONNECTION_TYPE_REQUIRED }}
+                            render={({ field, fieldState }) => (
+                                <div>
+                                <Select
+                                    value={
+                                        (typeof field.value === 'string' && field.value.length > 0)
+                                            ? field.value
+                                            : String(entity?.type ?? CONNECTION_DEFAULT_TYPE)
+                                    }
+                                    onValueChange={val => {
+                                        const prevType = (field.value as UIConnectionType | undefined) ?? (entity?.type as UIConnectionType | undefined);
+                                        const nextType = val as UIConnectionType;
+                                        const prevConfig = form.getValues('config') as Record<string, unknown> | undefined;
+                                        if (prevType && prevConfig && typeof prevConfig === 'object') {
+                                            configCacheRef.current[prevType] = prevConfig;
+                                        }
+                                        field.onChange(nextType);
+                                        const restored = configCacheRef.current[nextType] ?? createDefaultConnectionConfig(nextType);
+                                        form.setValue('config', restored, { shouldDirty: true });
+                                    }}
+                                >
+                                    <SelectTrigger className={SELECT_WIDTHS.CONNECTION_TYPE}>
+                                        <SelectValue placeholder="Select type" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {connectionTypeOptions.map(opt => (
+                                            <SelectItem key={opt.value} value={opt.value}>
+                                                {opt.label}
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                                <FieldError error={fieldState.error?.message} touched={fieldState.isTouched} />
+                                </div>
+                            )}
+                        />
+                    </DetailFormGrid>
+
+                    <div className="mt-6">
+                        <h3 className="text-sm font-medium mb-4">Connection Settings</h3>
+                        <FormFieldWrapper
+                            name="config"
+                            label=""
+                            control={form.control}
+                            render={({ field }) => {
+                                const serverConfig = normalizeConnectionConfig(connectionType, entity?.config ?? {});
+                                const effectiveConfig = (field.value && typeof field.value === 'object')
+                                    ? (field.value as Record<string, unknown>)
+                                    : serverConfig;
+                                return (
+                                    <ConnectionConfigEditor
+                                        type={connectionType}
+                                        config={effectiveConfig}
+                                        onChange={field.onChange}
+                                        secretOptions={secretOptions}
+                                    />
+                                );
+                            }}
+                        />
+                    </div>
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/dist/dashboard/routes/connections/ConnectionsList.tsx

@@ -0,0 +1,34 @@
+import { Button, DashboardRouteDefinition, DetailPageButton, ListPage, PageActionBarRight, PermissionGuard } from '@vendure/dashboard';
+import { DATAHUB_NAV_SECTION, DATAHUB_PERMISSIONS, ROUTES } from '../../constants';
+import { connectionsListDocument, deleteConnectionDocument } from '../../hooks';
+import { Link } from '@tanstack/react-router';
+
+export const connectionsList: DashboardRouteDefinition = {
+    navMenuItem: {
+        sectionId: DATAHUB_NAV_SECTION,
+        id: 'data-hub-connections',
+        url: ROUTES.CONNECTIONS,
+        title: 'Connections',
+    },
+    path: ROUTES.CONNECTIONS,
+    loader: () => ({ breadcrumb: 'Connections' }),
+    component: route => (
+        <PermissionGuard requires={[DATAHUB_PERMISSIONS.MANAGE_CONNECTIONS]}>
+            <ListPage
+                pageId="data-hub-connections-list"
+                title="Connections"
+                listQuery={connectionsListDocument}
+                deleteMutation={deleteConnectionDocument}
+                route={route}
+                customizeColumns={{
+                    code: { header: 'Code', cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.code} /> },
+                    type: { header: 'Type' },
+                }}
+            >
+                <PageActionBarRight>
+                    <Button asChild data-testid="datahub-connection-create-button"><Link to="./new">New connection</Link></Button>
+                </PageActionBarRight>
+            </ListPage>
+        </PermissionGuard>
+    ),
+};

package/dist/dashboard/routes/connections/index.ts

@@ -0,0 +1,2 @@
+export { connectionsList } from './ConnectionsList';
+export { connectionDetail } from './ConnectionDetail';