Refactor UpdateStage component in AppUpdateProgress to streamline progress display and detail rendering, enhancing clarity and organization of update status information.

This commit is contained in:
Tom Butcher 2026-06-21 20:19:37 +01:00
parent 90204e4f10
commit 77ef061c15

View File

@ -101,7 +101,6 @@ const UpdateStage = ({ stage, status, percent, detail }) => {
: StageIcon : StageIcon
return ( return (
<Flex vertical gap={4}>
<Flex align='center' gap='middle'> <Flex align='center' gap='middle'>
<StatusIcon style={{ fontSize: 20, color, flexShrink: 0 }} /> <StatusIcon style={{ fontSize: 20, color, flexShrink: 0 }} />
<Flex align='center' gap='small' style={{ flex: 1, minWidth: 0 }}> <Flex align='center' gap='small' style={{ flex: 1, minWidth: 0 }}>
@ -109,21 +108,22 @@ const UpdateStage = ({ stage, status, percent, detail }) => {
{config.labels[resolvedStatus]} {config.labels[resolvedStatus]}
</Text> </Text>
{showProgress && ( {showProgress && (
<Flex vertical gap={4}>
<Progress <Progress
percent={resolvedPercent} percent={resolvedPercent}
status={getProgressStatus(resolvedStatus)} status={getProgressStatus(resolvedStatus)}
showInfo={typeof resolvedPercent === 'number'} showInfo={typeof resolvedPercent === 'number'}
style={{ flex: 1, margin: 0 }} style={{ flex: 1, margin: 0 }}
/> />
)}
</Flex>
</Flex>
{detail && ( {detail && (
<Text type='secondary' style={{ marginLeft: 36 }}> <Text type='secondary' style={{ marginLeft: 36 }}>
{detail} {detail}
</Text> </Text>
)} )}
</Flex> </Flex>
)}
</Flex>
</Flex>
) )
} }