strapi-plugin-dynamic-zone-tools 1.0.0

package/admin/src/components/DynamicZoneToolsPanel.tsx

@@ -0,0 +1,1027 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Button,
+  Dialog,
+  SingleSelect,
+  SingleSelectOption,
+  Typography,
+  Flex,
+  Alert,
+  Box,
+  Checkbox,
+} from '@strapi/design-system';
+import { useFetchClient, useForm, useNotification } from '@strapi/strapi/admin';
+import { useIntl } from 'react-intl';
+import { Duplicate, WarningCircle } from '@strapi/icons';
+import { PLUGIN_ID } from '../pluginId';
+import {
+  filterAllowedDynamicZoneEntries,
+  getComponentDisplayName,
+  getDynamicZoneEntryLabel,
+  loadComponentSchemas,
+  prepareZoneData,
+  prepareZoneDataForInsert,
+} from '../utils/prepareDynamicZoneData';
+import { getDynamicZoneFields } from '../utils/dynamicZonePaths';
+
+const TOOLS_DIALOG_STYLE_ID = `${PLUGIN_ID}-dialog-layout-styles`;
+
+function ensureToolsDialogStyles() {
+  const dom = globalThis.document;
+
+  if (!dom || dom.getElementById(TOOLS_DIALOG_STYLE_ID)) {
+    return;
+  }
+
+  const style = dom.createElement('style');
+  style.id = TOOLS_DIALOG_STYLE_ID;
+  style.textContent = `
+    [role='alertdialog'][data-dz-tools-dialog='true'] {
+      max-height: calc(100dvh - 2rem) !important;
+      height: auto !important;
+      overflow: hidden !important;
+    }
+
+    [data-dz-tools-dialog='true'] [data-dz-tools-shell='true'] {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      min-height: 0;
+      overflow: hidden;
+      width: 100%;
+    }
+
+    [data-dz-tools-dialog='true'] [data-dz-tools-body='true'] {
+      flex: 1 1 auto !important;
+      min-height: 0 !important;
+      overflow-y: auto !important;
+    }
+
+    [data-dz-tools-dialog='true'] [data-dz-tools-footer='true'] {
+      flex: 0 0 auto !important;
+    }
+  `;
+
+  dom.head.appendChild(style);
+}
+
+type FillMode = 'replace' | 'append';
+
+interface ContentType {
+  uid: string;
+  displayName: string;
+  draftAndPublish: boolean;
+  localized: boolean;
+  dynamicZones: DynamicZoneInfo[];
+}
+
+interface SourceRecord {
+  id: number;
+  documentId?: string;
+  status?: 'draft' | 'published' | 'modified';
+  [key: string]: any;
+}
+
+interface DynamicZoneInfo {
+  fieldName: string;
+  displayName: string;
+}
+
+interface ConfiguredLocale {
+  code: string;
+  name: string;
+  isDefault?: boolean;
+}
+
+interface DynamicZoneToolsDialogProps {
+  document: any;
+  documentId?: string;
+  model: string;
+  collectionType: string;
+  activeTab?: 'draft' | 'published' | null;
+  schemaAttributes?: { [key: string]: any } | null;
+  onClose: () => void;
+}
+
+const DynamicZoneToolsHeaderAction = ({
+  document,
+  documentId,
+  meta,
+  model,
+  collectionType,
+  activeTab,
+}: any) => {
+  const schemaAttributes = meta?.schema?.attributes || meta?.attributes || null;
+  if (schemaAttributes) {
+    const hasDynamicZone = Object.values(schemaAttributes).some(
+      (attr: any) => attr?.type === 'dynamiczone'
+    );
+
+    if (!hasDynamicZone) return null;
+  }
+
+  return {
+    type: 'icon',
+    icon: <Duplicate />,
+    label: 'Copy dynamic zone data',
+    dialog: {
+      type: 'dialog',
+      title: 'Dynamic Zone Tools',
+      content: ({ onClose }: { onClose: () => void }) => (
+        <>
+          <DynamicZoneToolsDialog
+            document={document}
+            documentId={documentId}
+            model={model}
+            collectionType={collectionType}
+            activeTab={activeTab}
+            schemaAttributes={schemaAttributes}
+            onClose={onClose}
+          />
+        </>
+      ),
+    },
+  };
+};
+
+const DynamicZoneToolsDialog: React.FC<DynamicZoneToolsDialogProps> = ({
+  document,
+  documentId,
+  model,
+  collectionType,
+  activeTab,
+  schemaAttributes,
+  onClose,
+}) => {
+  const { formatMessage } = useIntl();
+  const { get } = useFetchClient();
+  const { setValues, values } = useForm('DynamicZoneTools', (state) => ({
+    setValues: state.setValues,
+    values: state.values,
+  }));
+  const { toggleNotification } = useNotification();
+
+  const parsePayloadData = (payload: any) => {
+    if (payload?.data && typeof payload.data === 'object') return payload.data;
+    if (payload && typeof payload === 'object') return payload;
+    return null;
+  };
+  const getDynamicZonesFromAttributes = (attributes?: { [key: string]: any } | null) =>
+    getDynamicZoneFields(attributes);
+
+  // State management
+  const [targetDynamicZones, setTargetDynamicZones] = useState<DynamicZoneInfo[]>([]);
+  const [selectedTargetZone, setSelectedTargetZone] = useState<string>('');
+  const [contentTypes, setContentTypes] = useState<ContentType[]>([]);
+  const [selectedContentType, setSelectedContentType] = useState<string>('');
+  const [sourceDynamicZones, setSourceDynamicZones] = useState<DynamicZoneInfo[]>([]);
+  const [selectedSourceZone, setSelectedSourceZone] = useState<string>('');
+  const [records, setRecords] = useState<SourceRecord[]>([]);
+  const [selectedRecord, setSelectedRecord] = useState<string>('');
+  const [configuredLocales, setConfiguredLocales] = useState<ConfiguredLocale[]>([]);
+  const [selectedLocale, setSelectedLocale] = useState<string>('');
+  const [selectedVersion, setSelectedVersion] = useState<'draft' | 'published'>('draft');
+  const [recordsLoading, setRecordsLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string>('');
+  const [fillMode, setFillMode] = useState<FillMode>('replace');
+  const [sourcePreviewLoading, setSourcePreviewLoading] = useState(false);
+  const [sourceZoneEntries, setSourceZoneEntries] = useState<any[]>([]);
+  const [selectedBlockIndexes, setSelectedBlockIndexes] = useState<Set<number>>(new Set());
+
+  const sourceContentType = contentTypes.find((ct) => ct.uid === selectedContentType);
+  const sourceHasDraftAndPublish = sourceContentType?.draftAndPublish ?? false;
+  const sourceIsLocalized = (sourceContentType?.localized ?? false) && configuredLocales.length > 0;
+  const selectedRecordEntry = records.find(
+    (record) => (record.documentId || record.id.toString()) === selectedRecord
+  );
+  // The record list is locale-scoped and entries are draft representations;
+  // their status field tells us whether a published version exists.
+  const selectedRecordHasPublished =
+    selectedRecordEntry?.status === 'published' || selectedRecordEntry?.status === 'modified';
+
+  // Resolve target dynamic zones for the current model
+  useEffect(() => {
+    if (schemaAttributes) {
+      setTargetDynamicZones(getDynamicZonesFromAttributes(schemaAttributes));
+    } else {
+      const currentType = contentTypes.find((ct) => ct.uid === model);
+      setTargetDynamicZones(currentType?.dynamicZones || []);
+    }
+  }, [schemaAttributes, contentTypes, model]);
+
+  // Fetch content types with their dynamic zones
+  useEffect(() => {
+    const fetchContentTypes = async () => {
+      try {
+        const response = await get('/content-manager/content-types');
+        let contentTypesData = response.data || response;
+
+        if (!Array.isArray(contentTypesData)) {
+          if (contentTypesData.data && Array.isArray(contentTypesData.data)) {
+            contentTypesData = contentTypesData.data;
+          } else if (contentTypesData.results && Array.isArray(contentTypesData.results)) {
+            contentTypesData = contentTypesData.results;
+          } else {
+            contentTypesData = [];
+          }
+        }
+
+        const typesWithDynamicZones = contentTypesData
+          .map((ct: any) => {
+            const attributes = ct.attributes || ct.schema?.attributes;
+            const dynamicZones = getDynamicZonesFromAttributes(attributes);
+
+            return {
+              uid: ct.uid,
+              displayName: ct.info?.displayName || ct.schema?.displayName || ct.uid,
+              draftAndPublish: Boolean(
+                ct.options?.draftAndPublish ?? ct.schema?.options?.draftAndPublish
+              ),
+              localized: Boolean(
+                ct.pluginOptions?.i18n?.localized ?? ct.schema?.pluginOptions?.i18n?.localized
+              ),
+              dynamicZones,
+            };
+          })
+          .filter((ct: ContentType) => ct.dynamicZones.length > 0);
+
+        setContentTypes(typesWithDynamicZones);
+      } catch (err) {
+        setError('Failed to load content types');
+        console.error('Error loading content types:', err);
+      }
+    };
+
+    fetchContentTypes();
+  }, [get]);
+
+  React.useLayoutEffect(() => {
+    ensureToolsDialogStyles();
+  }, []);
+
+  const dialogLayoutRef = React.useCallback((node: HTMLDivElement | null) => {
+    const markDialog = () => {
+      const dialogContent = node?.closest('[role="alertdialog"]');
+
+      if (dialogContent instanceof HTMLElement) {
+        dialogContent.setAttribute('data-dz-tools-dialog', 'true');
+      }
+    };
+
+    if (!node) {
+      return;
+    }
+
+    markDialog();
+    requestAnimationFrame(markDialog);
+  }, []);
+
+  React.useLayoutEffect(() => {
+    return () => {
+      const dom = globalThis.document;
+
+      if (!dom) {
+        return;
+      }
+
+      dom
+        .querySelectorAll('[data-dz-tools-dialog="true"]')
+        .forEach((element: Element) => {
+          element.removeAttribute('data-dz-tools-dialog');
+        });
+    };
+  }, []);
+
+  // Update source dynamic zones when content type is selected
+  useEffect(() => {
+    if (!selectedContentType) {
+      setSourceDynamicZones([]);
+      return;
+    }
+
+    const selectedType = contentTypes.find((ct) => ct.uid === selectedContentType);
+    if (!selectedType) return;
+
+    setSourceDynamicZones(selectedType.dynamicZones);
+  }, [selectedContentType, contentTypes]);
+
+  // Fetch records for the selected content type (scoped to the source locale
+  // for localized types, so only records existing in that locale are listed)
+  useEffect(() => {
+    const fetchRecords = async () => {
+      if (!selectedContentType || (sourceIsLocalized && !selectedLocale)) {
+        setRecords([]);
+        return;
+      }
+
+      try {
+        setRecordsLoading(true);
+        // No status filter: list all records; the version select decides
+        // whether the draft or published state gets copied.
+        const requestParams = new URLSearchParams({
+          page: '1',
+          pageSize: '500',
+        });
+        if (sourceIsLocalized) requestParams.set('locale', selectedLocale);
+        const response = await get(
+          `/content-manager/collection-types/${encodeURIComponent(
+            selectedContentType
+          )}?${requestParams.toString()}`
+        );
+
+        let recordsData = [];
+        if (response.data) {
+          if (Array.isArray(response.data)) {
+            recordsData = response.data;
+          } else if (response.data.results && Array.isArray(response.data.results)) {
+            recordsData = response.data.results;
+          } else if (response.data.data && Array.isArray(response.data.data)) {
+            recordsData = response.data.data;
+          }
+        }
+
+        setRecords(recordsData);
+      } catch (err) {
+        setError('Failed to load records');
+        console.error('Error loading records:', err);
+      } finally {
+        setRecordsLoading(false);
+      }
+    };
+
+    fetchRecords();
+  }, [selectedContentType, sourceIsLocalized, selectedLocale, get]);
+
+  // Configured locales, best-effort (i18n plugin may not be installed)
+  useEffect(() => {
+    const fetchLocales = async () => {
+      try {
+        const response = await get('/i18n/locales');
+        const locales = Array.isArray(response.data) ? response.data : (response.data?.data ?? []);
+        setConfiguredLocales(
+          locales
+            .filter((locale: any) => locale?.code)
+            .map((locale: any) => ({
+              code: locale.code,
+              name: locale.name || locale.code,
+              isDefault: Boolean(locale.isDefault),
+            }))
+        );
+      } catch {
+        // Codes/locale picker simply won't be shown
+      }
+    };
+
+    fetchLocales();
+  }, [get]);
+
+  // Default the source locale when a localized content type is selected:
+  // prefer the locale currently being edited, then Strapi's default locale.
+  useEffect(() => {
+    if (!selectedContentType || !sourceIsLocalized) {
+      setSelectedLocale('');
+      return;
+    }
+
+    const currentLocale = document?.locale ?? null;
+    const defaultLocale =
+      configuredLocales.find((locale) => locale.code === currentLocale)?.code ??
+      configuredLocales.find((locale) => locale.isDefault)?.code ??
+      configuredLocales[0]?.code ??
+      '';
+    setSelectedLocale(defaultLocale);
+  }, [selectedContentType, sourceIsLocalized, configuredLocales, document?.locale]);
+
+  // Component schemas (uid -> attributes), needed to transform copied data the
+  // same way the content manager does when it loads a document into the form.
+  const [componentSchemas, setComponentSchemas] = useState<Record<string, any> | null>(null);
+
+  const fetchComponentSchemas = async (): Promise<Record<string, any>> => {
+    if (componentSchemas) return componentSchemas;
+
+    const map = await loadComponentSchemas(get);
+    setComponentSchemas(map);
+    return map;
+  };
+
+  const getRecordLabel = (record: SourceRecord) => {
+    const rawLabel = record.title || record.name || `Document ${record.documentId || record.id}`;
+    const maxLength = 60;
+
+    return rawLabel.length > maxLength ? `${rawLabel.substring(0, maxLength)}...` : rawLabel;
+  };
+
+  const getLocaleLabel = (code: string) => {
+    const name = configuredLocales.find((locale) => locale.code === code)?.name;
+    if (!name) return code;
+    // Strapi locale names usually already include the code, e.g. "German (de)"
+    return name.includes(`(${code})`) ? name : `${name} (${code})`;
+  };
+
+  const getSelectString = (value: string | number) => String(value);
+
+  const canFetchSourcePreview =
+    Boolean(selectedContentType && selectedSourceZone && selectedRecord) &&
+    (!sourceIsLocalized || Boolean(selectedLocale));
+
+  const buildSourceDocumentQuery = () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const urlLocale = urlParams.get('plugins[i18n][locale]');
+    const locale = selectedLocale || urlLocale;
+    const requestParams = new URLSearchParams();
+
+    if (locale) requestParams.set('locale', locale);
+    if (sourceHasDraftAndPublish) requestParams.set('status', selectedVersion);
+
+    return requestParams.toString() ? `?${requestParams.toString()}` : '';
+  };
+
+  // Prefetch source zone blocks for preview and partial selection
+  useEffect(() => {
+    if (!canFetchSourcePreview) {
+      setSourceZoneEntries([]);
+      setSelectedBlockIndexes(new Set());
+      return;
+    }
+
+    let active = true;
+
+    const fetchSourcePreview = async () => {
+      try {
+        setSourcePreviewLoading(true);
+        setError('');
+
+        const localeQuery = buildSourceDocumentQuery();
+        const response = await get(
+          `/${PLUGIN_ID}/source-document/${encodeURIComponent(
+            selectedContentType
+          )}/${selectedRecord}${localeQuery}`
+        );
+        const sourceDocument = parsePayloadData(response.data ?? response);
+        const zoneData = sourceDocument?.[selectedSourceZone];
+
+        if (!active) return;
+
+        if (!Array.isArray(zoneData) || zoneData.length === 0) {
+          setSourceZoneEntries([]);
+          setSelectedBlockIndexes(new Set());
+          return;
+        }
+
+        setSourceZoneEntries(zoneData);
+        setSelectedBlockIndexes(new Set(zoneData.map((_, index) => index)));
+      } catch {
+        if (active) {
+          setSourceZoneEntries([]);
+          setSelectedBlockIndexes(new Set());
+        }
+      } finally {
+        if (active) {
+          setSourcePreviewLoading(false);
+        }
+      }
+    };
+
+    void fetchSourcePreview();
+
+    return () => {
+      active = false;
+    };
+  }, [
+    canFetchSourcePreview,
+    get,
+    selectedContentType,
+    selectedRecord,
+    selectedSourceZone,
+    selectedLocale,
+    selectedVersion,
+    sourceHasDraftAndPublish,
+  ]);
+
+  const selectAllBlocks = () => {
+    setSelectedBlockIndexes(new Set(sourceZoneEntries.map((_, index) => index)));
+  };
+
+  const clearAllBlocks = () => {
+    setSelectedBlockIndexes(new Set());
+  };
+
+  const handleConfirmFill = async () => {
+    if (!selectedTargetZone || !selectedContentType || !selectedSourceZone || !selectedRecord)
+      return;
+
+    if (selectedBlockIndexes.size === 0) {
+      setError('Select at least one block to copy');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError('');
+
+      const schemas = await fetchComponentSchemas();
+      const sourceData =
+        sourceZoneEntries.length > 0
+          ? sourceZoneEntries
+          : (() => {
+              throw new Error('Source blocks are not loaded yet');
+            })();
+
+      const selectedEntries = sourceData.filter((_, index) => selectedBlockIndexes.has(index));
+
+      const allowedComponents: string[] | undefined =
+        schemaAttributes?.[selectedTargetZone]?.components;
+      const { allowed: allowedData, skippedCount } = filterAllowedDynamicZoneEntries(
+        selectedEntries,
+        allowedComponents
+      );
+
+      if (allowedData.length === 0) {
+        setError('None of the selected components are allowed in the target dynamic zone');
+        return;
+      }
+
+      const currentZone = Array.isArray(values?.[selectedTargetZone])
+        ? (values[selectedTargetZone] as any[])
+        : [];
+
+      const cleanedData =
+        fillMode === 'append'
+          ? prepareZoneDataForInsert(allowedData, schemas, {
+              previousKey: currentZone.at(-1)?.__temp_key__ ?? null,
+              nextKey: null,
+            })
+          : prepareZoneData(allowedData, schemas);
+
+      setValues({
+        ...values,
+        [selectedTargetZone]:
+          fillMode === 'append' ? [...currentZone, ...cleanedData] : cleanedData,
+      });
+
+      toggleNotification({
+        type: skippedCount > 0 ? 'warning' : 'success',
+        message:
+          skippedCount > 0
+            ? formatMessage(
+                {
+                  id: `${PLUGIN_ID}.notification.partial`,
+                  defaultMessage:
+                    'Content copied, but {count} component(s) were skipped because the target zone does not allow them.',
+                },
+                { count: skippedCount }
+              )
+            : formatMessage({
+                id:
+                  fillMode === 'append'
+                    ? `${PLUGIN_ID}.notification.append-success`
+                    : `${PLUGIN_ID}.notification.success`,
+                defaultMessage:
+                  fillMode === 'append'
+                    ? 'Selected blocks appended successfully!'
+                    : 'Dynamic zone content copied successfully!',
+              }),
+      });
+
+      setSelectedTargetZone('');
+      setSelectedContentType('');
+      setSelectedSourceZone('');
+      setSelectedRecord('');
+      setSelectedVersion('draft');
+      setFillMode('replace');
+      setSourceZoneEntries([]);
+      setSelectedBlockIndexes(new Set());
+
+      onClose();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to fill in data';
+      setError(errorMessage);
+      toggleNotification({
+        type: 'warning',
+        message: errorMessage,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isFormValid =
+    selectedTargetZone &&
+    selectedContentType &&
+    selectedSourceZone &&
+    selectedRecord &&
+    (!sourceIsLocalized || selectedLocale) &&
+    selectedBlockIndexes.size > 0 &&
+    !sourcePreviewLoading;
+
+  return (
+    <Flex
+      ref={dialogLayoutRef}
+      data-dz-tools-shell="true"
+      direction="column"
+      alignItems="stretch"
+      width="100%"
+    >
+      <Dialog.Body data-dz-tools-body="true">
+        <Flex direction="column" gap={4} width="100%" alignItems="stretch">
+          <Flex
+            gap={3}
+            padding={4}
+            background={fillMode === 'replace' ? 'danger100' : 'primary100'}
+            hasRadius
+            alignItems="flex-start"
+            width="100%"
+          >
+            <Box style={{ flexShrink: 0, display: 'flex' }} paddingTop={1}>
+              <WarningCircle fill={fillMode === 'replace' ? 'danger600' : 'primary600'} />
+            </Box>
+            <Flex direction="column" gap={1} alignItems="flex-start">
+              <Typography
+                fontWeight="semiBold"
+                textColor={fillMode === 'replace' ? 'danger700' : 'primary700'}
+              >
+                {fillMode === 'replace'
+                  ? formatMessage({
+                      id: `${PLUGIN_ID}.modal.warning`,
+                      defaultMessage:
+                        'This will replace the current content of the target dynamic zone.',
+                    })
+                  : formatMessage({
+                      id: `${PLUGIN_ID}.modal.append-info`,
+                      defaultMessage:
+                        'Selected blocks will be appended to the end of the target dynamic zone.',
+                    })}
+              </Typography>
+              <Typography
+                variant="pi"
+                textColor={fillMode === 'replace' ? 'danger600' : 'primary600'}
+              >
+                {formatMessage({
+                  id: `${PLUGIN_ID}.modal.warning.helper`,
+                  defaultMessage:
+                    'Nothing is saved yet — review the result and save the document to keep it.',
+                })}
+              </Typography>
+            </Flex>
+          </Flex>
+
+          {error && (
+            <Alert closeLabel="Close" title="Error" variant="danger" onClose={() => setError('')}>
+              {error}
+            </Alert>
+          )}
+
+          {/* Fill mode */}
+          <Flex direction="column" gap={1} width="100%">
+            <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+              {formatMessage({
+                id: `${PLUGIN_ID}.fill-mode.label`,
+                defaultMessage: 'Copy mode',
+              })}
+            </Typography>
+            <SingleSelect
+              value={fillMode}
+              onChange={(value: string | number) => setFillMode(value === 'append' ? 'append' : 'replace')}
+              disabled={loading}
+              size="S"
+            >
+              <SingleSelectOption value="replace">
+                {formatMessage({
+                  id: `${PLUGIN_ID}.fill-mode.replace`,
+                  defaultMessage: 'Replace current zone',
+                })}
+              </SingleSelectOption>
+              <SingleSelectOption value="append">
+                {formatMessage({
+                  id: `${PLUGIN_ID}.fill-mode.append`,
+                  defaultMessage: 'Append to current zone',
+                })}
+              </SingleSelectOption>
+            </SingleSelect>
+          </Flex>
+
+          {/* Target Dynamic Zone Selection */}
+          <Flex direction="column" gap={1} width="100%">
+            <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+              {formatMessage({
+                id: `${PLUGIN_ID}.target-zone.label`,
+                defaultMessage: 'Target Dynamic Zone',
+              })}
+            </Typography>
+            <SingleSelect
+              placeholder={formatMessage({
+                id: `${PLUGIN_ID}.target-zone.placeholder`,
+                defaultMessage: 'Select zone to fill',
+              })}
+              value={selectedTargetZone}
+              onChange={(value: string | number) => {
+                setSelectedTargetZone(getSelectString(value));
+                setSelectedContentType('');
+                setSelectedSourceZone('');
+                setSelectedRecord('');
+                setSelectedVersion('draft');
+              }}
+              disabled={loading}
+              size="S"
+            >
+              {targetDynamicZones.map((zone) => (
+                <SingleSelectOption key={zone.fieldName} value={zone.fieldName}>
+                  {zone.displayName}
+                </SingleSelectOption>
+              ))}
+            </SingleSelect>
+          </Flex>
+
+          {/* Source Collection Selection */}
+          <Flex direction="column" gap={1} width="100%">
+            <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+              {formatMessage({
+                id: `${PLUGIN_ID}.source-collection.label`,
+                defaultMessage: 'Source Collection',
+              })}
+            </Typography>
+            <SingleSelect
+              placeholder={formatMessage({
+                id: `${PLUGIN_ID}.source-collection.placeholder`,
+                defaultMessage: 'Select source collection',
+              })}
+              value={selectedContentType}
+              onChange={(value: string | number) => {
+                setSelectedContentType(getSelectString(value));
+                setSelectedSourceZone('');
+                setSelectedRecord('');
+                setSelectedVersion('draft');
+              }}
+              disabled={!selectedTargetZone || loading}
+              size="S"
+            >
+              {contentTypes.map((ct) => (
+                <SingleSelectOption key={ct.uid} value={ct.uid}>
+                  {ct.displayName}
+                </SingleSelectOption>
+              ))}
+            </SingleSelect>
+          </Flex>
+
+          {/* Source Dynamic Zone Selection */}
+          <Flex direction="column" gap={1} width="100%">
+            <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+              {formatMessage({
+                id: `${PLUGIN_ID}.source-zone.label`,
+                defaultMessage: 'Source Dynamic Zone',
+              })}
+            </Typography>
+            <SingleSelect
+              placeholder={formatMessage({
+                id: `${PLUGIN_ID}.source-zone.placeholder`,
+                defaultMessage: 'Select zone to copy from',
+              })}
+              value={selectedSourceZone}
+              onChange={(value: string | number) => {
+                setSelectedSourceZone(getSelectString(value));
+                setSelectedRecord('');
+                setSelectedVersion('draft');
+              }}
+              disabled={!selectedContentType || loading}
+              size="S"
+            >
+              {sourceDynamicZones.map((zone) => (
+                <SingleSelectOption key={zone.fieldName} value={zone.fieldName}>
+                  {zone.displayName}
+                </SingleSelectOption>
+              ))}
+            </SingleSelect>
+          </Flex>
+
+          {/* Source Locale Selection (localized content types only) */}
+          {sourceIsLocalized && (
+            <Flex direction="column" gap={1} width="100%">
+              <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+                {formatMessage({
+                  id: `${PLUGIN_ID}.source-locale.label`,
+                  defaultMessage: 'Source Locale',
+                })}
+              </Typography>
+              <SingleSelect
+                value={selectedLocale}
+                onChange={(value: string | number) => {
+                  setSelectedLocale(getSelectString(value));
+                  setSelectedRecord('');
+                  setSelectedVersion('draft');
+                }}
+                disabled={!selectedSourceZone || loading}
+                size="S"
+              >
+                {configuredLocales.map((locale) => (
+                  <SingleSelectOption key={locale.code} value={locale.code}>
+                    {getLocaleLabel(locale.code)}
+                  </SingleSelectOption>
+                ))}
+              </SingleSelect>
+            </Flex>
+          )}
+
+          {/* Source Record Selection */}
+          <Flex direction="column" gap={1} width="100%">
+            <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+              {formatMessage({
+                id: `${PLUGIN_ID}.source-record.label`,
+                defaultMessage: 'Source Record',
+              })}
+            </Typography>
+            <SingleSelect
+              placeholder={
+                recordsLoading
+                  ? formatMessage({
+                      id: `${PLUGIN_ID}.source-record.loading`,
+                      defaultMessage: 'Loading records...',
+                    })
+                  : formatMessage({
+                      id: `${PLUGIN_ID}.source-record.placeholder`,
+                      defaultMessage: 'Select record to copy from',
+                    })
+              }
+              value={selectedRecord}
+              onChange={(value: string | number) => {
+                setSelectedRecord(getSelectString(value));
+                setSelectedVersion('draft');
+              }}
+              disabled={
+                !selectedSourceZone ||
+                recordsLoading ||
+                loading ||
+                (sourceIsLocalized && !selectedLocale)
+              }
+              size="S"
+            >
+              {records.map((record) => (
+                <SingleSelectOption
+                  key={record.documentId || record.id}
+                  value={record.documentId || record.id.toString()}
+                >
+                  {getRecordLabel(record)}
+                </SingleSelectOption>
+              ))}
+            </SingleSelect>
+          </Flex>
+
+          {/* Source Version Selection (draft & publish content types only) */}
+          {sourceHasDraftAndPublish && (
+            <Flex direction="column" gap={1} width="100%">
+              <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+                {formatMessage({
+                  id: `${PLUGIN_ID}.source-version.label`,
+                  defaultMessage: 'Source Version',
+                })}
+              </Typography>
+              <SingleSelect
+                value={selectedVersion}
+                onChange={(value: string | number) =>
+                  setSelectedVersion(value === 'published' ? 'published' : 'draft')
+                }
+                disabled={!selectedRecord || loading}
+                size="S"
+              >
+                <SingleSelectOption value="draft">
+                  {formatMessage({
+                    id: `${PLUGIN_ID}.source-version.draft`,
+                    defaultMessage: 'Draft',
+                  })}
+                </SingleSelectOption>
+                <SingleSelectOption value="published" disabled={!selectedRecordHasPublished}>
+                  {selectedRecord && !selectedRecordHasPublished
+                    ? formatMessage({
+                        id: `${PLUGIN_ID}.source-version.published-unavailable`,
+                        defaultMessage: 'Published (not available)',
+                      })
+                    : formatMessage({
+                        id: `${PLUGIN_ID}.source-version.published`,
+                        defaultMessage: 'Published',
+                      })}
+                </SingleSelectOption>
+              </SingleSelect>
+            </Flex>
+          )}
+
+          {/* Source blocks preview */}
+          {canFetchSourcePreview && (
+            <Flex direction="column" gap={2} width="100%">
+              <Flex justifyContent="space-between" alignItems="center" width="100%">
+                <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+                  {formatMessage({
+                    id: `${PLUGIN_ID}.source-blocks.label`,
+                    defaultMessage: 'Blocks to copy',
+                  })}
+                </Typography>
+                <Flex gap={2}>
+                  <Button variant="tertiary" size="S" onClick={selectAllBlocks} disabled={loading}>
+                    {formatMessage({
+                      id: `${PLUGIN_ID}.source-blocks.select-all`,
+                      defaultMessage: 'Select all',
+                    })}
+                  </Button>
+                  <Button variant="tertiary" size="S" onClick={clearAllBlocks} disabled={loading}>
+                    {formatMessage({
+                      id: `${PLUGIN_ID}.source-blocks.clear-all`,
+                      defaultMessage: 'Clear all',
+                    })}
+                  </Button>
+                </Flex>
+              </Flex>
+
+              {sourcePreviewLoading ? (
+                <Typography variant="pi" textColor="neutral600">
+                  {formatMessage({
+                    id: `${PLUGIN_ID}.source-blocks.loading`,
+                    defaultMessage: 'Loading source blocks...',
+                  })}
+                </Typography>
+              ) : sourceZoneEntries.length === 0 ? (
+                <Typography variant="pi" textColor="neutral600">
+                  {formatMessage({
+                    id: `${PLUGIN_ID}.source-blocks.empty`,
+                    defaultMessage: 'No blocks found in the selected source zone.',
+                  })}
+                </Typography>
+              ) : (
+                <Flex
+                  direction="column"
+                  gap={2}
+                  width="100%"
+                  padding={3}
+                  background="neutral100"
+                  hasRadius
+                >
+                  {sourceZoneEntries.map((entry, index) => {
+                    const componentUid = entry?.__component ?? '';
+                    const label = getDynamicZoneEntryLabel(entry);
+                    const componentName = getComponentDisplayName(componentUid);
+                    const allowedComponents: string[] | undefined =
+                      schemaAttributes?.[selectedTargetZone]?.components;
+                    const isAllowed =
+                      !Array.isArray(allowedComponents) ||
+                      allowedComponents.includes(componentUid);
+
+                    return (
+                      <Checkbox
+                        key={`${componentUid}-${index}`}
+                        checked={selectedBlockIndexes.has(index)}
+                        onCheckedChange={(checked: boolean | 'indeterminate') => {
+                          setSelectedBlockIndexes((current) => {
+                            const next = new Set(current);
+
+                            if (checked === true) {
+                              next.add(index);
+                            } else {
+                              next.delete(index);
+                            }
+
+                            return next;
+                          });
+                        }}
+                        disabled={loading || !isAllowed}
+                      >
+                        {componentName}
+                        {label ? ` · ${label}` : ''}
+                        {!isAllowed
+                          ? ` (${formatMessage({
+                              id: `${PLUGIN_ID}.source-blocks.not-allowed`,
+                              defaultMessage: 'not allowed in target zone',
+                            })})`
+                          : ''}
+                      </Checkbox>
+                    );
+                  })}
+                </Flex>
+              )}
+            </Flex>
+          )}
+        </Flex>
+      </Dialog.Body>
+
+      <Dialog.Footer data-dz-tools-footer="true">
+        <Button variant="tertiary" fullWidth onClick={onClose} disabled={loading}>
+          {formatMessage({
+            id: `${PLUGIN_ID}.modal.cancel`,
+            defaultMessage: 'No, cancel',
+          })}
+        </Button>
+        <Button
+          variant="default"
+          fullWidth
+          onClick={handleConfirmFill}
+          loading={loading}
+          disabled={!isFormValid}
+        >
+          {formatMessage({
+            id: `${PLUGIN_ID}.modal.confirm`,
+            defaultMessage: 'Yes, fill in',
+          })}
+        </Button>
+      </Dialog.Footer>
+    </Flex>
+  );
+};
+
+export { DynamicZoneToolsHeaderAction };