{title}
- void handleSave()
- }
- ]} />
+
+
+
+
{(loadError || saveError) && (
diff --git a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-export.tsx b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-export.tsx
index afd38c049cf..1b5ed1726a0 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-export.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-export.tsx
@@ -1,5 +1,6 @@
import React from 'react';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button, LoadingIndicator} from '@tryghost/shade/components';
+import {LucideIcon} from '@tryghost/shade/utils';
import {blobDownloadFromEndpoint} from '@tryghost/admin-x-framework/helpers';
import {downloadAllContent} from '@tryghost/admin-x-framework/api/db';
import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -26,8 +27,8 @@ const MigrationToolsExport: React.FC = () => {
return (
-
);
};
diff --git a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-import.tsx b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-import.tsx
index 774bfc3783b..670f0e3699f 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-import.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/migration-tools-import.tsx
@@ -1,34 +1,11 @@
+import BrandIcon from '../../../icons/brand-icon';
import NiceModal from '@ebay/nice-modal-react';
import React from 'react';
import UniversalImportModal from './universal-import-modal';
-import clsx from 'clsx';
-import {Icon} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
+import {LucideIcon} from '@tryghost/shade/utils';
import {useRouting} from '@tryghost/admin-x-framework/routing';
-const ImportButton: React.FC<{
- icon?: React.ReactNode,
- title?: string,
- onClick?: () => void
-}> = ({
- icon,
- title,
- onClick
-}) => {
- const classNames = clsx(
- 'flex h-9 cursor-pointer items-center justify-center gap-2 rounded-md bg-grey-100 px-2 font-semibold transition-all hover:bg-grey-200 dark:bg-grey-900'
- );
- if (onClick) {
- return (
-
- );
- } else {
- return <>;
- }
-};
-
const MigrationToolsImport: React.FC = () => {
const {updateRoute} = useRouting();
@@ -36,57 +13,24 @@ const MigrationToolsImport: React.FC = () => {
NiceModal.show(UniversalImportModal);
};
+ const importers = [
+ {icon:
, title: 'Substack', onClick: () => updateRoute({isExternal: true, route: '/migrate/substack'})},
+ {icon:
, title: 'beehiiv', onClick: () => updateRoute({isExternal: true, route: '/migrate/beehiiv'})},
+ {icon:
, title: 'WordPress', onClick: () => updateRoute({isExternal: true, route: '/migrate/wordpress'})},
+ {icon:
, title: 'Squarespace', onClick: () => updateRoute({isExternal: true, route: '/migrate/squarespace'})},
+ {icon:
, title: 'Medium', onClick: () => updateRoute({isExternal: true, route: '/migrate/medium'})},
+ {icon:
, title: 'Mailchimp', onClick: () => updateRoute({isExternal: true, route: '/migrate/mailchimp'})},
+ {icon:
, title: 'Universal import', onClick: handleImportContent}
+ ];
+
return (
-
- }
- title='Substack'
- onClick={() => updateRoute({isExternal: true, route: '/migrate/substack'})}
- />
-
- }
- title='beehiiv'
- onClick={() => updateRoute({isExternal: true, route: '/migrate/beehiiv'})}
- />
-
- }
- title='WordPress'
- onClick={() => updateRoute({isExternal: true, route: '/migrate/wordpress'})}
- />
-
- }
- title='Squarespace'
- onClick={() => updateRoute({isExternal: true, route: '/migrate/squarespace'})}
- />
-
- }
- title='Medium'
- onClick={() => updateRoute({isExternal: true, route: '/migrate/medium'})}
- />
-
- }
- title='Mailchimp'
- onClick={() => updateRoute({isExternal: true, route: '/migrate/mailchimp'})}
- />
-
- }
- title='Universal import'
- onClick={handleImportContent}
- />
+ {importers.map(importer => (
+
+ ))}
);
};
diff --git a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/universal-import-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/universal-import-modal.tsx
index f7d5cecbae8..2b8ee04a699 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/universal-import-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/universal-import-modal.tsx
@@ -1,7 +1,7 @@
import NiceModal, {useModal} from '@ebay/nice-modal-react';
import React, {useState} from 'react';
-import {Button, ConfirmationModal, Modal} from '@tryghost/admin-x-design-system';
-import {Dropzone} from '@tryghost/shade/components';
+import {Button, Dropzone} from '@tryghost/shade/components';
+import {ConfirmationModal, Modal} from '@tryghost/admin-x-design-system';
import {useHandleError} from '@tryghost/admin-x-framework/hooks';
import {useImportContent} from '@tryghost/admin-x-framework/api/db';
@@ -17,7 +17,7 @@ const UniversalImportModal: React.FC = () => {
footer={
}
okLabel=''
diff --git a/apps/admin-x-settings/src/components/settings/email-design/email-design-modal.tsx b/apps/admin-x-settings/src/components/settings/email-design/email-design-modal.tsx
index ca712f6f005..ac029dad3cb 100644
--- a/apps/admin-x-settings/src/components/settings/email-design/email-design-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/email-design/email-design-modal.tsx
@@ -11,7 +11,7 @@ interface EmailDesignModalProps {
sidebar: React.ReactNode;
dirty?: boolean;
isLoading?: boolean;
- okProps?: Pick
;
+ okProps?: Pick;
onSave: () => void;
onClose: () => void;
afterClose?: () => void;
@@ -94,11 +94,11 @@ const EmailDesignModal: React.FC = ({
{title}
-
+
-
+
);
@@ -135,7 +136,7 @@ const EmailsGroup: React.FC<{ keywords: string[]; newslettersEnabled: boolean }>
};
const customButtons = newslettersEnabled && selectedTab === 'newsletters' ? (
-
+
) : undefined;
return (
diff --git a/apps/admin-x-settings/src/components/settings/email/enable-newsletters.tsx b/apps/admin-x-settings/src/components/settings/email/enable-newsletters.tsx
index 50359a35817..c0422c451d7 100644
--- a/apps/admin-x-settings/src/components/settings/email/enable-newsletters.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/enable-newsletters.tsx
@@ -1,9 +1,10 @@
import React from 'react';
import TopLevelGroup from '../../top-level-group';
import {Banner, Switch} from '@tryghost/shade/components';
-import {Icon, SettingGroupContent} from '@tryghost/admin-x-design-system';
import {Inline} from '@tryghost/shade/primitives';
+import {LucideIcon} from '@tryghost/shade/utils';
import {type Setting, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
+import {SettingGroupContent} from '@tryghost/admin-x-design-system';
import {useGlobalData} from '../../providers/global-data-provider';
import {useHandleError} from '@tryghost/admin-x-framework/hooks';
import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -61,13 +62,13 @@ const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
key: 'private',
value: (newslettersEnabled !== 'disabled' && !isDisabled) ? (
-
+
Enabled
) :
-
+
Disabled
{isDisabled &&
diff --git a/apps/admin-x-settings/src/components/settings/email/mailgun.tsx b/apps/admin-x-settings/src/components/settings/email/mailgun.tsx
index a0e2f4792c6..92805d01fbf 100644
--- a/apps/admin-x-settings/src/components/settings/email/mailgun.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/mailgun.tsx
@@ -1,9 +1,9 @@
import React from 'react';
import TopLevelGroup from '../../top-level-group';
import useSettingGroup from '../../../hooks/use-setting-group';
-import {CheckCircle} from 'lucide-react';
import {Field, FieldDescription, FieldLabel, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade/components';
import {Inline} from '@tryghost/shade/primitives';
+import {LucideIcon} from '@tryghost/shade/utils';
import {SettingGroupContent} from '@tryghost/admin-x-design-system';
import {getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -38,7 +38,7 @@ const MailGun: React.FC<{ keywords: string[] }> = ({keywords}) => {
key: 'status',
value: (
-
+
Mailgun is set up
)
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters.tsx
index ac39f986490..ec1ae707a24 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters.tsx
@@ -4,10 +4,10 @@ import React, {type ReactNode, useEffect, useState} from 'react';
import TopLevelGroup from '../../top-level-group';
import useQueryParams from '../../../hooks/use-query-params';
import {APIError} from '@tryghost/admin-x-framework/errors';
-import {Button, ConfirmationModal} from '@tryghost/admin-x-design-system';
+import {Button, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
+import {ConfirmationModal} from '@tryghost/admin-x-design-system';
import {type InfiniteData, useQueryClient} from '@tryghost/admin-x-framework';
import {type Newsletter, type NewslettersResponseType, newslettersDataType, useBrowseNewsletters, useEditNewsletter, useVerifyNewsletterEmail} from '@tryghost/admin-x-framework/api/newsletters';
-import {Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
import {arrayMove} from '@dnd-kit/sortable';
import {formatNumber} from '@tryghost/shade/utils';
import {useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -18,10 +18,10 @@ const NavigateToNewsletter = ({id, children}: {id: string; children: ReactNode})
const modal = useModal();
const {updateRoute} = useRouting();
- return
;
};
const Newsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
@@ -93,9 +93,9 @@ const Newsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
}, [verifyEmailToken, handleError, verifyEmail]);
const buttons = (
-
Button style
-
updateNewsletter({button_style: 'fill'})
- },
- {
- key: 'outline',
- icon: 'squircle',
- iconSize: 14,
- label: 'Outline',
- tooltip: 'Outline',
- hideLabel: true,
- link: false,
- size: 'sm',
- onClick: () => updateNewsletter({button_style: 'outline'})
- }
- ]} clearBg={false} />
+ },
+ {value: 'outline', label: 'Outline', icon: }
+ ]}
+ value={newsletter.button_style || 'fill'}
+ onValueChange={buttonStyle => updateNewsletter({button_style: buttonStyle})}
+ />
Button corners
-
updateNewsletter({button_corners: 'square'})
- },
- {
- key: 'rounded',
- icon: 'squircle',
- iconSize: 14,
- label: 'Rounded',
- tooltip: 'Rounded',
- hideLabel: true,
- link: false,
- size: 'sm',
- onClick: () => updateNewsletter({button_corners: 'rounded'})
- },
- {
- key: 'pill',
- icon: 'circle',
- iconSize: 14,
- label: 'Pill',
- tooltip: 'Pill',
- hideLabel: true,
- link: false,
- size: 'sm',
- onClick: () => updateNewsletter({button_corners: 'pill'})
- }
- ]} clearBg={false} />
+ },
+ {value: 'rounded', label: 'Rounded', icon: },
+ {value: 'pill', label: 'Pill', icon: }
+ ]}
+ value={newsletter.button_corners || 'rounded'}
+ onValueChange={buttonCorners => updateNewsletter({button_corners: buttonCorners})}
+ />
Link style
-
updateNewsletter({link_style: 'underline'})
- },
- {
- key: 'regular',
- icon: 'text-regular',
- iconSize: 14,
- label: 'Regular',
- tooltip: 'Regular',
- hideLabel: true,
- link: false,
- size: 'sm',
- onClick: () => updateNewsletter({link_style: 'regular'})
- },
- {
- key: 'bold',
- icon: 'text-bold',
- iconSize: 14,
- label: 'Bold',
- tooltip: 'Bold',
- hideLabel: true,
- link: false,
- size: 'sm',
- onClick: () => updateNewsletter({link_style: 'bold'})
- }
- ]} clearBg={false} />
+ },
+ {value: 'regular', label: 'Regular', icon: },
+ {value: 'bold', label: 'Bold', icon: }
+ ]}
+ value={newsletter.link_style || 'underline'}
+ onValueChange={linkStyle => updateNewsletter({link_style: linkStyle})}
+ />
Image corners
-
updateNewsletter({image_corners: 'square'})
- },
- {
- key: 'rounded',
- icon: 'squircle',
- iconSize: 14,
- label: 'Rounded',
- tooltip: 'Rounded',
- hideLabel: true,
- link: false,
- size: 'sm',
- onClick: () => updateNewsletter({image_corners: 'rounded'})
- }
- ]} clearBg={false} />
+ },
+ {value: 'rounded', label: 'Rounded', icon: }
+ ]}
+ value={newsletter.image_corners || 'square'}
+ onValueChange={imageCorners => updateNewsletter({image_corners: imageCorners})}
+ />
-
+
More like this
-
+
Less like this
@@ -291,7 +291,7 @@ const NewsletterPreviewContent: React.FC<{
{showCommentCta && (
-
+
Comment
@@ -299,7 +299,7 @@ const NewsletterPreviewContent: React.FC<{
{showShareButton && (
-
+
Share
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx
index a7153edb22d..657d7c0b3de 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, DragIndicator, LoadingIndicator, NoValueLabel, NoValueLabelIcon, type SortableItemContainerProps, SortableList} from '@tryghost/shade/components';
-import {Button} from '@tryghost/admin-x-design-system';
+import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button, DragIndicator, LoadingIndicator, NoValueLabel, NoValueLabelIcon, type SortableItemContainerProps, SortableList} from '@tryghost/shade/components';
+import {Inline} from '@tryghost/shade/primitives';
import {MailX} from 'lucide-react';
import {type Newsletter} from '@tryghost/admin-x-framework/api/newsletters';
import {formatNumber} from '@tryghost/shade/utils';
@@ -33,14 +33,14 @@ const NewsletterItemContainer: React.FC> = (
const container = (
- {(props.dragHandleAttributes || isDragging) &&
+ {(props.dragHandleAttributes || isDragging) &&
-
}
+ }
-
+
);
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-tab-content.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-tab-content.tsx
index fb2798103d0..46388f6597e 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-tab-content.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-tab-content.tsx
@@ -3,10 +3,12 @@ import NiceModal, {useModal} from '@ebay/nice-modal-react';
import React, {type ReactNode, useEffect, useState} from 'react';
import useQueryParams from '../../../../hooks/use-query-params';
import {APIError} from '@tryghost/admin-x-framework/errors';
-import {Button, ConfirmationModal} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
+import {ConfirmationModal} from '@tryghost/admin-x-design-system';
import {type InfiniteData, useQueryClient} from '@tryghost/admin-x-framework';
import {type Newsletter, type NewslettersResponseType, newslettersDataType, useBrowseNewsletters, useEditNewsletter, useVerifyNewsletterEmail} from '@tryghost/admin-x-framework/api/newsletters';
import {arrayMove} from '@dnd-kit/sortable';
+import {formatNumber} from '@tryghost/shade/utils';
import {useHandleError} from '@tryghost/admin-x-framework/hooks';
import {useRouting} from '@tryghost/admin-x-framework/routing';
import {withErrorBoundary} from '../../../error-boundary';
@@ -15,10 +17,10 @@ const NavigateToNewsletter = ({id, children}: {id: string; children: ReactNode})
const modal = useModal();
const {updateRoute} = useRouting();
- return ;
};
const isNewsletterVerificationRoute = () => {
@@ -144,11 +146,9 @@ const NewslettersTabContent: React.FC = ({filter}) =
) : (
)}
- {isEnd === false &&
diff --git a/apps/admin-x-settings/src/components/settings/general/invite-user-modal.tsx b/apps/admin-x-settings/src/components/settings/general/invite-user-modal.tsx
index f62099f2001..32a8115bf7a 100644
--- a/apps/admin-x-settings/src/components/settings/general/invite-user-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/invite-user-modal.tsx
@@ -3,7 +3,8 @@ import validator from 'validator';
import {APIError, ValidationError} from '@tryghost/admin-x-framework/errors';
import {Field, FieldContent, FieldDescription, FieldError, FieldLabel, FieldLegend, FieldSeparator, FieldSet, RadioGroup, RadioGroupItem} from '@tryghost/shade/components';
import {HostLimitError, useLimiter} from '../../../hooks/use-limiter';
-import {Modal, TextField, showToast} from '@tryghost/admin-x-design-system';
+import {Modal, TextField} from '@tryghost/admin-x-design-system';
+import {toast} from 'sonner';
import {useAddInvite, useBrowseInvites} from '@tryghost/admin-x-framework/api/invites';
import {useBrowseRoles} from '@tryghost/admin-x-framework/api/roles';
import {useBrowseUsers} from '@tryghost/admin-x-framework/api/users';
@@ -128,11 +129,7 @@ const InviteUserModal = NiceModal.create(() => {
setSaveState('saved');
- showToast({
- title: `Invitation sent`,
- message: `${email}`,
- type: 'success'
- });
+ toast.success(`Invitation sent`, {description: `${email}`});
modal.remove();
updateRoute('staff?tab=invited');
@@ -157,11 +154,7 @@ const InviteUserModal = NiceModal.create(() => {
message = (Check your Mailgun configuration.);
}
}
- showToast({
- title,
- message,
- type: 'error'
- });
+ toast.error(title, {description: message});
handleError(e, {withToast: false});
return;
}
@@ -219,8 +212,8 @@ const InviteUserModal = NiceModal.create(() => {
updateRoute('staff');
}}
cancelLabel=''
- okColor={saveState === 'error' || !!errors.email ? 'red' : 'black'}
okLabel={okLabel}
+ okVariant={saveState === 'error' || !!errors.email ? 'destructive' : 'default'}
testId='invite-user-modal'
title='Invite a new staff user'
width={540}
diff --git a/apps/admin-x-settings/src/components/settings/general/seo-meta.tsx b/apps/admin-x-settings/src/components/settings/general/seo-meta.tsx
index 8d6cb684dcc..b6c10975a2d 100644
--- a/apps/admin-x-settings/src/components/settings/general/seo-meta.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/seo-meta.tsx
@@ -4,9 +4,10 @@ import useFeatureFlag from '../../../hooks/use-feature-flag';
import usePinturaEditor from '../../../hooks/use-pintura-editor';
import useSettingGroup from '../../../hooks/use-setting-group';
import {APIError} from '@tryghost/admin-x-framework/errors';
-import {FacebookLogo, GoogleLogo, Icon, SettingGroupContent, TextField, XLogo} from '@tryghost/admin-x-design-system';
+import {FacebookLogo, GoogleLogo, SettingGroupContent, TextField, XLogo} from '@tryghost/admin-x-design-system';
import {Field, FieldLabel, Switch, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
import {ImageUpload, ImageUploadAction, ImageUploadActions, ImageUploadDropzone, ImageUploadImage, ImageUploadPreview} from '@tryghost/shade/patterns';
+import {LucideIcon} from '@tryghost/shade/utils';
import {Pencil, Trash2} from 'lucide-react';
import {getImageUrl, useUploadImage} from '@tryghost/admin-x-framework/api/images';
import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
@@ -40,7 +41,7 @@ const SearchEnginePreview: React.FC = ({
diff --git a/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx b/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
index 039ca633980..32ae51f93cd 100644
--- a/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
@@ -9,16 +9,18 @@ import useStaffUsers from '../../../hooks/use-staff-users';
import validator from 'validator';
import {APIError} from '@tryghost/admin-x-framework/errors';
import {Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Dropzone, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {ConfirmationModal, Icon, LimitModal, Modal, showToast} from '@tryghost/admin-x-design-system';
+import {ConfirmationModal, LimitModal, Modal} from '@tryghost/admin-x-design-system';
import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
import {HostLimitError, useLimiter} from '../../../hooks/use-limiter';
import {ImageUpload, ImageUploadAction, ImageUploadActions, ImageUploadDropzone, ImageUploadImage, ImageUploadPreview} from '@tryghost/shade/patterns';
+import {LucideIcon} from '@tryghost/shade/utils';
import {Pencil, Trash2} from 'lucide-react';
import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
import {SOCIAL_PLATFORM_CONFIGS, SOCIAL_PLATFORM_KEYS, getSocialValidationError} from '../../../utils/social-urls/index';
import {Text} from '@tryghost/shade/primitives';
import {type User, canAccessSettings, hasAdminAccess, isAdminUser, isAuthorOrContributor, isEditorUser, isOwnerUser, useDeleteUser, useEditUser, useGetUserBySlug, useMakeOwner} from '@tryghost/admin-x-framework/api/users';
import {getImageUrl, useUploadImage} from '@tryghost/admin-x-framework/api/images';
+import {toast} from 'sonner';
import {useGlobalData} from '../../providers/global-data-provider';
const validators: Record
) => string> = {
@@ -70,7 +72,7 @@ export interface UserDetailProps {
clearError: (key: keyof User) => void;
}
-const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
+const UserDetailModalContent: React.FC<{user: User; onDeletingUserChange: (isDeleting: boolean) => void}> = ({user, onDeletingUserChange}) => {
const {updateRoute, route} = useRouting();
const getTabFromPath = (path: string): string => {
@@ -192,7 +194,7 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
),
okLabel: _user.status === 'inactive' ? 'Un-suspend' : 'Suspend',
okRunningLabel: _user.status === 'inactive' ? 'Un-suspending...' : 'Suspending...',
- okColor: 'red',
+ okVariant: 'destructive',
onOk: async (modal) => {
const updatedUserData = {
..._user,
@@ -202,10 +204,7 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
await updateUser(updatedUserData);
setFormState(() => updatedUserData);
modal?.remove();
- showToast({
- title: _user.status === 'inactive' ? 'User un-suspended' : 'User suspended',
- type: 'success'
- });
+ toast.success(_user.status === 'inactive' ? 'User un-suspended' : 'User suspended');
} catch (e) {
handleError(e);
}
@@ -223,18 +222,18 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
),
okLabel: 'Delete user',
- okColor: 'red',
+ okVariant: 'destructive',
onOk: async (modal) => {
+ onDeletingUserChange(true);
try {
await deleteUser(_user?.id);
modal?.remove();
mainModal?.remove();
navigateOnClose();
- showToast({
- title: 'User deleted',
- type: 'success'
- });
+ // Let the destination route mount its toaster before publishing the success state.
+ setTimeout(() => toast.success('User deleted'), 100);
} catch (e) {
+ onDeletingUserChange(false);
handleError(e);
}
}
@@ -246,15 +245,12 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
title: 'Transfer Ownership',
prompt: 'Are you sure you want to transfer the ownership of this blog? You will not be able to undo this action.',
okLabel: 'Yep — I\'m sure',
- okColor: 'red',
+ okVariant: 'destructive',
onOk: async (modal) => {
try {
await makeOwner(user.id);
modal?.remove();
- showToast({
- title: 'Ownership transferred',
- type: 'success'
- });
+ toast.success('Ownership transferred');
} catch (e) {
handleError(e);
}
@@ -333,8 +329,8 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
cancelLabel='Close'
dirty={saveState === 'unsaved'}
hideXOnMobile={true}
- okColor={okProps.color}
okLabel={okProps.label || 'Save'}
+ okVariant={okProps.variant}
size={canAccessSettings(currentUser) ? 'md' : 'bleed'}
stickyFooter={true}
testId='user-detail-modal'
@@ -366,7 +362,7 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
) : (
handleImageUpload('profile_image', files[0])}>
-
+
)}
@@ -374,11 +370,11 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
{formState.cover_image ?
- {editor.isEnabled &&
:
handleImageUpload('cover_image', files[0])}>Upload cover image}
{showMenu &&
@@ -393,11 +389,7 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
type='button'
>
Actions
-
+
{/* legacy Modal overlay is z-[1000]; keep the portalled menu above it */}
@@ -463,6 +455,7 @@ const UserDetailModal: React.FC = ({params}) => {
const {currentUser} = useGlobalData();
const {updateRoute} = useRouting();
const handleError = useHandleError();
+ const [isDeletingUser, setIsDeletingUser] = useState(false);
// Skip API call if it's the current user (we already have their data)
const isCurrentUser = currentUser.slug === params?.slug;
@@ -502,15 +495,12 @@ const UserDetailModal: React.FC = ({params}) => {
const notFoundHandledRef = useRef(null);
useEffect(() => {
- if (!notFoundSlug || notFoundHandledRef.current === notFoundSlug) {
+ if (!notFoundSlug || isDeletingUser || notFoundHandledRef.current === notFoundSlug) {
return;
}
notFoundHandledRef.current = notFoundSlug;
- showToast({
- type: 'error',
- message: 'User not found'
- });
+ toast.error('User not found');
if (canAccessSettings(currentUser)) {
// Replace the history entry so the back button doesn't return
@@ -519,9 +509,9 @@ const UserDetailModal: React.FC = ({params}) => {
} else {
updateRoute({isExternal: true, route: ''});
}
- }, [notFoundSlug, currentUser, updateRoute]);
+ }, [notFoundSlug, isDeletingUser, currentUser, updateRoute]);
- return displayUser ? : null;
+ return displayUser ? : null;
};
export default NiceModal.create(UserDetailModal);
diff --git a/apps/admin-x-settings/src/components/settings/general/users.tsx b/apps/admin-x-settings/src/components/settings/general/users.tsx
index 39a08978ef6..cc0bb1c4cdf 100644
--- a/apps/admin-x-settings/src/components/settings/general/users.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/users.tsx
@@ -4,12 +4,13 @@ import clsx from 'clsx';
import useQueryParams from '../../../hooks/use-query-params';
import useStaffUsers from '../../../hooks/use-staff-users';
import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Avatar, NoValueLabel, NoValueLabelIcon, Separator, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerCount} from '@tryghost/shade/components';
-import {Button, showToast} from '@tryghost/admin-x-design-system';
+import {Button} from '@tryghost/shade/components';
import {type User, hasAdminAccess, isContributorUser, isEditorUser} from '@tryghost/admin-x-framework/api/users';
import {type UserInvite, useAddInvite, useDeleteInvite} from '@tryghost/admin-x-framework/api/invites';
import {UserRoundX} from 'lucide-react';
import {formatNumber} from '@tryghost/shade/utils';
import {getSettingValue, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
+import {toast} from 'sonner';
import {useGlobalData} from '../../providers/global-data-provider';
import {useHandleError} from '@tryghost/admin-x-framework/hooks';
import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -49,7 +50,10 @@ const Owner: React.FC = ({user}) => {
- {user.name} — Owner {hasAdminAccess(currentUser) && }
+ {user.name} — Owner {hasAdminAccess(currentUser) && }
{user.email}
@@ -106,7 +110,7 @@ const UsersList: React.FC = ({users, groupname}) => {
)}
- {canEdit &&
}
+ {canEdit &&
}
);
})}
@@ -133,30 +137,29 @@ const UserInviteActions: React.FC<{invite: UserInvite}> = ({invite}) => {
return (
);
};
@@ -235,9 +234,9 @@ const Users: React.FC<{ keywords: string[], highlight?: boolean }> = ({keywords,
};
const buttons = (
-
-
:
diff --git a/apps/admin-x-settings/src/components/settings/growth/explore/testimonials-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/explore/testimonials-modal.tsx
index 2f2ed9a56aa..9e319fc3b82 100644
--- a/apps/admin-x-settings/src/components/settings/growth/explore/testimonials-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/explore/testimonials-modal.tsx
@@ -4,8 +4,10 @@ import JoelWarner from '../../../../assets/images/joel-warner.png';
import NiceModal, {useModal} from '@ebay/nice-modal-react';
import React from 'react';
import {Avatar, Field, FieldError, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea} from '@tryghost/shade/components';
-import {Button, Form, Modal, showToast} from '@tryghost/admin-x-design-system';
+import {Button, LoadingIndicator} from '@tryghost/shade/components';
+import {Form, Modal} from '@tryghost/admin-x-design-system';
import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
+import {toast} from 'sonner';
import {useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
import {useGlobalData} from '../../../providers/global-data-provider';
import {useRouting} from '@tryghost/admin-x-framework/routing';
@@ -62,10 +64,7 @@ const TestimonialsModal = NiceModal.create(() => {
throw new Error('Something went wrong, please try again later.');
}
- showToast({
- message: 'Thank you for your testimonial!',
- type: 'success'
- });
+ toast.success('Thank you for your testimonial!');
updateRoute('explore');
modal.remove();
@@ -221,14 +220,15 @@ const TestimonialsModal = NiceModal.create(() => {