code: tsx,runlistalerts,nextjs (1 files)

This commit is contained in:
Richard Ward
2025-12-30 18:20:15 +00:00
parent 9a0978536d
commit 81c53ea632

View File

@@ -5,7 +5,7 @@ import { Autorenew, Cancel, CheckCircle, OpenInNew } from '@/fakemui/icons'
import type { WorkflowRun } from '../types'
import type { PipelineSummary, RunListProps } from './run-list.types'
import { spinSx } from './run-list.types'
import { spinStyle } from './run-list.types'
type RunListAlertsProps = Pick<RunListProps, 'error' | 'needsAuth' | 'conclusion' | 'summaryTone'>
@@ -16,23 +16,23 @@ type SummaryAlertProps = {
const SummaryAlert = ({ conclusion, summaryTone }: SummaryAlertProps) => (
<Alert
sx={{
style={{
borderWidth: 2,
borderColor: `var(--mui-palette-${summaryTone}-main)`,
bgcolor: `color-mix(in srgb, var(--mui-palette-${summaryTone}-main) 8%, transparent)`,
backgroundColor: `color-mix(in srgb, var(--mui-palette-${summaryTone}-main) 8%, transparent)`,
alignItems: 'flex-start',
mb: 2,
marginBottom: 16,
}}
>
<Stack direction="row" spacing={2} alignItems="flex-start">
{summaryTone === 'success' && <CheckCircle size={48} style={{ color: 'var(--mui-palette-success-main)' }} />}
{summaryTone === 'error' && <Cancel size={48} style={{ color: 'var(--mui-palette-error-main)' }} />}
{summaryTone === 'warning' && (
<Autorenew size={48} style={{ color: 'var(--mui-palette-warning-main)', ...spinSx }} />
<Autorenew size={48} style={{ color: 'var(--mui-palette-warning-main)', ...spinStyle }} />
)}
<Box flex={1}>
<Box style={{ flex: 1 }}>
<AlertTitle>
<Box sx={{ fontSize: '1.25rem', fontWeight: 700, mb: 1 }}>
<Box style={{ fontSize: '1.25rem', fontWeight: 700, marginBottom: 8 }}>
{conclusion.mostRecentPassed && 'Most Recent Builds: ALL PASSED'}
{conclusion.mostRecentFailed && 'Most Recent Builds: FAILURES DETECTED'}
{conclusion.mostRecentRunning && 'Most Recent Builds: RUNNING'}
@@ -59,44 +59,43 @@ const SummaryAlert = ({ conclusion, summaryTone }: SummaryAlertProps) => (
return (
<Box
key={workflow.id}
sx={{
bgcolor: 'background.paper',
borderRadius: 2,
p: 2,
boxShadow: 1,
style={{
backgroundColor: 'var(--color-background-paper)',
borderRadius: 8,
padding: 16,
boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
}}
>
<Stack spacing={1}>
<Stack direction="row" spacing={1} alignItems="center">
{workflow.status === 'completed' && workflow.conclusion === 'success' && (
<SuccessIcon sx={{ color: 'success.main', fontSize: 20 }} />
<CheckCircle size={20} style={{ color: 'var(--mui-palette-success-main)' }} />
)}
{workflow.status === 'completed' && workflow.conclusion === 'failure' && (
<FailureIcon sx={{ color: 'error.main', fontSize: 20 }} />
<Cancel size={20} style={{ color: 'var(--mui-palette-error-main)' }} />
)}
{workflow.status !== 'completed' && (
<RunningIcon sx={{ color: 'warning.main', fontSize: 20, ...spinSx }} />
<Autorenew size={20} style={{ color: 'var(--mui-palette-warning-main)', ...spinStyle }} />
)}
<Typography fontWeight={600}>{workflow.name}</Typography>
<Badge variant={badgeVariant} sx={{ fontSize: '0.75rem', p: 0.5 }}>
<Typography style={{ fontWeight: 600 }}>{workflow.name}</Typography>
<Badge variant={badgeVariant} style={{ fontSize: '0.75rem', padding: '2px 4px' }}>
{statusLabel}
</Badge>
</Stack>
<Stack
direction="row"
spacing={2}
flexWrap="wrap"
sx={{ color: 'text.secondary', fontSize: '0.75rem' }}
className="flex-wrap"
style={{ color: 'var(--color-text-secondary)', fontSize: '0.75rem' }}
>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography fontWeight={600}>Branch:</Typography>
<Typography style={{ fontWeight: 600 }}>Branch:</Typography>
<Box
component="code"
sx={{
px: 0.75,
py: 0.25,
bgcolor: 'action.hover',
borderRadius: 1,
style={{
padding: '2px 6px',
backgroundColor: 'var(--color-action-hover)',
borderRadius: 4,
fontFamily: 'monospace',
}}
>
@@ -104,7 +103,7 @@ const SummaryAlert = ({ conclusion, summaryTone }: SummaryAlertProps) => (
</Box>
</Stack>
<Stack direction="row" spacing={0.5} alignItems="center">
<Typography fontWeight={600}>Updated:</Typography>
<Typography style={{ fontWeight: 600 }}>Updated:</Typography>
<Typography>{new Date(workflow.updated_at).toLocaleString()}</Typography>
</Stack>
</Stack>
@@ -121,7 +120,7 @@ const SummaryAlert = ({ conclusion, summaryTone }: SummaryAlertProps) => (
href="https://github.com/johndoe6345789/metabuilder/actions"
target="_blank"
rel="noopener noreferrer"
endIcon={<OpenInNewIcon sx={{ fontSize: 18 }} />}
endIcon={<OpenInNew size={18} />}
>
View All Workflows on GitHub
</Button>
@@ -141,14 +140,14 @@ export const RunListAlerts = ({
}: RunListAlertsProps) => (
<>
{error && (
<Alert variant="destructive" sx={{ mb: 2 }}>
<Alert variant="destructive" style={{ marginBottom: 16 }}>
<AlertTitle>Error</AlertTitle>
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
{needsAuth && (
<Alert variant="warning" sx={{ mb: 2 }}>
<Alert variant="warning" style={{ marginBottom: 16 }}>
<AlertTitle>Authentication Required</AlertTitle>
<AlertDescription>
GitHub API requires authentication for this request. Please configure credentials and