feat(trigger): update subscription list after saving draft

web/app/components/plugins/plugin-detail-panel/subscription-list/index.tsx

@@ -9,10 +9,15 @@ export enum SubscriptionListMode {
   SELECTOR = 'selector',
 }
 
+export type SimpleSubscription = {
+  id: string,
+  name: string
+}
+
 type SubscriptionListProps = {
   mode?: SubscriptionListMode
   selectedId?: string
-  onSelect?: ({ id, name }: { id: string, name: string }) => void
+  onSelect?: (v: SimpleSubscription, callback?: () => void) => void
 }
 
 export { SubscriptionSelectorEntry } from './selector-entry'
@@ -22,7 +27,7 @@ export const SubscriptionList = withErrorBoundary(({
   selectedId,
   onSelect,
 }: SubscriptionListProps) => {
-  const { subscriptions, isLoading } = useSubscriptionList()
+  const { isLoading, refetch } = useSubscriptionList()
   if (isLoading) {
     return (
       <div className='flex items-center justify-center py-4'>
@@ -34,16 +39,13 @@ export const SubscriptionList = withErrorBoundary(({
   if (mode === SubscriptionListMode.SELECTOR) {
     return (
       <SubscriptionSelectorView
-        subscriptions={subscriptions}
         selectedId={selectedId}
-        onSelect={onSelect}
+        onSelect={(v) => {
+          onSelect?.(v, refetch)
+        }}
       />
     )
   }
 
-  return (
-    <SubscriptionListView
-      subscriptions={subscriptions}
-    />
-  )
+  return <SubscriptionListView />
 })

web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx

@@ -1,22 +1,21 @@
 'use client'
 import Tooltip from '@/app/components/base/tooltip'
-import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
 import cn from '@/utils/classnames'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { CreateButtonType, CreateSubscriptionButton } from './create'
 import SubscriptionCard from './subscription-card'
+import { useSubscriptionList } from './use-subscription-list'
 
 type SubscriptionListViewProps = {
-  subscriptions?: TriggerSubscription[]
   showTopBorder?: boolean
 }
 
 export const SubscriptionListView: React.FC<SubscriptionListViewProps> = ({
-  subscriptions,
   showTopBorder = false,
 }) => {
   const { t } = useTranslation()
+  const { subscriptions } = useSubscriptionList()
 
   const subscriptionCount = subscriptions?.length || 0
 

web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx

@@ -4,6 +4,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
 import { SubscriptionList, SubscriptionListMode } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
 import cn from '@/utils/classnames'
 import { RiArrowDownSLine, RiWebhookLine } from '@remixicon/react'
@@ -74,7 +75,7 @@ const SubscriptionTriggerButton: React.FC<SubscriptionTriggerButtonProps> = ({
 
 export const SubscriptionSelectorEntry = ({ selectedId, onSelect }: {
   selectedId?: string,
-  onSelect: ({ id, name }: { id: string, name: string }) => void
+  onSelect: (v: SimpleSubscription, callback?: () => void) => void
 }) => {
   const [isOpen, setIsOpen] = useState(false)
 

web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx

@@ -8,19 +8,19 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { CreateButtonType, CreateSubscriptionButton } from './create'
 import { DeleteConfirm } from './delete-confirm'
+import { useSubscriptionList } from './use-subscription-list'
 
 type SubscriptionSelectorProps = {
-  subscriptions?: TriggerSubscription[]
   selectedId?: string
   onSelect?: ({ id, name }: { id: string, name: string }) => void
 }
 
 export const SubscriptionSelectorView: React.FC<SubscriptionSelectorProps> = ({
-  subscriptions,
   selectedId,
   onSelect,
 }) => {
   const { t } = useTranslation()
+  const { subscriptions } = useSubscriptionList()
   const [deletedSubscription, setDeletedSubscription] = useState<TriggerSubscription | null>(null)
   const subscriptionCount = subscriptions?.length || 0
 
@@ -39,47 +39,33 @@ export const SubscriptionSelectorView: React.FC<SubscriptionSelectorProps> = ({
         />
       </div>}
       <div className='max-h-[320px] overflow-y-auto'>
-        {subscriptionCount > 0 ? (
-          <>
-            {subscriptions?.map(subscription => (
-              <button
-                key={subscription.id}
-                className={cn(
-                  'group flex w-full items-center justify-between rounded-lg p-1 text-left transition-colors',
-                  'hover:bg-state-base-hover has-[.subscription-delete-btn:hover]:!bg-state-destructive-hover',
-                  selectedId === subscription.id && 'bg-state-base-hover',
-                )}
-                onClick={() => onSelect?.(subscription)}
-              >
-                <div className='flex items-center'>
-                  {selectedId === subscription.id && (
-                    <RiCheckLine className='mr-2 h-4 w-4 shrink-0 text-text-accent' />
-                  )}
-                  <RiWebhookLine className={cn('mr-1.5 h-3.5 w-3.5 text-text-secondary', selectedId !== subscription.id && 'ml-6')} />
-                  <span className='system-md-regular leading-6 text-text-secondary'>
-                    {subscription.name}
-                  </span>
-                </div>
-                <ActionButton onClick={(e) => {
-                  e.stopPropagation()
-                  setDeletedSubscription(subscription)
-                }} className='subscription-delete-btn hidden shrink-0 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive group-hover:flex'>
-                  <RiDeleteBinLine className='size-4' />
-                </ActionButton>
-              </button>
-            ))}
-          </>
-        ) : (
-          // todo: refactor this
-          <div className='p-2 text-center'>
-            <div className='mb-2 text-sm text-text-tertiary'>
-              {t('pluginTrigger.subscription.empty.description')}
+        {subscriptions?.map(subscription => (
+          <button
+            key={subscription.id}
+            className={cn(
+              'group flex w-full items-center justify-between rounded-lg p-1 text-left transition-colors',
+              'hover:bg-state-base-hover has-[.subscription-delete-btn:hover]:!bg-state-destructive-hover',
+              selectedId === subscription.id && 'bg-state-base-hover',
+            )}
+            onClick={() => onSelect?.(subscription)}
+          >
+            <div className='flex items-center'>
+              {selectedId === subscription.id && (
+                <RiCheckLine className='mr-2 h-4 w-4 shrink-0 text-text-accent' />
+              )}
+              <RiWebhookLine className={cn('mr-1.5 h-3.5 w-3.5 text-text-secondary', selectedId !== subscription.id && 'ml-6')} />
+              <span className='system-md-regular leading-6 text-text-secondary'>
+                {subscription.name}
+              </span>
             </div>
-            <CreateSubscriptionButton
-              buttonType={CreateButtonType.FULL_BUTTON}
-            />
-          </div>
-        )}
+            <ActionButton onClick={(e) => {
+              e.stopPropagation()
+              setDeletedSubscription(subscription)
+            }} className='subscription-delete-btn hidden shrink-0 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive group-hover:flex'>
+              <RiDeleteBinLine className='size-4' />
+            </ActionButton>
+          </button>
+        ))}
       </div>
       {deletedSubscription && (
         <DeleteConfirm