Replace export button with more actions button in workflow control panel (#24033)

web/app/components/workflow/operator/control.tsx

@@ -24,7 +24,7 @@ import { useStore } from '../store'
 import Divider from '../../base/divider'
 import AddBlock from './add-block'
 import TipPopup from './tip-popup'
-import ExportImage from './export-image'
+import MoreActions from './more-actions'
 import { useOperator } from './hooks'
 import cn from '@/utils/classnames'
 
@@ -89,7 +89,6 @@ const Control = () => {
         </div>
       </TipPopup>
       <Divider className='my-1 w-3.5' />
-      <ExportImage />
       <TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
         <div
           className={cn(
@@ -114,6 +113,7 @@ const Control = () => {
           {!maximizeCanvas && <RiAspectRatioLine className='h-4 w-4' />}
         </div>
       </TipPopup>
+      <MoreActions />
     </div>
   )
 }

web/app/components/workflow/operator/more-actions.tsx

@@ -5,10 +5,10 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiExportLine, RiMoreFill } from '@remixicon/react'
 import { toJpeg, toPng, toSvg } from 'html-to-image'
 import { useNodesReadOnly } from '../hooks'
 import TipPopup from './tip-popup'
-import { RiExportLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import {
@@ -19,7 +19,7 @@ import {
 import { getNodesBounds, useReactFlow } from 'reactflow'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 
-const ExportImage: FC = () => {
+const MoreActions: FC = () => {
   const { t } = useTranslation()
   const { getNodesReadOnly } = useNodesReadOnly()
   const reactFlow = useReactFlow()
@@ -52,14 +52,11 @@ const ExportImage: FC = () => {
       let filename = `${appDetail.name}`
 
       if (currentWorkflow) {
-        // Get all nodes and their bounds
         const nodes = reactFlow.getNodes()
         const nodesBounds = getNodesBounds(nodes)
 
-        // Save current viewport
         const currentViewport = reactFlow.getViewport()
 
-        // Calculate the required zoom to fit all nodes
         const viewportWidth = window.innerWidth
         const viewportHeight = window.innerHeight
         const zoom = Math.min(
@@ -68,30 +65,25 @@ const ExportImage: FC = () => {
           1,
         )
 
-        // Calculate center position
         const centerX = nodesBounds.x + nodesBounds.width / 2
         const centerY = nodesBounds.y + nodesBounds.height / 2
 
-        // Set viewport to show all nodes
         reactFlow.setViewport({
           x: viewportWidth / 2 - centerX * zoom,
           y: viewportHeight / 2 - centerY * zoom,
           zoom,
         })
 
-        // Wait for the transition to complete
         await new Promise(resolve => setTimeout(resolve, 300))
 
-        // Calculate actual content size with padding
-        const padding = 50 // More padding for better visualization
+        const padding = 50
         const contentWidth = nodesBounds.width + padding * 2
         const contentHeight = nodesBounds.height + padding * 2
 
-        // Export with higher quality for whole workflow
         const exportOptions = {
           filter,
-          backgroundColor: '#1a1a1a', // Dark background to match previous style
-          pixelRatio: 2, // Higher resolution for better zoom
+          backgroundColor: '#1a1a1a',
+          pixelRatio: 2,
           width: contentWidth,
           height: contentHeight,
           style: {
@@ -117,13 +109,11 @@ const ExportImage: FC = () => {
 
         filename += '-whole-workflow'
 
-        // Restore original viewport after a delay
         setTimeout(() => {
           reactFlow.setViewport(currentViewport)
         }, 500)
       }
- else {
-        // Current viewport export (existing functionality)
+      else {
         switch (type) {
           case 'png':
             dataUrl = await toPng(flowElement, { filter })
@@ -140,11 +130,9 @@ const ExportImage: FC = () => {
       }
 
       if (currentWorkflow) {
-        // For whole workflow, show preview first
         setPreviewUrl(dataUrl)
         setPreviewTitle(`${filename}.${type}`)
 
-        // Also auto-download
         const link = document.createElement('a')
         link.href = dataUrl
         link.download = `${filename}.${type}`
@@ -152,8 +140,7 @@ const ExportImage: FC = () => {
         link.click()
         document.body.removeChild(link)
       }
- else {
-        // For current view, just download
+      else {
         const link = document.createElement('a')
         link.href = dataUrl
         link.download = `${filename}.${type}`
@@ -179,14 +166,14 @@ const ExportImage: FC = () => {
       <PortalToFollowElem
         open={open}
         onOpenChange={setOpen}
-        placement="top-start"
+        placement="bottom-end"
         offset={{
-          mainAxis: 4,
-          crossAxis: -8,
+          mainAxis: -200,
+          crossAxis: 40,
         }}
       >
         <PortalToFollowElemTrigger>
-          <TipPopup title={t('workflow.common.exportImage')}>
+          <TipPopup title={t('workflow.common.moreActions')}>
             <div
               className={cn(
                 'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
@@ -194,13 +181,17 @@ const ExportImage: FC = () => {
               )}
               onClick={handleTrigger}
             >
-              <RiExportLine className='h-4 w-4' />
+              <RiMoreFill className='h-4 w-4' />
             </div>
           </TipPopup>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-10'>
           <div className='min-w-[180px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur text-text-secondary shadow-lg'>
             <div className='p-1'>
+              <div className='flex items-center gap-2 px-2 py-1 text-xs font-medium text-text-tertiary'>
+                <RiExportLine className='h-3 w-3' />
+                {t('workflow.common.exportImage')}
+              </div>
               <div className='px-2 py-1 text-xs font-medium text-text-tertiary'>
                 {t('workflow.common.currentView')}
               </div>
@@ -262,4 +253,4 @@ const ExportImage: FC = () => {
   )
 }
 
-export default memo(ExportImage)
+export default memo(MoreActions)

web/i18n/de-DE/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     tagBound: 'Anzahl der Apps, die dieses Tag verwenden',
     currentWorkflow: 'Aktueller Arbeitsablauf',
     currentView: 'Aktuelle Ansicht',
+    moreActions: 'Weitere Aktionen',
   },
   env: {
     envPanelTitle: 'Umgebungsvariablen',

web/i18n/en-US/workflow.ts

@@ -76,6 +76,7 @@ const translation = {
     exportSVG: 'Export as SVG',
     currentView: 'Current View',
     currentWorkflow: 'Current Workflow',
+    moreActions: 'More Actions',
     model: 'Model',
     workflowAsTool: 'Workflow as Tool',
     configureRequired: 'Configure Required',

web/i18n/es-ES/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     tagBound: 'Número de aplicaciones que utilizan esta etiqueta',
     currentView: 'Vista actual',
     currentWorkflow: 'Flujo de trabajo actual',
+    moreActions: 'Más acciones',
   },
   env: {
     envPanelTitle: 'Variables de Entorno',

web/i18n/fa-IR/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     tagBound: 'تعداد برنامه‌هایی که از این برچسب استفاده می‌کنند',
     currentView: 'نمای فعلی',
     currentWorkflow: 'گردش کار فعلی',
+    moreActions: 'اقدامات بیشتر',
   },
   env: {
     envPanelTitle: 'متغیرهای محیطی',

web/i18n/fr-FR/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     tagBound: 'Nombre d\'applications utilisant cette étiquette',
     currentView: 'Vue actuelle',
     currentWorkflow: 'Flux de travail actuel',
+    moreActions: 'Plus d’actions',
   },
   env: {
     envPanelTitle: 'Variables d\'Environnement',

web/i18n/hi-IN/workflow.ts

@@ -119,6 +119,7 @@ const translation = {
     tagBound: 'इस टैग का उपयोग करने वाले ऐप्स की संख्या',
     currentView: 'वर्तमान दृश्य',
     currentWorkflow: 'वर्तमान कार्यप्रवाह',
+    moreActions: 'अधिक क्रियाएँ',
   },
   env: {
     envPanelTitle: 'पर्यावरण चर',

web/i18n/it-IT/workflow.ts

@@ -120,6 +120,7 @@ const translation = {
     tagBound: 'Numero di app che utilizzano questo tag',
     currentWorkflow: 'Flusso di lavoro corrente',
     currentView: 'Vista corrente',
+    moreActions: 'Altre azioni',
   },
   env: {
     envPanelTitle: 'Variabili d\'Ambiente',

web/i18n/ja-JP/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     loadMore: 'さらに読み込む',
     noHistory: '履歴がありません',
     tagBound: 'このタグを使用しているアプリの数',
+    moreActions: 'さらにアクション',
   },
   env: {
     envPanelTitle: '環境変数',

web/i18n/ko-KR/workflow.ts

@@ -120,6 +120,7 @@ const translation = {
     tagBound: '이 태그를 사용하는 앱 수',
     currentView: '현재 보기',
     currentWorkflow: '현재 워크플로',
+    moreActions: '더 많은 작업',
   },
   env: {
     envPanelTitle: '환경 변수',

web/i18n/pl-PL/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     tagBound: 'Liczba aplikacji korzystających z tego tagu',
     currentWorkflow: 'Bieżący przepływ pracy',
     currentView: 'Bieżący widok',
+    moreActions: 'Więcej akcji',
   },
   env: {
     envPanelTitle: 'Zmienne Środowiskowe',

web/i18n/pt-BR/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     tagBound: 'Número de aplicativos usando esta tag',
     currentView: 'Visualização atual',
     currentWorkflow: 'Fluxo de trabalho atual',
+    moreActions: 'Mais ações',
   },
   env: {
     envPanelTitle: 'Variáveis de Ambiente',

web/i18n/ro-RO/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     tagBound: 'Numărul de aplicații care folosesc acest tag',
     currentView: 'Vizualizare curentă',
     currentWorkflow: 'Flux de lucru curent',
+    moreActions: 'Mai multe acțiuni',
   },
   env: {
     envPanelTitle: 'Variabile de Mediu',

web/i18n/ru-RU/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     tagBound: 'Количество приложений, использующих этот тег',
     currentView: 'Текущий вид',
     currentWorkflow: 'Текущий рабочий процесс',
+    moreActions: 'Больше действий',
   },
   env: {
     envPanelTitle: 'Переменные среды',

web/i18n/sl-SI/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     tagBound: 'Število aplikacij, ki uporabljajo to oznako',
     currentView: 'Trenutni pogled',
     currentWorkflow: 'Trenutni potek dela',
+    moreActions: 'Več dejanj',
   },
   env: {
     modal: {

web/i18n/th-TH/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     tagBound: 'จำนวนแอปพลิเคชันที่ใช้แท็กนี้',
     currentWorkflow: 'เวิร์กโฟลว์ปัจจุบัน',
     currentView: 'ปัจจุบัน View',
+    moreActions: 'การดําเนินการเพิ่มเติม',
   },
   env: {
     envPanelTitle: 'ตัวแปรสภาพแวดล้อม',

web/i18n/tr-TR/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     tagBound: 'Bu etiketi kullanan uygulama sayısı',
     currentView: 'Geçerli Görünüm',
     currentWorkflow: 'Mevcut İş Akışı',
+    moreActions: 'Daha Fazla Eylem',
   },
   env: {
     envPanelTitle: 'Çevre Değişkenleri',

web/i18n/uk-UA/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     tagBound: 'Кількість додатків, що використовують цей тег',
     currentView: 'Поточний вигляд',
     currentWorkflow: 'Поточний робочий процес',
+    moreActions: 'Більше дій',
   },
   env: {
     envPanelTitle: 'Змінні середовища',

web/i18n/vi-VN/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     tagBound: 'Số lượng ứng dụng sử dụng thẻ này',
     currentWorkflow: 'Quy trình làm việc hiện tại',
     currentView: 'Hiện tại View',
+    moreActions: 'Hành động khác',
   },
   env: {
     envPanelTitle: 'Biến Môi Trường',

web/i18n/zh-Hans/workflow.ts

@@ -75,6 +75,7 @@ const translation = {
     exportSVG: '导出为 SVG',
     currentView: '当前视图',
     currentWorkflow: '整个工作流',
+    moreActions: '更多操作',
     model: '模型',
     workflowAsTool: '发布为工具',
     configureRequired: '需要进行配置',

web/i18n/zh-Hant/workflow.ts

@@ -116,6 +116,7 @@ const translation = {
     tagBound: '使用此標籤的應用程式數量',
     currentView: '當前檢視',
     currentWorkflow: '當前工作流程',
+    moreActions: '更多動作',
   },
   env: {
     envPanelTitle: '環境變數',