feat: hide run detail in webapps and installed apps (#4289)

web/app/components/workflow/run/node.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { useTranslation } from 'react-i18next'
 import type { FC } from 'react'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import cn from 'classnames'
 import BlockIcon from '../block-icon'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
@@ -14,10 +14,20 @@ import type { NodeTracing } from '@/types/workflow'
 type Props = {
   nodeInfo: NodeTracing
   hideInfo?: boolean
+  hideProcessDetail?: boolean
 }
 
-const NodePanel: FC<Props> = ({ nodeInfo, hideInfo = false }) => {
-  const [collapseState, setCollapseState] = useState<boolean>(true)
+const NodePanel: FC<Props> = ({
+  nodeInfo,
+  hideInfo = false,
+  hideProcessDetail,
+}) => {
+  const [collapseState, doSetCollapseState] = useState<boolean>(true)
+  const setCollapseState = useCallback((state: boolean) => {
+    if (hideProcessDetail)
+      return
+    doSetCollapseState(state)
+  }, [hideProcessDetail])
   const { t } = useTranslation()
 
   const getTime = (time: number) => {
@@ -39,7 +49,7 @@ const NodePanel: FC<Props> = ({ nodeInfo, hideInfo = false }) => {
 
   useEffect(() => {
     setCollapseState(!nodeInfo.expand)
-  }, [nodeInfo.expand])
+  }, [nodeInfo.expand, setCollapseState])
 
   return (
     <div className={cn('px-4 py-1', hideInfo && '!p-0')}>
@@ -52,12 +62,15 @@ const NodePanel: FC<Props> = ({ nodeInfo, hideInfo = false }) => {
           )}
           onClick={() => setCollapseState(!collapseState)}
         >
-          <ChevronRight
-            className={cn(
-              'shrink-0 w-3 h-3 mr-1 text-gray-400 transition-all group-hover:text-gray-500',
-              !collapseState && 'rotate-90',
-            )}
-          />
+          {!hideProcessDetail && (
+            <ChevronRight
+              className={cn(
+                'shrink-0 w-3 h-3 mr-1 text-gray-400 transition-all group-hover:text-gray-500',
+                !collapseState && 'rotate-90',
+              )}
+            />
+          )}
+
           <BlockIcon size={hideInfo ? 'xs' : 'sm'} className={cn('shrink-0 mr-2', hideInfo && '!mr-1')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
           <div className={cn(
             'grow text-gray-700 text-[13px] leading-[16px] font-semibold truncate',
@@ -77,12 +90,12 @@ const NodePanel: FC<Props> = ({ nodeInfo, hideInfo = false }) => {
           )}
           {nodeInfo.status === 'running' && (
             <div className='shrink-0 flex items-center text-primary-600 text-[13px] leading-[16px] font-medium'>
-              <Loading02 className='mr-1 w-3.5 h-3.5 animate-spin' />
-              <span>Running</span>
+              <span className='mr-2 text-xs font-normal'>Running</span>
+              <Loading02 className='w-3.5 h-3.5 animate-spin' />
             </div>
           )}
         </div>
-        {!collapseState && (
+        {!collapseState && !hideProcessDetail && (
           <div className='pb-2'>
             <div className={cn('px-[10px] py-1', hideInfo && '!px-2 !py-0.5')}>
               {nodeInfo.status === 'stopped' && (