feat: better format for browser steps

This commit is contained in:
karishmas6
2024-08-10 07:07:49 +05:30
parent fd110b2ca9
commit 680cd4d68d

View File

@@ -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;
`;