Add Copilot autofill suggestions panel to mapping step

assets/studio/js/src/modules/data-importer/components/tabs/steps/mapping-step/autofill-suggestions-panel/autofill-suggestions-panel.styles.tsx

@@ -0,0 +1,105 @@
+/**
+ * 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 { createStyles } from 'antd-style'
+
+export const useStyles = createStyles(({ css, token }) => {
+  return {
+    tableHeaderRow: css`
+      padding: ${token.paddingXXS}px ${token.paddingMD}px;
+      border-bottom: 1px solid ${token.colorBorderSecondary};
+    `,
+
+    tableHeaderCell: css`
+      color: ${token.colorTextSecondary};
+      white-space: nowrap;
+    `,
+
+    tableRow: css`
+      padding: ${token.paddingXXS}px ${token.paddingMD}px;
+      min-height: 36px;
+
+      &:hover {
+        background: ${token.colorFillAlter};
+        cursor: pointer;
+      }
+    `,
+
+    sourceCell: css`
+      flex: 1.5;
+      min-width: 0;
+      overflow: hidden;
+    `,
+
+    destinationCell: css`
+      flex: 2.5;
+      min-width: 0;
+      overflow: hidden;
+    `,
+
+    localeTag: css`
+      flex-shrink: 0;
+      font-size: ${token.fontSizeSM}px;
+      background-color: ${token.colorPrimaryBg} !important;
+      color: ${token.colorPrimary} !important;
+      border-color: ${token.colorPrimaryBorder} !important;
+    `,
+
+    resultCell: css`
+      flex: 2;
+      min-width: 0;
+      color: ${token.colorTextDescription};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
+
+    cellText: css`
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
+
+    emptyState: css`
+      padding: ${token.paddingXL}px ${token.paddingMD}px;
+    `,
+
+    scoreText: css`
+      white-space: nowrap;
+    `,
+
+    dotGreen: css`
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: ${token.colorSuccess};
+      flex-shrink: 0;
+    `,
+
+    dotYellow: css`
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: ${token.colorWarning};
+      flex-shrink: 0;
+    `,
+
+    dotOrange: css`
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: ${token.colorWarningTextActive};
+      flex-shrink: 0;
+    `
+  }
+})

assets/studio/js/src/modules/data-importer/components/tabs/steps/mapping-step/autofill-suggestions-panel/autofill-suggestions-panel.tsx

@@ -0,0 +1,197 @@
+/**
+ * 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 React from 'react'
+import { Checkbox, Flex, IconButton, NoContent, Spin, Tag } from '@pimcore/studio-ui-bundle/components'
+import { useTranslation } from '@pimcore/studio-ui-bundle/app'
+import { useTheme } from 'antd-style'
+import { type MappingSuggestion } from '../utils/compute-autofill-suggestions'
+import { createMappingItem } from '../utils/mapping-factory'
+import { type MappingConfigItem } from '../../../../../types'
+import { MappingArrowIcon } from '../mapping-item/arrow-column/mapping-arrow-icon.inline'
+import { useStyles } from './autofill-suggestions-panel.styles'
+
+export interface AutofillSuggestionsPanelProps {
+  suggestions: MappingSuggestion[]
+  selectedIds: Set<string>
+  onToggle: (id: string) => void
+  previewRow: Record<string, string | null>
+  hasPrevRow: boolean
+  isLoadingPreviewRow: boolean
+  onPrevRow: () => void
+  onNextRow: () => void
+}
+
+function scoreDotClass (score: number, styles: Record<string, string>): string {
+  if (score >= 90) return styles.dotGreen
+  if (score >= 70) return styles.dotYellow
+  return styles.dotOrange
+}
+
+export const AutofillSuggestionsPanel = ({
+  suggestions,
+  selectedIds,
+  onToggle,
+  previewRow,
+  hasPrevRow,
+  isLoadingPreviewRow,
+  onPrevRow,
+  onNextRow
+}: AutofillSuggestionsPanelProps): React.JSX.Element => {
+  const { t } = useTranslation()
+  const { styles } = useStyles()
+  const theme = useTheme()
+
+  if (suggestions.length === 0) {
+    return (
+      <div className={ styles.emptyState }>
+        <NoContent text={ t('data-importer.mapping.autofill-suggestions.empty') } />
+      </div>
+    )
+  }
+
+  return (
+    <Flex vertical>
+      <Flex
+        align="center"
+        className={ styles.tableHeaderRow }
+        gap="small"
+      >
+        <div style={ { width: 24, flexShrink: 0 } } />
+        <div style={ { width: 56, flexShrink: 0 } }>
+          <span className={ styles.tableHeaderCell }>
+            { t('data-importer.mapping.autofill-suggestions.score') }
+          </span>
+        </div>
+        <div className={ styles.sourceCell }>
+          <span className={ styles.tableHeaderCell }>
+            { t('data-importer.mapping.autofill-suggestions.source') }
+          </span>
+        </div>
+        <div style={ { width: 36, flexShrink: 0 } } />
+        <Flex
+          align="center"
+          className={ styles.destinationCell }
+          gap={ theme.paddingXS }
+        >
+          <span className={ styles.tableHeaderCell }>
+            { t('data-importer.mapping.autofill-suggestions.destination') }
+          </span>
+        </Flex>
+        <div className={ styles.resultCell }>
+          <Flex
+            align="center"
+            justify="space-between"
+          >
+            <span className={ styles.tableHeaderCell }>
+              { t('data-importer.mapping.autofill-suggestions.result') }
+            </span>
+            <Flex
+              align="center"
+              gap={ 4 }
+            >
+              <IconButton
+                disabled={ !hasPrevRow || isLoadingPreviewRow }
+                icon={ { value: 'chevron-left' } }
+                onClick={ onPrevRow }
+                size="small"
+                type="text"
+              />
+              <IconButton
+                disabled={ isLoadingPreviewRow }
+                icon={ { value: 'chevron-right' } }
+                onClick={ onNextRow }
+                size="small"
+                type="text"
+              />
+            </Flex>
+          </Flex>
+        </div>
+      </Flex>
+
+      { suggestions.map((suggestion) => (
+        <Flex
+          align="center"
+          className={ styles.tableRow }
+          gap="small"
+          key={ suggestion.id }
+          onClick={ () => { onToggle(suggestion.id) } }
+        >
+          <div style={ { width: 24, flexShrink: 0 } }>
+            <Checkbox
+              checked={ selectedIds.has(suggestion.id) }
+              onChange={ () => { onToggle(suggestion.id) } }
+              onClick={ (e) => { e.stopPropagation() } }
+            />
+          </div>
+          <div style={ { width: 56, flexShrink: 0 } }>
+            <Flex
+              align="center"
+              gap={ 6 }
+            >
+              <span className={ styles.scoreText }>{ `${suggestion.score}%` }</span>
+              <span className={ scoreDotClass(suggestion.score, styles) } />
+            </Flex>
+          </div>
+          <div className={ styles.sourceCell }>
+            <span className={ styles.cellText }>{ `${suggestion.sourceLabel} [${suggestion.sourceIndex}]` }</span>
+          </div>
+          <Flex
+            align="center"
+            justify="center"
+            style={ { width: 36, flexShrink: 0 } }
+          >
+            <MappingArrowIcon fill={ theme.colorTextTertiary } />
+          </Flex>
+          <Flex
+            align="center"
+            className={ styles.destinationCell }
+            gap={ theme.paddingXS }
+          >
+            <span className={ styles.cellText }>
+              { `Direct, ${suggestion.targetFieldLabel}` }
+            </span>
+            { suggestion.language !== null && (
+              <Tag className={ styles.localeTag }>
+                { suggestion.language }
+              </Tag>
+            ) }
+          </Flex>
+          <div className={ styles.resultCell }>
+            { isLoadingPreviewRow
+              ? (
+                <Spin
+                  size="small"
+                  type="classic"
+                />
+                )
+              : (previewRow[suggestion.sourceIndex] ?? '')
+            }
+          </div>
+        </Flex>
+      )) }
+    </Flex>
+  )
+}
+
+export function applySelectedSuggestions (
+  suggestions: MappingSuggestion[],
+  selectedIds: Set<string>
+): MappingConfigItem[] {
+  return suggestions
+    .filter((s) => selectedIds.has(s.id))
+    .map((s) => createMappingItem(
+      s.sourceIndex,
+      s.sourceLabel,
+      'autofill',
+      s.targetFieldName,
+      s.language ?? undefined
+    ))
+}

assets/studio/js/src/modules/data-importer/components/tabs/steps/mapping-step/autofill-suggestions-panel/index.tsx

@@ -0,0 +1,11 @@
+/**
+ * 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)
+ */
+
+export * from './autofill-suggestions-panel'

assets/studio/js/src/modules/data-importer/components/tabs/steps/mapping-step/hooks/use-mapping-step-loader.tsx

@@ -96,7 +96,7 @@ export function useMappingStepLoader (configName: string, isActive: boolean): Us
 
   const getMappingConfig = useCallback(
     (): MappingConfigItem[] =>
-      ((form.getFieldsValue() as DataImporterFormValues).mappingConfig ?? []),
+      ((form.getFieldValue('mappingConfig') as MappingConfigItem[] | undefined) ?? []),
     [form]
   )
 

assets/studio/js/src/modules/data-importer/components/tabs/steps/mapping-step/mapping-item-context.tsx

@@ -10,19 +10,22 @@
 
 import { createContext, useContext } from 'react'
 import { type ClassAttribute } from '../../../../types'
+import { type SourceRow } from './sources-panel/sources-panel'
 
 export interface MappingItemContextValue {
   configName: string
   classId: string | undefined
   columnHeaderOptions: Array<{ value: string, label: string }>
   attributesMap: Record<string, ClassAttribute[]>
+  sourceRows: SourceRow[]
 }
 
 const MappingItemContext = createContext<MappingItemContextValue>({
   configName: '',
   classId: undefined,
   columnHeaderOptions: [],
-  attributesMap: {}
+  attributesMap: {},
+  sourceRows: []
 })
 
 export const MappingItemContextProvider = MappingItemContext.Provider