diff --git a/apps/admin-x-settings/src/components/settings/advanced/MigrationTools.tsx b/apps/admin-x-settings/src/components/settings/advanced/MigrationTools.tsx
new file mode 100644
index 0000000000..77079050bd
--- /dev/null
+++ b/apps/admin-x-settings/src/components/settings/advanced/MigrationTools.tsx
@@ -0,0 +1,39 @@
+import MigrationToolsExport from './migrationtools/MigrationToolsExport';
+import MigrationToolsImport from './migrationtools/MigrationToolsImport';
+import React, {useState} from 'react';
+import TopLevelGroup from '../../TopLevelGroup';
+import {SettingGroupHeader, Tab, TabView, withErrorBoundary} from '@tryghost/admin-x-design-system';
+
+type MigrationTab = 'import' | 'export';
+
+const MigrationTools: React.FC<{ keywords: string[] }> = ({keywords}) => {
+ const [selectedTab, setSelectedTab] = useState
('import');
+
+ const tabs = [
+ {
+ id: 'import',
+ title: 'Import',
+ contents:
+ },
+ {
+ id: 'export',
+ title: 'Export',
+ contents:
+ }
+ ].filter(Boolean) as Tab[];
+
+ return (
+
+ }
+ keywords={keywords}
+ navid='migration'
+ testId='migrationtools'
+ >
+ selectedTab={selectedTab} tabs={tabs} onTabChange={setSelectedTab} />
+
+ );
+};
+
+export default withErrorBoundary(MigrationTools, 'Migration tools');
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/BetaFeatures.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/BetaFeatures.tsx
index 17008d14c9..51ef6e5126 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/BetaFeatures.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/BetaFeatures.tsx
@@ -5,10 +5,8 @@ import {Button, FileUpload, List, showToast} from '@tryghost/admin-x-design-syst
import {downloadRedirects, useUploadRedirects} from '@tryghost/admin-x-framework/api/redirects';
import {downloadRoutes, useUploadRoutes} from '@tryghost/admin-x-framework/api/routes';
import {useHandleError} from '@tryghost/admin-x-framework/hooks';
-import {useRouting} from '@tryghost/admin-x-framework/routing';
const BetaFeatures: React.FC = () => {
- const {updateRoute} = useRouting();
const {mutateAsync: uploadRedirects} = useUploadRedirects();
const {mutateAsync: uploadRoutes} = useUploadRoutes();
const handleError = useHandleError();
@@ -17,10 +15,6 @@ const BetaFeatures: React.FC = () => {
return (
- updateRoute({isExternal: true, route: 'migrate'})} />}
- detail={<>A step-by-step tool to easily import all your content, members and paid subscriptions}
- title='Substack migrator' />
}
detail={<>Translate your membership flows into your publication language (supported languages). Don’t see yours? Get involved}
diff --git a/apps/admin-x-settings/src/components/settings/advanced/migrationtools/MigrationToolsExport.tsx b/apps/admin-x-settings/src/components/settings/advanced/migrationtools/MigrationToolsExport.tsx
new file mode 100644
index 0000000000..99112c7ce8
--- /dev/null
+++ b/apps/admin-x-settings/src/components/settings/advanced/migrationtools/MigrationToolsExport.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import {Button} from '@tryghost/admin-x-design-system';
+import {downloadAllContent} from '@tryghost/admin-x-framework/api/db';
+
+const MigrationToolsExport: React.FC = () => {
+ return (
+
+
Download all of your posts and settings in a single, glorious JSON file.
+
+
+ }
+ title='Substack'
+ onClick={() => updateRoute({isExternal: true, route: '/migrate/substack'})}
+ />
+
+ }
+ title='Medium'
+ onClick={() => updateRoute({isExternal: true, route: '/migrate/medium'})}
+ />
+
+ }
+ title='Mailchimp'
+ onClick={() => updateRoute({isExternal: true, route: '/migrate/mailchimp'})}
+ />
+
+ }
+ title='Universal import'
+ onClick={handleImportContent}
+ />
+
+ );
+};
+
+export default MigrationToolsImport;
diff --git a/apps/admin-x-settings/src/components/settings/advanced/migrationtools/UniversalImportModal.tsx b/apps/admin-x-settings/src/components/settings/advanced/migrationtools/UniversalImportModal.tsx
new file mode 100644
index 0000000000..737b637888
--- /dev/null
+++ b/apps/admin-x-settings/src/components/settings/advanced/migrationtools/UniversalImportModal.tsx
@@ -0,0 +1,55 @@
+import NiceModal, {useModal} from '@ebay/nice-modal-react';
+import React, {useState} from 'react';
+import {ConfirmationModal, FileUpload, Modal} from '@tryghost/admin-x-design-system';
+import {useHandleError} from '@tryghost/admin-x-framework/hooks';
+import {useImportContent} from '@tryghost/admin-x-framework/api/db';
+
+const UniversalImportModal: React.FC = () => {
+ const modal = useModal();
+ const {mutateAsync: importContent} = useImportContent();
+ const [uploading, setUploading] = useState(false);
+ const handleError = useHandleError();
+
+ return (
+
+
+
{
+ setUploading(true);
+ try {
+ await importContent(file);
+ modal.remove();
+ NiceModal.show(ConfirmationModal, {
+ title: 'Import in progress',
+ prompt: `Your import is being processed, and you'll receive a confirmation email as soon as it's complete. Usually this only takes a few minutes, but larger imports may take longer.`,
+ cancelLabel: '',
+ okLabel: 'Got it',
+ onOk: confirmModal => confirmModal?.remove(),
+ formSheet: false
+ });
+ } catch (e) {
+ handleError(e);
+ } finally {
+ setUploading(false);
+ }
+ }}
+ >
+
+ {uploading ? 'Uploading...' : <>
+ Select any JSON or zip file that contains
posts and settings
+ }
+
+
+