vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into fast-loader

Browse Source
This commit is contained in:
Rohit
2025-11-07 12:17:52 +05:30
committed by GitHub
parent cd53994d82 8489f95ff0
commit fcb3a12aca
12 changed files with 244 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/locales/en.json
View File

@@ -580,7 +580,7 @@
"buttons": {
"stop": "Stop"
},
"loading": "Loading data...",
"loading": "Extracting data...",
"empty_output": "No output data available",
"captured_data": {
"title": "Captured Data",

2
src/api/storage.ts
View File

@@ -1,7 +1,7 @@
import { default as axios } from "axios";
import { WorkflowFile } from "maxun-core";
import { RunSettings } from "../components/run/RunSettings";
import { ScheduleSettings } from "../components/robot/ScheduleSettings";
import { ScheduleSettings } from "../components/robot/pages/ScheduleSettingsPage";
import { CreateRunResponse, ScheduleRunResponse } from "../pages/MainPage";
import { apiUrl } from "../apiConfig";

10
src/components/api/ApiKey.tsx
View File

@@ -26,7 +26,8 @@ const Container = styled(Box)`
flex-direction: column;
align-items: center;
margin-top: 50px;
margin-left: 50px;
margin-left: 70px;
margin-right: 70px;
`;
const ApiKeyManager = () => {
@@ -108,7 +109,7 @@ const ApiKeyManager = () => {
return (
<Container sx={{ alignSelf: 'flex-start' }}>
<Typography variant="body1" sx={{ marginTop: '10px', marginBottom: '40px' }}>
<Typography variant="body1" sx={{ marginBottom: '40px' }}>
Start by creating an API key below. Then,
<a href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', marginLeft: '5px', marginRight: '5px' }}>
test your API
@@ -139,7 +140,7 @@ const ApiKeyManager = () => {
<TableRow>
<TableCell>{apiKeyName}</TableCell>
<TableCell>
<Box sx={{ fontFamily: 'monospace', width: '10ch' }}>
<Box sx={{ fontFamily: 'monospace', width: '20ch' }}>
{showKey ? `${apiKey?.substring(0, 10)}...` : '**********'}
</Box>
</TableCell>
@@ -174,6 +175,5 @@ const ApiKeyManager = () => {
)}
</Container>
);
};
}
export default ApiKeyManager;

2
src/components/dashboard/MainMenu.tsx
View File

@@ -72,7 +72,7 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
<Paper
sx={{
height: '100%',
width: '250px',
width: '230px',
backgroundColor: theme.palette.background.paper,
paddingTop: '0.5rem',
color: defaultcolor,

88
src/components/proxy/ProxyForm.tsx
View File

@@ -156,19 +156,30 @@ const ProxyForm: React.FC = () => {
}, []);
return (
<>
<FormContainer>
<Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
<Box sx={{
display: 'flex',
gap: 4,
p: 5,
width: '100%',
maxWidth: '100%',
boxSizing: 'border-box'
}}>
<Box sx={{
flex: 1,
minWidth: 0,
maxWidth: 600
}}>
<Typography variant="h6" gutterBottom component="div">
{t('proxy.title')}
</Typography>
<Tabs value={tabIndex} onChange={handleTabChange} style={{ marginBottom: '10px' }}>
<Tabs value={tabIndex} onChange={handleTabChange} sx={{ mb: 2 }}>
<Tab label={t('proxy.tab_standard')} />
</Tabs>
{tabIndex === 0 && (
isProxyConfigured ? (
<Box sx={{ maxWidth: 600, width: '100%', marginTop: '5px' }}>
<TableContainer component={Paper} sx={{ marginBottom: '20px' }}>
<Box sx={{ width: '100%', mt: 1 }}>
<TableContainer component={Paper} sx={{ mb: 2 }}>
<Table>
<TableHead>
<TableRow>
@@ -187,13 +198,13 @@ const ProxyForm: React.FC = () => {
<Button variant="outlined" color="primary" onClick={testProxy}>
{t('proxy.test_proxy')}
</Button>
<Button variant="outlined" color="error" onClick={removeProxy} sx={{ marginLeft: '10px' }}>
<Button variant="outlined" color="error" onClick={removeProxy} sx={{ ml: 1 }}>
{t('proxy.remove_proxy')}
</Button>
</Box>
) : (
<Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 500, width: '100%' }}>
<FormControl>
<Box component="form" onSubmit={handleSubmit} sx={{ width: '100%' }}>
<Box sx={{ mb: 2 }}>
<TextField
label={t('proxy.server_url')}
name="server_url"
@@ -208,16 +219,16 @@ const ProxyForm: React.FC = () => {
</span>
}
/>
</FormControl>
<FormControl>
</Box>
<Box sx={{ mb: 2 }}>
<FormControlLabel
control={<Switch checked={requiresAuth} onChange={handleAuthToggle} />}
label={t('proxy.requires_auth')}
/>
</FormControl>
</Box>
{requiresAuth && (
<>
<FormControl>
<Box sx={{ mb: 2 }}>
<TextField
label={t('proxy.username')}
name="username"
@@ -228,8 +239,8 @@ const ProxyForm: React.FC = () => {
error={!!errors.username}
helperText={errors.username || ''}
/>
</FormControl>
<FormControl>
</Box>
<Box sx={{ mb: 2 }}>
<TextField
label={t('proxy.password')}
name="password"
@@ -241,7 +252,7 @@ const ProxyForm: React.FC = () => {
error={!!errors.password}
helperText={errors.password || ''}
/>
</FormControl>
</Box>
</>
)}
<Button
@@ -255,27 +266,34 @@ const ProxyForm: React.FC = () => {
</Button>
</Box>
))}
</FormContainer>
</Box>
<Alert severity="info" sx={{ marginTop: '80px', marginLeft: '50px', height: '250px', width: '600px' }}>
<AlertTitle>{t('proxy.alert.title')}</AlertTitle>
<br />
<b>{t('proxy.alert.right_way')}</b>
<br />
{t('proxy.alert.proxy_url')} http://proxy.com:1337
<br />
{t('proxy.alert.username')} myusername
<br />
{t('proxy.alert.password')} mypassword
<br />
<br />
<b>{t('proxy.alert.wrong_way')}</b>
<br />
{t('proxy.alert.proxy_url')} http://myusername:mypassword@proxy.com:1337
</Alert>
</>
{/* Instructions Section */}
<Box sx={{
flex: 1,
minWidth: 0,
maxWidth: 600
}}>
<Alert severity="info" sx={{ height: 'auto', minHeight: 250 }}>
<AlertTitle>{t('proxy.alert.title')}</AlertTitle>
<br />
<b>{t('proxy.alert.right_way')}</b>
<br />
{t('proxy.alert.proxy_url')} http://proxy.com:1337
<br />
{t('proxy.alert.username')} myusername
<br />
{t('proxy.alert.password')} mypassword
<br />
<br />
<b>{t('proxy.alert.wrong_way')}</b>
<br />
{t('proxy.alert.proxy_url')} http://myusername:mypassword@proxy.com:1337
</Alert>
</Box>
</Box>
);
};
export default ProxyForm;

19
src/components/recorder/RightSidePanel.tsx
View File

@@ -534,24 +534,9 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const isDarkMode = theme.darkMode;
return (
<Paper sx={{ height: panelHeight, width: 'auto', alignItems: "center", background: 'inherit', overflow: 'hidden' }} id="browser-actions" elevation={0}>
<Paper sx={{ height: panelHeight, width: 'auto', alignItems: "center", background: 'inherit' }} id="browser-actions" elevation={0}>
<ActionDescriptionBox isDarkMode={isDarkMode} />
<Box
display="flex"
flexDirection="column"
gap={2}
style={{ margin: '13px' }}
sx={{
height: 'calc(100% - 26px)',
overflowY: 'auto',
overflowX: 'hidden',
'&::-webkit-scrollbar': {
display: 'none'
},
msOverflowStyle: 'none',
scrollbarWidth: 'none'
}}
>
<Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}>
{!isAnyActionActive && (
<>
{showCaptureList && (

25
src/components/robot/pages/RobotConfigPage.tsx
View File

@@ -64,11 +64,10 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
margin: '50px auto',
display: 'flex',
flexDirection: 'column',
width: '1000px',
height: '100%',
overflowY: 'auto', // Allow scrolling if content exceeds height
width: '100%',
height: 'auto',
boxSizing: 'border-box'
}}>
{/* Header Section - Fixed Position */}
<Box sx={{
display: 'flex',
alignItems: 'center',
@@ -117,32 +116,29 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
</Box>
<Divider sx={{ mb: 4, flexShrink: 0 }} />
{/* Content Section */}
<Box sx={{
flex: 1,
display: 'flex',
flexDirection: 'column',
minHeight: 0,
mt: 2,
mb: 3,
mt: 1.8,
mb: 5,
}}>
{children}
</Box>
{/* Action Buttons */}
{(showSaveButton || showCancelButton || onBackToSelection) && (
<Box
sx={{
display: 'flex',
justifyContent: onBackToSelection ? 'space-between' : 'flex-start',
gap: 2,
pt: 3, // Reduce padding top to minimize space above
pt: 3,
borderTop: `1px solid ${theme.palette.divider}`,
flexShrink: 0,
width: '100%',
}}
>
{/* Left side - Back to Selection button */}
{onBackToSelection && (
<Button
variant="outlined"
@@ -157,7 +153,6 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
</Button>
)}
{/* Right side - Save/Cancel buttons */}
<Box sx={{ display: 'flex', gap: 2 }}>
{showCancelButton && (
<Button
@@ -165,9 +160,7 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
onClick={handleBack}
disabled={isLoading}
sx={{
color: '#ff00c3 !important',
borderColor: '#ff00c3 !important',
backgroundColor: 'white !important',
backgroundColor: 'inherit !important',
}} >
{cancelButtonText || t("buttons.cancel")}
</Button>
@@ -189,7 +182,7 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
boxShadow: 'none',
}}
>
{isLoading ? t("buttons.saving") : (saveButtonText || t("buttons.save"))}
{isLoading ? t("Saving...") : (saveButtonText || t("buttons.save"))}
</Button>
)}
</Box>
@@ -197,4 +190,4 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
)}
</Box>
);
};
}

27
src/components/robot/pages/ScheduleSettingsPage.tsx
View File

@@ -7,7 +7,6 @@ import {
Box,
Button,
} from "@mui/material";
import { Schedule } from "@mui/icons-material";
import { Dropdown } from "../../ui/DropdownMui";
import { validMomentTimezones } from "../../../constants/const";
import { useGlobalInfoStore } from "../../../context/globalInfo";
@@ -188,8 +187,8 @@ export const ScheduleSettingsPage = ({
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
"& > *": { marginBottom: "20px" },
marginTop: "-20px",
gap: 3,
width: "100%",
}}
>
<>
@@ -215,7 +214,7 @@ export const ScheduleSettingsPage = ({
{t("schedule_settings.at_around")}: {schedule.atTimeStart},{" "}
{schedule.timezone} {t("schedule_settings.timezone")}
</Typography>
<Box mt={2} display="flex" justifyContent="space-between">
<Box sx={{ mt: 2, width: "100%" }}>
<Button
onClick={deleteRobotSchedule}
variant="outlined"
@@ -231,7 +230,7 @@ export const ScheduleSettingsPage = ({
) : (
<>
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
<Typography sx={{ marginRight: "10px" }}>
<Typography sx={{ width: "200px", flexShrink: 0 }}>
{t("schedule_settings.labels.run_once_every")}
</Typography>
<TextField
@@ -263,7 +262,7 @@ export const ScheduleSettingsPage = ({
</Box>
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
<Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
<Typography sx={{ width: "200px", flexShrink: 0 }}>
{["MONTHS", "WEEKS"].includes(settings.runEveryUnit)
? t("schedule_settings.labels.start_from_label")
: t("schedule_settings.labels.start_from_label")}
@@ -288,7 +287,7 @@ export const ScheduleSettingsPage = ({
{settings.runEveryUnit === "MONTHS" && (
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
<Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
<Typography sx={{ width: "200px", flexShrink: 0 }}>
{t("schedule_settings.labels.on_day_of_month")}
</Typography>
<TextField
@@ -305,10 +304,10 @@ export const ScheduleSettingsPage = ({
{["MINUTES", "HOURS"].includes(settings.runEveryUnit) ? (
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
<Box sx={{ marginRight: "20px" }}>
<Typography sx={{ marginBottom: "5px" }}>
{t("schedule_settings.labels.in_between")}
</Typography>
<Typography sx={{ width: "200px", flexShrink: 0 }}>
{t("schedule_settings.labels.in_between")}
</Typography>
<Box sx={{ display: "flex", gap: 1 }}>
<TextField
type="time"
value={settings.atTimeStart}
@@ -329,7 +328,7 @@ export const ScheduleSettingsPage = ({
</Box>
) : (
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
<Typography sx={{ marginBottom: "5px", marginRight: "10px" }}>
<Typography sx={{ width: "200px", flexShrink: 0 }}>
{t("schedule_settings.at_around")}
</Typography>
<TextField
@@ -344,7 +343,7 @@ export const ScheduleSettingsPage = ({
)}
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
<Typography sx={{ marginRight: "10px" }}>
<Typography sx={{ width: "200px", flexShrink: 0 }}>
{t("schedule_settings.timezone")}
</Typography>
<Dropdown
@@ -370,4 +369,4 @@ export const ScheduleSettingsPage = ({
</Box>
</RobotConfigPage>
);
};
}

222
src/components/run/InterpretationLog.tsx
View File

@@ -41,17 +41,14 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
const [editingField, setEditingField] = useState<{listId: number, fieldKey: string} | null>(null);
const [editingValue, setEditingValue] = useState<string>('');
const [editingListName, setEditingListName] = useState<number | null>(null);
const [editingListNameValue, setEditingListNameValue] = useState<string>('');
const [editingTextGroupName, setEditingTextGroupName] = useState<boolean>(false);
const [editingTextGroupNameValue, setEditingTextGroupNameValue] = useState<string>('Text Data');
const [editingTextLabel, setEditingTextLabel] = useState<number | null>(null);
const [editingTextLabelValue, setEditingTextLabelValue] = useState<string>('');
const [editingScreenshotName, setEditingScreenshotName] = useState<number | null>(null);
const [editingScreenshotNameValue, setEditingScreenshotNameValue] = useState<string>('');
const [editing, setEditing] = useState<{
stepId: number | null;
type: 'list' | 'text' | 'screenshot' | null;
value: string;
}>({ stepId: null, type: null, value: '' });
const logEndRef = useRef<HTMLDivElement | null>(null);
const autoFocusedListIds = useRef<Set<number>>(new Set());
@@ -125,30 +122,6 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
}
};
const handleStartEditListName = (listId: number, currentName: string) => {
setEditingListName(listId);
setEditingListNameValue(currentName);
};
const handleSaveListName = () => {
if (editingListName !== null) {
const trimmedName = editingListNameValue.trim();
const finalName = trimmedName || `List Data ${captureListData.findIndex(l => l.id === editingListName) + 1}`;
updateListStepName(editingListName, finalName);
// Use ref-synced version of browserSteps via emitForStepId
const listStep = browserSteps.find(step => step.id === editingListName);
if (listStep?.actionId) {
// small async delay ensures React state commit
setTimeout(() => emitForStepId(listStep.actionId!), 0);
}
setEditingListName(null);
setEditingListNameValue('');
}
};
const handleStartEditTextGroupName = () => {
setEditingTextGroupName(true);
setEditingTextGroupNameValue(currentTextGroupName);
@@ -158,7 +131,6 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
const trimmedName = editingTextGroupNameValue.trim();
const finalName = trimmedName || 'Text Data';
console.log("SAVING TEXT GROUP NAME:", finalName);
setCurrentTextGroupName(finalName);
setEditingTextGroupName(false);
@@ -169,34 +141,6 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
}, 0);
};
const handleStartEditTextLabel = (textId: number, currentLabel: string) => {
setEditingTextLabel(textId);
setEditingTextLabelValue(currentLabel);
};
const handleSaveTextLabel = () => {
if (editingTextLabel !== null && editingTextLabelValue.trim()) {
const textStep = browserSteps.find(step => step.id === editingTextLabel);
const actionId = textStep?.actionId;
updateBrowserTextStepLabel(editingTextLabel, editingTextLabelValue.trim());
// Emit updated action to backend after state update completes
if (actionId) {
setTimeout(() => emitForStepId(actionId), 0);
}
setEditingTextLabel(null);
setEditingTextLabelValue('');
}
};
const handleCancelTextLabel = () => {
setEditingTextLabel(null);
setEditingTextLabelValue('');
};
const handleDeleteTextStep = (textId: number) => {
const textStep = browserSteps.find(step => step.id === textId);
const actionId = textStep?.actionId;
@@ -210,36 +154,36 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
}
};
const handleStartEditScreenshotName = (screenshotStepId: number, currentName: string) => {
setEditingScreenshotName(screenshotStepId);
setEditingScreenshotNameValue(currentName);
const startEdit = (stepId: number, type: 'list' | 'text' | 'screenshot', currentValue: string) => {
setEditing({ stepId, type, value: currentValue });
};
const handleSaveScreenshotName = () => {
if (editingScreenshotName !== null) {
const trimmedName = editingScreenshotNameValue.trim();
const screenshotSteps = browserSteps.filter(step => step.type === 'screenshot');
const screenshotIndex = screenshotSteps.findIndex(s => s.id === editingScreenshotName);
const finalName = trimmedName || `Screenshot ${screenshotIndex + 1}`;
updateScreenshotStepName(editingScreenshotName, finalName);
const saveEdit = () => {
const { stepId, type, value } = editing;
if (stepId == null || !type) return;
const screenshotStep = browserSteps.find(step => step.id === editingScreenshotName);
if (screenshotStep?.actionId) {
const originalName = screenshotStep.name?.trim() || "";
const trimmedName = editingScreenshotNameValue.trim();
// 🚫 Only emit if name actually changed
if (trimmedName && trimmedName !== originalName) {
setTimeout(() => emitForStepId(screenshotStep.actionId!), 500);
} else {
console.log("🧠 Skipping emit — screenshot name unchanged.");
}
}
setEditingScreenshotName(null);
setEditingScreenshotNameValue('');
const finalValue = value.trim();
if (!finalValue) {
setEditing({ stepId: null, type: null, value: '' });
return;
}
if (type === 'list') {
updateListStepName(stepId, finalValue);
} else if (type === 'text') {
updateBrowserTextStepLabel(stepId, finalValue);
} else if (type === 'screenshot') {
updateScreenshotStepName(stepId, finalValue);
}
const step = browserSteps.find(s => s.id === stepId);
if (step?.actionId) setTimeout(() => emitForStepId(step.actionId!), 0);
setEditing({ stepId: null, type: null, value: '' });
};
const cancelEdit = () => {
setEditing({ stepId: null, type: null, value: '' });
};
@@ -354,8 +298,6 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
useEffect(() => {
let shouldOpenDrawer = false;
let switchToTextTab = false;
let switchToScreenshotTab = false;
if (hasScrapeListAction && captureListData.length > 0 && captureListData[0]?.data?.length > 0) {
setShowPreviewData(true);
@@ -371,7 +313,6 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
if (captureTextData.length > lastTextDataLength.current) {
userClosedDrawer.current = false;
shouldOpenDrawer = true;
switchToTextTab = true;
}
lastTextDataLength.current = captureTextData.length;
}
@@ -381,23 +322,35 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
if (screenshotData.length > lastScreenshotDataLength.current) {
userClosedDrawer.current = false;
shouldOpenDrawer = true;
switchToScreenshotTab = true;
}
lastScreenshotDataLength.current = screenshotData.length;
}
const getLatestCaptureType = () => {
for (let i = browserSteps.length - 1; i >= 0; i--) {
const type = browserSteps[i].type;
if (type === "list" || type === "text" || type === "screenshot") {
return type;
}
}
return null;
};
if (shouldOpenDrawer) {
setIsOpen(true);
if (switchToTextTab) {
setTimeout(() => {
const textTabIndex = getAvailableTabs().findIndex(tab => tab.id === 'captureText');
if (textTabIndex !== -1) {
setActiveTab(textTabIndex);
}
}, 100);
} else if (switchToScreenshotTab) {
setTimeout(() => {
const screenshotTabIndex = getAvailableTabs().findIndex(tab => tab.id === 'captureScreenshot');
const latestType = getLatestCaptureType();
setTimeout(() => {
if (latestType === "text") {
const idx = getAvailableTabs().findIndex(t => t.id === "captureText");
if (idx !== -1) setActiveTab(idx);
} else if (latestType === "list") {
const idx = getAvailableTabs().findIndex(t => t.id === "captureList");
if (idx !== -1) setActiveTab(idx);
} else if (latestType === "screenshot") {
const screenshotTabIndex = getAvailableTabs().findIndex(tab => tab.id === "captureScreenshot");
if (screenshotTabIndex !== -1) {
setActiveTab(screenshotTabIndex);
const latestIndex = screenshotData.length - 1;
@@ -406,17 +359,17 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
if (!autoFocusedScreenshotIndices.current.has(latestIndex)) {
autoFocusedScreenshotIndices.current.add(latestIndex);
setTimeout(() => {
const screenshotSteps = browserSteps.filter(step => step.type === 'screenshot') as Array<{ id: number; name?: string; type: 'screenshot' }>;
const screenshotSteps = browserSteps.filter(step => step.type === "screenshot");
const latestScreenshotStep = screenshotSteps[latestIndex];
if (latestScreenshotStep) {
const screenshotName = latestScreenshotStep.name || `Screenshot ${latestIndex + 1}`;
handleStartEditScreenshotName(latestScreenshotStep.id, screenshotName);
startEdit(latestScreenshotStep.id, 'screenshot', screenshotName);
}
}, 300);
}
}
}, 100);
}
}
}, 100);
}
}, [hasScrapeListAction, hasScrapeSchemaAction, hasScreenshotAction, captureListData, captureTextData, screenshotData, setIsOpen, getText]);
@@ -424,7 +377,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
if (captureListData.length > 0 && isOpen && captureStage === 'initial') {
const latestListIndex = captureListData.length - 1;
const latestList = captureListData[latestListIndex];
if (latestList && latestList.data && latestList.data.length > 0 && !editingListName) {
if (latestList && latestList.data && latestList.data.length > 0 && editing.type !== 'list') {
const previousLength = previousDataLengths.current.get(latestList.id) || 0;
const currentLength = latestList.data.length;
@@ -433,7 +386,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
autoFocusedListIds.current.add(latestList.id);
setActiveListTab(latestListIndex);
setTimeout(() => {
handleStartEditListName(latestList.id, latestList.name || `List Data ${latestListIndex + 1}`);
startEdit(latestList.id, 'list', latestList.name || `List Data ${latestListIndex + 1}`);
}, 300);
}
}
@@ -579,7 +532,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
}}
>
{captureListData.map((listItem, index) => {
const isEditing = editingListName === listItem.id;
const isEditing = editing.stepId === listItem.id && editing.type === 'list';
const isActive = activeListTab === index;
return (
@@ -597,10 +550,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
}
}}
onDoubleClick={() => {
handleStartEditListName(
listItem.id,
listItem.name || `List Data ${index + 1}`
);
startEdit(listItem.id, 'list', listItem.name || `List Data ${index + 1}`)
}}
sx={{
px: 3,
@@ -638,15 +588,12 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
>
{isEditing ? (
<TextField
value={editingListNameValue}
onChange={(e) => setEditingListNameValue(e.target.value)}
onBlur={handleSaveListName}
value={editing.value}
onChange={(e) => setEditing({ ...editing, value: e.target.value })}
onBlur={saveEdit}
onKeyDown={(e) => {
if (e.key === 'Enter') handleSaveListName();
if (e.key === 'Escape') {
setEditingListName(null);
setEditingListNameValue('');
}
if (e.key === 'Enter') saveEdit();
if (e.key === 'Escape') cancelEdit();
}}
autoFocus
size="small"
@@ -842,7 +789,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
if (!screenshotStep) return null;
const isActive = activeScreenshotTab === index;
const isEditing = editingScreenshotName === screenshotStep.id;
const isEditing = editing.stepId === screenshotStep.id && editing.type === 'screenshot';
const screenshotName = screenshotStep.name || `Screenshot ${index + 1}`;
return (
@@ -858,9 +805,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
setActiveScreenshotTab(index);
}
}}
onDoubleClick={() => {
handleStartEditScreenshotName(screenshotStep.id, screenshotName);
}}
onDoubleClick={() => startEdit(screenshotStep.id, 'screenshot', screenshotName)}
sx={{
px: 3,
py: 1.25,
@@ -895,15 +840,12 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
>
{isEditing ? (
<TextField
value={editingScreenshotNameValue}
onChange={(e) => setEditingScreenshotNameValue(e.target.value)}
onBlur={handleSaveScreenshotName}
value={editing.value}
onChange={(e) => setEditing({ ...editing, value: e.target.value })}
onBlur={saveEdit}
onKeyDown={(e) => {
if (e.key === 'Enter') handleSaveScreenshotName();
if (e.key === 'Escape') {
setEditingScreenshotName(null);
setEditingScreenshotNameValue('');
}
if (e.key === 'Enter') saveEdit();
if (e.key === 'Escape') cancelEdit();
}}
autoFocus
size="small"
@@ -1059,7 +1001,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
</TableHead>
<TableBody>
{captureTextData.map((textStep: any, index) => {
const isEditing = editingTextLabel === textStep.id;
const isEditing = editing.stepId === textStep.id && editing.type === 'text';
return (
<TableRow
@@ -1083,12 +1025,12 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
{isEditing ? (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, minWidth: '200px' }}>
<TextField
value={editingTextLabelValue}
onChange={(e) => setEditingTextLabelValue(e.target.value)}
onBlur={handleSaveTextLabel}
value={editing.value}
onChange={(e) => setEditing({ ...editing, value: e.target.value })}
onBlur={saveEdit}
onKeyDown={(e) => {
if (e.key === 'Enter') handleSaveTextLabel();
if (e.key === 'Escape') handleCancelTextLabel();
if (e.key === 'Enter') saveEdit();
if (e.key === 'Escape') cancelEdit();
}}
autoFocus
size="small"
@@ -1102,7 +1044,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
/>
<IconButton
size="small"
onClick={handleSaveTextLabel}
onClick={saveEdit}
sx={{
color: '#4caf50',
padding: '4px'
@@ -1124,7 +1066,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
textDecoration: 'underline'
}
}}
onClick={() => handleStartEditTextLabel(textStep.id, textStep.label)}
onClick={() => startEdit(textStep.id, 'text', textStep.label)}
>
{textStep.label}
</Typography>

2
src/components/run/RunContent.tsx
View File

@@ -615,7 +615,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
return (
<Box sx={{ width: '100%' }}>
<TabContext value={tab}>
<TabPanel value='output' sx={{ width: '100%', maxWidth: '1000px' }}>
<TabPanel value='output' sx={{ width: '100%', maxWidth: '900px' }}>
{row.status === 'running' || row.status === 'queued' ? (
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<CircularProgress size={22} sx={{ marginRight: '10px' }} />

35
src/pages/MainPage.tsx
View File

@@ -1,7 +1,7 @@
import React, { useCallback, useContext, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { MainMenu } from "../components/dashboard/MainMenu";
import { Stack } from "@mui/material";
import { Stack, Box } from "@mui/material";
import { Recordings } from "../components/robot/Recordings";
import { Runs } from "../components/run/Runs";
import ProxyForm from '../components/proxy/ProxyForm';
@@ -11,7 +11,7 @@ import { createAndRunRecording, createRunForStoredRecording, CreateRunResponseWi
import { io, Socket } from "socket.io-client";
import { stopRecording } from "../api/recording";
import { RunSettings } from "../components/run/RunSettings";
import { ScheduleSettings } from "../components/robot/ScheduleSettings";
import { ScheduleSettings } from "../components/robot/pages/ScheduleSettingsPage";
import { apiUrl } from "../apiConfig";
import { useNavigate } from 'react-router-dom';
import { AuthContext } from '../context/auth';
@@ -318,12 +318,29 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
}
}
return (
<Stack direction='row' spacing={0} sx={{ minHeight: '900px' }}>
<Stack sx={{ width: 250, flexShrink: 0 }}>
return (
<Box sx={{ display: 'flex', minHeight: 'calc(100vh - 64px)', width: '100%' }}>
<Box sx={{
width: 230,
flexShrink: 0,
position: 'sticky',
top: 64,
height: 'calc(100vh - 64px)',
overflowY: 'auto',
zIndex: 1000
}}>
<MainMenu value={content} handleChangeContent={setContent} />
</Stack>
</Box>
<Box sx={{
flex: 1,
minWidth: 0,
overflow: 'auto',
minHeight: 'calc(100vh - 64px)',
width: 'calc(100% - 250px)'
}}>
{DisplayContent()}
</Stack>
);
};
</Box>
</Box>
)
}

82
src/pages/PageWrapper.tsx
View File

@@ -13,6 +13,7 @@ import UserRoute from '../routes/userRoute';
import { Routes, Route, useNavigate, Navigate } from 'react-router-dom';
import { NotFoundPage } from '../components/dashboard/NotFound';
import RobotCreate from '../components/robot/pages/RobotCreate';
import { Box } from '@mui/material';
export const PageWrapper = () => {
const [open, setOpen] = useState(false);
@@ -84,44 +85,61 @@ export const PageWrapper = () => {
}
}
}, [location.pathname, navigate, setBrowserId, setRecordingId, setRecordingName, setRecordingUrl]);
const isAuthPage = location.pathname === '/login' || location.pathname === '/register';
const isRecordingPage = location.pathname === '/recording';
return (
<div>
<AuthProvider>
<SocketProvider>
<React.Fragment>
{/* {!browserId && location.pathname !== '/recording' && <NavBar recordingName={recordingName} isRecording={!!browserId} />} */}
{location.pathname !== '/recording' && <NavBar recordingName={recordingName} isRecording={false} />}
<Routes>
<Route element={<UserRoute />}>
<Route path="/" element={<Navigate to="/robots" replace />} />
<Route path="/robots/create" element={<RobotCreate />} />
<Route path="/robots/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="robots" />} />
<Route path="/runs/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="runs" />} />
<Route path="/proxy" element={<MainPage handleEditRecording={handleEditRecording} initialContent="proxy" />} />
<Route path="/apikey" element={<MainPage handleEditRecording={handleEditRecording} initialContent="apikey" />} />
</Route>
<Route element={<UserRoute />}>
<Route path="/recording" element={
<BrowserDimensionsProvider>
<RecordingPage recordingName={recordingName} />
</BrowserDimensionsProvider>
} />
</Route>
<Route
path="/login"
element={<Login />}
/>
<Route
path="/register"
element={<Register />}
/>
<Route
path="/recording-setup"
element={<div />}
/>
<Route path="*" element={<NotFoundPage />} />
</Routes>
{/* Show NavBar only for main app pages, not for recording pages */}
{!isRecordingPage && (
<Box sx={{
position: 'sticky',
top: 0,
zIndex: 1100,
backgroundColor: 'background.paper'
}}>
<NavBar recordingName={recordingName} isRecording={false} />
</Box>
)}
<Box sx={{
display: isAuthPage || isRecordingPage ? 'block' : 'flex',
minHeight: isAuthPage || isRecordingPage ? '100vh' : 'calc(100vh - 64px)'
}}>
<Routes>
<Route element={<UserRoute />}>
<Route path="/" element={<Navigate to="/robots" replace />} />
<Route path="/robots/create" element={<RobotCreate />} />
<Route path="/robots/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="robots" />} />
<Route path="/runs/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="runs" />} />
<Route path="/proxy" element={<MainPage handleEditRecording={handleEditRecording} initialContent="proxy" />} />
<Route path="/apikey" element={<MainPage handleEditRecording={handleEditRecording} initialContent="apikey" />} />
</Route>
<Route element={<UserRoute />}>
<Route path="/recording" element={
<BrowserDimensionsProvider>
<RecordingPage recordingName={recordingName} />
</BrowserDimensionsProvider>
} />
</Route>
<Route
path="/login"
element={<Login />}
/>
<Route
path="/register"
element={<Register />}
/>
<Route
path="/recording-setup"
element={<div />}
/>
<Route path="*" element={<NotFoundPage />} />
</Routes>
</Box>
</React.Fragment>
</SocketProvider>
</AuthProvider>