Refactor AppUpdateProgress and TemplatePreview to Use ProgressDisplay Component

- Replaced HProgress and ElipsisText with the new ProgressDisplay component in AppUpdateProgress for improved code clarity and reusability.
- Updated TemplatePreview to utilize ProgressDisplay for rendering download progress, enhancing consistency across components.
- Introduced ProgressDisplay component to encapsulate progress rendering logic, allowing for customizable label positioning and styling.

src/components/Dashboard/Management/AppUpdates/AppUpdateProgress.jsx

@@ -5,8 +5,7 @@ import { Button, Flex, Modal, Typography, theme, Divider } from 'antd'
 import CloudIcon from '../../../Icons/CloudIcon'
 import HostIcon from '../../../Icons/HostIcon'
 import ReloadIcon from '../../../Icons/ReloadIcon'
-import HProgress from '../../common/HProgress'
+import ProgressDisplay from '../../common/ProgressDisplay'
-import ElipsisText from '../../common/ElipsisText'
 
 import CheckCircleIcon from '../../../Icons/CheckCircleIcon'
 import XMarkCircleIcon from '../../../Icons/XMarkCircleIcon'
@@ -136,19 +135,16 @@ const UpdateStage = ({ stage, status, percent, detail }) => {
       <Flex align='start' gap='24px' style={{ flex: 1, minWidth: 0 }}>
         <Text style={{ flexShrink: 0 }}>{config.labels[status]}</Text>
         {showProgress && (
-          <Flex vertical gap={2} style={{ flex: 1, minWidth: 0 }}>
+          <ProgressDisplay
-            <HProgress
+            labelPosition='bottom'
-              percent={resolvedPercent}
+            labelType='secondary'
-              status={getProgressStatus(status)}
+            percent={resolvedPercent}
-              showInfo={typeof resolvedPercent === 'number'}
+            status={getProgressStatus(status)}
-              style={{ flex: 1, margin: 0 }}
+            showInfo={typeof resolvedPercent === 'number'}
-            />
+            style={{ flex: 1 }}
-            {detail && (
+          >
-              <ElipsisText type='secondary' style={{ minWidth: 0 }}>
+            {detail}
-                {detail}
+          </ProgressDisplay>
-              </ElipsisText>
-            )}
-          </Flex>
         )}
       </Flex>
     </Flex>

src/components/Dashboard/common/ProgressDisplay.jsx

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types'
+import { Flex } from 'antd'
+import HProgress from './HProgress'
+import ElipsisText from './ElipsisText'
+
+const ProgressDisplay = ({
+  children,
+  labelPosition = 'top',
+  labelType,
+  percent,
+  status,
+  showInfo,
+  style
+}) => {
+  const label = children ? (
+    <ElipsisText type={labelType} style={{ width: '100%', minWidth: 0 }}>
+      {children}
+    </ElipsisText>
+  ) : null
+
+  const progress = (
+    <HProgress
+      percent={percent}
+      status={status}
+      showInfo={showInfo}
+      style={{ flex: 1, margin: 0 }}
+    />
+  )
+
+  return (
+    <Flex
+      vertical
+      gap={labelPosition === 'bottom' ? 2 : 10}
+      style={{ width: '100%', minWidth: 0, ...style }}
+    >
+      {labelPosition === 'bottom' ? (
+        <>
+          {progress}
+          {label}
+        </>
+      ) : (
+        <>
+          {label}
+          {progress}
+        </>
+      )}
+    </Flex>
+  )
+}
+
+ProgressDisplay.propTypes = {
+  children: PropTypes.node,
+  labelPosition: PropTypes.oneOf(['top', 'bottom']),
+  labelType: PropTypes.oneOf(['secondary']),
+  percent: PropTypes.number,
+  status: PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
+  showInfo: PropTypes.bool,
+  style: PropTypes.object
+}
+
+export default ProgressDisplay

src/components/Dashboard/common/TemplatePreview.jsx

@@ -7,7 +7,7 @@ import {
   useCallback
 } from 'react'
 import PropTypes from 'prop-types'
-import { Flex, Button, Input, Select, Typography, Card } from 'antd'
+import { Flex, Button, Input, Select, Card } from 'antd'
 import PlusIcon from '../../Icons/PlusIcon.jsx'
 import MinusIcon from '../../Icons/MinusIcon.jsx'
 import InfoCircleIcon from '../../Icons/InfoCircleIcon.jsx'
@@ -17,9 +17,7 @@ import ObjectProperty from '../common/ObjectProperty.jsx'
 import PDFViewer from './PDFViewer.jsx'
 import ScrollBox from './ScrollBox.jsx'
 import { ApiServerContext } from '../context/ApiServerContext.jsx'
-import HProgress from './HProgress.jsx'
+import ProgressDisplay from './ProgressDisplay.jsx'
-
-const { Text } = Typography
 
 const noop = () => {}
 
@@ -224,7 +222,7 @@ const TemplatePreview = ({
       stopRenderProgressListener()
       setPDFBlob(null)
       setReloadLoading(true)
-      setDownloadProgress({ progress: 0, message: 'Starting render' })
+      setDownloadProgress({ progress: 0, message: 'Starting render...' })
 
       const startDownload = async () => {
         try {
@@ -590,17 +588,14 @@ const TemplatePreview = ({
                 }}
                 styles={{ body: { padding: 18 } }}
               >
-                <Flex vertical gap={10} style={{ width: '100%' }}>
+                <ProgressDisplay
-                  <Text ellipsis style={{ width: '100%', minWidth: 0 }}>
+                  percent={Math.round(
-                    {downloadProgress.message || 'Rendering...'}
+                    (Number(downloadProgress.progress) || 0) * 100
-                  </Text>
+                  )}
-                  <HProgress
+                  status='active'
-                    percent={Math.round(
+                >
-                      (Number(downloadProgress.progress) || 0) * 100
+                  {downloadProgress.message || 'Rendering...'}
-                    )}
+                </ProgressDisplay>
-                    status='active'
-                  />
-                </Flex>
               </Card>
             </Flex>
           ) : null}