[Data Importer] Highlight the expanded mapping and align its destination column

[idaiv]

Changes in this pull request

Resolves #645

Three related fixes in the Data Setup → Mapping step.

1. Highlight the expanded mapping section

Collapsed and expanded sections looked identical apart from the chevron, so nothing marked the one being edited. The expanded panel now carries the primary border from the design (colorPrimaryBorder, the token named in Figma, which resolves to #d3adf7).

expanded was already a controlled prop driving Panel active, so this adds no state — just a class derived from it, on the wrapper that already owns the panel’s border colour.

Why !important: the SDK draws the panel border from
.ant-collapse.collapse-item--theme-default.collapse-item--bordered — four classes, and a border shorthand. The wrapper selector is two classes, so a plain border-color there never applies. The drag-and-drop rules directly above are !important for exactly this reason. They are also one class more specific, so a drag still takes over the border while it is in progress, which is the behaviour we want.

2. Transformation icon for the advanced setup

Swaps the settings gear for the transformation icon on the Advanced button and on the badge above the arrow shown when an advanced setup exists.

The badge was already wired to isAdvanced and only had the wrong icon — no new logic. The icon already ships in the studio-ui-bundle library and is registered in icon-library/index.ts, so nothing needs to be added there and this PR has no cross-repo dependency. arrowGearIcon is renamed to arrowAdvancedIcon to match what it now renders.

3. Align the advanced destination column

Two problems in the same slot:

	Before	After
Font size	fontSizeSM → 10px	fontSize → 12px, matching the Select beside it
Vertical position	filled only its 22px line box at the top of the slot	occupies the same controlHeight (32px) box as the Select it replaces, centred

The column itself was already the right height — 56px, the same as the source column (label + 4px gap + 32px control). What was off was the content inside it, which sat above the vertical centre of the source Select and the arrow. Using token.controlHeight rather than a literal keeps it tied to the same token the Select derives its height from, and matches how the arrow column already aligns itself ("with the vertical center of the first Select").

The "Requires advanced setup" hint occupies that identical slot and had both problems, so it follows the same rules — otherwise it would have looked misaligned in the warning state.

Additional info

Scope: 4 files, styling and icon names only. No behaviour, API or data changes.

Verification: eslint ✅ · tsc --noEmit ✅

Exercised against the car-import config in the demo, checking that the compiled bundle contains the new rules rather than trusting the build log.

Not covered by tests: these are visual changes with no assertable behaviour; the repo has no snapshot or visual-regression setup for this step.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Copilot]

Pull request overview

Verdict: Needs changes.

Updates mapping panels with expanded-state highlighting, transformation icons, and improved destination alignment.

Changes:

• Highlights expanded mapping panels.
• Replaces settings icons with transformation icons.
• Aligns destination and warning text with standard controls.

Review assessment:

• Root cause is addressed for fixed-height controls, but wrapped multi-source Selects still misalign destination text (mapping-step.styles.tsx:444,456).
• Relevant call sites and style renames are covered.
• Changes are correctly scoped with no API or backward-compatibility impact.
• No visual-regression infrastructure was identified; remaining risk is wrapped multi-source layouts.

Reviewed changes

Copilot reviewed 13 out of 32 changed files in this pull request and generated 1 comment.

File	Description
mapping-step.styles.tsx	Adds highlighting, renamed icon styling, and alignment rules.
mapping-item.tsx	Applies expanded-panel styling conditionally.
mapping-item-content.tsx	Uses the transformation icon.
arrow-column.tsx	Updates the advanced-state icon and style name.

Suppressed comments (1)

assets/studio/js/src/modules/data-importer/components/tabs/steps/mapping-step/mapping-step.styles.tsx:456

• The warning state is specifically reachable with multiple sources, whose Select can wrap and make this row taller than controlHeight. Because this hint only has a minimum height, it stays top-aligned while the arrow centers in the stretched row. Let it fill the available destination slot as well.

      min-height: ${token.controlHeight}px;

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.