[Studio] Load live preview column headers in resolver & processing steps

assets/studio/js/src/modules/data-importer/components/tabs/data-setup-tab.tsx

@@ -18,7 +18,7 @@ import { ResolverStep } from './steps/resolver-step'
 import { MappingStep } from './steps/mapping-step'
 import { ProcessingSettingsStep } from './steps/processing-settings-step'
 import { useStyles } from './data-setup-tab.styles'
-import { useBundleDataImporterConfigGetQuery } from '../../data-importer-api-slice-enhanced'
+import { useColumnHeaderOptions } from '../../hooks/use-column-header-options'
 import { Box } from '@pimcore/studio-ui-bundle/components'
 
 export interface DataSetupTabProps {
@@ -29,17 +29,17 @@ export const DataSetupTab = ({ configName }: DataSetupTabProps): React.JSX.Eleme
   const { t } = useTranslation()
   const { styles } = useStyles()
   const [currentStep, setCurrentStep] = useState(0)
+  // Bumped on preview-data change so dependent steps refresh their column lists.
+  const [previewVersion, setPreviewVersion] = useState(0)
 
-  const { data: configData } = useBundleDataImporterConfigGetQuery({ name: configName })
-  const columnHeaderOptions = useMemo(
-    () => (configData?.columnHeaders ?? []).map((header) => {
-      // API returns objects {id, dataIndex, label}; type says string[] — handle both
-      const h = header as unknown as { dataIndex?: string, label?: string } | string
-      const value = typeof h === 'string' ? h : (h.dataIndex ?? '')
-      const label = typeof h === 'string' ? h : (h.label ?? h.dataIndex ?? '')
-      return { value, label }
-    }),
-    [configData?.columnHeaders]
+  const RESOLVER_STEP_INDEX = 2
+  const PROCESSING_STEP_INDEX = 4
+
+  // Shared column options for the resolver and processing steps; loaded while either is active.
+  const columnHeaderOptions = useColumnHeaderOptions(
+    configName,
+    currentStep === RESOLVER_STEP_INDEX || currentStep === PROCESSING_STEP_INDEX,
+    previewVersion
   )
 
   const steps: StepItem[] = useMemo(() => [
@@ -83,6 +83,7 @@ export const DataSetupTab = ({ configName }: DataSetupTabProps): React.JSX.Eleme
         <PreviewImportStep
           configName={ configName }
           isActive={ currentStep === 1 }
+          onPreviewDataChange={ () => { setPreviewVersion((v) => v + 1) } }
         />
       </div>
 
@@ -95,7 +96,7 @@ export const DataSetupTab = ({ configName }: DataSetupTabProps): React.JSX.Eleme
       </div>
 
       <div className={ cn(styles.stepContent, currentStep !== 4 && styles.stepContentHidden) }>
-        <ProcessingSettingsStep configName={ configName } />
+        <ProcessingSettingsStep columnHeaderOptions={ columnHeaderOptions } />
       </div>
     </Flex>
   )

assets/studio/js/src/modules/data-importer/components/tabs/steps/preview-import-step/preview-import-step.tsx

@@ -26,6 +26,8 @@ import { usePreviewRecordQuery } from '../shared/use-preview-record-query'
 export interface PreviewImportStepProps {
   configName: string
   isActive: boolean
+  /** Called when the preview data changes (copy from source / upload). */
+  onPreviewDataChange?: () => void
 }
 
 interface PreviewRow {
@@ -42,7 +44,7 @@ const isNotFoundError = (error: unknown): boolean => {
 
 const columnHelper = createColumnHelper<PreviewRow>()
 
-export const PreviewImportStep = ({ configName, isActive }: PreviewImportStepProps): React.JSX.Element => {
+export const PreviewImportStep = ({ configName, isActive, onPreviewDataChange }: PreviewImportStepProps): React.JSX.Element => {
   const { t } = useTranslation()
   const form = Form.useFormInstance()
 
@@ -111,6 +113,7 @@ export const PreviewImportStep = ({ configName, isActive }: PreviewImportStepPro
     }
 
     fetchPreview(0, { forceRefetch: true })
+    onPreviewDataChange?.()
   }
 
   const dropdownItems = [
@@ -230,6 +233,7 @@ export const PreviewImportStep = ({ configName, isActive }: PreviewImportStepPro
         onUploadSuccess={ () => {
           setUploadModalOpen(false)
           fetchPreview(0, { forceRefetch: true })
+          onPreviewDataChange?.()
         } }
         open={ uploadModalOpen }
         title={ t('data-importer.preview-import.upload-file') }

assets/studio/js/src/modules/data-importer/components/tabs/steps/processing-settings-step/processing-settings-step.tsx

@@ -11,32 +11,22 @@
 import React, { useEffect } from 'react'
 import { Flex, Select, Form, Switch } from '@pimcore/studio-ui-bundle/components'
 import { useTranslation } from '@pimcore/studio-ui-bundle/app'
-import { useBundleDataImporterConfigGetQuery } from '../../../../data-importer-api-slice-enhanced'
 import { DataImporterPanel } from '../data-importer-panel/data-importer-panel'
 import { StepHeading } from '../step-heading/step-heading'
 import { filterByLabel } from '../../../../utils/select-utils'
 import type { DataImporterFormValues } from '../../../../types'
+import { type ColumnHeaderOption } from '../../../../hooks/use-column-header-options'
 import { useStyles } from './processing-settings-step.styles'
 
 export interface ProcessingSettingsStepProps {
-  configName: string
+  columnHeaderOptions: ColumnHeaderOption[]
 }
 
-export const ProcessingSettingsStep = ({ configName }: ProcessingSettingsStepProps): React.JSX.Element => {
+export const ProcessingSettingsStep = ({ columnHeaderOptions }: ProcessingSettingsStepProps): React.JSX.Element => {
   const { t } = useTranslation()
   const { styles, cx } = useStyles()
   const form = Form.useFormInstance()
 
-  const { data: configData } = useBundleDataImporterConfigGetQuery({ name: configName })
-
-  const columnHeaderOptions = (configData?.columnHeaders ?? []).map((header) => {
-    // API returns objects {id, dataIndex, label}; type says string[] — handle both
-    const h = header as unknown as { dataIndex?: string, label?: string } | string
-    const value = typeof h === 'string' ? h : (h.dataIndex ?? '')
-    const label = typeof h === 'string' ? h : (h.label ?? h.dataIndex ?? '')
-    return { value, label }
-  })
-
   const executionTypeOptions = [
     { value: 'sequential', label: t('data-importer.processing.execution-type.sequential') },
     { value: 'parallel', label: t('data-importer.processing.execution-type.parallel') }

assets/studio/js/src/modules/data-importer/hooks/use-column-header-options.tsx

@@ -0,0 +1,82 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import { useEffect, useMemo, useRef } from 'react'
+import { Form } from '@pimcore/studio-ui-bundle/components'
+import { useBundleDataImporterConfigGetQuery } from '../data-importer-api-slice-enhanced'
+import { useBundleDataImporterConfigLoadColumnHeadersQuery } from '../data-importer-api-slice.gen'
+import { transformFormToBackend, type BackendConfiguration } from '../utils/transformers'
+import { type DataImporterFormValues } from '../types'
+
+export interface ColumnHeaderOption {
+  value: string
+  label: string
+}
+
+/**
+ * Returns the preview "Data Source Index" column options, loaded live from the current
+ * loader/interpreter config (persisted `configData.columnHeaders` can be stale).
+ *
+ * Bump `previewVersion` when the preview data changes to trigger a refetch.
+ * Must be called from within the detail-view Form context.
+ */
+export const useColumnHeaderOptions = (
+  configName: string,
+  active: boolean,
+  previewVersion: number = 0
+): ColumnHeaderOption[] => {
+  const form = Form.useFormInstance()
+  const { data: configData } = useBundleDataImporterConfigGetQuery({ name: configName })
+
+  const loaderConfigType = Form.useWatch(['loaderConfig', 'type']) as string | undefined
+  const interpreterConfigType = Form.useWatch(['interpreterConfig', 'type']) as string | undefined
+
+  const headersRequest = useMemo(() => {
+    if (configData === undefined || loaderConfigType === undefined) return undefined
+    const formValues = form.getFieldsValue(true) as DataImporterFormValues
+    const existingConfig = (configData.configuration ?? {}) as BackendConfiguration
+    const backendConfig = transformFormToBackend(formValues, existingConfig)
+    return {
+      name: configName,
+      bundleDataImporterCopyPreviewParameters: {
+        currentConfig: {
+          loaderConfig: backendConfig.loaderConfig,
+          interpreterConfig: backendConfig.interpreterConfig
+        }
+      }
+    }
+  }, [configName, configData, form, loaderConfigType, interpreterConfigType])
+
+  const { data: liveHeaders, refetch } = useBundleDataImporterConfigLoadColumnHeadersQuery(
+    headersRequest!,
+    { skip: headersRequest === undefined || !active }
+  )
+
+  // Refetch on preview-data change (the query key doesn't change after a copy/upload).
+  const lastFetchedVersionRef = useRef(previewVersion)
+  useEffect(() => {
+    if (!active || headersRequest === undefined) return
+    if (previewVersion !== lastFetchedVersionRef.current) {
+      lastFetchedVersionRef.current = previewVersion
+      void refetch().catch(() => undefined)
+    }
+  }, [active, previewVersion, headersRequest, refetch])
+
+  return useMemo(
+    () => (liveHeaders?.columnHeaders ?? configData?.columnHeaders ?? []).map((header) => {
+      // API returns {dataIndex, label} objects; the persisted type says string[] — handle both
+      const h = header as unknown as { dataIndex?: string, label?: string } | string
+      const value = typeof h === 'string' ? h : (h.dataIndex ?? '')
+      const label = typeof h === 'string' ? h : (h.label ?? h.dataIndex ?? '')
+      return { value, label }
+    }),
+    [liveHeaders?.columnHeaders, configData?.columnHeaders]
+  )
+}

src/Resources/public/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/entrypoints.json

@@ -0,0 +1,37 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/async/359.3ba5f4b6.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/async/645.97b421d0.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/async/658.520c3151.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/async/668.92531b7e.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/async/67.5c1703b3.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/async/272.4302db3d.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/109.63fc8f63.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/main.6334b63f.js"
+      ],
+      "css": []
+    },
+    "pimcore_dataimporter_bundle": {
+      "js": [
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/async/132.94c226f3.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/async/359.3ba5f4b6.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/async/645.97b421d0.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/async/__federation_expose_default_export.66e14f50.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/async/658.520c3151.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/async/668.92531b7e.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/async/67.5c1703b3.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/async/272.4302db3d.js",
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/remoteEntry.js"
+      ],
+      "css": []
+    },
+    "exposeRemote": {
+      "js": [
+        "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/exposeRemote.js"
+      ],
+      "css": []
+    }
+  }
+}

src/Resources/public/studio/build/803956d3-96c5-4416-a04a-a9b5446c2704/exposeRemote.js → src/Resources/public/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/exposeRemote.js

@@ -7,7 +7,7 @@
         window.alternativePluginExportPaths = {}
       }
 
-      window.pluginRemotes.pimcore_dataimporter_bundle = "/bundles/pimcoredataimporter/studio/build/803956d3-96c5-4416-a04a-a9b5446c2704/static/js/remoteEntry.js"
+      window.pluginRemotes.pimcore_dataimporter_bundle = "/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/remoteEntry.js"
 
 
 

src/Resources/public/studio/build/803956d3-96c5-4416-a04a-a9b5446c2704/main.html → src/Resources/public/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/main.html

@@ -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/803956d3-96c5-4416-a04a-a9b5446c2704/static/js/109.63fc8f63.js"></script><script defer src="/bundles/pimcoredataimporter/studio/build/803956d3-96c5-4416-a04a-a9b5446c2704/static/js/main.247600e0.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/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/109.63fc8f63.js"></script><script defer src="/bundles/pimcoredataimporter/studio/build/d5d4b419-6200-4fa4-bc11-4fb21edf22ad/static/js/main.6334b63f.js"></script></head><body><div id="root"></div></body></html>