allow editing of hidden inputs in preview (#24370)

Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: crazywoola <427733928@qq.com>

web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx

@@ -118,8 +118,20 @@ const FormItem: FC<Props> = ({
     <div className={cn(className)}>
       {!isArrayLikeType && !isBooleanType && (
         <div className='system-sm-semibold mb-1 flex h-6 items-center gap-1 text-text-secondary'>
-          <div className='truncate'>{typeof payload.label === 'object' ? nodeKey : payload.label}</div>
+          <div className='truncate'>
-          {!payload.required && <span className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</span>}
+            {typeof payload.label === 'object' ? nodeKey : payload.label}
+          </div>
+          {payload.hide === true ? (
+            <span className='system-xs-regular text-text-tertiary'>
+              {t('workflow.panel.optional_and_hidden')}
+            </span>
+          ) : (
+            !payload.required && (
+              <span className='system-xs-regular text-text-tertiary'>
+                {t('workflow.panel.optional')}
+              </span>
+            )
+          )}
         </div>
       )}
       <div className='grow'>

web/app/components/workflow/panel/debug-and-preview/index.tsx

@@ -39,7 +39,7 @@ const DebugAndPreview = () => {
   const selectedNode = nodes.find(node => node.data.selected)
   const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
   const variables = startNode?.data.variables || []
-  const visibleVariables = variables.filter(v => v.hide !== true)
+  const visibleVariables = variables
 
   const [showConversationVariableModal, setShowConversationVariableModal] = useState(false)
 

web/app/components/workflow/panel/debug-and-preview/user-input.tsx

@@ -14,10 +14,11 @@ import cn from '@/utils/classnames'
 const UserInput = () => {
   const workflowStore = useWorkflowStore()
   const inputs = useStore(s => s.inputs)
+  const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
   const nodes = useNodes<StartNodeType>()
   const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
   const variables = startNode?.data.variables || []
-  const visibleVariables = variables.filter(v => v.hide !== true)
+  const visibleVariables = showDebugAndPreviewPanel ? variables : variables.filter(v => v.hide !== true)
 
   const handleValueChange = (variable: string, v: string) => {
     const {

web/i18n/en-US/workflow.ts

@@ -340,6 +340,7 @@ const translation = {
     optional: '(optional)',
     maximize: 'Maximize Canvas',
     minimize: 'Exit Full Screen',
+    optional_and_hidden: '(optional & hidden)',
   },
   nodes: {
     common: {

web/i18n/zh-Hans/workflow.ts

@@ -340,6 +340,7 @@ const translation = {
     moveToThisNode: '定位至此节点',
     maximize: '最大化画布',
     minimize: '退出最大化',
+    optional_and_hidden: '（选填 & 隐藏）',
   },
   nodes: {
     common: {