Remove workflow features button (#24085)

web/app/components/workflow-app/components/workflow-children.tsx

@@ -14,10 +14,6 @@ import { useEventEmitterContextContext } from '@/context/event-emitter'
 import WorkflowHeader from './workflow-header'
 import WorkflowPanel from './workflow-panel'
 import dynamic from 'next/dynamic'
-
-const Features = dynamic(() => import('@/app/components/workflow/features'), {
-  ssr: false,
-})
 const UpdateDSLModal = dynamic(() => import('@/app/components/workflow/update-dsl-modal'), {
   ssr: false,
 })
@@ -28,7 +24,6 @@ const DSLExportConfirmModal = dynamic(() => import('@/app/components/workflow/ds
 const WorkflowChildren = () => {
   const { eventEmitter } = useEventEmitterContextContext()
   const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([])
-  const showFeaturesPanel = useStore(s => s.showFeaturesPanel)
   const showImportDSLModal = useStore(s => s.showImportDSLModal)
   const setShowImportDSLModal = useStore(s => s.setShowImportDSLModal)
   const {
@@ -47,9 +42,6 @@ const WorkflowChildren = () => {
   return (
     <>
       <PluginDependency />
-      {
-        showFeaturesPanel && <Features />
-      }
       {
         showImportDSLModal && (
           <UpdateDSLModal

web/app/components/workflow-app/components/workflow-header/app-publisher-trigger.tsx

@@ -4,7 +4,6 @@ import {
   useMemo,
 } from 'react'
 import { useStore as useReactflowStore } from 'reactflow'
-import { RiApps2AddLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import {
   useStore,
@@ -15,7 +14,6 @@ import {
   useNodesReadOnly,
   useNodesSyncDraft,
 } from '@/app/components/workflow/hooks'
-import Button from '@/app/components/base/button'
 import AppPublisher from '@/app/components/app/app-publisher'
 import { useFeatures } from '@/app/components/base/features/hooks'
 import {
@@ -27,20 +25,14 @@ import { useInvalidateAppWorkflow, usePublishWorkflow, useResetWorkflowVersionHi
 import type { PublishWorkflowParams } from '@/types/workflow'
 import { fetchAppDetail } from '@/service/apps'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
 
-const FeaturesTrigger = () => {
+const AppPublisherTrigger = () => {
   const { t } = useTranslation()
-  const { theme } = useTheme()
   const workflowStore = useWorkflowStore()
   const appDetail = useAppStore(s => s.appDetail)
   const appID = appDetail?.id
   const setAppDetail = useAppStore(s => s.setAppDetail)
-  const {
-    nodesReadOnly,
-    getNodesReadOnly,
-  } = useNodesReadOnly()
+  const { nodesReadOnly } = useNodesReadOnly()
   const publishedAt = useStore(s => s.publishedAt)
   const draftUpdatedAt = useStore(s => s.draftUpdatedAt)
   const toolPublished = useStore(s => s.toolPublished)
@@ -69,17 +61,6 @@ const FeaturesTrigger = () => {
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const { notify } = useToastContext()
 
-  const handleShowFeatures = useCallback(() => {
-    const {
-      showFeaturesPanel,
-      isRestoring,
-      setShowFeaturesPanel,
-    } = workflowStore.getState()
-    if (getNodesReadOnly() && !isRestoring)
-      return
-    setShowFeaturesPanel(!showFeaturesPanel)
-  }, [workflowStore, getNodesReadOnly])
-
   const resetWorkflowVersionHistory = useResetWorkflowVersionHistory(appDetail!.id)
 
   const updateAppDetail = useCallback(async () => {
@@ -91,6 +72,7 @@ const FeaturesTrigger = () => {
       console.error(error)
     }
   }, [appID, setAppDetail])
+
   const { mutateAsync: publishWorkflow } = usePublishWorkflow(appID!)
   const updatePublishedWorkflow = useInvalidateAppWorkflow()
   const onPublish = useCallback(async (params?: PublishWorkflowParams) => {
@@ -123,32 +105,20 @@ const FeaturesTrigger = () => {
   }, [workflowStore])
 
   return (
-    <>
-      <Button
-        className={cn(
-          'text-components-button-secondary-text',
-          theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
-        )}
-        onClick={handleShowFeatures}
-      >
-        <RiApps2AddLine className='mr-1 h-4 w-4 text-components-button-secondary-text' />
-        {t('workflow.common.features')}
-      </Button>
-      <AppPublisher
-        {...{
-          publishedAt,
-          draftUpdatedAt,
-          disabled: nodesReadOnly,
-          toolPublished,
-          inputs: variables,
-          onRefreshData: handleToolConfigureUpdate,
-          onPublish,
-          onToggle: onPublisherToggle,
-          crossAxisOffset: 4,
-        }}
-      />
-    </>
+    <AppPublisher
+      {...{
+        publishedAt,
+        draftUpdatedAt,
+        disabled: nodesReadOnly,
+        toolPublished,
+        inputs: variables,
+        onRefreshData: handleToolConfigureUpdate,
+        onPublish,
+        onToggle: onPublisherToggle,
+        crossAxisOffset: 4,
+      }}
+    />
   )
 }
 
-export default memo(FeaturesTrigger)
+export default memo(AppPublisherTrigger)

web/app/components/workflow-app/components/workflow-header/index.tsx

@@ -3,7 +3,7 @@ import type { HeaderProps } from '@/app/components/workflow/header'
 import Header from '@/app/components/workflow/header'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import ChatVariableTrigger from './chat-variable-trigger'
-import FeaturesTrigger from './features-trigger'
+import AppPublisherTrigger from './app-publisher-trigger'
 import { useResetWorkflowVersionHistory } from '@/service/use-workflow'
 
 const WorkflowHeader = () => {
@@ -15,7 +15,7 @@ const WorkflowHeader = () => {
       normal: {
         components: {
           left: <ChatVariableTrigger />,
-          middle: <FeaturesTrigger />,
+          middle: <AppPublisherTrigger />,
         },
       },
       restoring: {

web/app/components/workflow/features.tsx

@@ -1,60 +0,0 @@
-import {
-  memo,
-  useCallback,
-} from 'react'
-import { useNodes } from 'reactflow'
-import { useStore } from './store'
-import {
-  useIsChatMode,
-  useNodesReadOnly,
-  useNodesSyncDraft,
-} from './hooks'
-import { type CommonNodeType, type InputVar, InputVarType, type Node } from './types'
-import useConfig from './nodes/start/use-config'
-import type { StartNodeType } from './nodes/start/types'
-import type { PromptVariable } from '@/models/debug'
-import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
-
-const Features = () => {
-  const setShowFeaturesPanel = useStore(s => s.setShowFeaturesPanel)
-  const isChatMode = useIsChatMode()
-  const { nodesReadOnly } = useNodesReadOnly()
-  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
-  const nodes = useNodes<CommonNodeType>()
-
-  const startNode = nodes.find(node => node.data.type === 'start')
-  const { id, data } = startNode as Node<StartNodeType>
-  const { handleAddVariable } = useConfig(id, data)
-
-  const handleAddOpeningStatementVariable = (variables: PromptVariable[]) => {
-    const newVariable = variables[0]
-    const startNodeVariable: InputVar = {
-      variable: newVariable.key,
-      label: newVariable.name,
-      type: InputVarType.textInput,
-      max_length: newVariable.max_length,
-      required: newVariable.required || false,
-      options: [],
-    }
-    handleAddVariable(startNodeVariable)
-  }
-
-  const handleFeaturesChange = useCallback(() => {
-    handleSyncWorkflowDraft()
-    setShowFeaturesPanel(true)
-  }, [handleSyncWorkflowDraft, setShowFeaturesPanel])
-
-  return (
-    <NewFeaturePanel
-      show
-      isChatMode={isChatMode}
-      disabled={nodesReadOnly}
-      onChange={handleFeaturesChange}
-      onClose={() => setShowFeaturesPanel(false)}
-      onAutoAddPromptVariable={handleAddOpeningStatementVariable}
-      workflowVariables={data.variables}
-    />
-  )
-}
-
-export default memo(Features)

web/app/components/workflow/shortcuts-name.tsx

@@ -23,7 +23,7 @@ const ShortcutsName = ({
             key={key}
             className={cn(
               'system-kbd flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray capitalize',
-              textColor === 'secondary' && 'text-text-secondary',
+              textColor === 'secondary' && 'text-text-tertiary',
             )}
           >
             {getKeyboardKeyNameBySystem(key)}

web/app/components/workflow/store/workflow/panel-slice.ts

@@ -2,8 +2,6 @@ import type { StateCreator } from 'zustand'
 
 export type PanelSliceShape = {
   panelWidth: number
-  showFeaturesPanel: boolean
-  setShowFeaturesPanel: (showFeaturesPanel: boolean) => void
   showWorkflowVersionHistoryPanel: boolean
   setShowWorkflowVersionHistoryPanel: (showWorkflowVersionHistoryPanel: boolean) => void
   showInputsPanel: boolean
@@ -28,8 +26,6 @@ export type PanelSliceShape = {
 
 export const createPanelSlice: StateCreator<PanelSliceShape> = set => ({
   panelWidth: localStorage.getItem('workflow-node-panel-width') ? Number.parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 420,
-  showFeaturesPanel: false,
-  setShowFeaturesPanel: showFeaturesPanel => set(() => ({ showFeaturesPanel })),
   showWorkflowVersionHistoryPanel: false,
   setShowWorkflowVersionHistoryPanel: showWorkflowVersionHistoryPanel => set(() => ({ showWorkflowVersionHistoryPanel })),
   showInputsPanel: false,