feat: version tag (#14949)

web/app/components/tools/workflow-tool/configure-button.tsx

@@ -2,10 +2,10 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
+import { RiArrowRightUpLine, RiHammerLine } from '@remixicon/react'
+import Divider from '../../base/divider'
 import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
-import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
-import { Tools } from '@/app/components/base/icons/src/vender/line/others'
 import Indicator from '@/app/components/header/indicator'
 import WorkflowToolModal from '@/app/components/tools/workflow-tool'
 import Loading from '@/app/components/base/loading'
@@ -13,6 +13,7 @@ import Toast from '@/app/components/base/toast'
 import { createWorkflowToolProvider, fetchWorkflowToolDetailByAppID, saveWorkflowToolProvider } from '@/service/tools'
 import type { Emoji, WorkflowToolProviderParameter, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '@/app/components/tools/types'
 import type { InputVar } from '@/app/components/workflow/types'
+import type { PublishWorkflowParams } from '@/types/workflow'
 import { useAppContext } from '@/context/app-context'
 import { useInvalidateAllWorkflowTools } from '@/service/use-tools'
 
@@ -25,7 +26,7 @@ type Props = {
   name: string
   description: string
   inputs?: InputVar[]
-  handlePublish: () => void
+  handlePublish: (params?: PublishWorkflowParams) => Promise<void>
   onRefreshData?: () => void
 }
 
@@ -174,61 +175,74 @@ const WorkflowToolConfigureButton = ({
 
   return (
     <>
-      <div className='mt-2 pt-2 border-t-[0.5px] border-divider-regular'>
-        {(!published || !isLoading) && (
-          <div className={cn(
-            'group bg-background-section-burn rounded-lg transition-colors',
-            disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'cursor-pointer',
-            !disabled && !published && 'hover:bg-primary-50',
-          )}>
-            {isCurrentWorkspaceManager
-              ? (
+      <Divider type='horizontal' className='h-[1px] bg-divider-subtle' />
+      {(!published || !isLoading) && (
+        <div className={cn(
+          'group bg-background-section-burn rounded-lg transition-colors',
+          disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'cursor-pointer',
+          !disabled && !published && 'hover:bg-state-accent-hover',
+        )}>
+          {isCurrentWorkspaceManager
+            ? (
+              <div
+                className='flex justify-start items-center gap-2 p-2 pl-2.5'
+                onClick={() => !disabled && !published && setShowModal(true)}
+              >
+                <RiHammerLine className={cn('relative w-4 h-4 text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')} />
                 <div
-                  className='flex justify-start items-center text-text-primary gap-2 px-2.5 py-2'
-                  onClick={() => !disabled && !published && setShowModal(true)}
+                  title={t('workflow.common.workflowAsTool') || ''}
+                  className={cn('grow shrink basis-0 system-sm-medium text-text-secondary truncate', !disabled && !published && 'group-hover:text-text-accent')}
                 >
-                  <Tools className={cn('relative w-4 h-4', !disabled && !published && 'group-hover:text-primary-600')} />
-                  <div title={t('workflow.common.workflowAsTool') || ''} className={cn('grow shrink basis-0 text-[13px] font-medium leading-[18px] truncate', !disabled && !published && 'group-hover:text-primary-600')}>{t('workflow.common.workflowAsTool')}</div>
-                  {!published && (
-                    <span className='shrink-0 px-1 border border-divider-regular rounded-[5px] bg-background-default-subtle text-[10px] font-medium leading-[18px] text-text-tertiary'>{t('workflow.common.configureRequired').toLocaleUpperCase()}</span>
-                  )}
-                </div>)
-              : (
+                  {t('workflow.common.workflowAsTool')}
+                </div>
+                {!published && (
+                  <span className='shrink-0 px-1 py-0.5 border border-divider-deep rounded-[5px] bg-components-badge-bg-dimm system-2xs-medium-uppercase text-text-tertiary'>
+                    {t('workflow.common.configureRequired')}
+                  </span>
+                )}
+              </div>)
+            : (
+              <div
+                className='flex justify-start items-center gap-2 p-2 pl-2.5'
+              >
+                <RiHammerLine className='w-4 h-4 text-text-tertiary' />
                 <div
-                  className='flex justify-start items-center gap-2 px-2.5 py-2'
+                  title={t('workflow.common.workflowAsTool') || ''}
+                  className='grow shrink basis-0 system-sm-medium truncate text-text-tertiary'
                 >
-                  <Tools className='w-4 h-4 text-text-tertiary' />
-                  <div title={t('workflow.common.workflowAsTool') || ''} className='grow shrink basis-0 text-[13px] font-medium leading-[18px] truncate text-text-tertiary'>{t('workflow.common.workflowAsTool')}</div>
+                  {t('workflow.common.workflowAsTool')}
                 </div>
-              )}
-            {published && (
-              <div className='px-2.5 py-2 border-t-[0.5px] border-divider-regular'>
-                <div className='flex justify-between'>
-                  <Button
-                    size='small'
-                    className='w-[140px]'
-                    onClick={() => setShowModal(true)}
-                    disabled={!isCurrentWorkspaceManager}
-                  >
-                    {t('workflow.common.configure')}
-                    {outdated && <Indicator className='ml-1' color={'yellow'} />}
-                  </Button>
-                  <Button
-                    size='small'
-                    className='w-[140px]'
-                    onClick={() => router.push('/tools?category=workflow')}
-                  >
-                    {t('workflow.common.manageInTools')}
-                    <ArrowUpRight className='ml-1' />
-                  </Button>
-                </div>
-                {outdated && <div className='mt-1 text-xs leading-[18px] text-[#dc6803]'>{t('workflow.common.workflowAsToolTip')}</div>}
               </div>
             )}
-          </div>
-        )}
-        {published && isLoading && <div className='pt-2'><Loading type='app' /></div>}
-      </div>
+          {published && (
+            <div className='px-2.5 py-2 border-t-[0.5px] border-divider-regular'>
+              <div className='flex justify-between gap-x-2'>
+                <Button
+                  size='small'
+                  className='w-[140px]'
+                  onClick={() => setShowModal(true)}
+                  disabled={!isCurrentWorkspaceManager}
+                >
+                  {t('workflow.common.configure')}
+                  {outdated && <Indicator className='ml-1' color={'yellow'} />}
+                </Button>
+                <Button
+                  size='small'
+                  className='w-[140px]'
+                  onClick={() => router.push('/tools?category=workflow')}
+                >
+                  {t('workflow.common.manageInTools')}
+                  <RiArrowRightUpLine className='ml-1 w-4 h-4' />
+                </Button>
+              </div>
+              {outdated && <div className='mt-1 text-xs leading-[18px] text-text-warning'>
+                {t('workflow.common.workflowAsToolTip')}
+              </div>}
+            </div>
+          )}
+        </div>
+      )}
+      {published && isLoading && <div className='pt-2'><Loading type='app' /></div>}
       {showModal && (
         <WorkflowToolModal
           isAdd={!published}