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

package/dist/dashboard/routes/pipelines/components/PipelineFormFields.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import {
+    Badge,
+    DetailFormGrid,
+    FormFieldWrapper,
+    Input,
+    Switch,
+} from '@vendure/dashboard';
+import type { UseFormReturn, FieldValues } from 'react-hook-form';
+import { FieldError } from '../../../components/common';
+import { PIPELINE_STATUS, getStatusBadgeVariant, ERROR_MESSAGES, PLACEHOLDERS } from '../../../constants';
+import { CODE_PATTERN, formatDateTime } from '../../../utils';
+import type { PipelineEntity, ValidationState } from '../../../types';
+import { ValidationStatusBadge } from './ValidationPanel';
+
+export interface PipelineFormFieldsProps {
+    /** The form control instance from react-hook-form */
+    form: UseFormReturn<FieldValues>;
+    /** Whether the pipeline is being created (new) */
+    creating: boolean;
+    /** The pipeline entity (for existing pipelines) */
+    entity?: PipelineEntity;
+    /** Current validation state */
+    validation: ValidationState;
+    /** Whether validation is in progress */
+    validationPending: boolean;
+    /** Callback to show validation issues panel */
+    onShowIssues: () => void;
+}
+
+/**
+ * Form fields for the pipeline detail page.
+ * Includes name, code, enabled toggle, and status display for existing pipelines.
+ */
+export function PipelineFormFields({
+    form,
+    creating,
+    entity,
+    validation,
+    validationPending,
+    onShowIssues,
+}: Readonly<PipelineFormFieldsProps>) {
+    return (
+        <DetailFormGrid>
+            <FormFieldWrapper
+                name="name"
+                label="Name"
+                control={form.control}
+                rules={{
+                    required: ERROR_MESSAGES.NAME_REQUIRED,
+                    minLength: {
+                        value: 2,
+                        message: ERROR_MESSAGES.MIN_LENGTH_2,
+                    },
+                }}
+                render={({ field, fieldState }) => (
+                    <div>
+                        <Input
+                            {...field}
+                            placeholder={PLACEHOLDERS.PIPELINE_NAME}
+                            className={
+                                fieldState.error
+                                    ? 'border-destructive focus-visible:ring-destructive'
+                                    : ''
+                            }
+                            data-testid="pipeline-name-input"
+                        />
+                        <FieldError
+                            error={fieldState.error?.message}
+                            touched={fieldState.isTouched}
+                        />
+                    </div>
+                )}
+            />
+            <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={PLACEHOLDERS.PIPELINE_CODE}
+                            className={
+                                fieldState.error
+                                    ? 'border-destructive focus-visible:ring-destructive'
+                                    : ''
+                            }
+                            data-testid="pipeline-code-input"
+                        />
+                        <FieldError
+                            error={fieldState.error?.message}
+                            touched={fieldState.isTouched}
+                        />
+                        {!fieldState.error && (
+                            <p className="mt-1 text-xs text-muted-foreground">
+                                Letters, numbers, hyphens, and underscores only
+                            </p>
+                        )}
+                    </div>
+                )}
+            />
+            <FormFieldWrapper
+                name="enabled"
+                label="Enabled"
+                control={form.control}
+                render={({ field }) => (
+                    <div className="flex items-center h-10">
+                        <Switch
+                            checked={Boolean(field.value)}
+                            onCheckedChange={field.onChange}
+                            data-testid="pipeline-enabled-toggle"
+                        />
+                    </div>
+                )}
+            />
+            {!creating && entity && (
+                <>
+                    <div className="col-span-2 text-sm flex items-center gap-2">
+                        Status:{' '}
+                        <Badge
+                            variant={getStatusBadgeVariant(
+                                entity.status ?? PIPELINE_STATUS.DRAFT
+                            )}
+                        >
+                            {entity.status ?? PIPELINE_STATUS.DRAFT}
+                        </Badge>
+                        <span className="text-muted-foreground">
+                            v{entity.version ?? 0}
+                        </span>
+                    </div>
+                    <div className="col-span-2 text-sm flex items-center gap-3">
+                        <span>
+                            Published:{' '}
+                            {entity.publishedAt
+                                ? formatDateTime(entity.publishedAt)
+                                : '-'}
+                        </span>
+                        <ValidationStatusBadge
+                            validation={validation}
+                            isLoading={validationPending}
+                            onShowIssues={onShowIssues}
+                        />
+                    </div>
+                </>
+            )}
+        </DetailFormGrid>
+    );
+}

package/dist/dashboard/routes/pipelines/components/PipelineWebhookInfo.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { STEP_TYPE, DATAHUB_API_WEBHOOK } from '../../../constants';
+import type { PipelineDefinition, PipelineStep } from '../../../types';
+
+export interface PipelineWebhookInfoProps {
+    /** Function that returns the current pipeline definition */
+    definition: () => PipelineDefinition | undefined;
+}
+
+interface WebhookTriggerInfo {
+    key: string;
+    requiresIdk: boolean;
+    sig: boolean;
+    headerName: string;
+    authType: string;
+}
+
+/**
+ * Displays webhook trigger information including URL and example cURL command.
+ * Shows info for ALL webhook triggers configured on the pipeline.
+ */
+export function PipelineWebhookInfo({
+    definition,
+}: Readonly<PipelineWebhookInfoProps>) {
+    const def = definition() ?? {};
+    const steps = def.steps ?? [];
+
+    // Find ALL webhook triggers
+    const webhookTriggers: WebhookTriggerInfo[] = steps
+        .filter((step): step is PipelineStep =>
+            step.type === STEP_TYPE.TRIGGER &&
+            (step.config as Record<string, unknown>)?.type === 'WEBHOOK'
+        )
+        .map(trigger => {
+            const cfg = trigger.config as Record<string, unknown> ?? {};
+            return {
+                key: trigger.key,
+                requiresIdk: Boolean(cfg.requireIdempotencyKey),
+                sig: cfg.signature === 'hmac-sha256' || cfg.authentication === 'hmac',
+                headerName: String(cfg.hmacHeaderName ?? cfg.headerName ?? 'x-datahub-signature'),
+                authType: String(cfg.authentication ?? 'NONE'),
+            };
+        });
+
+    if (webhookTriggers.length === 0) {
+        return null;
+    }
+
+    const pipelineCode = def.code ?? 'PIPELINE_CODE';
+    const url = `${window.location.origin}${DATAHUB_API_WEBHOOK(pipelineCode)}`;
+
+    // Generate cURL for first webhook (as example)
+    const firstWebhook = webhookTriggers[0];
+    const curlParts = [
+        `curl -X POST '${url}' \\`,
+        `  -H 'Content-Type: application/json'`,
+    ];
+
+    if (firstWebhook.requiresIdk) {
+        curlParts.push(`  -H 'X-Idempotency-Key: <unique-id>' \\`);
+    }
+
+    if (firstWebhook.sig) {
+        curlParts.push(`  -H '${firstWebhook.headerName}: <hmac-of-body>' \\`);
+    }
+
+    curlParts.push(`  -d '{"records":[{"id":"123","name":"Example"}]}'`);
+
+    const curl = curlParts.join(' \\\n');
+
+    return (
+        <div className="border rounded-md p-3 space-y-2">
+            <div className="text-sm font-medium">
+                Webhook Trigger{webhookTriggers.length > 1 ? 's' : ''} ({webhookTriggers.length})
+            </div>
+            <div className="text-sm">
+                POST{' '}
+                <code className="font-mono">
+                    {DATAHUB_API_WEBHOOK(pipelineCode)}
+                </code>
+            </div>
+
+            {webhookTriggers.length > 1 && (
+                <div className="text-xs text-muted-foreground">
+                    Multiple webhook triggers configured - request will authenticate against any matching trigger
+                </div>
+            )}
+
+            {webhookTriggers.map((webhook, index) => (
+                <div key={webhook.key} className="text-sm border-l-2 border-muted pl-2 py-1">
+                    <div className="font-medium text-xs text-muted-foreground">
+                        {webhookTriggers.length > 1 ? `Webhook ${index + 1}: ` : ''}
+                        {webhook.key}
+                    </div>
+                    <div className="text-xs">
+                        Auth: <code className="font-mono">{webhook.authType}</code>
+                        {webhook.requiresIdk && ' • Requires Idempotency Key'}
+                        {webhook.sig && ` • HMAC header: ${webhook.headerName}`}
+                    </div>
+                </div>
+            ))}
+
+            <div>
+                <div className="text-sm font-medium mb-1">Example cURL</div>
+                <pre className="bg-muted p-2 rounded text-xs overflow-auto">
+                    {curl}
+                </pre>
+            </div>
+        </div>
+    );
+}

package/dist/dashboard/routes/pipelines/components/ReviewActionsPanel.tsx

@@ -0,0 +1,342 @@
+import * as React from 'react';
+import {
+    Button,
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogFooter,
+} from '@vendure/dashboard';
+import { toast } from 'sonner';
+import {
+    CheckCircle2,
+    XCircle,
+    Send,
+    Clock,
+    FileCheck,
+    AlertCircle,
+    Archive,
+    Play,
+} from 'lucide-react';
+import { getErrorMessage } from '../../../../shared';
+import {
+    PIPELINE_STATUS,
+    TOAST_PIPELINE,
+} from '../../../constants';
+import type { PipelineStatus } from '../../../constants';
+import {
+    useSubmitPipelineForReview,
+    useApprovePipeline,
+    useRejectPipeline,
+    useArchivePipeline,
+} from '../../../hooks';
+
+export interface ReviewActionsPanelProps {
+    entityId?: string;
+    status?: PipelineStatus;
+    onStatusChange?: () => void;
+}
+
+const STATUS_CONFIG: Record<string, {
+    label: string;
+    description: string;
+    icon: React.ElementType;
+    dotColor: string;
+}> = {
+    DRAFT: {
+        label: 'Draft',
+        description: 'Not yet submitted for review',
+        icon: Clock,
+        dotColor: 'bg-slate-400',
+    },
+    REVIEW: {
+        label: 'In Review',
+        description: 'Awaiting approval',
+        icon: FileCheck,
+        dotColor: 'bg-amber-500',
+    },
+    PUBLISHED: {
+        label: 'Published',
+        description: 'Active and ready to run',
+        icon: CheckCircle2,
+        dotColor: 'bg-emerald-500',
+    },
+    ARCHIVED: {
+        label: 'Archived',
+        description: 'Disabled and inactive',
+        icon: AlertCircle,
+        dotColor: 'bg-slate-400',
+    },
+};
+
+export function ReviewActionsPanel({
+    entityId,
+    status,
+    onStatusChange,
+}: Readonly<ReviewActionsPanelProps>) {
+    const [rejectDialogOpen, setRejectDialogOpen] = React.useState(false);
+    const [approveDialogOpen, setApproveDialogOpen] = React.useState(false);
+    const [submitDialogOpen, setSubmitDialogOpen] = React.useState(false);
+    const [archiveDialogOpen, setArchiveDialogOpen] = React.useState(false);
+
+    const submitForReview = useSubmitPipelineForReview();
+    const approve = useApprovePipeline();
+    const reject = useRejectPipeline();
+    const archive = useArchivePipeline();
+
+    const isSubmitting = submitForReview.isPending || approve.isPending || reject.isPending || archive.isPending;
+
+    const statusConfig = STATUS_CONFIG[status ?? 'DRAFT'] ?? STATUS_CONFIG.DRAFT;
+
+    const createMutationHandler = React.useCallback(
+        (
+            mutateFn: (id: string, options: { onSuccess: () => void; onError: (err: unknown) => void }) => void,
+            successMessage: string,
+            errorMessage: string,
+            closeDialog: React.Dispatch<React.SetStateAction<boolean>>,
+            onAfterSuccess?: () => void,
+        ) => () => {
+            if (!entityId) return;
+            mutateFn(entityId, {
+                onSuccess: () => {
+                    toast.success(successMessage);
+                    closeDialog(false);
+                    onAfterSuccess?.();
+                    onStatusChange?.();
+                },
+                onError: (err) => {
+                    toast.error(errorMessage, {
+                        description: getErrorMessage(err),
+                    });
+                },
+            });
+        },
+        [entityId, onStatusChange],
+    );
+
+    const handleSubmitForReview = React.useMemo(
+        () => createMutationHandler(submitForReview.mutate, TOAST_PIPELINE.SUBMITTED_FOR_REVIEW, TOAST_PIPELINE.SUBMIT_ERROR, setSubmitDialogOpen),
+        [createMutationHandler, submitForReview.mutate],
+    );
+
+    const handleApprove = React.useMemo(
+        () => createMutationHandler(approve.mutate, TOAST_PIPELINE.APPROVED, TOAST_PIPELINE.APPROVE_ERROR, setApproveDialogOpen),
+        [createMutationHandler, approve.mutate],
+    );
+
+    const handleReject = React.useMemo(
+        () => createMutationHandler(reject.mutate, TOAST_PIPELINE.REJECTED, TOAST_PIPELINE.REJECT_ERROR, setRejectDialogOpen),
+        [createMutationHandler, reject.mutate],
+    );
+
+    const handleArchive = React.useMemo(
+        () => createMutationHandler(archive.mutate, TOAST_PIPELINE.ARCHIVED, TOAST_PIPELINE.ARCHIVE_ERROR, setArchiveDialogOpen),
+        [createMutationHandler, archive.mutate],
+    );
+
+    if (!entityId) return null;
+
+    return (
+        <>
+            <div className="flex items-center justify-between gap-4 rounded-lg border bg-card p-3">
+                <div className="flex items-center gap-3">
+                    <div className={`h-2.5 w-2.5 rounded-full ${statusConfig.dotColor}`} />
+                    <div className="flex items-center gap-2">
+                        <span className="font-medium text-sm">{statusConfig.label}</span>
+                        <span className="text-muted-foreground text-sm">·</span>
+                        <span className="text-muted-foreground text-sm">{statusConfig.description}</span>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                    {status === PIPELINE_STATUS.DRAFT && (
+                        <Button
+                            variant="default"
+                            size="sm"
+                            onClick={() => setSubmitDialogOpen(true)}
+                            aria-label="Submit pipeline for review"
+                            data-testid="datahub-review-submit-btn"
+                        >
+                            <Send className="mr-1.5 h-3.5 w-3.5" />
+                            Submit for Review
+                        </Button>
+                    )}
+
+                    {status === PIPELINE_STATUS.REVIEW && (
+                        <>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setRejectDialogOpen(true)}
+                                aria-label="Reject pipeline and return to draft"
+                                data-testid="datahub-review-reject-btn"
+                            >
+                                <XCircle className="mr-1.5 h-3.5 w-3.5" />
+                                Reject
+                            </Button>
+                            <Button
+                                variant="default"
+                                size="sm"
+                                onClick={() => setApproveDialogOpen(true)}
+                                aria-label="Approve and publish pipeline"
+                                data-testid="datahub-review-approve-btn"
+                            >
+                                <CheckCircle2 className="mr-1.5 h-3.5 w-3.5" />
+                                Approve
+                            </Button>
+                        </>
+                    )}
+
+                    {status === PIPELINE_STATUS.PUBLISHED && (
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => setArchiveDialogOpen(true)}
+                            aria-label="Archive pipeline"
+                            data-testid="datahub-review-archive-btn"
+                        >
+                            <Archive className="mr-1.5 h-3.5 w-3.5" />
+                            Archive
+                        </Button>
+                    )}
+
+                    {status === PIPELINE_STATUS.ARCHIVED && (
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => setSubmitDialogOpen(true)}
+                            aria-label="Reactivate archived pipeline"
+                            data-testid="datahub-review-reactivate-btn"
+                        >
+                            <Play className="mr-1.5 h-3.5 w-3.5" />
+                            Reactivate
+                        </Button>
+                    )}
+                </div>
+            </div>
+
+            {/* Submit for Review Dialog */}
+            <Dialog open={submitDialogOpen} onOpenChange={setSubmitDialogOpen}>
+                <DialogContent className="max-w-md">
+                    <DialogHeader>
+                        <DialogTitle>Submit for Review</DialogTitle>
+                        <DialogDescription>
+                            A reviewer will check the configuration before publishing.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="py-2">
+                        <p className="text-sm text-muted-foreground">
+                            Make sure you've saved all changes before submitting.
+                        </p>
+                    </div>
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setSubmitDialogOpen(false)}
+                            disabled={isSubmitting}
+                        >
+                            Cancel
+                        </Button>
+                        <Button onClick={handleSubmitForReview} disabled={isSubmitting}>
+                            {isSubmitting ? 'Submitting...' : 'Submit'}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            {/* Approve Dialog */}
+            <Dialog open={approveDialogOpen} onOpenChange={setApproveDialogOpen}>
+                <DialogContent className="max-w-md">
+                    <DialogHeader>
+                        <DialogTitle>Approve Pipeline</DialogTitle>
+                        <DialogDescription>
+                            This will publish the pipeline and make it active.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="py-2 space-y-2 text-sm text-muted-foreground">
+                        <p>By approving, you confirm:</p>
+                        <ul className="list-disc pl-5 space-y-1">
+                            <li>Configuration has been reviewed</li>
+                            <li>Data mappings are correct</li>
+                            <li>Ready for production use</li>
+                        </ul>
+                    </div>
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setApproveDialogOpen(false)}
+                            disabled={isSubmitting}
+                        >
+                            Cancel
+                        </Button>
+                        <Button onClick={handleApprove} disabled={isSubmitting}>
+                            {isSubmitting ? 'Approving...' : 'Approve'}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            {/* Reject Dialog */}
+            <Dialog open={rejectDialogOpen} onOpenChange={setRejectDialogOpen}>
+                <DialogContent className="max-w-md">
+                    <DialogHeader>
+                        <DialogTitle>Reject Pipeline</DialogTitle>
+                        <DialogDescription>
+                            This will return the pipeline to draft status for further changes.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setRejectDialogOpen(false)}
+                            disabled={isSubmitting}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            variant="destructive"
+                            onClick={handleReject}
+                            disabled={isSubmitting}
+                        >
+                            {isSubmitting ? 'Rejecting...' : 'Reject'}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            {/* Archive Dialog */}
+            <Dialog open={archiveDialogOpen} onOpenChange={setArchiveDialogOpen}>
+                <DialogContent className="max-w-md">
+                    <DialogHeader>
+                        <DialogTitle>Archive Pipeline</DialogTitle>
+                        <DialogDescription>
+                            This will disable the pipeline and stop all scheduled runs.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="py-2">
+                        <p className="text-sm text-muted-foreground">
+                            You can reactivate the pipeline later by submitting it for review again.
+                        </p>
+                    </div>
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setArchiveDialogOpen(false)}
+                            disabled={isSubmitting}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            variant="destructive"
+                            onClick={handleArchive}
+                            disabled={isSubmitting}
+                        >
+                            {isSubmitting ? 'Archiving...' : 'Archive'}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}