Adding borders and aligning to UX (harness#944)

pixel-point · Feb 4, 2025 · 29173a6 · 29173a6
1 parent fd10690
commit 29173a6
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 28 deletions.
diff --git a/apps/design-system/src/subjects/views/execution-details/index.tsx b/apps/design-system/src/subjects/views/execution-details/index.tsx
@@ -1,10 +1,17 @@
-import { ExecutionHeader, ExecutionInfo, ExecutionTabs, ExecutionTree, PipelineStatus } from '@harnessio/ui/views'
+import {
+  ExecutionHeader,
+  ExecutionInfo,
+  ExecutionState,
+  ExecutionTabs,
+  ExecutionTree,
+  PipelineStatus
+} from '@harnessio/ui/views'
 
 import { elements, logs, stages } from './mocks/mock-data'
 
 export const ExecutionDetailsView = () => {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col h-full">
       <ExecutionTabs />
       <ExecutionHeader
         commitName="8fbru3ix"
@@ -16,9 +23,9 @@ export const ExecutionDetailsView = () => {
         advancedOperations="2/50k"
         dataTransfer="4.21 kB/5 GB"
       />
-      <div className="grid p-4" style={{ gridTemplateColumns: '1fr 3fr' }}>
-        <div>
-          <PipelineStatus status="Running" buildTime="1h 30m" createdTime="10 mins ago" />
+      <div className="grid h-[inherit]" style={{ gridTemplateColumns: '1fr 3fr' }}>
+        <div className="flex flex-col gap-4 border border-white/10 border-r-0 border-t-0">
+          <PipelineStatus status={ExecutionState.RUNNING} buildTime="1h 30m" createdTime="10 mins ago" />
           <ExecutionTree
             defaultSelectedId="initialize"
             elements={elements}
@@ -27,14 +34,16 @@ export const ExecutionDetailsView = () => {
             }}
           />
         </div>
-        <ExecutionInfo
-          logs={logs}
-          onCopy={() => {}}
-          onDownload={() => {}}
-          onEdit={() => {}}
-          selectedStepIdx={0}
-          stage={stages[0]}
-        />
+        <div className="flex flex-col gap-4 border border-white/10 border-t-0">
+          <ExecutionInfo
+            logs={logs}
+            onCopy={() => {}}
+            onDownload={() => {}}
+            onEdit={() => {}}
+            selectedStepIdx={0}
+            stage={stages[0]}
+          />
+        </div>
       </div>
     </div>
   )

diff --git a/packages/ui/src/views/execution/execution-header.tsx b/packages/ui/src/views/execution/execution-header.tsx
@@ -24,7 +24,7 @@ export const ExecutionHeader: React.FC<ExecutionHeaderProps> = ({
   dataTransfer
 }) => {
   return (
-    <div className="flex w-full items-center justify-between border-b border-default px-6 py-4">
+    <div className="flex w-full items-center justify-between px-6 py-4">
       <div className="flex flex-col gap-2">
         <div className="flex gap-2">
           <Button variant="secondary" size="xs" asChild>

diff --git a/packages/ui/src/views/execution/execution-status.tsx b/packages/ui/src/views/execution/execution-status.tsx
@@ -15,12 +15,12 @@ const Badge: React.FC<ExecutionStatusProps & BadgeProps> = props => {
           <span className="text-muted">Pending</span>
         </div>
       ) : (
-        <div className="flex items-center gap-1 rounded-md border border-solid border-muted bg-muted/[0.1] px-1 py-0.5">
+        <div className="flex items-center gap-1 rounded-md">
           <div className="flex items-center gap-0.5">
             <CanaryIcon size={12} name="pending-clock" />
             <span className="text-muted">Pending</span>
           </div>
-          {duration && <span className="text-muted">{duration}</span>}
+          {duration ? <span className="text-muted">{duration}</span> : null}
         </div>
       )
     case ExecutionState.RUNNING:
@@ -30,7 +30,7 @@ const Badge: React.FC<ExecutionStatusProps & BadgeProps> = props => {
           <span className="text-studio-3">Running</span>
         </div>
       ) : (
-        <div className="flex items-center gap-1 rounded-md border border-solid border-studio-3/[0.12] bg-studio-3/10 px-1 py-0.5">
+        <div className="flex items-center gap-1 rounded-md">
           <div className="flex items-center gap-1">
             <CanaryIcon size={16} name="running" className="animate-spin text-warning" />
             <span className="text-studio-3">Running</span>
@@ -47,7 +47,7 @@ const Badge: React.FC<ExecutionStatusProps & BadgeProps> = props => {
           <span className="text-[#ED5E5E]">Failed</span>
         </div>
       ) : (
-        <div className="flex items-center gap-1 rounded-md border border-solid border-[#F76E6E1F] bg-[#F76E6E1A]/[0.1] px-1 py-0.5">
+        <div className="flex items-center gap-1 rounded-md">
           <div className="flex items-center gap-0.5">
             <CanaryIcon name="fail" width={20} />
             <span className="text-[#ED5E5E]">Failed</span>
@@ -62,7 +62,7 @@ const Badge: React.FC<ExecutionStatusProps & BadgeProps> = props => {
           <span className="text-success">Success</span>
         </div>
       ) : (
-        <div className="flex items-center gap-1 rounded-md border border-solid border-success bg-success/[0.1] px-1 py-0.5">
+        <div className="flex items-center gap-1 rounded-md">
           <div className="flex items-center gap-0.5">
             <CanaryIcon size={12} name="success" />
             <span className="text-success">Success</span>

diff --git a/packages/ui/src/views/execution/execution-tree.tsx b/packages/ui/src/views/execution/execution-tree.tsx
@@ -6,7 +6,7 @@ import { renderTree } from './utils'
 export const ExecutionTree: React.FC<ExecutionTreeProps> = props => {
   const { defaultSelectedId, elements } = props
   return (
-    <Tree className="bg-grey-6 overflow-hidden" initialSelectedId={defaultSelectedId} elements={elements}>
+    <Tree className="bg-grey-6 overflow-hidden px-3" initialSelectedId={defaultSelectedId} elements={elements}>
       {renderTree(elements, props.onSelectNode)}
     </Tree>
   )

diff --git a/packages/ui/src/views/execution/pipeline-status.tsx b/packages/ui/src/views/execution/pipeline-status.tsx
@@ -1,19 +1,23 @@
 import React from 'react'
 
+import { ExecutionState } from '@views/repo/pull-request'
+
+import { ExecutionStatus } from './execution-status'
+
 export const PipelineStatus = ({
   status,
   buildTime,
   createdTime
 }: {
-  status: string
+  status: ExecutionState
   buildTime: string
   createdTime: string
 }) => {
   return (
-    <div className="flex justify-between px-2 py-4 border-b">
+    <div className="flex justify-between pl-6 pr-6 pt-3 pb-4 border-b">
       <div className="flex flex-col">
         <span className="text-foreground-5">Status</span>
-        <span className="text-primary">{status}</span>
+        <ExecutionStatus.Badge status={status} />
       </div>
       <div className="flex flex-col">
         <span className="text-foreground-5">Build time</span>

diff --git a/packages/ui/src/views/execution/step-execution.tsx b/packages/ui/src/views/execution/step-execution.tsx
@@ -50,9 +50,9 @@ export const StepExecution: React.FC<StepExecutionProps> = ({ step, logs, onEdit
 
   if (!step) return null
   return (
-    <Tabs defaultValue={StepExecutionTab.LOG} className="mt-2 size-full">
-      <Layout.Vertical gap="space-y-3">
-        <Layout.Horizontal className="flex justify-between">
+    <Tabs defaultValue={StepExecutionTab.LOG} className="size-full">
+      <Layout.Vertical>
+        <Layout.Horizontal className="flex justify-between p-4 pb-0">
           <TabsList className="w-fit">
             <TabsTrigger className="h-full" value={StepExecutionTab.LOG}>
               Logs
@@ -69,7 +69,7 @@ export const StepExecution: React.FC<StepExecutionProps> = ({ step, logs, onEdit
           />
         </Layout.Horizontal>
         <TabsContent value={StepExecutionTab.LOG}>
-          <ScrollArea className="h-[calc(100vh-23rem)] border-t pt-4">
+          <ScrollArea className="h-[calc(100vh-23rem)] border-t pt-4 px-2">
             <ConsoleLogs logs={logs} query={query} />
           </ScrollArea>
         </TabsContent>

diff --git a/packages/ui/src/views/execution/types.ts b/packages/ui/src/views/execution/types.ts
@@ -72,7 +72,7 @@ export interface ExecutionStatusProps {
 }
 
 export interface BadgeProps {
-  duration: string /* time formatted as string */
+  duration?: string /* time formatted as string */
   minimal?: boolean
 }