feat: support copy to clipboard in input component

web/app/components/base/form/components/base/base-field.tsx

@@ -90,6 +90,7 @@ const BaseField = ({
     dynamicSelectParams,
     multiple = false,
     tooltip,
+    showCopy,
   } = formSchema
   const disabled = propsDisabled || formSchemaDisabled
 
@@ -202,6 +203,7 @@ const BaseField = ({
               disabled={disabled}
               placeholder={memorizedPlaceholder}
               {...getExtraProps(formItemType)}
+              showCopyIcon={showCopy}
             />
           )
         }

web/app/components/base/form/types.ts

@@ -71,6 +71,7 @@ export type FormSchema = {
   validators?: AnyValidators
   showRadioUI?: boolean
   disabled?: boolean
+  showCopy?: boolean
   dynamicSelectParams?: {
     plugin_id: string
     provider: string

web/app/components/base/input/index.tsx

@@ -1,10 +1,11 @@
+import cn from '@/utils/classnames'
+import { RiCloseCircleFill, RiErrorWarningLine, RiSearchLine } from '@remixicon/react'
+import { type VariantProps, cva } from 'class-variance-authority'
+import { noop } from 'lodash-es'
 import type { CSSProperties, ChangeEventHandler, FocusEventHandler } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiCloseCircleFill, RiErrorWarningLine, RiSearchLine } from '@remixicon/react'
-import { type VariantProps, cva } from 'class-variance-authority'
-import cn from '@/utils/classnames'
-import { noop } from 'lodash-es'
+import { CopyFeedbackNew } from '../copy-feedback'
 
 export const inputVariants = cva(
   '',
@@ -24,6 +25,7 @@ export const inputVariants = cva(
 export type InputProps = {
   showLeftIcon?: boolean
   showClearIcon?: boolean
+  showCopyIcon?: boolean
   onClear?: () => void
   disabled?: boolean
   destructive?: boolean
@@ -41,6 +43,7 @@ const Input = ({
   destructive,
   showLeftIcon,
   showClearIcon,
+  showCopyIcon,
   onClear,
   wrapperClassName,
   className,
@@ -92,8 +95,8 @@ const Input = ({
           showLeftIcon && size === 'large' && 'pl-7',
           showClearIcon && value && 'pr-[26px]',
           showClearIcon && value && size === 'large' && 'pr-7',
-          destructive && 'pr-[26px]',
-          destructive && size === 'large' && 'pr-7',
+          (destructive || showCopyIcon) && 'pr-[26px]',
+          (destructive || showCopyIcon) && size === 'large' && 'pr-7',
           disabled && 'cursor-not-allowed border-transparent bg-components-input-bg-disabled text-components-input-text-filled-disabled hover:border-transparent hover:bg-components-input-bg-disabled',
           destructive && 'border-components-input-border-destructive bg-components-input-bg-destructive text-components-input-text-filled hover:border-components-input-border-destructive hover:bg-components-input-bg-destructive focus:border-components-input-border-destructive focus:bg-components-input-bg-destructive',
           className,
@@ -115,6 +118,14 @@ const Input = ({
       {destructive && (
         <RiErrorWarningLine className='absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-text-destructive-secondary' />
       )}
+      {showCopyIcon && (
+        <div className={cn('group absolute right-0 top-1/2 -translate-y-1/2 cursor-pointer')}>
+          <CopyFeedbackNew
+            content={String(value ?? '')}
+            className='!h-7 !w-7 hover:bg-transparent'
+          />
+        </div>
+      )}
       {
         unit && (
           <div className='system-sm-regular absolute right-2 top-1/2 -translate-y-1/2 text-text-tertiary'>

web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx

@@ -284,6 +284,7 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
       onConfirm={handleConfirm}
       disabled={isVerifyingCredentials || isBuilding}
       bottomSlot={currentStep === ApiKeyStep.Verify ? <EncryptedBottom /> : null}
+      size={createType === SupportedCreationMethods.MANUAL ? 'md' : 'sm'}
     >
       {createType === SupportedCreationMethods.APIKEY && <MultiSteps currentStep={currentStep} />}
       {currentStep === ApiKeyStep.Verify && (
@@ -321,12 +322,7 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
               default: subscriptionBuilder?.endpoint || '',
               disabled: true,
               tooltip: t('pluginTrigger.modal.form.callbackUrl.tooltip'),
-              // extra: subscriptionBuilder?.endpoint ? (
-              //   <CopyFeedbackNew
-              //     className='absolute right-1 top-1/2 h-4 w-4 -translate-y-1/2 text-text-tertiary'
-              //     content={subscriptionBuilder?.endpoint || ''}
-              //   />
-              // ) : undefined,
+              showCopy: true,
             },
           ]}
           ref={subscriptionFormRef}

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

@@ -1,11 +1,11 @@
 '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 Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
 import { CreateButtonType, CreateSubscriptionButton } from './create'
 import SubscriptionCard from './subscription-card'
-import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
 
 type SubscriptionListViewProps = {
   subscriptions?: TriggerSubscription[]
@@ -20,15 +20,8 @@ export const SubscriptionListView: React.FC<SubscriptionListViewProps> = ({
 }) => {
   const { t } = useTranslation()
 
-  if (isLoading) {
-    return (
-      <div className={cn('border-divider-subtle px-4 py-2', showTopBorder && 'border-t')}>
-        <div className='flex items-center justify-center py-8'>
-          <div className='text-text-tertiary'>{t('common.dataLoading')}</div>
-        </div>
-      </div>
-    )
-  }
+  if (isLoading) return null
+
   const subscriptionCount = subscriptions?.length || 0
 
   return (

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

@@ -20,6 +20,11 @@ type Props = {
   className?: string
 }
 
+enum LogTypeEnum {
+  REQUEST = 'REQUEST',
+  RESPONSE = 'RESPONSE',
+}
+
 const LogViewer = ({ logs, className }: Props) => {
   const { t } = useTranslation()
   const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set())
@@ -56,8 +61,8 @@ const LogViewer = ({ logs, className }: Props) => {
     }
   }
 
-  const renderJsonContent = (data: any, title: string) => {
-    const parsedData = title === 'REQUEST' ? parseRequestData(data) : data
+  const renderJsonContent = (originalData: any, title: LogTypeEnum) => {
+    const parsedData = title === LogTypeEnum.REQUEST ? { headers: originalData.headers, data: parseRequestData(originalData.data) } : originalData
     const isJsonObject = typeof parsedData === 'object'
 
     if (isJsonObject) {
@@ -127,13 +132,13 @@ const LogViewer = ({ logs, className }: Props) => {
               <div className='pointer-events-none absolute left-0 top-0 h-7 w-[179px]'>
                 <svg xmlns="http://www.w3.org/2000/svg" width="179" height="28" viewBox="0 0 179 28" fill="none" className='h-full w-full'>
                   <g filter="url(#filter0_f_error_glow)">
-                    <circle cx="27" cy="14" r="32" fill="#F04438" fillOpacity="0.25"/>
+                    <circle cx="27" cy="14" r="32" fill="#F04438" fillOpacity="0.25" />
                   </g>
                   <defs>
                     <filter id="filter0_f_error_glow" x="-125" y="-138" width="304" height="304" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
-                      <feFlood floodOpacity="0" result="BackgroundImageFix"/>
-                      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-                      <feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur"/>
+                      <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                      <feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur" />
                     </filter>
                   </defs>
                 </svg>
@@ -174,8 +179,8 @@ const LogViewer = ({ logs, className }: Props) => {
 
             {isExpanded && (
               <div className='flex flex-col gap-1 px-1 pb-1'>
-                {renderJsonContent(log.request.data, 'REQUEST')}
-                {renderJsonContent(log.response.data, 'RESPONSE')}
+                {renderJsonContent(log.request, LogTypeEnum.REQUEST)}
+                {renderJsonContent(log.response, LogTypeEnum.RESPONSE)}
               </div>
             )}
           </div>