@wix/patterns 1.422.0 → 1.424.0

package/src/components/FieldCell/FieldCell.tsx

@@ -0,0 +1,162 @@
+import React, { Suspense } from 'react';
+import { Box, Text, TextButton } from '@wix/design-system';
+import { Confirm, Minus } from '@wix/wix-ui-icons-common';
+import type { PatternsFieldType } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { observer } from 'mobx-react-lite';
+import type { CellAddressViewProps } from '@wix/patterns-fields';
+import type { WixCodeGalleryItem } from '@wix/patterns-fields/auto-field-types';
+import { getDateWithoutTimezone } from '../../utils/datesUtil';
+
+// Cell renderers live in @wix/patterns-fields, which statically pulls the
+// rich-text editor (Ricos/draft-js) and media SDKs. Importing them eagerly put
+// that weight into every bundle that renders a source column (DataExtension,
+// CMS, the tables). Loading them lazily moves it into an async chunk fetched
+// only when a cell of one of these types first renders. The light types in the
+// switch below stay inline (WDS only) and ship nothing extra.
+function lazyCell<P extends object>(
+  pick: (m: typeof import('@wix/patterns-fields')) => React.ComponentType<P>,
+) {
+  const C = React.lazy(async () => ({
+    default: pick(await import('@wix/patterns-fields')),
+  }));
+  return (props: P) => (
+    <Suspense fallback={null}>
+      <C {...props} />
+    </Suspense>
+  );
+}
+
+const CellAddressView = lazyCell((m) => m.CellAddressView);
+const CellAudioView = lazyCell((m) => m.CellAudioView);
+const CellColorView = lazyCell((m) => m.CellColorView);
+const CellDocumentView = lazyCell((m) => m.CellDocumentView);
+const CellMediaGalleryView = lazyCell((m) => m.CellMediaGalleryView);
+const CellMultiDocumentView = lazyCell((m) => m.CellMultiDocumentView);
+const CellRichContentView = lazyCell((m) => m.CellRichContentView);
+const CellRichTextView = lazyCell((m) => m.CellRichTextView);
+const ImageView = lazyCell((m) => m.ImageView);
+const JsonView = lazyCell((m) => m.JsonView);
+
+export interface FieldCellProps {
+  value?: unknown;
+  type: PatternsFieldType;
+  /** Stable id for cells that render WDS Tags (document, multi-document). */
+  fieldId?: string;
+}
+
+function _FieldCell(props: FieldCellProps) {
+  const { dateFormatters } = useWixPatternsContainer();
+  switch (props.type) {
+    case 'LONG_TEXT':
+      return (
+        <Text size="small" ellipsis maxLines={3}>
+          {props.value as React.ReactNode}
+        </Text>
+      );
+    case 'DATE':
+      return (
+        <Text size="small" ellipsis maxLines={1}>
+          {props.value
+            ? dateFormatters.medium.format(
+                getDateWithoutTimezone(props.value as string),
+              )
+            : null}
+        </Text>
+      );
+    case 'DATETIME':
+      return (
+        <Text size="small" ellipsis maxLines={1}>
+          {props.value
+            ? dateFormatters.mediumTime.format(new Date(props.value as string))
+            : null}
+        </Text>
+      );
+    case 'BOOLEAN':
+      return (
+        <Box
+          align="center"
+          verticalAlign="middle"
+          color={props.value ? 'G10' : 'D10'}
+        >
+          {props.value ? <Confirm /> : <Minus />}
+        </Box>
+      );
+    case 'URL':
+      return (
+        <TextButton
+          as="a"
+          rel="noopener"
+          target="_blank"
+          href={props.value as string}
+          ellipsis
+        >
+          {props.value as React.ReactNode}
+        </TextButton>
+      );
+    case 'IMAGE':
+      return (
+        <ImageView value={props.value as string | null} dataHook="image-view" />
+      );
+    case 'VIDEO':
+      return (
+        <ImageView value={props.value as string | null} dataHook="video-view" />
+      );
+    case 'AUDIO':
+      return (
+        <CellAudioView
+          value={props.value as string | null}
+          dataHook="audio-view"
+        />
+      );
+    case 'MEDIA_GALLERY':
+      return (
+        <CellMediaGalleryView
+          data={props.value as WixCodeGalleryItem[] | null}
+          dataHook="media-gallery-view"
+        />
+      );
+    case 'DOCUMENT':
+      return (
+        <CellDocumentView
+          value={props.value as string | null | undefined}
+          dataHook="document-view"
+          fieldId={props.fieldId ?? ''}
+        />
+      );
+    case 'MULTI_DOCUMENT':
+      return (
+        <CellMultiDocumentView
+          value={props.value as string[] | null | undefined}
+          dataHook="multi-document-view"
+          fieldId={props.fieldId ?? ''}
+        />
+      );
+    case 'ARRAY':
+      return (
+        <Text size="small" ellipsis maxLines={1}>
+          {(props.value as unknown[] | undefined)?.join(', ')}
+        </Text>
+      );
+    case 'ADDRESS':
+      return (
+        <CellAddressView data={props.value as CellAddressViewProps['data']} />
+      );
+    case 'RICH_TEXT':
+      return <CellRichTextView value={props.value as string | null} />;
+    case 'RICH_CONTENT':
+      return <CellRichContentView value={props.value} />;
+    case 'COLOR':
+      return <CellColorView value={props.value as string | undefined} />;
+    case 'OBJECT':
+      return <JsonView data={props.value} />;
+    default:
+      return (
+        <Text size="small" ellipsis maxLines={1}>
+          {props.value as React.ReactNode}
+        </Text>
+      );
+  }
+}
+
+export const FieldCell = observer(_FieldCell);

package/src/components/Heading/Heading.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading2580758596";
+var _namespace_ = "Heading589754590";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Heading2580758596__root"};
+export var classes = {"root":"Heading589754590__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportButton.tsx

@@ -14,10 +14,10 @@ function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
   const {
     toolbarType = 'default',
     fields,
-    bulkUploadItems,
+    collectionId,
     backup,
     updateSchema,
-    batchSize,
+    onJobError,
   } = props;
 
   const table = useToolbarCollectionContext<T, F>();
@@ -37,10 +37,10 @@ function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
             <ImportButtonModalLayout
               importModalState={state}
               fields={fields}
-              bulkUploadItems={bulkUploadItems}
+              collectionId={collectionId}
               backup={backup}
               updateSchema={updateSchema}
-              batchSize={batchSize}
+              onJobError={onJobError}
             />
           );
 

package/src/components/ImportButton/ImportButtonModalLayout.tsx

@@ -19,14 +19,17 @@ import { ImportStepper } from './ImportStepper';
 import { MessageActionModal } from '../ActionModal';
 import { ModalWrapper } from '../CollectionModal';
 import { PatternsFieldsProvider } from '../../providers';
+import { FieldEditorModal } from '../CmsFieldManagement/FieldEditorModal';
+import { FieldEditorModalState } from '../CmsFieldManagement/FieldEditorModalState';
+import { buildFieldDraft } from './importFieldEditor';
 
 function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
   const {
     fields,
-    bulkUploadItems,
+    collectionId,
     backup,
     updateSchema,
-    batchSize,
+    onJobError,
     importModalState,
     ...rest
   } = props;
@@ -35,18 +38,31 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
 
   const createImport = useCreateImport({
     fields,
-    bulkUploadItems,
+    collectionId,
     backup,
     updateSchema,
+    onJobError,
     // Media-aware detection (image/video/document/audio) lives in
     // patterns-fields; core defaults to primitive detection without it.
     detectColumnType: detectFieldType,
-    batchSize,
     importModalState,
   });
 
   const [state] = useState(() => createImport());
 
+  const [fieldEditorState] = useState(
+    () => new FieldEditorModalState({ onSubmit: state.applyFieldEdit }),
+  );
+
+  const openFieldEditor = (header: string) => {
+    const mapping = state.mappingByHeader[header];
+    if (mapping?.kind !== 'new') {
+      return;
+    }
+    state.beginFieldEdit(header);
+    fieldEditorState.open(buildFieldDraft(header, mapping));
+  };
+
   const {
     onRequestClose,
     children,
@@ -55,6 +71,7 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
   } = getImportModalStepProps({
     state,
     isMobile,
+    onEditField: openFieldEditor,
   });
 
   const wrappedChildren =
@@ -98,8 +115,12 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
 
   const { modal: discardModal } = state.discardChangesModal;
 
+  // The main layout + its discard-changes modal differ per device; everything
+  // common (the field editor) is stacked alongside `child` in the single return.
+  let child: React.ReactNode;
+
   if (isMobile) {
-    return (
+    child = (
       <>
         <CustomDrawerLayout
           dataHook="import-modal-layout"
@@ -148,27 +169,39 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
         </ModalWrapper>
       </>
     );
+  } else {
+    child = (
+      <>
+        <CustomModalLayout
+          width="600px"
+          maxHeight="80vh"
+          dataHook="import-modal-layout"
+          removeContentPadding={removeContentPadding}
+          {...rest}
+          {...customModalLayoutProps}
+          children={content}
+        />
+        <MessageActionModal
+          dataHook="import-discard-changes-modal"
+          state={state.discardChangesModal}
+          title={t('cairo.import.discardChanges.title')}
+          content={t('cairo.import.discardChanges.description')}
+          primaryButtonText={t('cairo.import.discardChanges.confirm')}
+          secondaryButtonText={t('cairo.import.discardChanges.cancel')}
+          theme="destructive"
+        />
+      </>
+    );
   }
 
   return (
     <>
-      <CustomModalLayout
-        width="600px"
-        maxHeight="80vh"
-        dataHook="import-modal-layout"
-        removeContentPadding={removeContentPadding}
-        {...rest}
-        {...customModalLayoutProps}
-        children={content}
-      />
-      <MessageActionModal
-        dataHook="import-discard-changes-modal"
-        state={state.discardChangesModal}
-        title={t('cairo.import.discardChanges.title')}
-        content={t('cairo.import.discardChanges.description')}
-        primaryButtonText={t('cairo.import.discardChanges.confirm')}
-        secondaryButtonText={t('cairo.import.discardChanges.cancel')}
-        theme="destructive"
+      {child}
+      <FieldEditorModal
+        state={fieldEditorState}
+        title={t('cairo.import.editField')}
+        primaryButtonText={t('cairo.import.save')}
+        secondaryButtonText={t('cairo.import.cancel')}
       />
     </>
   );

package/src/components/ImportButton/ImportIdCollisionControl.tsx

@@ -0,0 +1,67 @@
+import { Box, Text, TextButton, PopoverMenu } from '@wix/design-system';
+import { ChevronDown } from '@wix/wix-ui-icons-common';
+import { ImportState, WritePolicy } from '@wix/bex-core';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+// Width of the policy popover. The default WDS `maxWidth` (204) is too narrow
+// for "Update the existing items" at the medium menu font, so the label wraps
+// to two lines; this matches the field-column width so each option fits on one
+// line (per the Figma).
+const MENU_MAX_WIDTH = 250;
+
+/**
+ * Shown under the row whose CSV column is mapped to the collection `_id` field.
+ * Lets the user pick how rows that collide on an existing `_id` are written:
+ * update the existing item (`OVERWRITE`) or skip it, keeping the existing data
+ * intact (`SKIP_EXISTING`). The inline action label reflects the current choice
+ * and opens a popover to switch.
+ */
+export const IdCollisionControl = observer(function _IdCollisionControl({
+  state,
+}: {
+  state: ImportState;
+}) {
+  const { translate: t, writePolicy } = state;
+  const isSkip = writePolicy === WritePolicy.SKIP_EXISTING;
+  const actionLabel = isSkip
+    ? t('cairo.import.skipImportedItems')
+    : t('cairo.import.updateExistingItems');
+
+  return (
+    <Box direction="vertical" gap="SP1">
+      <Text size="tiny" secondary dataHook="import-id-collision-label">
+        {t('cairo.import.idCollisionLabel')}
+      </Text>
+      <PopoverMenu
+        appendTo="window"
+        zIndex={5001}
+        maxWidth={MENU_MAX_WIDTH}
+        textSize="small"
+        placement="bottom-start"
+        dataHook="import-id-collision-menu"
+        triggerElement={
+          <TextButton
+            size="tiny"
+            as="button"
+            dataHook="import-id-collision-action"
+            suffixIcon={<ChevronDown />}
+          >
+            {actionLabel}
+          </TextButton>
+        }
+      >
+        <PopoverMenu.MenuItem
+          dataHook="import-id-collision-update"
+          text={t('cairo.import.updateExistingItems')}
+          onClick={() => state.setWritePolicy(WritePolicy.OVERWRITE)}
+        />
+        <PopoverMenu.MenuItem
+          dataHook="import-id-collision-skip"
+          text={t('cairo.import.skipImportedItems')}
+          onClick={() => state.setWritePolicy(WritePolicy.SKIP_EXISTING)}
+        />
+      </PopoverMenu>
+    </Box>
+  );
+});

package/src/components/ImportButton/ImportModal.uni.driver.ts

@@ -4,6 +4,7 @@ import {
   CounterBadgeUniDriver,
   CustomModalLayoutUniDriver,
   DropdownUniDriver,
+  InputUniDriver,
   MessageModalLayoutUniDriver,
   ModalUniDriver,
   TextUniDriver,
@@ -82,6 +83,17 @@ export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
       modalLayoutBase().$('[data-hook="import-error-message"]').text(),
     errorMessageExists: () =>
       modalLayoutBase().$('[data-hook="import-error-message"]').exists(),
+    // Inline wrap style on the error message's container — asserts a long,
+    // unbroken message is forced to wrap inside the modal instead of overflowing.
+    getErrorMessageWrapStyle: async () => {
+      const native: HTMLElement = await modalLayoutBase()
+        .$('[data-hook="import-error-message-wrap"]')
+        .getNative();
+      return {
+        overflowWrap: native.style.overflowWrap,
+        wordBreak: native.style.wordBreak,
+      };
+    },
 
     /** Get the CounterBadge driver for the columns found counter */
     getColumnsFoundCounter: () =>
@@ -107,6 +119,65 @@ export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
         body,
       ),
 
+    /**
+     * CSV headers in the order their mapping rows are rendered (ID row first).
+     * Reads the per-row column-title cells in DOM order — `.text()` on the
+     * multi-element query returns their text as an ordered array.
+     */
+    getMappingHeadersInOrder: () =>
+      modalLayoutBase().$$('[data-hook="import-column-title"]').text(),
+
+    /** Whether the "When items share the same ID" sentence + action are shown */
+    idCollisionControlExists: () =>
+      modalLayoutBase().$('[data-hook="import-id-collision-action"]').exists(),
+
+    /** Current label of the id-collision inline action (reflects the choice) */
+    getIdCollisionActionText: () =>
+      modalLayoutBase().$('[data-hook="import-id-collision-action"]').text(),
+
+    /** Open the id-collision popover menu */
+    openIdCollisionMenu: () =>
+      modalLayoutBase().$('[data-hook="import-id-collision-action"]').click(),
+
+    // The popover menu renders at `window` (appendTo), so its items live on
+    // `body`, not under the modal layout.
+    clickIdCollisionUpdate: () =>
+      body.$('[data-hook="import-id-collision-update"]').click(),
+    clickIdCollisionSkip: () =>
+      body.$('[data-hook="import-id-collision-skip"]').click(),
+
+    /** Whether the "Edit field" link under a column's new-field mapping exists */
+    editFieldLinkExists: (header: string) =>
+      modalLayoutBase().$(`[data-hook="import-edit-field-${header}"]`).exists(),
+
+    /** Click the "Edit field" link to open the field editor for a column */
+    clickEditField: (header: string) =>
+      modalLayoutBase().$(`[data-hook="import-edit-field-${header}"]`).click(),
+
+    /** Whether the CMS field-editor modal is open */
+    fieldEditorIsOpen: () =>
+      body.$('[data-hook="field-editor-modal"]').exists(),
+
+    /** Field-editor modal layout driver (Save/Cancel, title, ...) */
+    getFieldEditorModal: () =>
+      CustomModalLayoutUniDriver(
+        body.$('[data-hook="field-editor-modal"]'),
+        body,
+      ),
+
+    /** Field-editor "Field name" input driver */
+    getFieldEditorNameInput: () =>
+      InputUniDriver(body.$('[data-hook="cms-field-name-input"]'), body),
+
+    /** Confirm (Save) the field editor */
+    confirmFieldEditor: async () =>
+      (
+        await CustomModalLayoutUniDriver(
+          body.$('[data-hook="field-editor-modal"]'),
+          body,
+        ).getPrimaryButtonDriver()
+      ).click(),
+
     /** Get the discard changes confirmation modal driver */
     getDiscardChangesModal: () =>
       MessageModalLayoutUniDriver(

package/src/components/ImportButton/ImportProps.tsx

@@ -1,8 +1,8 @@
 import {
   BackupFn,
-  BulkUploadItemsFn,
   UpdateSchemaFn,
   ModalState,
+  OnImportJobError,
 } from '@wix/bex-core';
 import { CreateExportAsyncJobRequest } from '@wix/bex-utils/@wix/ambassador-fedinfra-exportservice-v1-export-async-job/types';
 
@@ -10,16 +10,27 @@ type ImportButtonToolbarType = 'default' | 'bulkActionToolbar';
 
 export interface ImportButtonParams
   extends Pick<CreateExportAsyncJobRequest, 'fields'> {
-  bulkUploadItems: BulkUploadItemsFn;
+  /** Destination data collection the import writes into. */
+  collectionId: string;
   backup?: BackupFn;
   /**
    * Adds new collection fields during import, in a single call, before the rows
-   * upload. When provided, unmapped CSV columns default to creating a new (text)
-   * field instead of "don't import". When omitted, behavior is unchanged
+   * upload. When provided, unmapped CSV columns default to creating a new field
+   * (its type inferred from the column data) instead of "don't import"; the user
+   * can refine the field's name, type, and configuration via "Edit field", which
+   * is carried on each `NewFieldDefinition`. When omitted, behavior is unchanged
    * (unmapped columns default to skip).
    */
   updateSchema?: UpdateSchemaFn;
-  batchSize?: number;
+  /**
+   * Resolves a user-facing message for a failed import job. The job's error is
+   * the consumer's own application error, so wrap the given operation with your
+   * `withErrorHandler` + error-code map (keyed by application-error code), e.g.
+   * `(run) => withErrorHandler(run, { [jobErrorCode]: (e) => ({ message }) })`.
+   * See {@link OnImportJobError}. When omitted, the generic error message is
+   * shown.
+   */
+  onJobError?: OnImportJobError;
 }
 
 export type ImportButtonProps = ImportButtonParams & {

package/src/components/ImportButton/ImportStepConfiguration.tsx

@@ -2,6 +2,7 @@ import {
   Box,
   Dropdown,
   Text,
+  TextButton,
   TableListItem,
   listItemSelectBuilder,
   SectionHelper,
@@ -11,9 +12,12 @@ import { ImportState, NewFieldType } from '@wix/bex-core';
 import { useTranslations } from '@wix/patterns-fields';
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import { IdCollisionControl } from './ImportIdCollisionControl';
 
 export interface ImportStepConfigurationProps {
   state: ImportState;
+  /** Opens the "Edit field" editor for a column's pending new field. */
+  onEditField: (header: string) => void;
 }
 
 const COLUMN_WIDTHS = {
@@ -60,11 +64,13 @@ interface NewFieldHelperTextProps {
   state: ImportState;
   header: string;
   fieldType: NewFieldType;
+  onEditField: () => void;
 }
 
 /**
  * Helper line under a "create new field" mapping (e.g. "This will be a new text
- * field."). The type name comes from the shared patterns-fields translations via
+ * field.") followed by an "Edit field" link that opens the field editor. The
+ * type name comes from the shared patterns-fields translations via
  * `useTranslations`, so this is only rendered when the import modal is wrapped in
  * `PatternsFieldsProvider` — which `ImportButtonModalLayout` does whenever field
  * creation is enabled (the only case a `new` mapping exists).
@@ -73,14 +79,28 @@ const NewFieldHelperText = observer(function _NewFieldHelperText({
   state,
   header,
   fieldType,
+  onEditField,
 }: NewFieldHelperTextProps) {
   const { t: ft } = useTranslations();
   const typeName = ft(NEW_FIELD_TYPE_TITLE_KEY[fieldType]).toLocaleLowerCase();
 
   return (
-    <Text size="tiny" secondary dataHook={`import-new-field-helper-${header}`}>
-      {state.translate('cairo.import.newFieldHelper', { typeName })}
-    </Text>
+    <Box direction="horizontal" gap="SP1" verticalAlign="middle">
+      <Text
+        size="tiny"
+        secondary
+        dataHook={`import-new-field-helper-${header}`}
+      >
+        {state.translate('cairo.import.newFieldHelper', { typeName })}
+      </Text>
+      <TextButton
+        size="tiny"
+        dataHook={`import-edit-field-${header}`}
+        onClick={onEditField}
+      >
+        {state.translate('cairo.import.editField')}
+      </TextButton>
+    </Box>
   );
 });
 
@@ -88,12 +108,14 @@ interface FieldMappingCellProps {
   state: ImportState;
   header: string;
   fieldOptions: DropdownOption[];
+  onEditField: (header: string) => void;
 }
 
 const FieldMappingCell = observer(function _FieldMappingCell({
   state,
   header,
   fieldOptions,
+  onEditField,
 }: FieldMappingCellProps) {
   const { translate: t, selectedFieldIds, canCreateNewField } = state;
   const mapping = state.mappingByHeader[header];
@@ -110,7 +132,9 @@ const FieldMappingCell = observer(function _FieldMappingCell({
       ...option,
       disabled:
         selectedFieldIds.has(String(option.id)) &&
-        !(mapping?.kind === 'existing' && mapping.fieldId === String(option.id)),
+        !(
+          mapping?.kind === 'existing' && mapping.fieldId === String(option.id)
+        ),
     })),
     ...(canCreateNewField
       ? [
@@ -161,15 +185,27 @@ const FieldMappingCell = observer(function _FieldMappingCell({
           state={state}
           header={header}
           fieldType={mapping.fieldType}
+          onEditField={() => onEditField(header)}
         />
       )}
+      {state.idMappedHeader === header && <IdCollisionControl state={state} />}
     </Box>
   );
 });
 
-function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
+function _ImportStepConfiguration({
+  state,
+  onEditField,
+}: ImportStepConfigurationProps) {
   const { csvHeaders, fields, translate: t } = state;
 
+  // Row order is snapshotted per file in state, with the `_id`-mapped column
+  // floated to the top (CAIRO-4418). It stays fixed while the user edits
+  // mappings, so clearing/remapping the `_id` column doesn't reorder the row
+  // under the cursor. Fall back to CSV order if the snapshot isn't populated.
+  const orderedHeaders =
+    state.orderedHeaders.length > 0 ? state.orderedHeaders : csvHeaders;
+
   const baseDropdownOptions = fields
     .filter((field) => field.id != null)
     .map((field) =>
@@ -229,14 +265,14 @@ function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
           maxHeight={hasNoRows ? 'calc(80vh - 420px)' : 'calc(80vh - 300px)'}
           style={SCROLLBAR_GUTTER}
         >
-          {csvHeaders.map((header, index) => (
+          {orderedHeaders.map((header, index) => (
             <TableListItem
               key={header}
-              showDivider={index < csvHeaders.length - 1}
+              showDivider={index < orderedHeaders.length - 1}
               options={[
                 {
                   value: (
-                    <Text ellipsis size="small">
+                    <Text ellipsis size="small" dataHook="import-column-title">
                       {header}
                     </Text>
                   ),
@@ -256,6 +292,7 @@ function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
                       state={state}
                       header={header}
                       fieldOptions={baseDropdownOptions}
+                      onEditField={onEditField}
                     />
                   ),
                   width: COLUMN_WIDTHS.field,