feat: better format for browser steps
This commit is contained in:
@@ -177,7 +177,7 @@ export const RightSidePanel = () => {
|
|||||||
{browserSteps.map(step => (
|
{browserSteps.map(step => (
|
||||||
<Box key={step.id} sx={{ boxShadow: 5, padding: '10px', margin: '10px', borderRadius: '4px' }}>
|
<Box key={step.id} sx={{ boxShadow: 5, padding: '10px', margin: '10px', borderRadius: '4px' }}>
|
||||||
{
|
{
|
||||||
step.type === 'text' ? (
|
step.type === 'text' && (
|
||||||
<>
|
<>
|
||||||
<TextField
|
<TextField
|
||||||
label="Label"
|
label="Label"
|
||||||
@@ -217,64 +217,55 @@ export const RightSidePanel = () => {
|
|||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
) : (
|
)}
|
||||||
step.type === 'screenshot' ? (
|
{step.type === 'screenshot' && (
|
||||||
<Box display="flex" alignItems="center">
|
<Box display="flex" alignItems="center">
|
||||||
<DocumentScannerIcon sx={{ mr: 1 }} />
|
<DocumentScannerIcon sx={{ mr: 1 }} />
|
||||||
<Typography>
|
<Typography>
|
||||||
{`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`}
|
{`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
{step.type === 'list' && (
|
||||||
|
<>
|
||||||
|
<Typography>List Selected Successfully</Typography>
|
||||||
|
{Object.entries(step.fields).map(([key, field]) => (
|
||||||
|
<Box key={key}>
|
||||||
|
<TextField
|
||||||
|
label="Field Label"
|
||||||
|
value={field.label || ''}
|
||||||
|
onChange={() => {}}
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<EditIcon />
|
||||||
|
</InputAdornment>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Field Data"
|
||||||
|
value={field.data || ''}
|
||||||
|
fullWidth
|
||||||
|
margin="normal"
|
||||||
|
InputProps={{
|
||||||
|
readOnly: true,
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<TextFieldsIcon />
|
||||||
|
</InputAdornment>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
) : (
|
))}
|
||||||
step.type === 'list' && step.listSelector && (
|
</>
|
||||||
<>
|
)}
|
||||||
<Typography>
|
|
||||||
List Selected Successfully
|
|
||||||
</Typography>
|
|
||||||
{Object.keys(step.fields).length > 0 && Object.entries(step.fields).map(([key, field]) => (
|
|
||||||
<React.Fragment key={key}>
|
|
||||||
<TextField
|
|
||||||
label="Field Label"
|
|
||||||
value={field.label || ''}
|
|
||||||
onChange={() => { }}
|
|
||||||
fullWidth
|
|
||||||
margin="normal"
|
|
||||||
InputProps={{
|
|
||||||
startAdornment: (
|
|
||||||
<InputAdornment position="start">
|
|
||||||
<EditIcon />
|
|
||||||
</InputAdornment>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
label="Field Data"
|
|
||||||
value={field.data || ''}
|
|
||||||
fullWidth
|
|
||||||
margin="normal"
|
|
||||||
InputProps={{
|
|
||||||
readOnly: true,
|
|
||||||
startAdornment: (
|
|
||||||
<InputAdornment position="start">
|
|
||||||
<TextFieldsIcon />
|
|
||||||
</InputAdornment>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</React.Fragment>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</Box>
|
</Box>
|
||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
</Paper>
|
</Paper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ActionDescription = styled.p`
|
|
||||||
margin-left: 15px;
|
|
||||||
`;
|
|
||||||
Reference in New Issue
Block a user