Fix buttons and image loading in external triggers

This commit is contained in:
akhisud3195 2025-08-19 19:48:26 +05:30
parent e1f87a8db9
commit 5ff6e4377d
2 changed files with 16 additions and 13 deletions

View file

@ -63,8 +63,7 @@ export function ComposioTriggerDeploymentView({ projectId, deploymentId }: { pro
title={
<div className="flex items-center gap-3">
<Link href={`/projects/${projectId}/job-rules?tab=triggers`}>
<Button variant="secondary" size="sm">
<ArrowLeftIcon className="w-4 h-4 mr-2" />
<Button variant="secondary" size="sm" startContent={<ArrowLeftIcon className="w-4 h-4" />} className="whitespace-nowrap">
Back
</Button>
</Link>
@ -77,9 +76,9 @@ export function ComposioTriggerDeploymentView({ projectId, deploymentId }: { pro
onClick={() => setShowDeleteConfirm(true)}
variant="secondary"
size="sm"
className="flex items-center gap-2 bg-red-50 hover:bg-red-100 text-red-700 dark:bg-red-950 dark:hover:bg-red-900 dark:text-red-400 border border-red-200 dark:border-red-800"
startContent={<Trash2Icon className="w-4 h-4" />}
className="bg-red-50 hover:bg-red-100 text-red-700 dark:bg-red-950 dark:hover:bg-red-900 dark:text-red-400 border border-red-200 dark:border-red-800 whitespace-nowrap"
>
<Trash2Icon className="w-4 h-4" />
Delete
</Button>
</div>
@ -151,14 +150,15 @@ export function ComposioTriggerDeploymentView({ projectId, deploymentId }: { pro
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Delete External Trigger</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-6">Are you sure you want to delete this external trigger? This will remove the linked webhook in Composio and delete this deployment.</p>
<div className="flex gap-3 justify-end">
<Button variant="secondary" onClick={() => setShowDeleteConfirm(false)} disabled={deleting}>Cancel</Button>
<Button variant="secondary" onClick={() => setShowDeleteConfirm(false)} disabled={deleting} className="whitespace-nowrap">Cancel</Button>
<Button
variant="secondary"
onClick={handleDelete}
disabled={deleting}
className="flex items-center gap-2 bg-red-50 hover:bg-red-100 text-red-700 dark:bg-red-950 dark:hover:bg-red-900 dark:text-red-400 border border-red-200 dark:border-red-800"
isLoading={deleting}
startContent={<Trash2Icon className="w-4 h-4" />}
className="bg-red-50 hover:bg-red-100 text-red-700 dark:bg-red-950 dark:hover:bg-red-900 dark:text-red-400 border border-red-200 dark:border-red-800 whitespace-nowrap"
>
{deleting ? (<><Spinner size="sm" /> Deleting...</>) : (<><Trash2Icon className="w-4 h-4" /> Delete</>)}
{deleting ? 'Deleting...' : 'Delete'}
</Button>
</div>
</div>

View file

@ -5,6 +5,7 @@ import { Spinner, Link } from '@heroui/react';
import { Button } from '@/components/ui/button';
import { Panel } from '@/components/common/panel-common';
import { Plus, Trash2, ZapIcon, ChevronDown, ChevronUp, ArrowLeftIcon } from 'lucide-react';
import Image from 'next/image';
import { z } from 'zod';
import { ComposioTriggerDeployment } from '@/src/entities/models/composio-trigger-deployment';
import { ComposioTriggerType } from '@/src/entities/models/composio-trigger-type';
@ -330,10 +331,13 @@ export function TriggersTab({ projectId }: { projectId: string }) {
<a href={`/projects/${projectId}/job-rules/triggers/${trigger.id}`} className="block">
<div className="flex items-center gap-3 mb-1">
{trigger.logo && (
<img
<Image
src={trigger.logo}
alt={`${trigger.toolkitSlug} logo`}
className="w-5 h-5 rounded"
width={20}
height={20}
className="rounded"
unoptimized
/>
)}
{trigger.toolkitSlug && (
@ -364,10 +368,9 @@ export function TriggersTab({ projectId }: { projectId: string }) {
size="sm"
isLoading={deletingTrigger === trigger.id}
onClick={() => handleDeleteTrigger(trigger.id)}
startContent={<Trash2 className="w-4 h-4" />}
className="text-red-600 hover:text-red-700 hover:bg-red-50 dark:text-red-400 dark:hover:text-red-300 dark:hover:bg-red-950"
>
<Trash2 className="w-4 h-4" />
</Button>
/>
</div>
{/* Advanced Details Section - Collapsible */}