Load live preview column headers for resolver and processing steps

The resolver and processing steps' Data Source Index selects read columns
from configData.columnHeaders, which reflects only the persisted config —
running a preview does not invalidate that query, so the selects stayed
empty until a save/reload.

Add a shared useColumnHeaderOptions hook that loads the columns live from
the current loader/interpreter config (the endpoint the mapping step uses).
data-setup-tab owns a previewVersion counter that the preview step bumps on
copy-from-source and upload; the hook refetches when it changes, so columns
stay in sync with the preview data without refetching on every visit.
Config changes refetch on their own via the query key.

Author: markus-moser

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]
+  )
+}