Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -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 { interface IntegrationItemProps {
icon?: React.ReactNode, icon?: React.ReactNode,
title: string, title: string,
detail: string, detail: string | React.ReactNode,
action: () => void; action: () => void;
onDelete?: () => void; onDelete?: () => void;
active?: boolean; active?: boolean;
@ -173,11 +173,13 @@ const CustomIntegrations: React.FC<{integrations: Integration[]}> = ({integratio
{integrations.map(integration => ( {integrations.map(integration => (
<IntegrationItem <IntegrationItem
action={() => updateRoute({route: `integrations/${integration.id}`})} 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={ icon={
integration.icon_image ? integration.icon_image ?
<img className='h-8 w-8 object-cover' role='presentation' src={integration.icon_image} /> : <img className='h-8 w-8 shrink-0 object-cover' role='presentation' src={integration.icon_image} /> :
<Icon className='w-8' name='integration' /> <Icon className='w-8 shrink-0' name='integration' />
} }
title={integration.name} title={integration.name}
custom custom

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

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