Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
idaiv wants to merge 6 commits into
base: 2026.x
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
13b444f
[Data Importer] Highlight the expanded mapping and align its destinat…
idaiv Aug 28, 2026
beb561d
Automatic frontend build
idaiv Aug 28, 2026
256104d
Potential fix for pull request finding
idaiv Aug 31, 2026
9440335
Automatic frontend build
idaiv Aug 31, 2026
6f771b7
Center the destination text when the source Select wraps
idaiv Aug 31, 2026
8eff259
Automatic frontend build
idaiv Aug 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...ta-importer/components/tabs/steps/mapping-step/mapping-item/arrow-column/arrow-column.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ export const ArrowColumn = (props: ArrowColumnProps): React.JSX.Element => {
return (
<div className={ cn(styles.arrowCol, styles.arrowColAdvanced) }>
{ isAdvanced && !isWarningState && !isInProgressState && (
<span className={ styles.arrowGearIcon }>
<Icon value="settings" />
<span className={ styles.arrowAdvancedIcon }>
<Icon value="transformation" />
</span>
) }
{ (isWarningState || isInProgressState) && (
Expand Down
2 changes: 1 addition & 1 deletion ...es/data-importer/components/tabs/steps/mapping-step/mapping-item/mapping-item-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export const MappingItemContent = React.memo(({
</div>

<IconTextButton
icon={ { value: 'settings' } }
icon={ { value: 'transformation' } }
onClick={ onOpenAdvanced }
type="default"
>
Expand Down
4 changes: 2 additions & 2 deletions ...rc/modules/data-importer/components/tabs/steps/mapping-step/mapping-item/mapping-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const MappingItemComponent = ({
}

const { t } = useTranslation()
const { styles } = useStyles()
const { styles, cx } = useStyles()
const form = Form.useFormInstance()
const [advancedOpen, setAdvancedOpen] = useState(false)
const settings = useSettings()
Expand Down Expand Up @@ -173,7 +173,7 @@ const MappingItemComponent = ({
onDrop={ handleDrop }
variant="default"
>
<DndClassDiv className={ styles.panelDndWrapper }>
<DndClassDiv className={ cx(styles.panelDndWrapper, expanded && styles.panelExpanded) }>
<Panel
active={ expanded }
border
Expand Down
38 changes: 32 additions & 6 deletions ...o/js/src/modules/data-importer/components/tabs/steps/mapping-step/mapping-step.styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,18 @@ export const useStyles = createStyles(({ css, token }) => {
}
`,

// Expanded mapping — the open section is highlighted so it reads as the one being
// edited among the collapsed ones. Needs !important: the SDK draws the panel border
// from `.ant-collapse.collapse-item--theme-default.collapse-item--bordered`, which
// outranks this selector, and it is a `border` shorthand. The DnD rules above are
// !important for the same reason and are one class more specific, so a drag still
// takes over the border while it is in progress.
panelExpanded: css`
& .ant-collapse {
border-color: ${token.colorPrimaryBorder} !important;
}
`,

// Source drop zone — structural only, no DnD visuals (panel wrapper handles those).
sourceDropZone: css`
border-radius: ${token.borderRadius}px;
Expand Down Expand Up @@ -402,8 +414,8 @@ export const useStyles = createStyles(({ css, token }) => {
line-height: 1;
`,

// Gear icon shown above the arrow when advanced config is set
arrowGearIcon: css`
// Transformation icon shown above the arrow when an advanced setup exists
arrowAdvancedIcon: css`
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -420,20 +432,34 @@ export const useStyles = createStyles(({ css, token }) => {
flex-shrink: 0;
`,

// Advanced destination: plain text lines (not a Select)
// Advanced destination: plain text lines (not a Select). Matches token.fontSize so it
// lines up with the Select it replaces — fontSizeSM rendered it 10px against the 12px
// used by every control around it.
destinationTextBlock: css`
display: flex;
flex-direction: column;
justify-content: center;
/* Fills the destination column and centers within it, so the text stays on the same
vertical center as the source control and the arrow — including when a multi-source
Select wraps onto several lines and sourcesDestRow stretches both columns taller.
The min-height keeps the unwrapped case matching the Select it replaces. */
flex: 1;
min-height: ${token.controlHeight}px;
padding: 0 ${token.paddingXXS}px;
font-size: ${token.fontSizeSM}px;
font-size: ${token.fontSize}px;
line-height: 22px;
color: ${token.colorText};
`,

// In-progress hint: "Requires advanced setup" text — entire string in warning text color
// In-progress hint: "Requires advanced setup" text — entire string in warning text color.
// Occupies the same destination slot, so it follows the same size.
requiresAdvancedHint: css`
display: flex;
align-items: center;
flex: 1;
min-height: ${token.controlHeight}px;
padding: 0 ${token.paddingXXS}px;
font-size: ${token.fontSizeSM}px;
font-size: ${token.fontSize}px;
line-height: 22px;
color: ${token.colorWarningText};
`,
Expand Down
37 changes: 0 additions & 37 deletions src/Resources/public/studio/build/6481eecf-8266-4dbb-b075-b1c5d7c3e85b/entrypoints.json
View file
Open in desktop

This file was deleted.

61 changes: 0 additions & 61 deletions src/Resources/public/studio/build/6481eecf-8266-4dbb-b075-b1c5d7c3e85b/manifest.json
View file
Open in desktop

This file was deleted.

37 changes: 37 additions & 0 deletions src/Resources/public/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/entrypoints.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{
"entrypoints": {
"main": {
"js": [
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/359.ef7a6289.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/745.56a11b0d.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/658.b1390ae9.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/668.1ae87f0f.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/67.8469aaea.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/272.5aa86da5.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/109.4563ef16.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/main.50b86cb5.js"
],
"css": []
},
"pimcore_dataimporter_bundle": {
"js": [
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/132.c328628b.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/359.ef7a6289.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/745.56a11b0d.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/__federation_expose_default_export.ab8898fb.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/658.b1390ae9.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/668.1ae87f0f.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/67.8469aaea.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/272.5aa86da5.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/remoteEntry.js"
],
"css": []
},
"exposeRemote": {
"js": [
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/exposeRemote.js"
],
"css": []
}
}
}
2 changes: 1 addition & 1 deletion ...66-4dbb-b075-b1c5d7c3e85b/exposeRemote.js → ...02-4db7-95a3-dfe6b5d613ed/exposeRemote.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
window.alternativePluginExportPaths = {}
}

window.pluginRemotes.pimcore_dataimporter_bundle = "/bundles/pimcoredataimporter/studio/build/6481eecf-8266-4dbb-b075-b1c5d7c3e85b/static/js/remoteEntry.js"
window.pluginRemotes.pimcore_dataimporter_bundle = "/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/remoteEntry.js"



2 changes: 1 addition & 1 deletion ...ecf-8266-4dbb-b075-b1c5d7c3e85b/main.html → ...e12-8602-4db7-95a3-dfe6b5d613ed/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html><head><title>Rsbuild App</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script defer src="/bundles/pimcoredataimporter/studio/build/6481eecf-8266-4dbb-b075-b1c5d7c3e85b/static/js/109.4563ef16.js"></script><script defer src="/bundles/pimcoredataimporter/studio/build/6481eecf-8266-4dbb-b075-b1c5d7c3e85b/static/js/main.4c4e8f03.js"></script></head><body><div id="root"></div></body></html>
<!DOCTYPE html><html><head><title>Rsbuild App</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script defer src="/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/109.4563ef16.js"></script><script defer src="/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/main.50b86cb5.js"></script></head><body><div id="root"></div></body></html>
61 changes: 61 additions & 0 deletions src/Resources/public/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
{
"allFiles": [
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/main.50b86cb5.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/remoteEntry.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/272.5aa86da5.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/67.8469aaea.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/668.1ae87f0f.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/658.b1390ae9.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/__federation_expose_default_export.ab8898fb.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/745.56a11b0d.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/359.ef7a6289.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/109.4563ef16.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/132.c328628b.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/mf-stats.json",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/mf-manifest.json",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/main.html"
],
"entries": {
"main": {
"html": [
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/main.html"
],
"initial": {
"js": [
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/109.4563ef16.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/main.50b86cb5.js"
]
},
"async": {
"js": [
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/359.ef7a6289.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/745.56a11b0d.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/658.b1390ae9.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/668.1ae87f0f.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/67.8469aaea.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/272.5aa86da5.js"
]
}
},
"pimcore_dataimporter_bundle": {
"initial": {
"js": [
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/remoteEntry.js"
]
},
"async": {
"js": [
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/132.c328628b.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/359.ef7a6289.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/745.56a11b0d.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/__federation_expose_default_export.ab8898fb.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/658.b1390ae9.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/668.1ae87f0f.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/67.8469aaea.js",
"/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/static/js/async/272.5aa86da5.js"
]
}
}
},
"integrity": {}
}
4 changes: 2 additions & 2 deletions ...6-4dbb-b075-b1c5d7c3e85b/mf-manifest.json → ...2-4db7-95a3-dfe6b5d613ed/mf-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"globalName": "pimcore_dataimporter_bundle",
"pluginVersion": "2.3.1",
"prefetchInterface": false,
"publicPath": "/bundles/pimcoredataimporter/studio/build/6481eecf-8266-4dbb-b075-b1c5d7c3e85b/"
"publicPath": "/bundles/pimcoredataimporter/studio/build/f0e5be12-8602-4db7-95a3-dfe6b5d613ed/"
},
"shared": [
{
Expand Down Expand Up @@ -239,7 +239,7 @@
"sync": [
"static/js/async/359.ef7a6289.js",
"static/js/async/132.c328628b.js",
"static/js/async/__federation_expose_default_export.ef3fc8b4.js"
"static/js/async/__federation_expose_default_export.ab8898fb.js"
],
"async": []
},
Expand Down
Loading