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

package/dist/dashboard/components/wizards/export-wizard/ReviewStep.tsx

@@ -0,0 +1,231 @@
+import * as React from 'react';
+import {
+    Badge,
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from '@vendure/dashboard';
+import {
+    Database,
+    Columns,
+    FileSpreadsheet,
+    Send,
+} from 'lucide-react';
+import { VENDURE_ENTITY_LIST } from '../../../../shared';
+import { useDestinationSchemas } from '../../../hooks/api/use-config-options';
+import { formatFieldLabel } from '../../../utils/formatters';
+import { WizardStepContainer } from '../shared';
+import { ConfigurationNameCard, SummaryCard, SummaryCardGrid, SummaryField } from '../../shared/wizard';
+import { STEP_CONTENT, EXPORT_PLACEHOLDERS } from './constants';
+import type { ExportConfiguration } from './types';
+import type { QueryConfig, DestinationConfig } from '../../../types/wizard';
+
+interface ReviewStepProps {
+    config: Partial<ExportConfiguration>;
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+    errors?: Record<string, string>;
+}
+
+export function ReviewStep({ config, updateConfig, errors = {} }: ReviewStepProps) {
+    const selectedFieldsCount = config.fields?.filter(f => f.include).length ?? 0;
+
+    return (
+        <WizardStepContainer
+            title={STEP_CONTENT.review.title}
+            description={STEP_CONTENT.review.description}
+        >
+            <ConfigurationNameCard
+                title={STEP_CONTENT.review.cardTitle}
+                name={config.name ?? ''}
+                description={config.description ?? ''}
+                onNameChange={name => updateConfig({ name })}
+                onDescriptionChange={description => updateConfig({ description })}
+                namePlaceholder={EXPORT_PLACEHOLDERS.configName}
+                nameError={errors.name}
+                nameHelperText="A descriptive name to identify this export configuration"
+            />
+            <SummaryCards config={config} selectedFieldsCount={selectedFieldsCount} />
+            <DetailedConfigAccordion config={config} selectedFieldsCount={selectedFieldsCount} />
+        </WizardStepContainer>
+    );
+}
+
+interface SummaryCardsProps {
+    config: Partial<ExportConfiguration>;
+    selectedFieldsCount: number;
+}
+
+function SummaryCards({ config, selectedFieldsCount }: SummaryCardsProps) {
+    return (
+        <SummaryCardGrid columns={4}>
+            <SummaryCard
+                icon={Database}
+                label="Source"
+                value={VENDURE_ENTITY_LIST.find(e => e.code === config.sourceEntity)?.name}
+            />
+            <SummaryCard
+                icon={Columns}
+                label="Fields"
+                value={`${selectedFieldsCount} selected`}
+            />
+            <SummaryCard
+                icon={FileSpreadsheet}
+                label="Format"
+                value={<span className="uppercase">{config.format?.type}</span>}
+            />
+            <SummaryCard
+                icon={Send}
+                label="Destination"
+                value={<span className="capitalize">{config.destination?.type}</span>}
+            />
+        </SummaryCardGrid>
+    );
+}
+
+interface DetailedConfigAccordionProps {
+    config: Partial<ExportConfiguration>;
+    selectedFieldsCount: number;
+}
+
+function DetailedConfigAccordion({ config, selectedFieldsCount }: DetailedConfigAccordionProps) {
+    return (
+        <Accordion type="multiple" defaultValue={['source', 'fields']}>
+            <AccordionItem value="source">
+                <AccordionTrigger>Source Configuration</AccordionTrigger>
+                <AccordionContent>
+                    <SourceQuerySummary sourceQuery={config.sourceQuery} />
+                </AccordionContent>
+            </AccordionItem>
+
+            <AccordionItem value="fields">
+                <AccordionTrigger>Selected Fields ({selectedFieldsCount})</AccordionTrigger>
+                <AccordionContent>
+                    <div className="flex flex-wrap gap-2">
+                        {config.fields?.filter(f => f.include).map(f => (
+                            <Badge key={f.sourceField} variant="secondary">
+                                {f.sourceField}
+                                {f.outputName !== f.sourceField && ` -> ${f.outputName}`}
+                            </Badge>
+                        ))}
+                    </div>
+                </AccordionContent>
+            </AccordionItem>
+
+            <AccordionItem value="destination">
+                <AccordionTrigger>Destination</AccordionTrigger>
+                <AccordionContent>
+                    <DestinationSummary destination={config.destination} />
+                </AccordionContent>
+            </AccordionItem>
+        </Accordion>
+    );
+}
+
+function SourceQuerySummary({ sourceQuery }: { sourceQuery?: QueryConfig }) {
+    if (!sourceQuery) return <p className="text-sm text-muted-foreground">All records (default)</p>;
+
+    return (
+        <div className="grid grid-cols-2 gap-4 text-sm">
+            <SummaryField label="Query type" className="capitalize">{sourceQuery.type}</SummaryField>
+            {sourceQuery.limit != null && (
+                <SummaryField label="Limit">{sourceQuery.limit.toLocaleString()}</SummaryField>
+            )}
+            {sourceQuery.orderBy && (
+                <SummaryField label="Order by">{sourceQuery.orderBy} {sourceQuery.orderDirection ?? 'ASC'}</SummaryField>
+            )}
+            {sourceQuery.type === 'graphql' && sourceQuery.customQuery && (
+                <div className="col-span-2">
+                    <span className="text-muted-foreground">Custom query:</span>
+                    <pre className="mt-1 p-2 bg-muted rounded text-xs overflow-auto">{sourceQuery.customQuery}</pre>
+                </div>
+            )}
+        </div>
+    );
+}
+
+/**
+ * Formats a field value for display in the summary, based on its schema field type.
+ * Returns null to skip rendering the field.
+ */
+function formatFieldValue(value: unknown, fieldType: string): React.ReactNode | null {
+    if (value == null || value === '') return null;
+
+    switch (fieldType) {
+        case 'boolean':
+            return value ? 'Yes' : 'No';
+        case 'secret':
+            return typeof value === 'string' && value.length > 0 ? 'Configured' : null;
+        case 'headers':
+            if (value && typeof value === 'object') {
+                const count = Object.keys(value).length;
+                return count > 0 ? `${count} custom` : null;
+            }
+            return null;
+        default:
+            return typeof value === 'object' ? JSON.stringify(value) : String(value);
+    }
+}
+
+function DestinationSummary({ destination }: { destination?: DestinationConfig }) {
+    const { schemas } = useDestinationSchemas();
+
+    if (!destination) return <p className="text-sm text-muted-foreground">No destination configured</p>;
+
+    const schema = schemas.find(s => s.type === destination.type);
+
+    // Static message (e.g. DOWNLOAD)
+    if (schema?.message) {
+        return (
+            <div className="grid grid-cols-2 gap-4 text-sm">
+                <SummaryField label="Type">{destination.type}</SummaryField>
+                <div className="col-span-2">
+                    <span className="text-muted-foreground">{schema.message}</span>
+                </div>
+            </div>
+        );
+    }
+
+    // Schema-driven summary: read config sub-object and display schema fields
+    const configObj = schema?.configKey
+        ? (destination as Record<string, unknown>)[schema.configKey] as Record<string, unknown> | undefined
+        : undefined;
+
+    return (
+        <div className="grid grid-cols-2 gap-4 text-sm">
+            <SummaryField label="Type">{destination.type}</SummaryField>
+
+            {schema && configObj ? (
+                schema.fields.map(field => {
+                    const displayValue = formatFieldValue(configObj[field.key], field.type);
+                    if (displayValue == null) return null;
+                    return (
+                        <SummaryField key={field.key} label={field.label}>
+                            {displayValue}
+                        </SummaryField>
+                    );
+                })
+            ) : (
+                renderGenericConfigFields(destination)
+            )}
+        </div>
+    );
+}
+
+/**
+ * Fallback renderer for unknown destination types. Finds the first config sub-object
+ * matching the `${type.toLowerCase()}Config` convention and displays its fields.
+ */
+function renderGenericConfigFields(destination: DestinationConfig): React.ReactNode {
+    const configKey = `${destination.type.toLowerCase()}Config`;
+    const config = (destination as Record<string, unknown>)[configKey] as Record<string, unknown> | undefined;
+    if (!config) return null;
+
+    return Object.entries(config)
+        .filter(([, v]) => v != null && v !== '' && v !== false)
+        .map(([key, value]) => (
+            <SummaryField key={key} label={formatFieldLabel(key)}>
+                {typeof value === 'object' ? JSON.stringify(value) : String(value)}
+            </SummaryField>
+        ));
+}

package/dist/dashboard/components/wizards/export-wizard/SourceStep.tsx

@@ -0,0 +1,154 @@
+import { useMemo } from 'react';
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+    CardDescription,
+    Input,
+    Label,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@vendure/dashboard';
+import { VENDURE_ENTITY_SCHEMAS } from '../../../../shared';
+import { QUERY_LIMITS } from '../../../constants';
+import { useEntityFieldSchemas, useQueryTypeOptions } from '../../../hooks/api';
+import { WizardStepContainer } from '../shared';
+import { EntitySelector } from '../../shared/entity-selector';
+import { FilterConditionsEditor } from '../../shared/filter-conditions-editor';
+import { STEP_CONTENT } from './constants';
+import type { ExportConfiguration, QueryType } from './types';
+
+interface SourceStepProps {
+    config: Partial<ExportConfiguration>;
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+    errors?: Record<string, string>;
+}
+
+export function SourceStep({ config, updateConfig, errors = {} }: SourceStepProps) {
+    const query = config.sourceQuery ?? { type: 'all' };
+
+    return (
+        <WizardStepContainer
+            title={STEP_CONTENT.source.title}
+            description={STEP_CONTENT.source.description}
+        >
+            <EntitySelector
+                value={config.sourceEntity}
+                onChange={(entityCode) => updateConfig({ sourceEntity: entityCode })}
+            />
+
+            {config.sourceEntity && (
+                <QueryConfiguration config={config} updateConfig={updateConfig} query={query} />
+            )}
+        </WizardStepContainer>
+    );
+}
+
+/**
+ * Resolve entity field names dynamically from the backend, falling back
+ * to the static VENDURE_ENTITY_SCHEMAS while the query is loading or
+ * if the entity is not known to the backend.
+ */
+function useEntityFields(entityCode: string | undefined): string[] {
+    const { getFieldNames, isLoading } = useEntityFieldSchemas();
+
+    return useMemo(() => {
+        if (!entityCode) return [];
+        // Try dynamic fields from backend first
+        const dynamicFields = getFieldNames(entityCode);
+        if (dynamicFields.length > 0) return dynamicFields;
+        // Fall back to static schemas while loading or for unknown entities
+        const staticSchema = VENDURE_ENTITY_SCHEMAS[entityCode];
+        if (staticSchema) return Object.keys(staticSchema.fields);
+        return [];
+    }, [entityCode, getFieldNames]);
+}
+
+interface QueryConfigurationProps {
+    config: Partial<ExportConfiguration>;
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+    query: NonNullable<ExportConfiguration['sourceQuery']>;
+}
+
+function QueryConfiguration({ config, updateConfig, query }: QueryConfigurationProps) {
+    const entityFields = useEntityFields(config.sourceEntity);
+    const { options: queryTypeOptions } = useQueryTypeOptions();
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Query Options</CardTitle>
+                <CardDescription>Configure how to fetch data</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div>
+                        <Label>Query Type</Label>
+                        <Select
+                            value={query.type}
+                            onValueChange={type => updateConfig({
+                                sourceQuery: { ...query, type: type as QueryType },
+                            })}
+                        >
+                            <SelectTrigger>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {queryTypeOptions.map(option => (
+                                    <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    <div>
+                        <Label>Limit</Label>
+                        <Input
+                            type="number"
+                            value={query.limit ?? QUERY_LIMITS.EXPORT_DEFAULT}
+                            onChange={e => updateConfig({
+                                sourceQuery: { ...query, limit: parseInt(e.target.value) || QUERY_LIMITS.EXPORT_DEFAULT },
+                            })}
+                        />
+                    </div>
+
+                    <div>
+                        <Label>Order By</Label>
+                        <Select
+                            value={query.orderBy ?? 'id'}
+                            onValueChange={orderBy => updateConfig({
+                                sourceQuery: { ...query, orderBy },
+                            })}
+                        >
+                            <SelectTrigger>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {entityFields.map(field => (
+                                    <SelectItem key={field} value={field}>{field}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+
+                {query.type === 'query' && config.sourceEntity && (
+                    <FilterConditionsEditor
+                        conditions={config.filters ?? []}
+                        onChange={(filters) => updateConfig({ filters })}
+                        fields={entityFields}
+                        showLogicSelector={false}
+                        fieldPlaceholder="Select field..."
+                        valuePlaceholder="Value"
+                        emptyMessage="No filters - all records will be exported"
+                        addLabel="Add Filter"
+                    />
+                )}
+            </CardContent>
+        </Card>
+    );
+}

package/dist/dashboard/components/wizards/export-wizard/TriggerStep.tsx

@@ -0,0 +1,234 @@
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+    CardDescription,
+    Input,
+    Label,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Switch,
+} from '@vendure/dashboard';
+import { TRIGGER_TYPE, UI_DEFAULTS, COMPRESSION_TYPE, LOADING_STATE_TYPE } from '../../../constants';
+import { useOptionValues } from '../../../hooks/api/use-config-options';
+import { useTriggerTypes } from '../../../hooks';
+import { WizardStepContainer } from '../shared';
+import { TriggerSelector, TriggerSchemaFields } from '../../shared/wizard-trigger';
+import { LoadingState } from '../../shared/feedback';
+import { STEP_CONTENT, DEFAULT_EXPORT_OPTIONS } from './constants';
+import type { ExportConfiguration, ExportTriggerType, CompressionType } from './types';
+
+interface TriggerStepProps {
+    config: Partial<ExportConfiguration>;
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+    errors?: Record<string, string>;
+}
+
+export function TriggerStep({ config, updateConfig, errors = {} }: TriggerStepProps) {
+    const trigger = config.trigger ?? { type: TRIGGER_TYPE.MANUAL };
+    const options = config.options ?? { ...DEFAULT_EXPORT_OPTIONS };
+
+    const handleTriggerTypeChange = (type: string) => {
+        updateConfig({ trigger: { ...trigger, type: type as ExportTriggerType } });
+    };
+
+    return (
+        <WizardStepContainer
+            title={STEP_CONTENT.trigger.title}
+            description={STEP_CONTENT.trigger.description}
+        >
+            <TriggerCard
+                trigger={trigger}
+                updateConfig={updateConfig}
+                onTriggerTypeChange={handleTriggerTypeChange}
+            />
+            <ExportOptionsCard options={options} updateConfig={updateConfig} />
+            <CachingCard config={config} updateConfig={updateConfig} />
+        </WizardStepContainer>
+    );
+}
+
+interface TriggerCardProps {
+    trigger: ExportConfiguration['trigger'];
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+    onTriggerTypeChange: (type: string) => void;
+}
+
+function TriggerCard({ trigger, updateConfig, onTriggerTypeChange }: TriggerCardProps) {
+    const { exportWizardTriggers, triggerSchemas, isLoading } = useTriggerTypes();
+    const currentSchema = triggerSchemas.find(s => s.value === trigger.type);
+
+    const handleFieldChange = (key: string, value: unknown) => {
+        updateConfig({ trigger: { ...trigger, [key]: value } });
+    };
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Trigger</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                <TriggerSelector
+                    options={exportWizardTriggers}
+                    value={trigger.type}
+                    onChange={onTriggerTypeChange}
+                />
+
+                {currentSchema && currentSchema.fields.length > 0 ? (
+                    <div className="pt-4 border-t">
+                        <TriggerSchemaFields
+                            fields={currentSchema.fields}
+                            values={trigger as Record<string, unknown>}
+                            onChange={handleFieldChange}
+                        />
+                    </div>
+                ) : isLoading && trigger.type !== TRIGGER_TYPE.MANUAL ? (
+                    <div className="pt-4 border-t">
+                        <LoadingState type={LOADING_STATE_TYPE.FORM} rows={2} message="" />
+                    </div>
+                ) : null}
+            </CardContent>
+        </Card>
+    );
+}
+
+interface ExportOptionsCardProps {
+    options: ExportConfiguration['options'];
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+}
+
+function ExportOptionsCard({ options, updateConfig }: ExportOptionsCardProps) {
+    const { options: compressionOptions } = useOptionValues('compressionTypes');
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Export Options</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div>
+                        <Label>Batch Size</Label>
+                        <Input
+                            type="number"
+                            value={options.batchSize}
+                            onChange={e => updateConfig({
+                                options: { ...options, batchSize: parseInt(e.target.value) || UI_DEFAULTS.EXPORT_BATCH_SIZE },
+                            })}
+                        />
+                    </div>
+
+                    <div>
+                        <Label>Compression</Label>
+                        <Select
+                            value={options.compression ?? COMPRESSION_TYPE.NONE}
+                            onValueChange={compression => updateConfig({
+                                options: { ...options, compression: compression as CompressionType },
+                            })}
+                        >
+                            <SelectTrigger>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {compressionOptions.map(option => (
+                                    <SelectItem key={option.value} value={option.value}>
+                                        {option.label}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    <div>
+                        <Label>Max Retries</Label>
+                        <Input
+                            type="number"
+                            value={options.maxRetries}
+                            onChange={e => updateConfig({
+                                options: { ...options, maxRetries: parseInt(e.target.value) || UI_DEFAULTS.DEFAULT_MAX_RETRIES },
+                            })}
+                        />
+                    </div>
+                </div>
+
+                <div className="flex flex-wrap gap-6">
+                    <div className="flex items-center gap-2">
+                        <Switch
+                            id="include-metadata"
+                            checked={options.includeMetadata}
+                            onCheckedChange={includeMetadata => updateConfig({
+                                options: { ...options, includeMetadata },
+                            })}
+                        />
+                        <Label htmlFor="include-metadata">Include metadata</Label>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <Switch
+                            id="notify-on-complete"
+                            checked={options.notifyOnComplete}
+                            onCheckedChange={notifyOnComplete => updateConfig({
+                                options: { ...options, notifyOnComplete },
+                            })}
+                        />
+                        <Label htmlFor="notify-on-complete">Notify on complete</Label>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <Switch
+                            id="retry-on-failure"
+                            checked={options.retryOnFailure}
+                            onCheckedChange={retryOnFailure => updateConfig({
+                                options: { ...options, retryOnFailure },
+                            })}
+                        />
+                        <Label htmlFor="retry-on-failure">Retry on failure</Label>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
+
+interface CachingCardProps {
+    config: Partial<ExportConfiguration>;
+    updateConfig: (updates: Partial<ExportConfiguration>) => void;
+}
+
+function CachingCard({ config, updateConfig }: CachingCardProps) {
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Caching</CardTitle>
+                <CardDescription>Cache export results for faster delivery</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                <div className="flex items-center gap-3">
+                    <Switch
+                        checked={config.caching?.enabled ?? false}
+                        onCheckedChange={enabled => updateConfig({
+                            caching: { ...config.caching, enabled, ttl: config.caching?.ttl ?? UI_DEFAULTS.DEFAULT_CACHE_TTL_SECONDS },
+                        })}
+                    />
+                    <Label>Enable caching</Label>
+                </div>
+
+                {config.caching?.enabled && (
+                    <div>
+                        <Label>Cache TTL (seconds)</Label>
+                        <Input
+                            type="number"
+                            value={config.caching.ttl}
+                            onChange={e => updateConfig({
+                                caching: { ...config.caching!, ttl: parseInt(e.target.value) || UI_DEFAULTS.DEFAULT_CACHE_TTL_SECONDS },
+                            })}
+                        />
+                    </div>
+                )}
+            </CardContent>
+        </Card>
+    );
+}

package/dist/dashboard/components/wizards/export-wizard/constants.ts

@@ -0,0 +1,73 @@
+import {
+    Database,
+    Columns,
+    FileSpreadsheet,
+    Send,
+    Clock,
+    Check,
+} from 'lucide-react';
+import type { WizardStep, ExportOptions } from '../../../types/wizard';
+import { BATCH_SIZES, UI_DEFAULTS, COMPRESSION_TYPE } from '../../../constants';
+
+export const EXPORT_STEP_ID = {
+    SOURCE: 'source',
+    FIELDS: 'fields',
+    FORMAT: 'format',
+    DESTINATION: 'destination',
+    TRIGGER: 'trigger',
+    REVIEW: 'review',
+} as const;
+
+export const WIZARD_STEPS: WizardStep[] = [
+    { id: 'source', label: 'Data Source', icon: Database },
+    { id: 'fields', label: 'Select Fields', icon: Columns },
+    { id: 'format', label: 'Output Format', icon: FileSpreadsheet },
+    { id: 'destination', label: 'Destination', icon: Send },
+    { id: 'trigger', label: 'Schedule', icon: Clock },
+    { id: 'review', label: 'Review', icon: Check },
+];
+
+export const STEP_CONTENT = {
+    source: {
+        title: 'Select Data Source',
+        description: 'Choose which Vendure entity to export',
+    },
+    fields: {
+        title: 'Select Fields',
+        description: 'Choose which fields to include in the export',
+    },
+    format: {
+        title: 'Output Format',
+        description: 'Choose the output format and configure options',
+    },
+    destination: {
+        title: 'Destination',
+        description: 'Choose where to deliver the exported data',
+    },
+    trigger: {
+        title: 'Schedule & Options',
+        description: 'Configure when to run the export and additional options',
+    },
+    review: {
+        title: 'Review & Create',
+        description: 'Review your export configuration before creating',
+        cardTitle: 'Export Configuration',
+    },
+} as const;
+
+export const EXPORT_PLACEHOLDERS = {
+    configName: 'My Product Export',
+    filename: 'export-{date}.csv',
+    sftpHost: 'sftp.example.com',
+    remotePath: '/uploads/feeds',
+    httpUrl: 'https://api.example.com/import',
+} as const;
+
+export const DEFAULT_EXPORT_OPTIONS: ExportOptions = {
+    batchSize: BATCH_SIZES.EXPORT_DEFAULT,
+    includeMetadata: false,
+    compression: COMPRESSION_TYPE.NONE,
+    notifyOnComplete: true,
+    retryOnFailure: true,
+    maxRetries: UI_DEFAULTS.DEFAULT_MAX_RETRIES,
+};