Enhance FileUpload, ObjectProperty, and ObjectSelect components by adding masterFilter prop for improved file filtering capabilities. Refactor FileList component styles for better layout consistency. Update ObjectSelect to accept custom styles, enhancing flexibility in usage.

src/components/Dashboard/common/FileList.jsx

@@ -67,14 +67,22 @@ const FileList = ({
     <Flex
       vertical
       gap='10px'
-      style={{ maxWidth: '100%', minWidth: 0, width: card ? '100%' : 'fit-content' }}
+      style={{
+        maxWidth: '100%',
+        minWidth: 0,
+        width: card ? '100%' : 'fit-content'
+      }}
     >
       <Flex
         justify={card ? 'space-between' : 'start'}
         align='center'
         gap='small'
         wrap={false}
-        style={{ maxWidth: '100%', minWidth: 0, width: card ? '100%' : 'fit-content' }}
+        style={{
+          maxWidth: '100%',
+          minWidth: 0,
+          width: card ? '100%' : 'fit-content'
+        }}
       >
         <Flex
           gap={'small'}

src/components/Dashboard/common/FileUpload.jsx

@@ -35,7 +35,8 @@ const FileUpload = ({
   multiple = true,
   defaultPreviewOpen = false,
   showPreview = true,
-  showInfo
+  showInfo,
+  masterFilter = []
 }) => {
   const { uploadFile } = useContext(ApiServerContext)
   const [uploading, setUploading] = useState(false)
@@ -138,11 +139,17 @@ const FileUpload = ({
     <Flex gap={'small'} vertical>
       {hasNoItems && uploading == false ? (
         <Flex gap={'small'} align='center' wrap>
-          <Space.Compact style={{ flexGrow: 1 }}>
+          <Space.Compact style={{ flexGrow: 1, minWidth: 0 }}>
             <ObjectSelect
               type={'file'}
               value={selectedFile}
               onChange={setSelectedFile}
+              style={{ width: '100%', minWidth: 0 }}
+              masterFilter={
+                masterFilter.length > 0
+                  ? { extension: { $in: masterFilter } }
+                  : {}
+              }
             />
             <Button
               icon={<PlusIcon />}
@@ -157,6 +164,9 @@ const FileUpload = ({
             beforeUpload={handleFileUpload}
             showUploadList={false}
             multiple={multiple}
+            accept={
+              masterFilter.length > 0 ? masterFilter.join(',') : undefined
+            }
           >
             <Button style={{ width: '100%' }} icon={<UploadIcon />}>
               Upload
@@ -209,7 +219,8 @@ FileUpload.propTypes = {
   showPreview: PropTypes.bool,
   showInfo: PropTypes.bool,
   defaultPreviewOpen: PropTypes.bool,
-  minimal: PropTypes.bool
+  minimal: PropTypes.bool,
+  masterFilter: PropTypes.array
 }
 
 export default FileUpload

src/components/Dashboard/common/ObjectProperty.jsx

@@ -621,6 +621,7 @@ const ObjectProperty = ({
                 showPreview={showPreview}
                 showInfo={showHyperlink}
                 showDownload={showDownload}
+                masterFilter={masterFilter}
               />
             )
           }
@@ -635,6 +636,7 @@ const ObjectProperty = ({
               defaultPreviewOpen={previewOpen}
               showPreview={showPreview}
               showInfo={showHyperlink}
+              masterFilter={masterFilter}
             />
           )
         }
@@ -947,6 +949,7 @@ const ObjectProperty = ({
               defaultPreviewOpen={previewOpen}
               showPreview={showPreview}
               showInfo={showHyperlink}
+              masterFilter={masterFilter}
               {...inputProps}
             />
           )
@@ -958,6 +961,7 @@ const ObjectProperty = ({
               defaultPreviewOpen={previewOpen}
               showPreview={showPreview}
               showInfo={showHyperlink}
+              masterFilter={masterFilter}
               {...inputProps}
             />
           )

src/components/Dashboard/common/ObjectSelect.jsx

@@ -46,6 +46,7 @@ const ObjectSelect = ({
   value,
   onChange,
   disabled = false,
+  style = {},
   ...rest
 }) => {
   const { fetchObjectsByProperty, fetchObject, connected, searchObjects } =
@@ -719,7 +720,7 @@ const ObjectSelect = ({
 
   // --- Main TreeSelect UI ---
   return (
-    <div>
+    <div style={style}>
       <TreeSelect
         key={treeVersion}
         treeDataSimpleMode={false}
@@ -773,7 +774,8 @@ ObjectSelect.propTypes = {
   multiple: PropTypes.bool,
   treeSelectProps: PropTypes.object,
   type: PropTypes.string.isRequired,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  style: PropTypes.object
 }
 
 export default ObjectSelect