@vendure/dashboard 3.2.0 → 3.2.2

package/src/app/routes/_authenticated/_stock-locations/stock-locations_.$id.tsx

@@ -1,115 +1,115 @@
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { Textarea } from '@/components/ui/textarea.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
-import {
-    CustomFieldsPageBlock,
-    DetailFormGrid,
-    Page,
-    PageActionBar,
-    PageActionBarRight,
-    PageBlock,
-    PageLayout,
-    PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/lib/trans.js';
-import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import { toast } from 'sonner';
-import {
-    createStockLocationDocument,
-    stockLocationDetailQuery,
-    updateStockLocationDocument,
-} from './stock-locations.graphql.js';
-
-export const Route = createFileRoute('/_authenticated/_stock-locations/stock-locations_/$id')({
-    component: StockLocationDetailPage,
-    loader: detailPageRouteLoader({
-        queryDocument: stockLocationDetailQuery,
-        breadcrumb(isNew, entity) {
-            return [
-                { path: '/stock-locations', label: 'Stock locations' },
-                isNew ? <Trans>New stock location</Trans> : entity?.name,
-            ];
-        },
-    }),
-    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
-});
-
-function StockLocationDetailPage() {
-    const params = Route.useParams();
-    const navigate = useNavigate();
-    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
-
-    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        queryDocument: stockLocationDetailQuery,
-        createDocument: createStockLocationDocument,
-        updateDocument: updateStockLocationDocument,
-        setValuesForUpdate: entity => {
-            return {
-                id: entity.id,
-                name: entity.name,
-                description: entity.description,
-                customFields: entity.customFields,
-            };
-        },
-        params: { id: params.id },
-        onSuccess: async data => {
-            toast.success(i18n.t('Successfully updated stock location'));
-            resetForm();
-            if (creatingNewEntity) {
-                await navigate({ to: `../$id`, params: { id: data.id } });
-            }
-        },
-        onError: err => {
-            toast.error(i18n.t('Failed to update stock location'), {
-                description: err instanceof Error ? err.message : 'Unknown error',
-            });
-        },
-    });
-
-    return (
-        <Page pageId="stock-location-detail" form={form} submitHandler={submitHandler}>
-            <PageTitle>
-                {creatingNewEntity ? <Trans>New stock location</Trans> : (entity?.name ?? '')}
-            </PageTitle>
-            <PageActionBar>
-                <PageActionBarRight>
-                    <PermissionGuard requires={['UpdateStockLocation']}>
-                        <Button
-                            type="submit"
-                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
-                        >
-                            <Trans>Update</Trans>
-                        </Button>
-                    </PermissionGuard>
-                </PageActionBarRight>
-            </PageActionBar>
-            <PageLayout>
-                <PageBlock column="main" blockId="main-form">
-                    <DetailFormGrid>
-                        <FormFieldWrapper
-                            control={form.control}
-                            label={<Trans>Name</Trans>}
-                            name="name"
-                            render={({ field }) => <Input {...field} />}
-                        />
-                        <div></div>
-                    </DetailFormGrid>
-                    <FormFieldWrapper
-                        control={form.control}
-                        name="description"
-                        label={<Trans>Description</Trans>}
-                        render={({ field }) => <Textarea {...field} />}
-                    />
-                </PageBlock>
-                <CustomFieldsPageBlock column="main" entityType="StockLocation" control={form.control} />
-            </PageLayout>
-        </Page>
-    );
-}
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { Textarea } from '@/components/ui/textarea.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import {
+    createStockLocationDocument,
+    stockLocationDetailQuery,
+    updateStockLocationDocument,
+} from './stock-locations.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_stock-locations/stock-locations_/$id')({
+    component: StockLocationDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: stockLocationDetailQuery,
+        breadcrumb(isNew, entity) {
+            return [
+                { path: '/stock-locations', label: 'Stock locations' },
+                isNew ? <Trans>New stock location</Trans> : entity?.name,
+            ];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function StockLocationDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { i18n } = useLingui();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        queryDocument: stockLocationDetailQuery,
+        createDocument: createStockLocationDocument,
+        updateDocument: updateStockLocationDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                name: entity.name,
+                description: entity.description,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast.success(i18n.t('Successfully updated stock location'));
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast.error(i18n.t('Failed to update stock location'), {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId="stock-location-detail" form={form} submitHandler={submitHandler}>
+            <PageTitle>
+                {creatingNewEntity ? <Trans>New stock location</Trans> : (entity?.name ?? '')}
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateStockLocation']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            <Trans>Update</Trans>
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <FormFieldWrapper
+                            control={form.control}
+                            label={<Trans>Name</Trans>}
+                            name="name"
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <div></div>
+                    </DetailFormGrid>
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="description"
+                        label={<Trans>Description</Trans>}
+                        render={({ field }) => <Textarea {...field} />}
+                    />
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="StockLocation" control={form.control} />
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_system/components/payload-dialog.tsx

@@ -1,34 +1,34 @@
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog.js';
-import { DialogTrigger } from '@/components/ui/dialog.js';
-import { ScrollArea } from '@/components/ui/scroll-area.js';
-import { JsonEditor } from 'json-edit-react';
-
-type PayloadDialogProps = {
-    payload: any;
-    trigger: React.ReactNode;
-    title?: string | React.ReactNode;
-    description?: string | React.ReactNode;
-};
-
-export function PayloadDialog({ payload, trigger, title, description }: PayloadDialogProps) {
-    return (
-        <Dialog>
-            <DialogTrigger asChild>{trigger}</DialogTrigger>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>{title}</DialogTitle>
-                    <DialogDescription>{description}</DialogDescription>
-                </DialogHeader>
-                <ScrollArea className="max-h-[600px]">
-                    <JsonEditor viewOnly data={payload} collapse />
-                </ScrollArea>
-            </DialogContent>
-        </Dialog>
-    );
-}
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog.js';
+import { DialogTrigger } from '@/components/ui/dialog.js';
+import { ScrollArea } from '@/components/ui/scroll-area.js';
+import { JsonEditor } from 'json-edit-react';
+
+type PayloadDialogProps = {
+    payload: any;
+    trigger: React.ReactNode;
+    title?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+};
+
+export function PayloadDialog({ payload, trigger, title, description }: PayloadDialogProps) {
+    return (
+        <Dialog>
+            <DialogTrigger asChild>{trigger}</DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{title}</DialogTitle>
+                    <DialogDescription>{description}</DialogDescription>
+                </DialogHeader>
+                <ScrollArea className="max-h-[600px]">
+                    <JsonEditor viewOnly data={payload} collapse />
+                </ScrollArea>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/app/routes/_authenticated/_system/healthchecks.tsx

@@ -1,93 +1,93 @@
-import { Button } from '@/components/ui/button.js';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.js';
-import { Page, PageActionBar, PageLayout, PageTitle } from '@/framework/layout-engine/page-layout.js';
-import { Trans } from '@/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
-import { createFileRoute } from '@tanstack/react-router';
-import { formatRelative } from 'date-fns';
-import { CheckCircle2Icon, CircleXIcon } from 'lucide-react';
-import { uiConfig } from 'virtual:vendure-ui-config';
-
-export const Route = createFileRoute('/_authenticated/_system/healthchecks')({
-    component: HealthchecksPage,
-});
-
-interface HealthcheckItem {
-    status: 'up' | 'down';
-}
-
-interface HealthcheckResponse {
-    status: 'ok' | 'error';
-    info: Record<string, HealthcheckItem>;
-    error: Record<string, HealthcheckItem>;
-    details: Record<string, HealthcheckItem>;
-}
-
-function HealthchecksPage() {
-    const { data, refetch, dataUpdatedAt } = useQuery({
-        queryKey: ['healthchecks'],
-        queryFn: async () => {
-            const schemeAndHost =
-                uiConfig.apiHost + (uiConfig.apiPort !== 'auto' ? `:${uiConfig.apiPort}` : '');
-
-            const res = await fetch(`${schemeAndHost}/health`);
-            return res.json() as Promise<HealthcheckResponse>;
-        },
-        refetchInterval: 5000,
-    });
-
-    return (
-        <Page>
-            <PageTitle>Healthchecks</PageTitle>
-            <PageActionBar>
-                <Button onClick={() => refetch()}>Refresh</Button>
-            </PageActionBar>
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-6">
-                <Card>
-                    <CardHeader>
-                        <CardTitle className="flex items-center gap-2">
-                            <span> Current status</span>
-                            <span className="text-sm font-normal text-muted-foreground">
-                                <Trans>Last updated {formatRelative(dataUpdatedAt, new Date())}</Trans>
-                            </span>
-                        </CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        {data?.status === 'ok' ? (
-                            <div className="flex items-center gap-2 ">
-                                <CheckCircle2Icon className="text-success"></CheckCircle2Icon>
-                                <span className="text-2xl">
-                                    <Trans>All resources are up and running</Trans>
-                                </span>
-                            </div>
-                        ) : (
-                            <div className="flex items-center gap-2 ">
-                                <CircleXIcon className="text-destructive"></CircleXIcon>
-                                <span className="text-2xl">
-                                    <Trans>Some resources are down</Trans>
-                                </span>
-                            </div>
-                        )}
-                    </CardContent>
-                </Card>
-                <Card>
-                    <CardHeader>
-                        <CardTitle>
-                            <Trans>Monitored Resources</Trans>
-                        </CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <div className="flex flex-col gap-2">
-                            {Object.entries(data?.info || {}).map(([key, value]) => (
-                                <div key={key} className="flex items-center justify-start gap-6">
-                                    <span className="min-w-1/3">{key}</span>
-                                    <span>{value.status}</span>
-                                </div>
-                            ))}
-                        </div>
-                    </CardContent>
-                </Card>
-            </div>
-        </Page>
-    );
-}
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { Page, PageActionBar, PageLayout, PageTitle } from '@/framework/layout-engine/page-layout.js';
+import { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { formatRelative } from 'date-fns';
+import { CheckCircle2Icon, CircleXIcon } from 'lucide-react';
+import { uiConfig } from 'virtual:vendure-ui-config';
+
+export const Route = createFileRoute('/_authenticated/_system/healthchecks')({
+    component: HealthchecksPage,
+});
+
+interface HealthcheckItem {
+    status: 'up' | 'down';
+}
+
+interface HealthcheckResponse {
+    status: 'ok' | 'error';
+    info: Record<string, HealthcheckItem>;
+    error: Record<string, HealthcheckItem>;
+    details: Record<string, HealthcheckItem>;
+}
+
+function HealthchecksPage() {
+    const { data, refetch, dataUpdatedAt } = useQuery({
+        queryKey: ['healthchecks'],
+        queryFn: async () => {
+            const schemeAndHost =
+                uiConfig.apiHost + (uiConfig.apiPort !== 'auto' ? `:${uiConfig.apiPort}` : '');
+
+            const res = await fetch(`${schemeAndHost}/health`);
+            return res.json() as Promise<HealthcheckResponse>;
+        },
+        refetchInterval: 5000,
+    });
+
+    return (
+        <Page>
+            <PageTitle>Healthchecks</PageTitle>
+            <PageActionBar>
+                <Button onClick={() => refetch()}>Refresh</Button>
+            </PageActionBar>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-6">
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <span> Current status</span>
+                            <span className="text-sm font-normal text-muted-foreground">
+                                <Trans>Last updated {formatRelative(dataUpdatedAt, new Date())}</Trans>
+                            </span>
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        {data?.status === 'ok' ? (
+                            <div className="flex items-center gap-2 ">
+                                <CheckCircle2Icon className="text-success"></CheckCircle2Icon>
+                                <span className="text-2xl">
+                                    <Trans>All resources are up and running</Trans>
+                                </span>
+                            </div>
+                        ) : (
+                            <div className="flex items-center gap-2 ">
+                                <CircleXIcon className="text-destructive"></CircleXIcon>
+                                <span className="text-2xl">
+                                    <Trans>Some resources are down</Trans>
+                                </span>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+                <Card>
+                    <CardHeader>
+                        <CardTitle>
+                            <Trans>Monitored Resources</Trans>
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="flex flex-col gap-2">
+                            {Object.entries(data?.info || {}).map(([key, value]) => (
+                                <div key={key} className="flex items-center justify-start gap-6">
+                                    <span className="min-w-1/3">{key}</span>
+                                    <span>{value.status}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_system/job-queue.graphql.ts

@@ -1,43 +1,43 @@
-import { graphql } from '@/graphql/graphql.js';
-
-export const jobInfoFragment = graphql(`
-    fragment JobInfo on Job {
-        id
-        queueName
-        createdAt
-        startedAt
-        settledAt
-        state
-        isSettled
-        progress
-        duration
-        data
-        result
-        error
-        retries
-        attempts
-    }
-`);
-
-export const jobListDocument = graphql(
-    `
-        query JobList($options: JobListOptions) {
-            jobs(options: $options) {
-                items {
-                    ...JobInfo
-                }
-                totalItems
-            }
-        }
-    `,
-    [jobInfoFragment],
-);
-
-export const jobQueueListDocument = graphql(`
-    query JobQueueList {
-        jobQueues {
-            name
-            running
-        }
-    }
-`);
+import { graphql } from '@/graphql/graphql.js';
+
+export const jobInfoFragment = graphql(`
+    fragment JobInfo on Job {
+        id
+        queueName
+        createdAt
+        startedAt
+        settledAt
+        state
+        isSettled
+        progress
+        duration
+        data
+        result
+        error
+        retries
+        attempts
+    }
+`);
+
+export const jobListDocument = graphql(
+    `
+        query JobList($options: JobListOptions) {
+            jobs(options: $options) {
+                items {
+                    ...JobInfo
+                }
+                totalItems
+            }
+        }
+    `,
+    [jobInfoFragment],
+);
+
+export const jobQueueListDocument = graphql(`
+    query JobQueueList {
+        jobQueues {
+            name
+            running
+        }
+    }
+`);