Add marketplaces

packages/ui/src/ui-component/cards/ItemCard.js

@@ -45,9 +45,10 @@ const ItemCard = ({ isLoading, data, images, onClick }) => {
                 <CardWrapper border={false} content={false} onClick={onClick}>
                     <Box sx={{ p: 2.25 }}>
                         <Grid container direction='column'>
-                            <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                            <div>
                                 <Typography sx={{ fontSize: '1.5rem', fontWeight: 500 }}>{data.name}</Typography>
                             </div>
+                            {data.description && <span style={{ marginTop: 10 }}>{data.description}</span>}
                             <Grid sx={{ mt: 1, mb: 1 }} container direction='row'>
                                 {data.deployed && (
                                     <Grid item>

packages/ui/src/ui-component/dropdown/Dropdown.js

@@ -18,7 +18,7 @@ const StyledPopper = styled(Popper)({
     }
 })
 
-export const Dropdown = ({ name, value, options, onSelect }) => {
+export const Dropdown = ({ name, value, options, onSelect, disabled = false }) => {
     const customization = useSelector((state) => state.customization)
     const findMatchingOptions = (options = [], value) => options.find((option) => option.name === value)
     const getDefaultOptionValue = () => ''
@@ -28,6 +28,7 @@ export const Dropdown = ({ name, value, options, onSelect }) => {
         <FormControl sx={{ mt: 1, width: '100%' }} size='small'>
             <Autocomplete
                 id={name}
+                disabled={disabled}
                 size='small'
                 options={options || []}
                 value={findMatchingOptions(options, internalValue) || getDefaultOptionValue()}
@@ -57,5 +58,6 @@ Dropdown.propTypes = {
     name: PropTypes.string,
     value: PropTypes.string,
     options: PropTypes.array,
-    onSelect: PropTypes.func
+    onSelect: PropTypes.func,
+    disabled: PropTypes.bool
 }

packages/ui/src/ui-component/file/File.js

@@ -5,7 +5,7 @@ import { FormControl, Button } from '@mui/material'
 import { IconUpload } from '@tabler/icons'
 import { getFileName } from 'utils/genericHelper'
 
-export const File = ({ value, fileType, onChange }) => {
+export const File = ({ value, fileType, onChange, disabled = false }) => {
     const theme = useTheme()
 
     const [myValue, setMyValue] = useState(value ?? '')
@@ -42,7 +42,14 @@ export const File = ({ value, fileType, onChange }) => {
             >
                 {myValue ? getFileName(myValue) : 'Choose a file to upload'}
             </span>
-            <Button variant='outlined' component='label' fullWidth startIcon={<IconUpload />} sx={{ marginRight: '1rem' }}>
+            <Button
+                disabled={disabled}
+                variant='outlined'
+                component='label'
+                fullWidth
+                startIcon={<IconUpload />}
+                sx={{ marginRight: '1rem' }}
+            >
                 {'Upload File'}
                 <input type='file' accept={fileType} hidden onChange={(e) => handleFileUpload(e)} />
             </Button>
@@ -53,5 +60,6 @@ export const File = ({ value, fileType, onChange }) => {
 File.propTypes = {
     value: PropTypes.string,
     fileType: PropTypes.string,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
+    disabled: PropTypes.bool
 }

packages/ui/src/ui-component/input/Input.js

@@ -2,13 +2,14 @@ import { useState } from 'react'
 import PropTypes from 'prop-types'
 import { FormControl, OutlinedInput } from '@mui/material'
 
-export const Input = ({ inputParam, value, onChange }) => {
+export const Input = ({ inputParam, value, onChange, disabled = false }) => {
     const [myValue, setMyValue] = useState(value ?? '')
     return (
         <FormControl sx={{ mt: 1, width: '100%' }} size='small'>
             <OutlinedInput
                 id={inputParam.name}
                 size='small'
+                disabled={disabled}
                 type={inputParam.type === 'string' ? 'text' : inputParam.type}
                 placeholder={inputParam.placeholder}
                 multiline={!!inputParam.rows}
@@ -28,5 +29,6 @@ export const Input = ({ inputParam, value, onChange }) => {
 Input.propTypes = {
     inputParam: PropTypes.object,
     value: PropTypes.string,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
+    disabled: PropTypes.bool
 }