Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Custom Integrations and Webhooks layout fixes (#21565)

Browse source 
fixes
https://linear.app/ghost/issue/DES-790/some-urls-not-wrapping-in-integration-detail-modal

- Webhook URLs were breaking out of the modal container. They now wrap
across a few lines.
- Long descriptions of Custom Integrations caused the integration's icon
to scale down. That no longer happens.
- Descriptions of Custom Integrations wrap properly.
This commit is contained in:
Daniël van der Winden 2024-11-07 15:24:15 +01:00 • committed by GitHub
parent d6cedaae06
commit eae76703eb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx
View file

@ -18,7 +18,7 @@ import {useRouting} from '@tryghost/admin-x-framework/routing';
interface IntegrationItemProps {
icon?: React.ReactNode,
title: string,
detail: string,
detail: string | React.ReactNode,
action: () => void;
onDelete?: () => void;
active?: boolean;
@ -173,11 +173,13 @@ const CustomIntegrations: React.FC<{integrations: Integration[]}> = ({integratio
{integrations.map(integration => (
<IntegrationItem
action={() => updateRoute({route: `integrations/${integration.id}`})}
detail={integration.description || 'No description'}
detail={<div className="line-clamp-2 break-words">
<span title={`${integration.name}: ${integration.description || 'No description'}`}>{integration.description || 'No description'}</span>
</div>}
icon={
integration.icon_image ?
<img className='h-8 w-8 object-cover' role='presentation' src={integration.icon_image} /> :
<Icon className='w-8' name='integration' />
<img className='h-8 w-8 shrink-0 object-cover' role='presentation' src={integration.icon_image} /> :
<Icon className='w-8 shrink-0' name='integration' />
}
title={integration.name}
custom

13
apps/admin-x-settings/src/components/settings/advanced/integrations/WebhooksTable.tsx
View file

@ -36,16 +36,15 @@ const WebhooksTable: React.FC<{integration: Integration}> = ({integration}) => {
<TableRow bgOnHover={false}>
<TableHead>{integration.webhooks?.length || 0} {integration.webhooks?.length === 1 ? 'webhook' : 'webhooks'}</TableHead>
<TableHead>Last triggered</TableHead>
<TableHead />
</TableRow>
{integration.webhooks?.map(webhook => (
<TableRow
action={
<TableRow action={
<Button color='red' label='Delete' link onClick={(e) => {
e?.stopPropagation();
handleDelete(webhook.id);
}} />
}
bgOnHover={false}
hideActions
onClick={() => {
NiceModal.show(WebhookModal, {
@ -55,16 +54,18 @@ const WebhooksTable: React.FC<{integration: Integration}> = ({integration}) => {
});
}}
>
<TableCell className='w-1/2'>
<TableCell className='w-3/4'>
<div className='text-sm font-semibold'>{webhook.name}</div>
<div className='grid grid-cols-[max-content_1fr] gap-x-1 text-xs leading-snug'>
<span className='text-grey-600'>Event:</span>
<span>{getWebhookEventLabel(webhook.event)}</span>
<span className='text-grey-600'>URL:</span>
<span>{webhook.target_url}</span>
<span className='line-clamp-3 break-all' title={webhook.target_url}>
{webhook.target_url}
</span>
</div>
</TableCell>
<TableCell className='w-1/2 text-sm'>
<TableCell className='w-1/4 text-sm'>
{webhook.last_triggered_at && new Date(webhook.last_triggered_at).toLocaleString('default', {
weekday: 'short',
month: 'short',