@wix/bex-core 2.332.0 → 2.336.0

package/dist/esm/state/ImportState/ImportState.js

@@ -6,17 +6,71 @@ import { parseCsv, unparseCsv } from './parseCsv';
 import { rewriteParsedCsvForImport } from './rewriteCsv';
 import { createHubJobClient } from './hubJobClient';
 import { pollImportJob } from './importJobPoller';
-import { detectColumnType, TYPE_SAMPLE_SIZE, } from './detectFieldType';
-import { toFieldEdit } from './fieldEdit';
+import { detectColumnType, toPatternsFieldType, TYPE_SAMPLE_SIZE, } from './detectFieldType';
+import { toDataExtensionFieldEdit, toFieldEdit } from './fieldEdit';
 // `NewFieldType`, `detectColumnType`, etc. are re-exported from the package via
 // the `ImportState` barrel (`./index`), which also exports `./detectFieldType`.
 // Re-export the write-policy enum so consumers (and the cairo UI) reference it
 // from `@wix/bex-core` rather than the bundled ambassador path.
 export { WritePolicy } from '@wix/bex-utils/@wix/ambassador-hub-v1-job/types';
-// How long to keep the completed progress bar (100%) on screen before closing
-// the modal on a clean import. Without it, an import of very few rows finishes
-// near-instantly and the modal appears to vanish without ever showing the bar
-// reaching completion.
+// Builds the Field to create from a pending new column: import decides the key,
+// and the detected NewFieldType maps to the schema's PatternsFieldType. Import
+// only ever creates non-reference fields, so the cast is safe.
+const toField = (def) => ({
+    id: def.key,
+    displayName: def.displayName,
+    type: toPatternsFieldType(def.type),
+    ...(def.config?.validation && { validation: def.config.validation }),
+    ...(def.config?.isPii && { isPii: true }),
+    ...(def.config?.helpText && { helpText: def.config.helpText }),
+});
+/**
+ * Assembles a `ResolvedImportConfig` from the table's live `fieldsSource` and the
+ * consumer `inputs`. The schema-derived members are getters so they read the
+ * source live — fields import creates and fields added through the
+ * field-management panel show up immediately. Empty before a source attaches;
+ * nothing imports until then.
+ *
+ * Exported for tests.
+ */
+export const buildImportConfig = (fieldsSource, collection, inputs = {}) => {
+    const { destination, fields = [], backup, idFieldKey, jobApplicationErrorMap, } = inputs;
+    return {
+        get fields() {
+            const seen = new Set(fields.map((f) => f.id));
+            const live = (fieldsSource?.fields ?? [])
+                .filter((f) => !seen.has(f.id))
+                .map((f) => ({
+                id: f.id,
+                header: f.displayName,
+                required: f.validation?.required,
+            }));
+            return [...fields, ...live];
+        },
+        get dataSource() {
+            if (destination) {
+                return { destination };
+            }
+            const add = fieldsSource?.fieldManagement?.canAddFields
+                ? fieldsSource.fieldActions?.addFields
+                : undefined;
+            return {
+                collectionId: collection.queryName,
+                ...(add && {
+                    updateSchema: (defs) => add(defs.map(toField)),
+                }),
+            };
+        },
+        mergeFields: (f) => fieldsSource?.mergeFields?.(f),
+        ...(backup && { backup }),
+        ...(idFieldKey && { idFieldKey }),
+        ...(jobApplicationErrorMap && { jobApplicationErrorMap }),
+    };
+};
+// How long to hold the completed (100%) progress bar on screen before moving to
+// the summary step (CAIRO-4476). The job reports counts only when it finishes,
+// so the bar sits at 0 for the whole import and would otherwise flip straight to
+// the summary without the user ever seeing it reach completion.
 const COMPLETION_LINGER_MS = 600;
 // The Wix Data collection's id field key. A CSV column mapped to this field lets
 // the user choose how rows that collide on `_id` are written (writePolicy).
@@ -90,6 +144,8 @@ export class ImportState {
         this.result = {
             succeeded: 0,
             failed: 0,
+            created: 0,
+            updated: 0,
         };
         this.isBackingUp = false;
         this.isRestoring = false;
@@ -99,12 +155,17 @@ export class ImportState {
         // Id of the running data-movement job, set once submitted — used to cancel it
         // (`terminateJob`) if the user closes mid-import.
         this._jobId = null;
-        // The column whose pending new field the field editor is currently editing.
-        // Not observable — transient wiring between `beginFieldEdit` and the editor's
-        // `applyFieldEdit` callback, never rendered.
-        this._editingHeader = null;
-        this.config = props.config;
+        // The column whose pending new field the field editor is currently editing, or
+        // `null` when the editor is closed. Observable so the source's field-editor
+        // component (rendered via `renderFieldEditor`) opens/prefills itself when this
+        // is set and closes when it clears — the editor is decoupled from the layout.
+        this.editingHeader = null;
         this.collection = props.collection;
+        // A pre-built config wins (hand-built / tests); otherwise assemble it from
+        // the live source + inputs.
+        this.config =
+            props.config ??
+                buildImportConfig(props.fieldsSource, props.collection, props.importInputs);
         this.importModalState = props.importModalState;
         this.translate = props.translate;
         this.errorHandler = props.errorHandler;
@@ -133,7 +194,12 @@ export class ImportState {
             hasMappings: computed,
             hasNoMappedData: computed,
             selectedFieldIds: computed,
+            missingRequiredFields: computed,
+            hasMissingRequiredFields: computed,
             idMappedHeader: computed,
+            editingHeader: observable.ref,
+            editingMapping: computed,
+            endFieldEdit: action.bound,
             setWritePolicy: action.bound,
             onUploadContinue: action.bound,
             goToUpload: action.bound,
@@ -142,7 +208,10 @@ export class ImportState {
             setNewFieldConfig: action.bound,
             beginFieldEdit: action.bound,
             applyFieldEdit: action.bound,
+            applyDataExtensionFieldEdit: action.bound,
             close: action.bound,
+            done: action.bound,
+            downloadFailedRows: action.bound,
             onFileSelected: action.bound,
             startImport: action.bound,
             reset: action.bound,
@@ -156,19 +225,33 @@ export class ImportState {
     }
     /** Wix Data collection the import writes into (unset for platformized). */
     get collectionId() {
-        return this.config.collectionId;
+        const ds = this.config.dataSource;
+        return 'collectionId' in ds ? ds.collectionId : undefined;
     }
     get destination() {
-        return this.config.destination;
+        const ds = this.config.dataSource;
+        return 'destination' in ds ? ds.destination : undefined;
     }
     get backup() {
         return this.config.backup;
     }
+    /** CMS create-fields callback, present only on the `collectionId` branch. */
     get updateSchema() {
-        return this.config.updateSchema;
+        const ds = this.config.dataSource;
+        return 'collectionId' in ds ? ds.updateSchema : undefined;
+    }
+    /** DataExtension create-fields callback, present only on the `destination` branch. */
+    get createDataExtensionFields() {
+        const ds = this.config.dataSource;
+        return 'destination' in ds ? ds.createFields : undefined;
+    }
+    /** DataExtension field-management for the editor, on the `destination` branch. */
+    get dataExtensionFieldManagement() {
+        const ds = this.config.dataSource;
+        return 'destination' in ds ? ds.fieldManagement : undefined;
     }
-    get onJobError() {
-        return this.config.onJobError;
+    get jobApplicationErrorMap() {
+        return this.config.jobApplicationErrorMap;
     }
     // The collection's id-field key; a schema-backed config may report a non-`_id`
     // identifier. Defaults to the Wix Data `_id`.
@@ -216,6 +299,30 @@ export class ImportState {
             .filter((m) => m?.kind === 'existing')
             .map((m) => m.fieldId));
     }
+    /**
+     * Required destination fields that no CSV column is mapped to (CAIRO-4452).
+     * A required field is an existing collection field, so only an `existing`
+     * mapping can satisfy it — a "create new field" column can't. Covers both
+     * ways a required field ends up unmapped: the CSV has no matching column at
+     * all, or the user set its column to "don't import". Drives the footer
+     * indicator and blocks `startImport`.
+     */
+    get missingRequiredFields() {
+        return this.fields.filter((field) => field.required &&
+            field.id != null &&
+            !this.selectedFieldIds.has(field.id));
+    }
+    get hasMissingRequiredFields() {
+        return this.missingRequiredFields.length > 0;
+    }
+    // Comma-separated display names of the missing required fields, for the block
+    // toast. Falls back to the field id when a field carries no header.
+    _missingRequiredFieldNames() {
+        return this.missingRequiredFields
+            .map((field) => field.header || field.id || '')
+            .filter(Boolean)
+            .join(', ');
+    }
     /**
      * The CSV header currently mapped to the collection's `_id` field, or `null`
      * when no column targets it. Drives both the "When items share the same ID"
@@ -232,12 +339,13 @@ export class ImportState {
     }
     /**
      * Whether columns may be mapped to a brand-new field created during import.
-     * When the config sets `canAddFields` (e.g. a schema's create-field permission)
-     * that gates it; otherwise the presence of `updateSchema` is the opt-in (see
-     * `getDefaultMapping`).
+     * The opt-in is the presence of the active `dataSource` branch's create
+     * callback — `updateSchema` (CMS) or `createFields` (DataExtension). A source
+     * that can't create fields (e.g. no create permission) supplies neither, so
+     * columns fall back to "don't import" (see `getDefaultMapping`).
      */
     get canCreateNewField() {
-        return this.config.canAddFields ?? this.config.updateSchema != null;
+        return this.updateSchema != null || this.createDataExtensionFields != null;
     }
     /**
      * Whether the write-policy (id-collision) choice is meaningful for this import.
@@ -269,6 +377,8 @@ export class ImportState {
         this.result = {
             succeeded: 0,
             failed: 0,
+            created: 0,
+            updated: 0,
         };
         this._pendingFieldsMap = undefined;
         this.isBackingUp = false;
@@ -279,11 +389,10 @@ export class ImportState {
     }
     async close() {
         // While on the progress step we treat close as a cancel — terminate the job
-        // and restore the backup — UNLESS the import already succeeded. On the
-        // success path `startImport` lingers ~600ms on the completed bar with the
-        // step still 'progress'; closing during that window must NOT restore (it
-        // would undo a clean import). A successful close just closes the modal and
-        // lets the success path do its collection refresh.
+        // and restore the backup — UNLESS the import already succeeded. On success
+        // `startImport` moves straight to the 'summary' step, so a close from there
+        // just closes the modal (the summary's own `done` is the normal exit); this
+        // guard covers only closing mid-import.
         if (this.currentStep === 'progress' && !this.importStatus.isSuccess) {
             this._cancelled = true;
             this._abortController?.abort();
@@ -306,6 +415,13 @@ export class ImportState {
         }
         this.importModalState.close();
     }
+    /**
+     * Closes the summary step at the end of a completed import. The collection was
+     * already refreshed when the summary opened, so this only dismisses the modal.
+     */
+    done() {
+        this.importModalState.close();
+    }
     async _restoreBackup() {
         const restoreFn = this.restoreFn;
         if (!restoreFn) {
@@ -474,50 +590,44 @@ export class ImportState {
             },
         });
     }
-    _showPartialSuccessToast() {
-        this.showToast?.({
-            type: 'WARNING',
-            message: this.translate('cairo.import.partialSuccessToast', {
-                failed: String(this.result.failed),
-                imported: String(this.result.succeeded),
-            }),
-            action: {
-                text: this.translate('cairo.import.downloadFailedRows'),
-                onClick: () => this._downloadFailedRows(),
-                removeToastOnClick: true,
-            },
-        });
-    }
     /**
-     * Builds a plain, re-importable CSV of the rows the server rejected — the
-     * original headers plus just the failed rows — and hands it to `downloadCsv`.
-     * The failed rows come from the job's movement logs (which row failed), mapped
-     * back to the parsed `csvRows` we still hold in memory.
+     * Builds a re-importable CSV of the rows the server rejected and hands it to
+     * `downloadCsv`. Each failed row is prefixed with a leading "why it failed"
+     * column holding the server's error message, so the user can see and fix each
+     * reason. The failed rows (and their reasons) come from the job's movement
+     * logs, mapped back to the parsed `csvRows` we still hold in memory.
      */
-    async _downloadFailedRows() {
+    async downloadFailedRows() {
         const jobId = this._jobId;
         if (!jobId) {
             return;
         }
-        let indices;
+        let failures;
         try {
-            indices = await this._fetchFailedRowIndices(jobId);
+            failures = await this._fetchFailedRows(jobId);
         }
         catch (error) {
             console.error('Fetching failed rows report failed', error);
             return;
         }
-        const failedRows = indices
-            .map((index) => this.csvRows[index])
+        const rows = failures
+            .map(({ index, reason }) => {
+            const row = this.csvRows[index];
+            return row != null ? [reason, ...row] : null;
+        })
             .filter((row) => row != null);
-        if (failedRows.length === 0) {
+        if (rows.length === 0) {
             return;
         }
-        const content = unparseCsv(this.csvHeaders, failedRows);
+        const headers = [
+            this.translate('cairo.import.failureReasonColumn'),
+            ...this.csvHeaders,
+        ];
+        const content = unparseCsv(headers, rows);
         this.downloadCsv?.(content, `failed-${this.fileName || 'import.csv'}`);
     }
-    // Pages through the job's movement logs and returns the `csvRows` indices of
-    // the rows that failed. data-hub's CSV decoder
+    // Pages through the job's movement logs and returns, for each row that failed,
+    // its `csvRows` index and the server's failure reason. data-hub's CSV decoder
     // (wix-data-hub: packages/wix-data-hub-executor-c/src/plugins/formats/csv/
     // csv-binary-decoder.ts) parses with the `csv-parse` library (`columns: true`)
     // and sets `sourceItemId = "row ${++index + 1}"`, incrementing once **per
@@ -526,8 +636,8 @@ export class ImportState {
     // `csvRows[0]`, i.e. `csvRows[N - 2]`. Because `csv-parse` is RFC-4180,
     // quoted cells containing embedded newlines are a single record, so they do
     // NOT shift the numbering. Out-of-range indices are guarded below.
-    async _fetchFailedRowIndices(jobId) {
-        const indices = [];
+    async _fetchFailedRows(jobId) {
+        const failures = [];
         let cursor;
         do {
             const { logs, pagingMetadata } = await this.hubJobClient.listMovementLogs(jobId, cursor ? { cursor } : undefined);
@@ -540,13 +650,13 @@ export class ImportState {
                 if (Number.isInteger(index) &&
                     index >= 0 &&
                     index < this.csvRows.length) {
-                    indices.push(index);
+                    failures.push({ index, reason: log.failure.description ?? '' });
                 }
             }
             cursor =
                 (pagingMetadata?.hasNext && pagingMetadata.cursors?.next) || undefined;
         } while (cursor);
-        return indices;
+        return failures;
     }
     setMapping(header, fieldId) {
         this.mappingByHeader = {
@@ -584,23 +694,51 @@ export class ImportState {
         };
     }
     /**
-     * Marks which column's pending new field the field editor is currently
-     * editing, so a later `applyFieldEdit` (the editor's `onSubmit`) knows where to
-     * write the result.
+     * Opens the field editor for a column's pending new field: sets
+     * `editingHeader`, which the source's editor component watches to open and
+     * prefill itself. No-op if the column isn't mapped to a new field.
      */
     beginFieldEdit(header) {
-        this._editingHeader = header;
+        if (this.mappingByHeader[header]?.kind === 'new') {
+            this.editingHeader = header;
+        }
+    }
+    /** Closes the field editor (clears `editingHeader`). */
+    endFieldEdit() {
+        this.editingHeader = null;
+    }
+    /**
+     * The `new` mapping currently being edited, or `null` when the editor is
+     * closed. The editor component reads this to prefill its form.
+     */
+    get editingMapping() {
+        if (this.editingHeader == null) {
+            return null;
+        }
+        const mapping = this.mappingByHeader[this.editingHeader];
+        return mapping?.kind === 'new' ? mapping : null;
     }
     /**
-     * `onSubmit` handler for the field editor: maps the edited field spec into the
-     * column being edited (set via `beginFieldEdit`). No-op if nothing is being
+     * `onSubmit` handler for the CMS field editor: maps the edited field spec into
+     * the column being edited (set via `beginFieldEdit`). No-op if nothing is being
      * edited.
      */
     applyFieldEdit(field) {
-        if (this._editingHeader == null) {
+        if (this.editingHeader == null) {
             return;
         }
-        this.setNewFieldConfig(this._editingHeader, toFieldEdit(field));
+        this.setNewFieldConfig(this.editingHeader, toFieldEdit(field));
+    }
+    /**
+     * `onSubmit` handler for the DataExtension field editor: maps the edited
+     * DataExtension draft (which carries per-audience permissions) into the column
+     * being edited. The `destination`-branch counterpart to `applyFieldEdit`.
+     */
+    applyDataExtensionFieldEdit(draft) {
+        if (this.editingHeader == null) {
+            return;
+        }
+        this.setNewFieldConfig(this.editingHeader, toDataExtensionFieldEdit(draft));
     }
     /**
      * Runs the server-side import: align the CSV to the resolved field keys,
@@ -645,21 +783,30 @@ export class ImportState {
             // The job ran server-side, so a failure arrives on a 200 (the poll
             // succeeded; the job didn't) with no HTTP error to carry the application
             // error. Build a synthetic, HTTP-error-shaped error (the error handler
-            // reads the code from `response.data.details.applicationError`) and hand
-            // the throwing operation to the consumer's `onJobError` so THEY wrap it
-            // with their own `withErrorHandler` + error-code map — `job.error` is the
-            // consumer's application error (their import business logic), so only they
-            // can map its codes, and the map stays coupled to the `withErrorHandler`
-            // call as everywhere else (e.g. `fetchData`). The map is attached to the
-            // error object, which the progress step resolves via `getResolvedError`.
-            // Without a handler the same error still throws, falling back to the
-            // generic message.
+            // reads the code from `response.data.details.applicationError`), then
+            // resolve it through the consumer's per-code map via `withErrorHandler` —
+            // the same way as `fetchData` etc. `job.error` is the consumer's
+            // application error (their import business logic), so only they can map
+            // its codes; they supply just the code→message map and we do the
+            // wrapping. `withErrorHandler` attaches the map to the error and
+            // re-rejects it, so the progress step resolves a consumer-specific
+            // message via `getResolvedError`. Without a map the same error still
+            // throws, falling back to the generic message.
             const error = Object.assign(new Error(`ImportJob.${job.error?.code ?? 'failed'}`), { response: { data: { details: { applicationError: job.error } } } });
-            const run = () => Promise.reject(error);
-            if (this.onJobError) {
-                // The consumer wraps `run` with `withErrorHandler`; it re-rejects with
-                // `error` (now carrying their map), which propagates from here.
-                await this.onJobError(run);
+            const jobApplicationErrorMap = this.jobApplicationErrorMap;
+            if (jobApplicationErrorMap) {
+                // Adapt the consumer's code→message map into the error handler's
+                // `errorCodesMap`: each entry, when its code matches the job's
+                // application error, resolves with that error. `withErrorHandler`
+                // attaches the resolved message to `error` and re-rejects it, so the
+                // progress step surfaces it via `getResolvedError` — the consumer only
+                // supplies the map, not the wrapping.
+                const appError = (job.error ?? {});
+                const errorCodesMap = Object.fromEntries(Object.entries(jobApplicationErrorMap).map(([code, resolve]) => [
+                    code,
+                    () => resolve(appError),
+                ]));
+                await this.errorHandler.withErrorHandler(() => Promise.reject(error), errorCodesMap);
             }
             throw error;
         }
@@ -688,13 +835,21 @@ export class ImportState {
         const succeeded = progress?.itemsSuccessful ?? 0;
         const failed = progress?.itemsRejected ?? 0;
         const current = progress?.current ?? succeeded + failed;
+        // The server splits successful items into created (new) and updated
+        // (existing) — the summary step reports each. Absent on older jobs, in
+        // which case both stay 0 and only the total `succeeded` is shown.
+        const created = progress?.itemsSuccessfulInfo?.itemsCreated ?? 0;
+        const updated = progress?.itemsSuccessfulInfo?.itemsUpdated ?? 0;
         // `totalCount` is fixed up front in `startImport` from the CSV row count
         // (one uploaded row per CSV row); polling only advances `processedCount`.
         runInAction(() => {
             this.processedCount = Math.min(current, this.totalCount);
-            this.result = { succeeded, failed };
+            this.result = { succeeded, failed, created, updated };
         });
     }
+    _lingerOnCompletion() {
+        return new Promise((resolve) => setTimeout(resolve, COMPLETION_LINGER_MS));
+    }
     async _runBackup() {
         const backup = this.backup;
         if (!backup) {
@@ -727,9 +882,6 @@ export class ImportState {
         });
         return false;
     }
-    _lingerOnCompletion() {
-        return new Promise((resolve) => setTimeout(resolve, COMPLETION_LINGER_MS));
-    }
     /**
      * Resolves every column to the final destination key used in the upload
      * payload: an existing field id, a new field's (Cairo-decided) key, or `null`
@@ -739,13 +891,16 @@ export class ImportState {
      */
     async _resolveFieldMapping() {
         const resolved = {};
-        const newFields = [];
+        // Pending new columns with their deduped key + display name. Source-neutral;
+        // the per-source field def is built from these in `_createPendingFields`.
+        const pending = [];
         // Seed with existing field ids/display names so derived keys and names never
         // collide with them or with each other.
         const usedKeys = new Set(this.fields.map((field) => field.id).filter((id) => !!id));
         const usedNames = new Set(this.fields
             .map((field) => field.header)
             .filter((header) => !!header));
+        const canCreate = this.canCreateNewField;
         for (const header of this.csvHeaders) {
             const mapping = this.mappingByHeader[header];
             if (mapping == null) {
@@ -754,41 +909,75 @@ export class ImportState {
             else if (mapping.kind === 'existing') {
                 resolved[header] = mapping.fieldId;
             }
-            else if (this.updateSchema) {
+            else if (canCreate) {
                 // The user's name override (from the field editor) seeds the unique
                 // name/key derivation; otherwise fall back to the column header.
                 const baseName = mapping.displayName?.trim() || header;
                 const { displayName, key } = uniqueFieldNameAndKey(baseName, usedNames, usedKeys);
                 usedKeys.add(key);
                 usedNames.add(displayName);
-                newFields.push({
-                    key,
-                    type: mapping.fieldType,
-                    displayName,
-                    ...(mapping.config && { config: mapping.config }),
-                });
+                pending.push({ key, displayName, mapping });
                 resolved[header] = key;
             }
             else {
-                // "new" mapping without an `updateSchema` callback — nothing to map into.
+                // "new" mapping with no create callback on this source — nothing to map into.
                 resolved[header] = null;
             }
         }
-        if (newFields.length > 0 && this.updateSchema) {
+        if (pending.length > 0) {
             // Stash the returned fields map to merge into the table on success; kept off
-            // the observable until then so columns don't update mid-import. Guard the
-            // empty map: SchemaState.mergeFields is a full replace, so merging `{}` would
-            // wipe every column — treat a missing/empty return as "nothing to merge".
-            const updated = await this.updateSchema(newFields);
-            this._pendingFieldsMap =
-                updated && Object.keys(updated).length > 0 ? updated : undefined;
+            // the observable until then so columns don't update mid-import.
+            this._pendingFieldsMap = await this._createPendingFields(pending);
         }
         return resolved;
     }
+    /**
+     * Creates the pending new fields via the active `dataSource` branch's callback
+     * — `updateSchema` (CMS) or `createFields` (DataExtension) — building the
+     * source-specific field def from the shared, already-deduped pending columns.
+     * The callback may throw; `startImport` surfaces that as the error state.
+     */
+    async _createPendingFields(pending) {
+        const updateSchema = this.updateSchema;
+        const createDataExtensionFields = this.createDataExtensionFields;
+        let updated;
+        if (updateSchema) {
+            updated = await updateSchema(pending.map(({ key, displayName, mapping }) => ({
+                key,
+                type: mapping.fieldType,
+                displayName,
+                ...(mapping.config && { config: mapping.config }),
+            })));
+        }
+        else if (createDataExtensionFields) {
+            // The DataExtension source builds its own field shape from the neutral
+            // pending columns — no DataExtension-specific def-building in core.
+            updated = await createDataExtensionFields(pending);
+        }
+        else {
+            return undefined;
+        }
+        // Guard the empty map: SchemaState.mergeFields is a full replace, so merging
+        // `{}` would wipe every column — treat a missing/empty return as "nothing to
+        // merge".
+        return updated && Object.keys(updated).length > 0 ? updated : undefined;
+    }
     async startImport() {
         if (!this.hasMappings) {
             return;
         }
+        // Block import while any required destination field is unmapped and tell the
+        // user which (CAIRO-4452). The footer already flags this; the Import button
+        // stays enabled, so this is where the click is stopped.
+        if (this.hasMissingRequiredFields) {
+            this.showToast?.({
+                type: 'ERROR',
+                message: this.translate('cairo.import.missingRequiredMessage', {
+                    fields: this._missingRequiredFieldNames(),
+                }),
+            });
+            return;
+        }
         this._cancelled = false;
         this._abortController = new AbortController();
         // One uploaded row per CSV row (the rewrite drops columns, not rows), so the
@@ -805,6 +994,8 @@ export class ImportState {
             this.result = {
                 succeeded: 0,
                 failed: 0,
+                created: 0,
+                updated: 0,
             };
             this._jobId = null;
             // Drop any fields map from a prior attempt so a no-new-fields "Try again"
@@ -857,28 +1048,30 @@ export class ImportState {
                     ...queryStatus.success,
                     data: this.result,
                 };
+                // The job reports counts only when it finishes, so the bar sat at 0 for
+                // the whole import (CAIRO-4476). Snap it to 100% and hold it (below)
+                // before the summary step replaces the progress step, so the user sees
+                // the import reach completion.
+                this.processedCount = this.totalCount;
             });
-            // On a clean import, hold the completed (100%) progress bar on screen
-            // briefly so the completion is perceptible even for very few rows. Skip
-            // the wait when there are failed rows — that path closes and surfaces a
-            // toast instead.
-            if (this.result.failed === 0) {
-                await this._lingerOnCompletion();
-                if (this._cancelled) {
-                    return;
-                }
+            // Keep the completed bar on screen briefly before moving on. `importStatus`
+            // is already success, so a close during this window just dismisses the
+            // modal (the `close()` guard doesn't treat it as a cancel).
+            await this._lingerOnCompletion();
+            if (this._cancelled) {
+                return;
             }
             // Success path only. `_pendingFieldsMap` holds this run's returned map — it's
             // cleared at the start of `startImport` (the stale-guard) and set by
             // `_resolveFieldMapping`; snapshotting here keeps the merge success-gated.
             createdFields = this._pendingFieldsMap;
             runInAction(() => {
-                // Rows the server rejected are reported via a toast (the downloadable
-                // failed-rows report is added by the failed-rows-report task).
-                if (this.result.failed > 0) {
-                    this._showPartialSuccessToast();
-                }
-                this.importModalState.close();
+                // Import finished: show the summary step (created / updated / failed
+                // counts, plus a "Download CSV" of the failed rows when any failed).
+                // The modal stays open; the user dismisses it from the summary via
+                // `done`. Refresh the collection now so the table behind the modal is
+                // up to date by the time it closes.
+                this.currentStep = 'summary';
                 this.collection.clearResultAndMoveToStart({ force: true });
             });
         }