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

@@ -5,7 +5,8 @@ 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 ProgressDisplay from '../../common/ProgressDisplay'
+import HProgress from '../../common/HProgress'
+import ElipsisText from '../../common/ElipsisText'
 
 import CheckCircleIcon from '../../../Icons/CheckCircleIcon'
 import XMarkCircleIcon from '../../../Icons/XMarkCircleIcon'
@@ -135,16 +136,19 @@ 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 && (
-          <ProgressDisplay
+          <Flex vertical gap={2} style={{ flex: 1, minWidth: 0 }}>
-            labelPosition='bottom'
+            <HProgress
-            labelType='secondary'
               percent={resolvedPercent}
               status={getProgressStatus(status)}
               showInfo={typeof resolvedPercent === 'number'}
-            style={{ flex: 1 }}
+              style={{ flex: 1, margin: 0 }}
-          >
+            />
+            {detail && (
+              <ElipsisText type='secondary' style={{ minWidth: 0 }}>
                 {detail}
-          </ProgressDisplay>
+              </ElipsisText>
+            )}
+          </Flex>
         )}
       </Flex>
     </Flex>

src/components/Dashboard/Management/DocumentJobs/NewDocumentJob.jsx

@@ -3,72 +3,14 @@ import ObjectInfo from '../../common/ObjectInfo'
 import NewObjectForm from '../../common/NewObjectForm'
 import WizardView from '../../common/WizardView'
 import TemplatePreview from '../../common/TemplatePreview'
-import ProgressDisplay from '../../common/ProgressDisplay'
 import { ApiServerContext } from '../../context/ApiServerContext'
-import { useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { useContext, useRef, useState } from 'react'
-import { Modal } from 'antd'
 import dayjs from 'dayjs'
 
 const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
-  const {
+  const { sendObjectAction, downloadTemplate, formatFileName } =
-    sendObjectAction,
+    useContext(ApiServerContext)
-    downloadTemplate,
-    formatFileName,
-    subscribeToObjectUpdates,
-    connected
-  } = useContext(ApiServerContext)
   const [downloading, setDownloading] = useState(false)
-  const [deployingJob, setDeployingJob] = useState(null)
-  const onOkRef = useRef(onOk)
-  const pendingJobRef = useRef(null)
-  const deploySentRef = useRef(false)
-  const sendObjectActionRef = useRef(sendObjectAction)
-
-  onOkRef.current = onOk
-  sendObjectActionRef.current = sendObjectAction
-
-  const deployingJobId = deployingJob?._id
-    ? String(deployingJob._id).toLowerCase()
-    : null
-
-  const handleJobUpdate = useCallback((updatedJob) => {
-    setDeployingJob((prev) => (prev ? { ...prev, ...updatedJob } : updatedJob))
-  }, [])
-
-  useEffect(() => {
-    if (!deployingJobId || connected != true) {
-      return
-    }
-
-    const unsubscribe = subscribeToObjectUpdates(
-      deployingJobId,
-      'documentJob',
-      handleJobUpdate
-    )
-
-    if (!deploySentRef.current && pendingJobRef.current) {
-      deploySentRef.current = true
-      sendObjectActionRef.current(
-        pendingJobRef.current.documentPrinter._id,
-        'documentPrinter',
-        {
-          type: 'deploy',
-          data: pendingJobRef.current
-        }
-      )
-    }
-
-    return () => {
-      if (unsubscribe) unsubscribe()
-    }
-  }, [deployingJobId, connected, subscribeToObjectUpdates, handleJobUpdate])
-
-  useEffect(() => {
-    const stateType = deployingJob?.state?.type
-    if (stateType === 'queued' || stateType === 'error') {
-      onOkRef.current?.()
-    }
-  }, [deployingJob?.state?.type])
 
   // Capture initial default values so later prop changes don't re-initialize the form
   const defaultValuesRef = useRef({
@@ -78,7 +20,6 @@ const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
   })
 
   return (
-    <>
     <NewObjectForm
       type={'documentJob'}
       defaultValues={defaultValuesRef.current}
@@ -131,16 +72,19 @@ const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
             }
             onSubmit={async () => {
               const newDocumentJob = await handleSubmit()
-                if (!newDocumentJob?._id) {
+              if (newDocumentJob) {
-                  return
+                await sendObjectAction(
+                  newDocumentJob.documentPrinter._id,
+                  'documentPrinter',
+                  {
+                    type: 'deploy',
+                    data: newDocumentJob
+                  }
+                )
+                if (onOk) {
+                  onOk()
+                }
               }
-
-                pendingJobRef.current = newDocumentJob
-                deploySentRef.current = false
-                setDeployingJob({
-                  ...newDocumentJob,
-                  state: { type: 'deploying', progress: 0 }
-                })
             }}
             actions={[
               {
@@ -224,29 +168,6 @@ const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
         )
       }}
     </NewObjectForm>
-      <Modal
-        open={Boolean(deployingJob)}
-        footer={null}
-        closable={false}
-        maskClosable={false}
-        centered
-        destroyOnHidden={true}
-        zIndex={2000}
-        width={320}
-        getContainer={() => document.body}
-      >
-        <ProgressDisplay
-          percent={Math.round(
-            (Number(deployingJob?.state?.progress) || 0) * 100
-          )}
-          status={
-            deployingJob?.state?.type === 'error' ? 'exception' : 'active'
-          }
-        >
-          Please wait...
-        </ProgressDisplay>
-      </Modal>
-    </>
   )
 }
 

src/components/Dashboard/common/ProgressDisplay.jsx

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