upgrade all packages to react18

apps/design-system/package.json

@@ -20,15 +20,15 @@
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.40.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-live": "^4.1.8",
     "react-router-dom": "^6.26.0",
     "vite-plugin-monaco-editor": "^1.1.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^4.6.2",

apps/design-system/src/main.tsx

@@ -1,11 +1,13 @@
 import { StrictMode } from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import App from './App'
 
-render(
+const container = document.getElementById('root')
+const root = createRoot(container!)
+
+root.render(
   <StrictMode>
     <App />
-  </StrictMode>,
-  document.getElementById('root')
+  </StrictMode>
 )

apps/design-system/src/subjects/views/execution/execution-graph.tsx

@@ -7,14 +7,13 @@ export const ExecutionGraphView = () => {
     <div className="flex h-full flex-col">
       <ExecutionTabs />
       <ExecutionHeader
+        className="border-borders-4 border-b"
         commitName="8fbru3ix"
         branchName="master"
         title={{ number: '311. ', title: 'Alerting docs: adds sns integration' }}
         storage="0 B"
         storageAverage="0 B / 250 MB"
         simpleOperation="27/100k"
-        advancedOperations="2/50k"
-        dataTransfer="4.21 kB/5 GB"
         branch="master"
         commit="b8bruh99h"
         status={ExecutionState.RUNNING}

apps/design-system/src/subjects/views/execution/execution-logs.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useAnimateTree } from '@/hooks/useAnimateTree'
 import { useLogs } from '@/hooks/useLogs'
@@ -30,6 +30,11 @@ export const ExecutionLogsView = () => {
   const [enableStream, setEnableStream] = useState(false)
   const [logs, setLogs] = useState<LivelogLine[]>([])
   const [selectedStep, setSelectedStep] = useState<TreeViewElement | null | undefined>(null)
+  const [status, setStatus] = useState<ExecutionState>(ExecutionState.RUNNING)
+  const [elapsedTime, setElapsedTime] = useState('00:00')
+  const [createdTimeElapsed, setCreatedTimeElapsed] = useState('00:00')
+  const createdStartRef = useRef<number>(Date.now())
+  const elapsedStartRef = useRef<number>(Date.now())
 
   const { updatedElements, currentNode } = useAnimateTree({ elements, delay: 2 }) // Animates the execution tree
 
@@ -56,34 +61,73 @@ export const ExecutionLogsView = () => {
     }
   }, [selectedStep])
 
-  const updateHighLevelStatus = (elements: TreeViewElement[]) => {
-    if (elements.every(node => node.status === ExecutionState.SUCCESS)) {
-      return ExecutionState.SUCCESS
-    }
-    return ExecutionState.RUNNING
+  const isAllSuccess = useMemo(
+    () => updatedElements.every(node => node.status === ExecutionState.SUCCESS),
+    [updatedElements]
+  )
+
+  useEffect(() => {
+    setStatus(isAllSuccess ? ExecutionState.SUCCESS : ExecutionState.RUNNING)
+  }, [isAllSuccess])
+
+  const formatTime = (seconds: number) => {
+    const minutes = Math.floor(seconds / 60)
+    const secs = seconds % 60
+    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
   }
 
+  // Created timer (always counts up from 0)
+  useEffect(() => {
+    createdStartRef.current = Date.now()
+
+    const interval = setInterval(() => {
+      const now = Date.now()
+      const totalDiff = Math.floor((now - createdStartRef.current) / 1000)
+      setCreatedTimeElapsed(formatTime(totalDiff))
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  // Elapsed timer (stops when status changes to success)
+  useEffect(() => {
+    elapsedStartRef.current = Date.now()
+
+    const interval = setInterval(() => {
+      if (status === 'success') return
+
+      const now = Date.now()
+      const elapsedDiff = Math.floor((now - elapsedStartRef.current) / 1000)
+      setElapsedTime(formatTime(elapsedDiff))
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [status])
+
   return (
     <div className="flex h-full flex-col">
       <ExecutionTabs />
       <ExecutionHeader
         commitName="8fbru3ix"
         branchName="master"
-        title={{ number: '311. ', title: 'Alerting docs: adds sns integration' }}
+        title={{
+          number: '311. ',
+          title: 'Alerting docs: adds sns integration'
+        }}
         storage="0 B"
         storageAverage="0 B / 250 MB"
         simpleOperation="27/100k"
         advancedOperations="2/50k"
         dataTransfer="4.21 kB/5 GB"
         branch="master"
         commit="b8bruh99h"
-        status={updateHighLevelStatus(updatedElements)}
-        buildTime="1h 30m"
-        createdTime="10 mins ago"
+        status={status}
+        buildTime={elapsedTime}
+        createdTime={createdTimeElapsed}
         pipelineName="build scan push test - k8s - Clone 2"
       />
-      <div className="grid h-[inherit]" style={{ gridTemplateColumns: '1fr 3fr' }}>
-        <div className="flex flex-col gap-4 border border-r-0 border-t-0 border-white/10 pt-4">
+      <div className="border-borders-4 grid h-[inherit] border-t" style={{ gridTemplateColumns: '1fr 3fr' }}>
+        <div className="border-borders-4 flex h-[calc(100vh-226px)] flex-col gap-4 border-r">
           <ExecutionTree
             defaultSelectedId={currentNode?.id ?? selectedStep?.id ?? elements[0].id}
             elements={updatedElements}
@@ -92,7 +136,7 @@ export const ExecutionLogsView = () => {
             }}
           />
         </div>
-        <div className="flex flex-col gap-4 border border-t-0 border-white/10">
+        <div className="border-borders-4 flex flex-col gap-4">
           <ExecutionInfo useLogsStore={useLogsStore} onCopy={() => {}} onDownload={() => {}} onEdit={() => {}} />
         </div>
       </div>

apps/design-system/src/subjects/views/execution/pipeline-execution-graph.tsx

@@ -18,7 +18,7 @@ import { Button, Drawer, Icon, PipelineNodes } from '@harnessio/ui/components'
 
 import '@harnessio/pipeline-graph/dist/index.css'
 
-import { ExecutionInfo, LivelogLine } from '@harnessio/ui/views'
+import { ExecutionHeader, ExecutionInfo, ExecutionState, LivelogLine } from '@harnessio/ui/views'
 
 import { logs } from './mocks/mock-data'
 
@@ -78,19 +78,28 @@ export function StepNodeComponent({
   return (
     <Drawer.Root direction="right">
       <Drawer.Trigger asChild>{stepNode}</Drawer.Trigger>
-      <Drawer.Content className="flex h-full w-1/2 flex-col justify-between">
+      <Drawer.Content className="bg-background-1 border-borders-5 size-full max-w-2xl rounded-none border-l p-0 ">
         <Drawer.Header>
-          <Drawer.Title>Logs</Drawer.Title>
-          <Drawer.Description>{`View ${name} execution logs`}</Drawer.Description>
+          <ExecutionHeader
+            commitName="8fbru3ix"
+            branchName="master"
+            title={{ title: 'npm_build' }}
+            status={ExecutionState.RUNNING}
+            buildTime="1h 30m"
+            startedTime="10 mins ago"
+            delegateType="cloud"
+            pipelineName="npm_build"
+          />
         </Drawer.Header>
-        <div>
-          <ExecutionInfo useLogsStore={() => ({ logs })} onCopy={() => {}} onDownload={() => {}} onEdit={() => {}} />
+        <div className="border-borders-4 mt-1 border-t pt-3">
+          <ExecutionInfo
+            isDrawer
+            useLogsStore={() => ({ logs })}
+            onCopy={() => {}}
+            onDownload={() => {}}
+            onEdit={() => {}}
+          />
         </div>
-        <Drawer.Footer>
-          <Drawer.Close>
-            <Button variant="outline">Close</Button>
-          </Drawer.Close>
-        </Drawer.Footer>
       </Drawer.Content>
     </Drawer.Root>
   )
@@ -361,7 +370,7 @@ const data: AnyContainerNodeType[] = [
 const PipelineExecutionGraph = () => {
   return (
     <CanvasProvider>
-      <PipelineGraph data={data} nodes={nodes} config={{ edgeClassName: 'stroke-borders-2', mode: 'Execution' }} />
+      <PipelineGraph data={data} nodes={nodes} config={{ mode: 'Execution' }} />
     </CanvasProvider>
   )
 }

apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-group-add-in-node-context-menu.tsx

@@ -21,7 +21,7 @@ export const StageGroupAddInNodeContextMenu = () => {
         style={{ left: `${contextMenuData?.position.x}px`, top: `${contextMenuData?.position.y}px` }}
       >
         <DropdownMenu.Item
-          key="add"
+          key={`add-${YamlEntityType.Stage}`}
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.Stage)
@@ -32,7 +32,7 @@ export const StageGroupAddInNodeContextMenu = () => {
         </DropdownMenu.Item>
         <DropdownMenu.Separator />
         <DropdownMenu.Item
-          key="add"
+          key={`add-${YamlEntityType.SerialStageGroup}`}
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.SerialStageGroup)
@@ -42,7 +42,7 @@ export const StageGroupAddInNodeContextMenu = () => {
           <Text wrap="nowrap">Add Serial group</Text>
         </DropdownMenu.Item>
         <DropdownMenu.Item
-          key="add"
+          key={`add-${YamlEntityType.ParallelStageGroup}`}
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'in', YamlEntityType.ParallelStageGroup)

apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-group-node-context-menu.tsx

@@ -33,7 +33,7 @@ export const StageGroupNodeContextMenu = () => {
         </DropdownMenu.Item>
         <DropdownMenu.Separator />
         <DropdownMenu.Item
-          key="add"
+          key={`add-${YamlEntityType.SerialStageGroup}-before`}
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'before', YamlEntityType.SerialStageGroup)
@@ -43,7 +43,7 @@ export const StageGroupNodeContextMenu = () => {
           <Text wrap="nowrap">Add Serial Stages Group before</Text>
         </DropdownMenu.Item>
         <DropdownMenu.Item
-          key="add"
+          key={`add-${YamlEntityType.SerialStageGroup}-after`}
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'after', YamlEntityType.SerialStageGroup)
@@ -54,7 +54,7 @@ export const StageGroupNodeContextMenu = () => {
         </DropdownMenu.Item>
         <DropdownMenu.Separator />
         <DropdownMenu.Item
-          key="add"
+          key={`add-${YamlEntityType.ParallelStageGroup}-before`}
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'before', YamlEntityType.ParallelStageGroup)
@@ -64,7 +64,7 @@ export const StageGroupNodeContextMenu = () => {
           <Text wrap="nowrap">Add Parallel Stages Group before</Text>
         </DropdownMenu.Item>
         <DropdownMenu.Item
-          key="add"
+          key={`add-${YamlEntityType.ParallelStageGroup}-after`}
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'after', YamlEntityType.ParallelStageGroup)

apps/design-system/src/subjects/views/pipeline-edit/context-menu/stage-node-context-menu.tsx

@@ -33,7 +33,7 @@ export const StageNodeContextMenu = (): (() => React.ReactNode)[] | null | any =
         </DropdownMenu.Item>
         <DropdownMenu.Separator />
         <DropdownMenu.Item
-          key="add"
+          key="add-before"
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'before', YamlEntityType.Stage) // TODO what to add
@@ -43,7 +43,7 @@ export const StageNodeContextMenu = (): (() => React.ReactNode)[] | null | any =
           <Text wrap="nowrap">Add stage before</Text>
         </DropdownMenu.Item>
         <DropdownMenu.Item
-          key="add"
+          key="add-after"
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'after', YamlEntityType.Stage) // TODO what to add

apps/design-system/src/subjects/views/pipeline-edit/context-menu/step-group-node-context-menu.tsx

@@ -33,7 +33,7 @@ export const StepGroupNodeContextMenu = () => {
         </DropdownMenu.Item>
         <DropdownMenu.Separator />
         <DropdownMenu.Item
-          key="add"
+          key="add-before"
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'before')
@@ -43,7 +43,7 @@ export const StepGroupNodeContextMenu = () => {
           <Text wrap="nowrap">Add Step/Group before</Text>
         </DropdownMenu.Item>
         <DropdownMenu.Item
-          key="add"
+          key="add-after"
           className="flex items-center gap-1.5"
           onSelect={() => {
             onAddIntention(contextMenuData.nodeData, 'after')

apps/design-system/src/subjects/views/pipeline-edit/mocks/demoExecutionMock.tsx

@@ -4,8 +4,8 @@ export const demoExecutionMock = [
   {
     type: 'Start',
     config: {
-      width: 40,
-      height: 40,
+      width: 36,
+      height: 36,
       hideDeleteButton: true,
       hideBeforeAdd: true,
       hideLeftPort: true
@@ -188,7 +188,7 @@ export const demoExecutionMock = [
           yamlPath: 'pipeline.stages.1.steps.0',
           yamlEntityType: 'Step',
           name: 'docker',
-          icon: <Icon className="size-6" name={'harness-plugin'} />,
+          icon: <Icon className="size-6" name={'docker'} />,
           selected: false,
           state: 'warning',
           warningMessage: 'Timeout'
@@ -209,7 +209,7 @@ export const demoExecutionMock = [
           yamlPath: 'pipeline.stages.1.steps.1',
           yamlEntityType: 'Step',
           name: 'Step 2',
-          icon: <Icon className="size-6" name={'harness-plugin'} />,
+          icon: <Icon className="size-6" name={'slack'} />,
           selected: false,
           state: 'success'
         },
@@ -223,8 +223,8 @@ export const demoExecutionMock = [
   {
     type: 'End',
     config: {
-      width: 40,
-      height: 40,
+      width: 36,
+      height: 36,
       hideDeleteButton: true,
       hideAfterAdd: true,
       hideRightPort: true

apps/design-system/src/subjects/views/pipeline-edit/nodes/custom-parallel-stage-group-content-node.tsx

@@ -6,6 +6,7 @@ import { CommonNodeDataType, usePipelineStudioNodeContext } from '@harnessio/ui/
 import { StageGroupAddInNodeContextMenu } from '../context-menu/stage-group-add-in-node-context-menu'
 import { StageGroupNodeContextMenu } from '../context-menu/stage-group-node-context-menu'
 import { PipelineNodes } from '../pipeline-nodes'
+import { GlobalData } from '../types/common'
 
 export interface CustomParallelStageGroupContentNodeDataType extends CommonNodeDataType {
   icon?: React.ReactElement
@@ -22,7 +23,10 @@ export function CustomParallelStageGroupContentNode(props: {
   const { node, children, collapsed, isFirst, parentNodeType } = props
   const data = node.data as CustomParallelStageGroupContentNodeDataType
 
-  const { selectionPath, showContextMenu, onSelectIntention, onAddIntention } = usePipelineStudioNodeContext()
+  const { selectionPath, showContextMenu, onSelectIntention, onAddIntention, globalData } =
+    usePipelineStudioNodeContext<GlobalData>()
+
+  const { hideContextMenu, hideFloatingButtons } = globalData ?? {}
 
   const selected = useMemo(() => selectionPath === data.yamlPath, [selectionPath])
 
@@ -35,6 +39,8 @@ export function CustomParallelStageGroupContentNode(props: {
       isFirst={isFirst}
       parentNodeType={parentNodeType}
       node={node}
+      hideContextMenu={hideContextMenu}
+      hideFloatingButtons={hideFloatingButtons}
       onAddInClick={e => {
         e.stopPropagation()
         showContextMenu(StageGroupAddInNodeContextMenu, data, e.currentTarget, true)