From a9a2801e27c2ff6be3f289828013027a4e5652b9 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Mon, 18 Aug 2025 00:58:10 +0100
Subject: [PATCH] Refactor ObjectProperty component and introduce StateDisplay

- Removed unused components (PrinterState, SubJobState, JobState, FilamentStockState).
- Added new StateDisplay component for handling state representation.
- Enhanced ObjectProperty to support new properties and rendering logic for code blocks and object types.
- Updated import paths and prop types accordingly for improved clarity and functionality.
---
 .../Dashboard/common/ObjectProperty.jsx       |  98 +++++++++---
 .../{PrinterState.jsx => StateDisplay.jsx}    |  10 +-
 .../Dashboard/common/SubJobState.jsx          | 147 ------------------
 .../Dashboard/context/SpotlightContext.js     |  35 +----
 4 files changed, 83 insertions(+), 207 deletions(-)
 rename src/components/Dashboard/common/{PrinterState.jsx => StateDisplay.jsx} (75%)
 delete mode 100644 src/components/Dashboard/common/SubJobState.jsx

diff --git a/src/components/Dashboard/common/ObjectProperty.jsx b/src/components/Dashboard/common/ObjectProperty.jsx
index 38d6e71..ce531d5 100644
--- a/src/components/Dashboard/common/ObjectProperty.jsx
+++ b/src/components/Dashboard/common/ObjectProperty.jsx
@@ -20,14 +20,10 @@ import CountrySelect from './CountrySelect'
 import TagsDisplay from './TagsDisplay'
 import TagsInput from './TagsInput'
 import BoolDisplay from './BoolDisplay'
-import PrinterState from './PrinterState'
-import SubJobState from './SubJobState'
-import JobState from './JobState'
 import ColorSelector from './ColorSelector'
 import SecretDisplay from './SecretDisplay'
 import EyeIcon from '../../Icons/EyeIcon'
 import EyeSlashIcon from '../../Icons/EyeSlashIcon'
-import FilamentStockState from './FilamentStockState'
 import { getPropertyValue } from '../../../database/ObjectModels'
 import PropertyChanges from './PropertyChanges'
 import NetGrossDisplay from './NetGrossDisplay'
@@ -38,6 +34,10 @@ import OperationDisplay from './OperationDisplay'
 import MarkdownDisplay from './MarkdownDisplay'
 import ObjectSelect from './ObjectSelect'
 import ObjectDisplay from './ObjectDisplay'
+import ObjectTypeSelect from './ObjectTypeSelect'
+import ObjectTypeDisplay from './ObjectTypeDisplay'
+import CodeBlockEditor from './CodeBlockEditor'
+import StateDisplay from './StateDisplay'
 
 const { Text } = Typography
 
@@ -65,11 +65,16 @@ const ObjectProperty = ({
   name,
   label,
   showLabel = false,
+  masterFilter = {},
+  language = '',
   objectData = null,
   objectType = 'unknown',
   readOnly = false,
   disabled = false,
+  empty = false,
   initial = false,
+  height = 'auto',
+  minimal = false,
   ...rest
 }) => {
   if (value && typeof value == 'function' && objectData) {
@@ -84,6 +89,10 @@ const ObjectProperty = ({
     disabled = disabled(objectData)
   }
 
+  if (empty && typeof empty == 'function' && objectData) {
+    empty = empty(objectData)
+  }
+
   if (difference && typeof difference == 'function' && objectData) {
     difference = difference(objectData)
   }
@@ -114,6 +123,9 @@ const ObjectProperty = ({
   }
 
   const renderProperty = () => {
+    if (empty == true) {
+      return <Text type='secondary'>n/a</Text>
+    }
     if (!isEditing || (readOnly && !initial)) {
       switch (type) {
         case 'netGross':
@@ -256,6 +268,24 @@ const ObjectProperty = ({
               </Text>
             )
           }
+        case 'codeBlock':
+          if (value != null && value != '') {
+            return (
+              <CodeBlockEditor
+                code={value}
+                language={language}
+                height={height}
+                readOnly={true}
+                minimal={minimal}
+              />
+            )
+          } else {
+            return (
+              <Text type='secondary' {...textParams}>
+                n/a
+              </Text>
+            )
+          }
         case 'markdown':
           if (value != null && value != '') {
             return <MarkdownDisplay content={value} />
@@ -297,27 +327,23 @@ const ObjectProperty = ({
             )
           }
         }
+        case 'objectType': {
+          if (value) {
+            return <ObjectTypeDisplay objectType={value} />
+          } else {
+            return (
+              <Text type='secondary' {...textParams}>
+                n/a
+              </Text>
+            )
+          }
+        }
         case 'objectList': {
           return <ObjectList value={value} objectType={objectType} />
         }
         case 'state': {
           if (value && value?.type) {
-            switch (objectType) {
-              case 'printer':
-                return <PrinterState state={value} {...rest} />
-              case 'job':
-                return <JobState state={value} {...rest} />
-              case 'subJob':
-                return <SubJobState state={value} {...rest} />
-              case 'filamentStock':
-                return <FilamentStockState state={value} {...rest} />
-              default:
-                return (
-                  <Text type='secondary' {...textParams}>
-                    No Object Type Specified
-                  </Text>
-                )
-            }
+            return <StateDisplay {...rest} state={value} />
           } else {
             return (
               <Text type='secondary' {...textParams}>
@@ -566,6 +592,18 @@ const ObjectProperty = ({
             />
           </Form.Item>
         )
+      case 'codeBlock':
+        return (
+          <Form.Item name={formItemName} {...mergedFormItemProps}>
+            <CodeBlockEditor
+              code={value}
+              language={language}
+              disabled={disabled}
+              height={height}
+              minimal={minimal}
+            />
+          </Form.Item>
+        )
       case 'material':
         return (
           <Form.Item name={formItemName} {...mergedFormItemProps}>
@@ -590,13 +628,23 @@ const ObjectProperty = ({
       case 'object':
         return (
           <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <ObjectSelect type={objectType} />
+            <ObjectSelect
+              type={objectType}
+              disabled={disabled}
+              masterFilter={masterFilter}
+            />
+          </Form.Item>
+        )
+      case 'objectType':
+        return (
+          <Form.Item name={formItemName} {...mergedFormItemProps}>
+            <ObjectTypeSelect disabled={disabled} />
           </Form.Item>
         )
       case 'objectList':
         return (
           <Form.Item name={formItemName} {...mergedFormItemProps}>
-            <ObjectSelect type={objectType} multiple />
+            <ObjectSelect type={objectType} multiple disabled={disabled} />
           </Form.Item>
         )
       case 'tags':
@@ -624,8 +672,10 @@ ObjectProperty.propTypes = {
   value: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
   isEditing: PropTypes.bool,
   formItemProps: PropTypes.object,
+  masterFilter: PropTypes.object,
   required: PropTypes.bool,
   name: PropTypes.string,
+  language: PropTypes.string,
   prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   min: PropTypes.number,
@@ -635,8 +685,10 @@ ObjectProperty.propTypes = {
   objectType: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   readOnly: PropTypes.bool,
   disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  empty: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   difference: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
-  objectData: PropTypes.object
+  objectData: PropTypes.object,
+  height: PropTypes.string
 }
 
 export default ObjectProperty
diff --git a/src/components/Dashboard/common/PrinterState.jsx b/src/components/Dashboard/common/StateDisplay.jsx
similarity index 75%
rename from src/components/Dashboard/common/PrinterState.jsx
rename to src/components/Dashboard/common/StateDisplay.jsx
index dca0b84..bf0c1c9 100644
--- a/src/components/Dashboard/common/PrinterState.jsx
+++ b/src/components/Dashboard/common/StateDisplay.jsx
@@ -4,7 +4,7 @@ import { Progress, Flex, Space } from 'antd'
 import React from 'react'
 import StateTag from './StateTag'
 
-const PrinterState = ({ state, showProgress = true, showState = true }) => {
+const StateDisplay = ({ state, showProgress = true, showState = true }) => {
   const currentState = state || {
     type: 'unknown',
     progress: 0
@@ -17,9 +17,7 @@ const PrinterState = ({ state, showProgress = true, showState = true }) => {
           <StateTag state={currentState.type} />
         </Space>
       )}
-      {showProgress &&
-      (currentState.type === 'printing' ||
-        currentState.type === 'deploying') ? (
+      {showProgress && currentState?.progress && currentState?.progress > 0 ? (
         <Progress
           percent={Math.round(currentState.progress * 100)}
           status='active'
@@ -30,10 +28,10 @@ const PrinterState = ({ state, showProgress = true, showState = true }) => {
   )
 }
 
-PrinterState.propTypes = {
+StateDisplay.propTypes = {
   state: PropTypes.object,
   showProgress: PropTypes.bool,
   showState: PropTypes.bool
 }
 
-export default PrinterState
+export default StateDisplay
diff --git a/src/components/Dashboard/common/SubJobState.jsx b/src/components/Dashboard/common/SubJobState.jsx
deleted file mode 100644
index 42288c4..0000000
--- a/src/components/Dashboard/common/SubJobState.jsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import PropTypes from 'prop-types'
-import { Progress, Flex, Button, Space, Tooltip } from 'antd' // eslint-disable-line
-import { CaretLeftOutlined } from '@ant-design/icons' // eslint-disable-line
-import React, { useContext } from 'react'
-import { PrintServerContext } from '../context/PrintServerContext'
-import IdDisplay from './IdDisplay'
-import StateTag from './StateTag'
-import XMarkIcon from '../../Icons/XMarkIcon'
-import PauseIcon from '../../Icons/PauseIcon'
-import BinIcon from '../../Icons/BinIcon'
-import config from '../../../config'
-import loglevel from 'loglevel'
-const logger = loglevel.getLogger('SubJobState')
-logger.setLevel(config.logLevel)
-
-const SubJobState = ({
-  state,
-  showStatus = true,
-  showId = true,
-  showProgress = true,
-  showControls = true //eslint-disable-line
-}) => {
-  const { printServer } = useContext(PrintServerContext)
-  const currentState = state || {
-    type: 'unknown',
-    progress: 0
-  }
-  return (
-    <Flex gap='small' align={'center'}>
-      {showId && state?._id && (
-        <IdDisplay
-          id={state._id}
-          showCopy={false}
-          type='subjob'
-          longId={false}
-        />
-      )}
-      {showStatus && (
-        <Space>
-          <StateTag state={currentState?.type} />
-        </Space>
-      )}
-      {showProgress &&
-      (currentState.type === 'printing' ||
-        currentState.type === 'processing') ? (
-        <Progress
-          percent={Math.round(currentState.progress * 100)}
-          status='active'
-          style={{ width: '150px', marginBottom: '2px' }}
-        />
-      ) : null}
-      {showControls &&
-      (currentState.type === 'printing' || currentState.type === 'paused') &&
-      state?.printer ? (
-        <Space.Compact>
-          <Tooltip
-            title={currentState.type === 'printing' ? 'Pause' : 'Resume'}
-            arrow={false}
-          >
-            <Button
-              onClick={() => {
-                if (currentState.type === 'printing') {
-                  printServer.emit('printer.print.pause', {
-                    printerId: state.printer
-                  })
-                } else {
-                  printServer.emit('printer.print.resume', {
-                    printerId: state.printer
-                  })
-                }
-              }}
-              style={{ height: '22px' }}
-              type='text'
-              icon={
-                currentState.type === 'printing' ? (
-                  <PauseIcon
-                    style={{ fontSize: '12px', marginBottom: '3px' }}
-                  />
-                ) : (
-                  <CaretLeftOutlined
-                    style={{ fontSize: '10px', marginBottom: '3px' }}
-                  />
-                )
-              }
-            ></Button>
-          </Tooltip>
-          <Tooltip title='Cancel' arrow={false}>
-            <Button
-              onClick={() => {
-                printServer.emit('printer.print.cancel', {
-                  printerId: state.printer
-                })
-              }}
-              type='text'
-              style={{ height: '22px' }}
-              icon={
-                <XMarkIcon style={{ fontSize: '12px', marginBottom: '3px' }} />
-              }
-            />
-          </Tooltip>
-        </Space.Compact>
-      ) : null}
-      {showControls && currentState.type === 'queued' && state?._id ? (
-        <Tooltip title='Cancel' arrow={false}>
-          <Button
-            onClick={() => {
-              printServer.emit('server.job_queue.cancel', {
-                subJobId: state._id
-              })
-            }}
-            style={{ height: '22px' }}
-            type='text'
-            icon={
-              <XMarkIcon style={{ fontSize: '12px', marginBottom: '3px' }} />
-            }
-          />
-        </Tooltip>
-      ) : null}
-      {showControls && currentState.type === 'draft' ? (
-        <Space>
-          <Tooltip title='Delete' arrow={false}>
-            <Button
-              onClick={() => {
-                logger.debug('Hello')
-              }}
-              type='text'
-              style={{ height: 'unset' }}
-              icon={
-                <BinIcon style={{ fontSize: '14px', marginBottom: '2px' }} />
-              }
-            />
-          </Tooltip>
-        </Space>
-      ) : null}
-    </Flex>
-  )
-}
-
-SubJobState.propTypes = {
-  state: PropTypes.object,
-  showProgress: PropTypes.bool,
-  showControls: PropTypes.bool,
-  showId: PropTypes.bool,
-  showStatus: PropTypes.bool
-}
-
-export default SubJobState
diff --git a/src/components/Dashboard/context/SpotlightContext.js b/src/components/Dashboard/context/SpotlightContext.js
index 418bc11..34907ea 100644
--- a/src/components/Dashboard/context/SpotlightContext.js
+++ b/src/components/Dashboard/context/SpotlightContext.js
@@ -14,8 +14,7 @@ import axios from 'axios'
 import { LoadingOutlined } from '@ant-design/icons'
 import PropTypes from 'prop-types'
 import { useNavigate } from 'react-router-dom'
-import PrinterState from '../common/PrinterState'
-import JobState from '../common/JobState'
+import StateDisplay from '../common/StateDisplay'
 import IdDisplay from '../common/IdDisplay'
 
 import config from '../../../config'
@@ -24,8 +23,6 @@ import {
   getModelByPrefix
 } from '../../../database/ObjectModels'
 import InfoCircleIcon from '../../Icons/InfoCircleIcon'
-import FilamentStockState from '../common/FilamentStockState'
-import SubJobState from '../common/SubJobState'
 
 const SpotlightContext = createContext()
 
@@ -469,38 +466,14 @@ const SpotlightProvider = ({ children }) => {
                               {item.name}
                             </Text>
                           ) : null}
-                          {model.type == 'printer' ? (
-                            <PrinterState
-                              printer={item}
+                          {item?.state ? (
+                            <StateDisplay
+                              state={item.state}
                               showName={false}
                               showProgress={false}
                               showId={false}
                             />
                           ) : null}
-                          {model.type == 'job' ? (
-                            <JobState
-                              job={item}
-                              showQuantity={false}
-                              showProgress={false}
-                              showId={false}
-                            />
-                          ) : null}
-                          {model.type == 'subjob' ? (
-                            <SubJobState
-                              subJob={item}
-                              showProgress={false}
-                              showId={false}
-                            />
-                          ) : null}
-                          {model.type == 'filamentstock' ? (
-                            <Flex gap={'small'}>
-                              <FilamentStockState
-                                filamentStock={item}
-                                showId={false}
-                                showProgress={false}
-                              />
-                            </Flex>
-                          ) : null}
                           <IdDisplay id={item._id} type={type} longId={false} />
                         </Flex>
                         <Flex gap={'small'}>