plugin-migration-manager 2.0.1 → 2.0.2

package/src/client-v2/pages/MigrationPage.tsx

@@ -0,0 +1,808 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Alert, Button, Card, Input, Modal, Space, Spin, Table, Tabs, Tag, Typography, Upload, message } from 'antd';
+import {
+  BranchesOutlined,
+  DatabaseOutlined,
+  DownloadOutlined,
+  ExclamationCircleOutlined,
+  LayoutOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+import { useFlowContext } from '@nocobase/flow-engine';
+import { useRequest } from 'ahooks';
+import { useT } from '../locale';
+
+const { Title, Text } = Typography;
+const { Search } = Input;
+
+type Id = string | number;
+type Dict = Record<string, unknown>;
+
+type CollectionItem = {
+  name: string;
+  title?: string;
+  fields?: number;
+};
+
+type WorkflowItem = {
+  id: Id;
+  title?: string;
+  key?: string;
+  enabled?: boolean;
+};
+
+type UISchemaItem = {
+  routeId?: Id;
+  displayTitle?: string;
+  title?: string;
+  name?: string;
+  type?: string;
+  schemaUid?: string;
+  uid?: string;
+};
+
+type ItemsShape = {
+  collections: CollectionItem[];
+  workflows: WorkflowItem[];
+  uiSchemas: UISchemaItem[];
+};
+
+type MigrationPayload = {
+  collections?: unknown[];
+  workflows?: unknown[];
+  uiSchemas?: unknown[];
+  desktopRoutes?: unknown[];
+  options?: Dict;
+};
+
+type ErrorItem = {
+  collection?: string;
+  route?: string;
+  schema?: string;
+  error?: string;
+};
+
+type ImportResults = {
+  collections?: { success?: number; failed?: number; errors?: ErrorItem[]; conflicts?: ConflictRow[] };
+  workflows?: { success?: number; failed?: number; errors?: ErrorItem[] };
+  uiSchemas?: { success?: number; failed?: number; errors?: ErrorItem[] };
+};
+
+type ConflictRow = {
+  collection: string;
+  field: string;
+  current: Dict;
+  incoming: Dict;
+};
+
+type WrappedResponse<T> = {
+  data?: T | { data?: T };
+};
+
+function isRecord(value: unknown): value is Dict {
+  return typeof value === 'object' && value !== null;
+}
+
+function unwrapResponse<T>(response: unknown): T {
+  if (isRecord(response) && isRecord(response.data)) {
+    if ('data' in response.data) {
+      return response.data.data as T;
+    }
+    return response.data as T;
+  }
+  return response as T;
+}
+
+function getErrorMessage(error: unknown, fallback: string) {
+  return error instanceof Error ? error.message : fallback;
+}
+
+function prettifyCollectionTitle(title?: string) {
+  if (!title) {
+    return '';
+  }
+  return title
+    .replace(/\{\{t\("(.+?)"\)\}\}/g, '$1')
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function getDisplayText(value: unknown) {
+  return value === undefined || value === null ? '' : String(value);
+}
+
+function getCounts(payload: MigrationPayload) {
+  return {
+    collections: payload.collections?.length || 0,
+    workflows: payload.workflows?.length || 0,
+    uiSchemas: payload.uiSchemas?.length || 0,
+    desktopRoutes: payload.desktopRoutes?.length || 0,
+  };
+}
+
+export default function MigrationPage() {
+  const ctx = useFlowContext();
+  const t = useT();
+  const api = ctx.api;
+  const [activeTab, setActiveTab] = useState('export');
+  const [availableItems, setAvailableItems] = useState<ItemsShape>({ collections: [], workflows: [], uiSchemas: [] });
+  const [selectedCollections, setSelectedCollections] = useState<React.Key[]>([]);
+  const [selectedWorkflows, setSelectedWorkflows] = useState<React.Key[]>([]);
+  const [selectedSchemas, setSelectedSchemas] = useState<React.Key[]>([]);
+  const [restarting, setRestarting] = useState(false);
+  const [applying, setApplying] = useState(false);
+  const [lastImportPayload, setLastImportPayload] = useState<MigrationPayload | null>(null);
+  const [lastWasPreview, setLastWasPreview] = useState(false);
+  const [collectionQuery, setCollectionQuery] = useState('');
+  const [workflowQuery, setWorkflowQuery] = useState('');
+  const [schemaQuery, setSchemaQuery] = useState('');
+  const [collectionPage, setCollectionPage] = useState({ current: 1, pageSize: 10 });
+  const [workflowPage, setWorkflowPage] = useState({ current: 1, pageSize: 10 });
+  const [schemaPage, setSchemaPage] = useState({ current: 1, pageSize: 10 });
+
+  useEffect(() => {
+    const beforeUnloadHandler = (event: BeforeUnloadEvent) => {
+      if (restarting || applying) {
+        event.preventDefault();
+        event.returnValue = '';
+      }
+    };
+
+    window.addEventListener('beforeunload', beforeUnloadHandler);
+    return () => window.removeEventListener('beforeunload', beforeUnloadHandler);
+  }, [restarting, applying]);
+
+  const { run: fetchItems, loading: loadingItems } = useRequest(
+    () => api.request({ url: 'migration:list', method: 'get' }),
+    {
+      onSuccess: (response: WrappedResponse<ItemsShape>) => {
+        const payload = unwrapResponse<ItemsShape>(response);
+        setAvailableItems({
+          collections: payload?.collections ?? [],
+          workflows: payload?.workflows ?? [],
+          uiSchemas: payload?.uiSchemas ?? [],
+        });
+      },
+      onError: () => setAvailableItems({ collections: [], workflows: [], uiSchemas: [] }),
+    },
+  );
+
+  const { run: exportData, loading: exporting } = useRequest(
+    (payload: MigrationPayload) =>
+      api.request({
+        url: 'migration:export',
+        method: 'post',
+        data: { data: payload },
+      }),
+    {
+      manual: true,
+      onSuccess: (response: WrappedResponse<MigrationPayload>) => {
+        const payload = unwrapResponse<MigrationPayload>(response);
+        const counts = getCounts(payload || {});
+        const hasData =
+          counts.collections > 0 || counts.workflows > 0 || counts.uiSchemas > 0 || counts.desktopRoutes > 0;
+
+        if (!hasData) {
+          message.warning(t('Export succeeded but no data.'));
+          return;
+        }
+
+        const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = `nocobase-migration-${Date.now()}.json`;
+        anchor.click();
+        URL.revokeObjectURL(url);
+        message.success(
+          t(
+            'Export successful! {{collections}} collections, {{workflows}} workflows, {{uiSchemas}} UI schemas, {{routes}} routes',
+            {
+              collections: counts.collections,
+              workflows: counts.workflows,
+              uiSchemas: counts.uiSchemas,
+              routes: counts.desktopRoutes,
+            },
+          ),
+        );
+      },
+      onError: (error: unknown) =>
+        message.error(t('Export failed: {{message}}', { message: getErrorMessage(error, t('Unknown error')) })),
+    },
+  );
+
+  const triggerRestart = async (silentWaitMs = 10000, extraWaitMs = 2000) => {
+    setRestarting(true);
+    try {
+      await api.request({ url: 'app:restart', method: 'post', timeout: 60000 });
+      await delay(silentWaitMs);
+      await delay(extraWaitMs);
+    } finally {
+      setRestarting(false);
+    }
+  };
+
+  const applyWithRetry = async (collectionsPayload: unknown[], attempts = 15, intervalMs = 1500) => {
+    let lastError: unknown = null;
+
+    for (let index = 0; index < attempts; index += 1) {
+      try {
+        const response = await api.request({
+          url: 'migration:apply',
+          method: 'post',
+          data: { data: { collections: collectionsPayload } },
+          headers: { 'Content-Type': 'application/json' },
+          timeout: 600000,
+        });
+        return unwrapResponse<{ results?: { errors?: ErrorItem[] } }>(response);
+      } catch (error) {
+        lastError = error;
+        const status = isRecord(error) && isRecord(error.response) ? error.response.status : undefined;
+        const errorMessage = getErrorMessage(error, '');
+        if (status === 503 || errorMessage.includes('APP_COMMANDING')) {
+          await delay(intervalMs);
+          continue;
+        }
+        throw error;
+      }
+    }
+
+    throw lastError || new Error(t('Apply failed after several attempts.'));
+  };
+
+  const { run: runImport, loading: importing } = useRequest(
+    (payloadWithOptions: MigrationPayload) =>
+      api.request({
+        url: 'migration:import',
+        method: 'post',
+        data: { data: payloadWithOptions },
+        headers: { 'Content-Type': 'application/json' },
+        timeout: 600000,
+      }),
+    {
+      manual: true,
+      onSuccess: async (response: WrappedResponse<{ needsConfirmation?: boolean; results?: ImportResults }>) => {
+        const data = unwrapResponse<{ needsConfirmation?: boolean; results?: ImportResults }>(response);
+        const { needsConfirmation, results } = data || {};
+
+        if (needsConfirmation) {
+          const conflicts = results?.collections?.conflicts || [];
+          Modal.confirm({
+            title: t('Confirm Potentially Data-Altering Changes'),
+            icon: <ExclamationCircleOutlined />,
+            width: 760,
+            okText: t('Proceed & Override'),
+            cancelText: t('Cancel'),
+            content: (
+              <div>
+                <Alert
+                  type="warning"
+                  showIcon
+                  message={t('Conflicts were found on existing fields.')}
+                  style={{ marginBottom: 12 }}
+                />
+                <div style={{ maxHeight: 360, overflow: 'auto' }}>
+                  <Table<ConflictRow>
+                    size="small"
+                    pagination={false}
+                    rowKey={(record) => `${record.collection}.${record.field}`}
+                    dataSource={conflicts}
+                    columns={[
+                      { title: t('Collection'), dataIndex: 'collection' },
+                      { title: t('Field'), dataIndex: 'field' },
+                      {
+                        title: t('Current'),
+                        render: (_, record) =>
+                          `type=${getDisplayText(record.current.type)}, interface=${getDisplayText(
+                            record.current.interface,
+                          )}, unique=${getDisplayText(record.current.unique)}, allowNull=${getDisplayText(
+                            record.current.allowNull,
+                          )}, pk=${getDisplayText(record.current.primaryKey)}`,
+                      },
+                      {
+                        title: t('Incoming'),
+                        render: (_, record) =>
+                          `type=${getDisplayText(record.incoming.type)}, interface=${getDisplayText(
+                            record.incoming.interface,
+                          )}, unique=${getDisplayText(record.incoming.unique)}, allowNull=${getDisplayText(
+                            record.incoming.allowNull,
+                          )}, pk=${getDisplayText(record.incoming.primaryKey)}`,
+                      },
+                    ]}
+                  />
+                </div>
+              </div>
+            ),
+            onOk: () => {
+              if (!lastImportPayload) {
+                return;
+              }
+              setLastWasPreview(false);
+              runImport({ ...lastImportPayload, options: { forceOverride: true } });
+            },
+          });
+          return;
+        }
+
+        if (lastWasPreview && lastImportPayload) {
+          setLastWasPreview(false);
+          runImport(lastImportPayload);
+          return;
+        }
+
+        const allErrors = [
+          ...(results?.collections?.errors || []),
+          ...(results?.workflows?.errors || []),
+          ...(results?.uiSchemas?.errors || []),
+        ];
+
+        Modal.success({
+          title: t('Import Successful'),
+          content: (
+            <div>
+              <p>
+                {t('Collections')}: {results?.collections?.success || 0} {t('succeeded')},{' '}
+                {results?.collections?.failed || 0} {t('failed')}
+              </p>
+              <p>
+                {t('Workflows')}: {results?.workflows?.success || 0} {t('succeeded')}, {results?.workflows?.failed || 0}{' '}
+                {t('failed')}
+              </p>
+              <p>
+                {t('UI Schemas')}: {results?.uiSchemas?.success || 0} {t('succeeded')},{' '}
+                {results?.uiSchemas?.failed || 0} {t('failed')}
+              </p>
+              {allErrors.length > 0 && (
+                <Alert
+                  message={t('Some errors occurred')}
+                  description={
+                    <ul>
+                      {allErrors.map((error, index) => (
+                        <li key={index}>{error.error || String(error)}</li>
+                      ))}
+                    </ul>
+                  }
+                  type="warning"
+                  style={{ marginTop: 10 }}
+                />
+              )}
+            </div>
+          ),
+          okText: t('Continue'),
+          onOk: async () => {
+            try {
+              setApplying(true);
+              await triggerRestart(12000, 2000);
+              const collectionsPayload = (lastImportPayload?.collections || []).map((collection) =>
+                typeof collection === 'string' ? { name: collection } : collection,
+              );
+              const applyData = await applyWithRetry(collectionsPayload, 15, 1500);
+
+              Modal.success({
+                title: t('Apply Complete'),
+                content: (
+                  <div>
+                    <p>
+                      {t(
+                        'The changes have been successfully applied. Click Continue to refresh the page for the changes to take effect.',
+                      )}
+                    </p>
+                    {(applyData?.results?.errors?.length || 0) > 0 && (
+                      <Alert
+                        type="warning"
+                        message={t('Errors occurred during apply')}
+                        description={
+                          <ul style={{ marginBottom: 0 }}>
+                            {(applyData?.results?.errors || []).map((error, index) => (
+                              <li key={index}>
+                                {error.collection || error.route || error.schema || t('item')}: {error.error}
+                              </li>
+                            ))}
+                          </ul>
+                        }
+                      />
+                    )}
+                  </div>
+                ),
+                okText: t('Continue'),
+                onOk: () => {
+                  window.location.reload();
+                },
+              });
+            } catch (error) {
+              message.error(getErrorMessage(error, t('Apply failed')));
+            } finally {
+              setApplying(false);
+              setLastImportPayload(null);
+              fetchItems();
+            }
+          },
+        });
+        fetchItems();
+      },
+      onError: (error: unknown) =>
+        message.error(t('Import failed: {{message}}', { message: getErrorMessage(error, t('Unknown error')) })),
+    },
+  );
+
+  const handleExport = () => {
+    if (!selectedCollections.length && !selectedWorkflows.length && !selectedSchemas.length) {
+      message.warning(t('Select at least one item to export'));
+      return;
+    }
+
+    Modal.confirm({
+      title: t('Export Confirmation'),
+      icon: <ExclamationCircleOutlined />,
+      content: (
+        <div>
+          <p>{t('You will export:')}</p>
+          <ul>
+            <li>
+              {selectedCollections.length} {t('Collections')}
+            </li>
+            <li>
+              {selectedWorkflows.length} {t('Workflows')}
+            </li>
+            <li>
+              {selectedSchemas.length} {t('UI Schemas/Routes')}
+            </li>
+          </ul>
+          <Alert
+            message={t('Note')}
+            description={t(
+              'Export includes collection structure, workflow config, UI schema subtree, and desktop routes.',
+            )}
+            type="info"
+            style={{ marginTop: 10 }}
+          />
+        </div>
+      ),
+      onOk: () => {
+        exportData({
+          collections: selectedCollections.map(String),
+          workflows: selectedWorkflows,
+          uiSchemas: [],
+          desktopRoutes: selectedSchemas.map(String),
+        });
+      },
+    });
+  };
+
+  const handleImport = (file: File) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      try {
+        const payload = JSON.parse(String(event.target?.result || '{}')) as MigrationPayload;
+        const counts = getCounts(payload);
+        setLastImportPayload(payload);
+        setLastWasPreview(true);
+        Modal.confirm({
+          title: t('Import Confirmation'),
+          icon: <ExclamationCircleOutlined />,
+          content: (
+            <div>
+              <p>{t('The file will import:')}</p>
+              <ul>
+                <li>
+                  {counts.collections} {t('Collections')}
+                </li>
+                <li>
+                  {counts.workflows} {t('Workflows')}
+                </li>
+                <li>
+                  {counts.uiSchemas} {t('UI Schemas')}
+                </li>
+              </ul>
+              <Alert
+                message={t('Warning')}
+                description={t('The first step will run a PREVIEW. If safe, the process will proceed automatically.')}
+                type="warning"
+                style={{ marginTop: 10 }}
+              />
+            </div>
+          ),
+          onOk: () => runImport({ ...payload, options: { preview: true } }),
+        });
+      } catch {
+        message.error(t('Invalid or corrupt file'));
+      }
+    };
+    reader.readAsText(file);
+    return false;
+  };
+
+  const filteredCollections = useMemo(() => {
+    const query = collectionQuery.trim().toLowerCase();
+    const data = availableItems.collections.filter((collection) =>
+      (collection.title || collection.name || '').toLowerCase().includes(query),
+    );
+    return { total: data.length, data };
+  }, [availableItems.collections, collectionQuery]);
+
+  const pagedCollections = useMemo(() => {
+    const start = (collectionPage.current - 1) * collectionPage.pageSize;
+    return filteredCollections.data.slice(start, start + collectionPage.pageSize);
+  }, [collectionPage, filteredCollections]);
+
+  const filteredWorkflows = useMemo(() => {
+    const query = workflowQuery.trim().toLowerCase();
+    const data = availableItems.workflows.filter((workflow) => (workflow.title || '').toLowerCase().includes(query));
+    return { total: data.length, data };
+  }, [availableItems.workflows, workflowQuery]);
+
+  const pagedWorkflows = useMemo(() => {
+    const start = (workflowPage.current - 1) * workflowPage.pageSize;
+    return filteredWorkflows.data.slice(start, start + workflowPage.pageSize);
+  }, [filteredWorkflows, workflowPage]);
+
+  const filteredSchemas = useMemo(() => {
+    const query = schemaQuery.trim().toLowerCase();
+    const data = availableItems.uiSchemas.filter((schema) =>
+      (schema.displayTitle || schema.title || schema.name || '').toLowerCase().includes(query),
+    );
+    return { total: data.length, data };
+  }, [availableItems.uiSchemas, schemaQuery]);
+
+  const pagedSchemas = useMemo(() => {
+    const start = (schemaPage.current - 1) * schemaPage.pageSize;
+    return filteredSchemas.data.slice(start, start + schemaPage.pageSize);
+  }, [filteredSchemas, schemaPage]);
+
+  const isBusy = restarting || applying;
+
+  return (
+    <div style={{ padding: 24, position: 'relative' }}>
+      <Card>
+        <Title level={2}>{t('Migration Manager')}</Title>
+        <Text type="secondary">
+          {t('Export and import collections, workflows, and UI schemas across NocoBase instances')}
+        </Text>
+
+        <Tabs
+          activeKey={activeTab}
+          onChange={setActiveTab}
+          items={[
+            {
+              key: 'export',
+              label: t('Export'),
+              children: (
+                <Space direction="vertical" size="large" style={{ width: '100%' }}>
+                  <Card
+                    title={
+                      <Space>
+                        <DatabaseOutlined />
+                        {t('Collections')}
+                      </Space>
+                    }
+                    size="small"
+                  >
+                    <div style={{ marginBottom: 12 }}>
+                      <Search
+                        allowClear
+                        placeholder={t('Filter by Title')}
+                        onSearch={(value) => {
+                          setCollectionQuery(value);
+                          setCollectionPage({ ...collectionPage, current: 1 });
+                        }}
+                        onChange={(event) => {
+                          setCollectionQuery(event.target.value);
+                          setCollectionPage({ ...collectionPage, current: 1 });
+                        }}
+                        value={collectionQuery}
+                        style={{ maxWidth: 320 }}
+                      />
+                    </div>
+                    <Table<CollectionItem>
+                      rowSelection={{
+                        selectedRowKeys: selectedCollections,
+                        onChange: setSelectedCollections,
+                      }}
+                      columns={[
+                        { title: t('Name'), dataIndex: 'name', key: 'name' },
+                        { title: t('Title'), dataIndex: 'title', key: 'title', render: prettifyCollectionTitle },
+                        { title: t('Fields'), dataIndex: 'fields', key: 'fields' },
+                      ]}
+                      dataSource={pagedCollections}
+                      rowKey="name"
+                      loading={loadingItems}
+                      pagination={{
+                        current: collectionPage.current,
+                        pageSize: collectionPage.pageSize,
+                        total: filteredCollections.total,
+                        showSizeChanger: true,
+                        onChange: (current, pageSize) => setCollectionPage({ current, pageSize }),
+                      }}
+                      size="small"
+                    />
+                  </Card>
+
+                  <Card
+                    title={
+                      <Space>
+                        <BranchesOutlined />
+                        {t('Workflows')}
+                      </Space>
+                    }
+                    size="small"
+                  >
+                    <div style={{ marginBottom: 12 }}>
+                      <Search
+                        allowClear
+                        placeholder={t('Filter by Title')}
+                        onSearch={(value) => {
+                          setWorkflowQuery(value);
+                          setWorkflowPage({ ...workflowPage, current: 1 });
+                        }}
+                        onChange={(event) => {
+                          setWorkflowQuery(event.target.value);
+                          setWorkflowPage({ ...workflowPage, current: 1 });
+                        }}
+                        value={workflowQuery}
+                        style={{ maxWidth: 320 }}
+                      />
+                    </div>
+                    <Table<WorkflowItem>
+                      rowSelection={{
+                        selectedRowKeys: selectedWorkflows,
+                        onChange: setSelectedWorkflows,
+                      }}
+                      columns={[
+                        { title: t('Title'), dataIndex: 'title', key: 'title' },
+                        { title: t('Key'), dataIndex: 'key', key: 'key' },
+                        {
+                          title: t('Status'),
+                          dataIndex: 'enabled',
+                          key: 'enabled',
+                          render: (value: boolean) => (value ? t('Enabled') : t('Disabled')),
+                        },
+                      ]}
+                      dataSource={pagedWorkflows}
+                      rowKey="id"
+                      loading={loadingItems}
+                      pagination={{
+                        current: workflowPage.current,
+                        pageSize: workflowPage.pageSize,
+                        total: filteredWorkflows.total,
+                        showSizeChanger: true,
+                        onChange: (current, pageSize) => setWorkflowPage({ current, pageSize }),
+                      }}
+                      size="small"
+                    />
+                  </Card>
+
+                  <Card
+                    title={
+                      <Space>
+                        <LayoutOutlined />
+                        {t('UI Schemas')}
+                      </Space>
+                    }
+                    size="small"
+                  >
+                    <div style={{ marginBottom: 12 }}>
+                      <Search
+                        allowClear
+                        placeholder={t('Filter by Title')}
+                        onSearch={(value) => {
+                          setSchemaQuery(value);
+                          setSchemaPage({ ...schemaPage, current: 1 });
+                        }}
+                        onChange={(event) => {
+                          setSchemaQuery(event.target.value);
+                          setSchemaPage({ ...schemaPage, current: 1 });
+                        }}
+                        value={schemaQuery}
+                        style={{ maxWidth: 320 }}
+                      />
+                    </div>
+                    <Table<UISchemaItem>
+                      rowSelection={{
+                        selectedRowKeys: selectedSchemas,
+                        onChange: setSelectedSchemas,
+                      }}
+                      columns={[
+                        {
+                          title: t('Menu / Page'),
+                          dataIndex: 'displayTitle',
+                          key: 'displayTitle',
+                          render: (_, record) => (
+                            <Space>
+                              <Text>{record?.displayTitle || record?.title || record?.name || t('Untitled')}</Text>
+                              <Tag>{record?.type}</Tag>
+                            </Space>
+                          ),
+                        },
+                        { title: t('UID'), dataIndex: 'schemaUid', key: 'schemaUid' },
+                      ]}
+                      dataSource={pagedSchemas}
+                      rowKey={(record) => record.schemaUid || record.uid || String(record.routeId || '')}
+                      loading={loadingItems}
+                      pagination={{
+                        current: schemaPage.current,
+                        pageSize: schemaPage.pageSize,
+                        total: filteredSchemas.total,
+                        showSizeChanger: true,
+                        onChange: (current, pageSize) => setSchemaPage({ current, pageSize }),
+                      }}
+                      size="small"
+                    />
+                  </Card>
+
+                  <Button
+                    type="primary"
+                    icon={<DownloadOutlined />}
+                    onClick={handleExport}
+                    loading={exporting}
+                    size="large"
+                    disabled={isBusy}
+                  >
+                    {t('Export Selected Items')}
+                  </Button>
+                </Space>
+              ),
+            },
+            {
+              key: 'import',
+              label: t('Import'),
+              children: (
+                <Space direction="vertical" size="large" style={{ width: '100%' }}>
+                  <Alert
+                    message={t('Import from Development to Production')}
+                    description={
+                      <div>
+                        <p>{t('Upload the exported JSON file from the development server.')}</p>
+                        <p>
+                          <strong>{t('What will be imported:')}</strong>
+                        </p>
+                        <ul>
+                          <li>{t('Collection structure (without data)')}</li>
+                          <li>{t('Workflow configuration')}</li>
+                          <li>{t('UI Schema/Page design')}</li>
+                        </ul>
+                        <p>
+                          <strong>{t('What will NOT be affected:')}</strong>
+                        </p>
+                        <ul>
+                          <li>{t('Data within collections')}</li>
+                          <li>{t('Collections not present in the import file')}</li>
+                        </ul>
+                      </div>
+                    }
+                    type="info"
+                  />
+
+                  <Upload accept=".json" beforeUpload={handleImport} showUploadList={false} disabled={isBusy}>
+                    <Button type="primary" icon={<UploadOutlined />} loading={importing} size="large" disabled={isBusy}>
+                      {t('Upload Migration File (.json)')}
+                    </Button>
+                  </Upload>
+                </Space>
+              ),
+            },
+          ]}
+        />
+      </Card>
+
+      {isBusy && (
+        <div
+          style={{
+            position: 'fixed',
+            inset: 0,
+            backgroundColor: 'rgba(255,255,255,0.8)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 9999,
+          }}
+        >
+          <Spin size="large" tip={restarting ? t('Restarting...') : t('Applying...')} />
+        </div>
+      )}
+    </div>
+  );
+}