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

Merge branch 'develop' into ui-fix

Browse Source
This commit is contained in:
Rohit
2025-01-08 12:50:46 +05:30
committed by GitHub
parent f11b36ba4e 73d4497b39
commit b2de5f3994
67 changed files with 7978 additions and 1189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/molecules/ActionDescriptionBox.tsx
View File

@@ -3,6 +3,7 @@ import styled from 'styled-components';
import { Typography, FormControlLabel, Checkbox, Box } from '@mui/material';
import { useActionContext } from '../../context/browserActions';
import MaxunLogo from "../../assets/maxunlogo.png";
import { useTranslation } from 'react-i18next';
interface CustomBoxContainerProps {
isDarkMode: boolean;
@@ -48,7 +49,9 @@ const Content = styled.div`
text-align: left;
`;
const ActionDescriptionBox = ({ isDarkMode }: { isDarkMode: boolean }) => {
const { t } = useTranslation();
const { getText, getScreenshot, getList, captureStage } = useActionContext() as {
getText: boolean;
getScreenshot: boolean;
@@ -57,10 +60,10 @@ const ActionDescriptionBox = ({ isDarkMode }: { isDarkMode: boolean }) => {
};
const messages = [
{ stage: 'initial', text: 'Select the list you want to extract along with the texts inside it' },
{ stage: 'pagination', text: 'Select how the robot can capture the rest of the list' },
{ stage: 'limit', text: 'Choose the number of items to extract' },
{ stage: 'complete', text: 'Capture is complete' },
{ stage: 'initial' as const, text: t('action_description.list_stages.initial') },
{ stage: 'pagination' as const, text: t('action_description.list_stages.pagination') },
{ stage: 'limit' as const, text: t('action_description.list_stages.limit') },
{ stage: 'complete' as const, text: t('action_description.list_stages.complete') },
];
const stages = messages.map(({ stage }) => stage);
@@ -70,23 +73,23 @@ const ActionDescriptionBox = ({ isDarkMode }: { isDarkMode: boolean }) => {
if (getText) {
return (
<>
<Typography variant="subtitle2" gutterBottom>Capture Text</Typography>
<Typography variant="body2" gutterBottom>Hover over the texts you want to extract and click to select them</Typography>
<Typography variant="subtitle2" gutterBottom>{t('action_description.text.title')}</Typography>
<Typography variant="body2" gutterBottom>{t('action_description.text.description')}</Typography>
</>
);
} else if (getScreenshot) {
return (
<>
<Typography variant="subtitle2" gutterBottom>Capture Screenshot</Typography>
<Typography variant="body2" gutterBottom>Capture a partial or full page screenshot of the current page.</Typography>
<Typography variant="subtitle2" gutterBottom>{t('action_description.screenshot.title')}</Typography>
<Typography variant="body2" gutterBottom>{t('action_description.screenshot.description')}</Typography>
</>
);
} else if (getList) {
return (
<>
<Typography variant="subtitle2" gutterBottom>Capture List</Typography>
<Typography variant="subtitle2" gutterBottom>{t('action_description.list.title')}</Typography>
<Typography variant="body2" gutterBottom>
Hover over the list you want to extract. Once selected, you can hover over all texts inside the list you selected. Click to select them.
{t('action_description.list.description')}
</Typography>
<Box>
{messages.map(({ stage, text }, index) => (
@@ -117,8 +120,8 @@ const ActionDescriptionBox = ({ isDarkMode }: { isDarkMode: boolean }) => {
} else {
return (
<>
<Typography variant="subtitle2" gutterBottom>What data do you want to extract?</Typography>
<Typography variant="body2" gutterBottom>A robot is designed to perform one action at a time. You can choose any of the options below.</Typography>
<Typography variant="subtitle2" gutterBottom>{t('action_description.default.title')}</Typography>
<Typography variant="body2" gutterBottom>{t('action_description.default.description')}</Typography>
</>
);
}
@@ -135,4 +138,4 @@ const ActionDescriptionBox = ({ isDarkMode }: { isDarkMode: boolean }) => {
);
};
export default ActionDescriptionBox;
export default ActionDescriptionBox;

19
src/components/molecules/BrowserRecordingSave.tsx
View File

@@ -5,8 +5,10 @@ import { useGlobalInfoStore } from '../../context/globalInfo';
import { stopRecording } from "../../api/recording";
import { useNavigate } from 'react-router-dom';
import { GenericModal } from "../atoms/GenericModal";
import { useTranslation } from 'react-i18next';
const BrowserRecordingSave = () => {
const { t } = useTranslation();
const [openModal, setOpenModal] = useState<boolean>(false);
const { recordingName, browserId, setBrowserId, notify } = useGlobalInfoStore();
const navigate = useNavigate();
@@ -14,7 +16,7 @@ const BrowserRecordingSave = () => {
const goToMainMenu = async () => {
if (browserId) {
await stopRecording(browserId);
notify('warning', 'Current Recording was terminated');
notify('warning', t('browser_recording.notifications.terminated'));
setBrowserId(null);
}
navigate('/');
@@ -24,32 +26,31 @@ const BrowserRecordingSave = () => {
<Grid container>
<Grid item xs={12} md={3} lg={3}>
<div style={{
// marginLeft: '10px',
marginTop: '12px',
color: 'white',
position: 'absolute',
background: '#ff00c3',
border: 'none',
borderRadius: '0px 0px 8px 8px',
padding: '7.5px',
width: '100%', // Ensure it takes full width but with padding
width: 'calc(100% - 20px)',
overflow: 'hidden',
display: 'flex',
justifyContent: 'space-between',
height:"48px"
}}>
<Button onClick={() => setOpenModal(true)} variant="outlined" style={{ marginLeft: "25px" }} size="small" color="error">
Discard
{t('right_panel.buttons.discard')}
</Button>
<GenericModal isOpen={openModal} onClose={() => setOpenModal(false)} modalStyle={modalStyle}>
<Box p={2}>
<Typography variant="h6">Are you sure you want to discard the recording?</Typography>
<Typography variant="h6">{t('browser_recording.modal.confirm_discard')}</Typography>
<Box display="flex" justifyContent="space-between" mt={2}>
<Button onClick={goToMainMenu} variant="contained" color="error">
Discard
{t('right_panel.buttons.discard')}
</Button>
<Button onClick={() => setOpenModal(false)} variant="outlined">
Cancel
{t('right_panel.buttons.cancel')}
</Button>
</Box>
</Box>
@@ -61,7 +62,7 @@ const BrowserRecordingSave = () => {
);
}
export default BrowserRecordingSave
export default BrowserRecordingSave;
const modalStyle = {
top: '25%',

46
src/components/molecules/ColapsibleRow.tsx
View File

@@ -10,6 +10,7 @@ import { RunContent } from "./RunContent";
import { GenericModal } from "../atoms/GenericModal";
import { modalStyle } from "./AddWhereCondModal";
import { getUserById } from "../../api/auth";
import { useTranslation } from "react-i18next";
interface RunTypeChipProps {
runByUserId?: string;
@@ -18,10 +19,12 @@ interface RunTypeChipProps {
}
const RunTypeChip: React.FC<RunTypeChipProps> = ({ runByUserId, runByScheduledId, runByAPI }) => {
if (runByUserId) return <Chip label="Manual Run" color="primary" variant="outlined" />;
if (runByScheduledId) return <Chip label="Scheduled Run" color="primary" variant="outlined" />;
if (runByAPI) return <Chip label="API" color="primary" variant="outlined" />;
return <Chip label="Unknown Run Type" color="primary" variant="outlined" />;
const { t } = useTranslation();
if (runByUserId) return <Chip label={t('runs_table.run_type_chips.manual_run')} color="primary" variant="outlined" />;
if (runByScheduledId) return <Chip label={t('runs_table.run_type_chips.scheduled_run')} color="primary" variant="outlined" />;
if (runByAPI) return <Chip label={t('runs_table.run_type_chips.api')} color="primary" variant="outlined" />;
return <Chip label={t('runs_table.run_type_chips.unknown_run_type')} color="primary" variant="outlined" />;
};
interface CollapsibleRowProps {
@@ -33,6 +36,7 @@ interface CollapsibleRowProps {
runningRecordingName: string;
}
export const CollapsibleRow = ({ row, handleDelete, isOpen, currentLog, abortRunHandler, runningRecordingName }: CollapsibleRowProps) => {
const { t } = useTranslation();
const [open, setOpen] = useState(isOpen);
const [openSettingsModal, setOpenSettingsModal] = useState(false);
const [userEmail, setUserEmail] = useState<string | null>(null);
@@ -99,12 +103,12 @@ export const CollapsibleRow = ({ row, handleDelete, isOpen, currentLog, abortRun
} else {
switch (column.id) {
case 'runStatus':
return (
return (
<TableCell key={column.id} align={column.align}>
{row.status === 'success' && <Chip label="Success" color="success" variant="outlined" />}
{row.status === 'running' && <Chip label="Running" color="warning" variant="outlined" />}
{row.status === 'scheduled' && <Chip label="Scheduled" variant="outlined" />}
{row.status === 'failed' && <Chip label="Failed" color="error" variant="outlined" />}
{row.status === 'success' && <Chip label={t('runs_table.run_status_chips.success')} color="success" variant="outlined" />}
{row.status === 'running' && <Chip label={t('runs_table.run_status_chips.running')} color="warning" variant="outlined" />}
{row.status === 'scheduled' && <Chip label={t('runs_table.run_status_chips.scheduled')} variant="outlined" />}
{row.status === 'failed' && <Chip label={t('runs_table.run_status_chips.failed')} color="error" variant="outlined" />}
</TableCell>
)
case 'delete':
@@ -133,21 +137,35 @@ export const CollapsibleRow = ({ row, handleDelete, isOpen, currentLog, abortRun
modalStyle={modalStyle}
>
<>
<Typography variant="h5" style={{ marginBottom: '20px' }}>Run Settings</Typography>
<Typography variant="h5" style={{ marginBottom: '20px' }}>
{t('runs_table.run_settings_modal.title')}
</Typography>
<Box style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
<TextField
label="Run ID"
label={t('runs_table.run_settings_modal.labels.run_id')}
value={row.runId}
InputProps={{ readOnly: true }}
/>
<TextField
label={row.runByUserId ? "Run by User" : row.runByScheduleId ? "Run by Schedule ID" : "Run by API"}
label={
row.runByUserId
? t('runs_table.run_settings_modal.labels.run_by_user')
: row.runByScheduleId
? t('runs_table.run_settings_modal.labels.run_by_schedule')
: t('runs_table.run_settings_modal.labels.run_by_api')
}
value={runByLabel}
InputProps={{ readOnly: true }}
/>
<Box style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<Typography variant="body1">Run Type:</Typography>
<RunTypeChip runByUserId={row.runByUserId} runByScheduledId={row.runByScheduleId} runByAPI={row.runByAPI ?? false} />
<Typography variant="body1">
{t('runs_table.run_settings_modal.labels.run_type')}:
</Typography>
<RunTypeChip
runByUserId={row.runByUserId}
runByScheduledId={row.runByScheduleId}
runByAPI={row.runByAPI ?? false}
/>
</Box>
</Box>
</>

74
src/components/molecules/IntegrationSettings.tsx
View File

@@ -14,6 +14,9 @@ import axios from "axios";
import { useGlobalInfoStore } from "../../context/globalInfo";
import { getStoredRecording } from "../../api/storage";
import { apiUrl } from "../../apiConfig.js";
import Cookies from 'js-cookie';
import { useTranslation } from "react-i18next";
interface IntegrationProps {
isOpen: boolean;
@@ -46,6 +49,7 @@ export const IntegrationSettingsModal = ({
handleStart,
handleClose,
}: IntegrationProps) => {
const { t } = useTranslation();
const [settings, setSettings] = useState<IntegrationSettings>({
spreadsheetId: "",
spreadsheetName: "",
@@ -90,9 +94,9 @@ export const IntegrationSettingsModal = ({
);
notify(
"error",
`Error fetching spreadsheet files: ${
error.response?.data?.message || error.message
}`
t('integration_settings.errors.fetch_error', {
message: error.response?.data?.message || error.message
})
);
}
};
@@ -121,7 +125,7 @@ export const IntegrationSettingsModal = ({
},
{ withCredentials: true }
);
notify(`success`, `Google Sheet selected successfully`);
notify(`success`, t('integration_settings.notifications.sheet_selected'));
console.log("Google Sheet ID updated:", response.data);
} catch (error: any) {
console.error(
@@ -182,37 +186,28 @@ export const IntegrationSettingsModal = ({
return (
<GenericModal isOpen={isOpen} onClose={handleClose} modalStyle={modalStyle}>
<div
style={{
<div style={{
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
marginLeft: "65px",
}}
>
}}>
<Typography variant="h6">
Integrate with Google Sheet{" "}
{t('integration_settings.title')}
</Typography>
{recording && recording.google_sheet_id ? (
<>
<Alert severity="info" sx={{ marginTop: '10px', border: '1px solid #ff00c3' }}>
<AlertTitle>Google Sheet Integrated Successfully.</AlertTitle>
Every time this robot creates a successful run, its captured data
is appended to your {recording.google_sheet_name} Google Sheet.
You can check the data updates{" "}
<a
href={`https://docs.google.com/spreadsheets/d/${recording.google_sheet_id}`}
<AlertTitle>{t('integration_settings.alerts.success.title')}</AlertTitle>
{t('integration_settings.alerts.success.content', { sheetName: recording.google_sheet_name })}
<a href={`https://docs.google.com/spreadsheets/d/${recording.google_sheet_id}`}
target="_blank"
rel="noreferrer"
>
here
</a>
.
rel="noreferrer">
{t('integration_settings.alerts.success.here')}
</a>.
<br />
<strong>Note:</strong> The data extracted before integrating with
Google Sheets will not be synced in the Google Sheet. Only the
data extracted after the integration will be synced.
<strong>{t('integration_settings.alerts.success.note')}</strong> {t('integration_settings.alerts.success.sync_limitation')}
</Alert>
<Button
variant="outlined"
@@ -220,31 +215,29 @@ export const IntegrationSettingsModal = ({
onClick={removeIntegration}
style={{ marginTop: "15px" }}
>
Remove Integration
{t('integration_settings.buttons.remove_integration')}
</Button>
</>
) : (
<>
{!recording?.google_sheet_email ? (
<>
<p>
If you enable this option, every time this robot runs a task
successfully, its captured data will be appended to your
Google Sheet.
</p>
<p>{t('integration_settings.descriptions.sync_info')}</p>
<Button
variant="contained"
color="primary"
onClick={authenticateWithGoogle}
>
Authenticate with Google
{t('integration_settings.buttons.authenticate')}
</Button>
</>
) : (
<>
{recording.google_sheet_email && (
<Typography sx={{ margin: "20px 0px 30px 0px" }}>
Authenticated as: {recording.google_sheet_email}
{t('integration_settings.descriptions.authenticated_as', {
email: recording.google_sheet_email
})}
</Typography>
)}
@@ -260,14 +253,14 @@ export const IntegrationSettingsModal = ({
color="primary"
onClick={fetchSpreadsheetFiles}
>
Fetch Google Spreadsheets
{t('integration_settings.buttons.fetch_sheets')}
</Button>
<Button
variant="outlined"
color="error"
onClick={removeIntegration}
>
Remove Integration
{t('integration_settings.buttons.remove_integration')}
</Button>
</div>
</>
@@ -276,7 +269,7 @@ export const IntegrationSettingsModal = ({
<TextField
sx={{ marginBottom: "15px" }}
select
label="Select Google Sheet"
label={t('integration_settings.fields.select_sheet')}
required
value={settings.spreadsheetId}
onChange={handleSpreadsheetSelect}
@@ -291,13 +284,10 @@ export const IntegrationSettingsModal = ({
{settings.spreadsheetId && (
<Typography sx={{ marginBottom: "10px" }}>
Selected Sheet:{" "}
{
spreadsheets.find(
(s) => s.id === settings.spreadsheetId
)?.name
}{" "}
(ID: {settings.spreadsheetId})
{t('integration_settings.fields.selected_sheet', {
name: spreadsheets.find((s) => s.id === settings.spreadsheetId)?.name,
id: settings.spreadsheetId
})}
</Typography>
)}
@@ -311,7 +301,7 @@ export const IntegrationSettingsModal = ({
style={{ marginTop: "10px" }}
disabled={!settings.spreadsheetId || loading}
>
Submit
{t('integration_settings.buttons.submit')}
</Button>
</>
)}

32
src/components/molecules/InterpretationButtons.tsx
View File

@@ -7,6 +7,7 @@ import { useGlobalInfoStore } from "../../context/globalInfo";
import { GenericModal } from "../atoms/GenericModal";
import { WhereWhatPair } from "maxun-core";
import HelpIcon from '@mui/icons-material/Help';
import { useTranslation } from "react-i18next";
interface InterpretationButtonsProps {
enableStepping: (isPaused: boolean) => void;
@@ -23,6 +24,7 @@ const interpretationInfo: InterpretationInfo = {
};
export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsProps) => {
const { t } = useTranslation();
const [info, setInfo] = useState<InterpretationInfo>(interpretationInfo);
const [decisionModal, setDecisionModal] = useState<{
pair: WhereWhatPair | null,
@@ -44,9 +46,9 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
const breakpointHitHandler = useCallback(() => {
setInfo({ running: false, isPaused: true });
notify('warning', 'Please restart the interpretation after updating the recording');
notify('warning', t('interpretation_buttons.messages.restart_required'));
enableStepping(true);
}, [enableStepping]);
}, [enableStepping, t]);
const decisionHandler = useCallback(
({ pair, actionType, lastData }: { pair: WhereWhatPair | null, actionType: string, lastData: { selector: string, action: string, tagName: string, innerText: string } }) => {
@@ -73,11 +75,12 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
return (
<>
<Typography>
Do you want to use your previous selection as a condition for performing this action?
{t('interpretation_buttons.modal.use_previous')}
</Typography>
<Box style={{ marginTop: '4px' }}>
<Typography>
Your previous action was: <b>{decisionModal.action}</b>, on an element with text <b>{decisionModal.innerText}</b>
{t('interpretation_buttons.modal.previous_action')} <b>{decisionModal.action}</b>,
{t('interpretation_buttons.modal.element_text')} <b>{decisionModal.innerText}</b>
</Typography>
</Box>
</>
@@ -105,9 +108,9 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
const finished = await interpretCurrentRecording();
setInfo({ ...info, running: false });
if (finished) {
notify('info', 'Run finished');
notify('info', t('interpretation_buttons.messages.run_finished'));
} else {
notify('error', 'Run failed to start');
notify('error', t('interpretation_buttons.messages.run_failed'));
}
}
};
@@ -139,9 +142,12 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
disabled={info.running}
sx={{ display: 'grid' }}
>
{info.running ? <Box sx={{ display: 'flex', alignItems: 'center' }}>
<CircularProgress size={22} color="inherit" sx={{ marginRight: '10px' }} /> Extracting data...please wait for 10secs to 1min
</Box> : 'Get Preview of Output Data'}
{info.running ? (
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<CircularProgress size={22} color="inherit" sx={{ marginRight: '10px' }} />
{t('interpretation_buttons.messages.extracting')}
</Box>
) : t('interpretation_buttons.buttons.preview')}
</Button>
<GenericModal
onClose={() => { }}
@@ -166,8 +172,12 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
<HelpIcon />
{handleDescription()}
<div style={{ float: 'right' }}>
<Button onClick={() => handleDecision(true)} color='success'>Yes</Button>
<Button onClick={() => handleDecision(false)} color='error'>No</Button>
<Button onClick={() => handleDecision(true)} color='success'>
{t('interpretation_buttons.buttons.yes')}
</Button>
<Button onClick={() => handleDecision(false)} color='error'>
{t('interpretation_buttons.buttons.no')}
</Button>
</div>
</div>
</GenericModal>

53
src/components/molecules/InterpretationLog.tsx
View File

@@ -18,6 +18,7 @@ import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import { SidePanelHeader } from './SidePanelHeader';
import { useGlobalInfoStore } from '../../context/globalInfo';
import { useThemeMode } from '../../context/theme-provider';
import { useTranslation } from 'react-i18next';
interface InterpretationLogProps {
isOpen: boolean;
@@ -25,6 +26,7 @@ interface InterpretationLogProps {
}
export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, setIsOpen }) => {
const { t } = useTranslation();
const [log, setLog] = useState<string>('');
const [customValue, setCustomValue] = useState('');
const [tableData, setTableData] = useState<any[]>([]);
@@ -34,7 +36,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
const { width } = useBrowserDimensionsStore();
const { socket } = useSocketStore();
const { currentWorkflowActionsState } = useGlobalInfoStore();
const { currentWorkflowActionsState, shouldResetInterpretationLog, notify } = useGlobalInfoStore();
const toggleDrawer = (newOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
if (
@@ -64,34 +66,43 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
const handleSerializableCallback = useCallback((data: any) => {
setLog((prevState) =>
prevState + '\n' + '---------- Serializable output data received ----------' + '\n'
+ JSON.stringify(data, null, 2) + '\n' + '--------------------------------------------------');
prevState + '\n' + t('interpretation_log.data_sections.serializable_received') + '\n'
+ JSON.stringify(data, null, 2) + '\n' + t('interpretation_log.data_sections.separator'));
if (Array.isArray(data)) {
setTableData(data);
}
scrollLogToBottom();
}, [log, scrollLogToBottom]);
}, [log, scrollLogToBottom, t]);
const handleBinaryCallback = useCallback(({ data, mimetype }: any) => {
const base64String = Buffer.from(data).toString('base64');
const imageSrc = `data:${mimetype};base64,${base64String}`;
setLog((prevState) =>
prevState + '\n' + '---------- Binary output data received ----------' + '\n'
+ `mimetype: ${mimetype}` + '\n' + 'Image is rendered below:' + '\n'
+ '------------------------------------------------');
prevState + '\n' + t('interpretation_log.data_sections.binary_received') + '\n'
+ t('interpretation_log.data_sections.mimetype') + mimetype + '\n'
+ t('interpretation_log.data_sections.image_below') + '\n'
+ t('interpretation_log.data_sections.separator'));
setBinaryData(imageSrc);
scrollLogToBottom();
}, [log, scrollLogToBottom]);
}, [log, scrollLogToBottom, t]);
const handleCustomValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setCustomValue(event.target.value);
};
useEffect(() => {
if (shouldResetInterpretationLog) {
setLog('');
setTableData([]);
setBinaryData(null);
}
}, [shouldResetInterpretationLog]);
useEffect(() => {
socket?.on('log', handleLog);
socket?.on('serializableCallback', handleSerializableCallback);
@@ -141,7 +152,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
},
}}
>
<ArrowUpwardIcon fontSize="inherit" sx={{ marginRight: '10px'}} /> Output Data Preview
<ArrowUpwardIcon fontSize="inherit" sx={{ marginRight: '10px'}} />
{t('interpretation_log.titles.output_preview')}
</Button>
<SwipeableDrawer
anchor="bottom"
@@ -160,9 +172,10 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
},
}}
>
<Typography variant="h6" gutterBottom style={{ display: 'flex', alignItems: 'center' }}>
<StorageIcon style={{ marginRight: '8px' }} /> Output Data Preview
</Typography>
<Typography variant="h6" gutterBottom style={{ display: 'flex', alignItems: 'center' }}>
<StorageIcon style={{ marginRight: '8px' }} />
{t('interpretation_log.titles.output_preview')}
</Typography>
<div
style={{
height: '50vh',
@@ -173,8 +186,10 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
{
binaryData ? (
<div style={{ marginBottom: '20px' }}>
<Typography variant="body1" gutterBottom>Screenshot</Typography>
<img src={binaryData} alt="Binary Output" style={{ maxWidth: '100%' }} />
<Typography variant="body1" gutterBottom>
{t('interpretation_log.titles.screenshot')}
</Typography>
<img src={binaryData} alt={t('interpretation_log.titles.screenshot')} style={{ maxWidth: '100%' }} />
</div>
) : tableData.length > 0 ? (
<>
@@ -198,7 +213,9 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
</TableBody>
</Table>
</TableContainer>
<span style={{ marginLeft: '15px', marginTop: '10px', fontSize: '12px' }}>Additional rows of data will be extracted once you finish recording. </span>
<span style={{ marginLeft: '15px', marginTop: '10px', fontSize: '12px' }}>
{t('interpretation_log.messages.additional_rows')}
</span>
</>
) : (
<Grid container justifyContent="center" alignItems="center" style={{ height: '100%' }}>
@@ -206,13 +223,13 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
{hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction ? (
<>
<Typography variant="h6" gutterBottom align="left">
You've successfully trained the robot to perform actions! Click on the button below to get a preview of the data your robot will extract.
{t('interpretation_log.messages.successful_training')}
</Typography>
<SidePanelHeader />
</>
) : (
<Typography variant="h6" gutterBottom align="left">
It looks like you have not selected anything for extraction yet. Once you do, the robot will show a preview of your selections here.
{t('interpretation_log.messages.no_selection')}
</Typography>
)}
</Grid>
@@ -224,4 +241,4 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
</Grid>
</Grid>
);
}
};

664
src/components/molecules/NavBar.tsx
View File

@@ -1,4 +1,5 @@
import React, { useState, useContext } from 'react';
import { useTranslation } from "react-i18next";
import React, { useState, useContext, useEffect } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import {
@@ -20,173 +21,592 @@ import styled from "styled-components";
import { stopRecording } from "../../api/recording";
import { useGlobalInfoStore } from "../../context/globalInfo";
import { IconButton, Menu, MenuItem, Typography, Chip, Button, Modal, Tabs, Tab, Box, Snackbar } from "@mui/material";
import { AccountCircle, Logout, Clear, YouTube, X, Update, Close, Language } from "@mui/icons-material";
import { useNavigate } from 'react-router-dom';
import { AuthContext } from '../../context/auth';
import { SaveRecording } from '../molecules/SaveRecording';
import DiscordIcon from '../atoms/DiscordIcon';
import { apiUrl } from '../../apiConfig';
import MaxunLogo from "../../assets/maxunlogo.png";
import { useThemeMode } from '../../context/theme-provider';
import packageJson from "../../../package.json"
interface NavBarProps {
recordingName: string;
isRecording: boolean;
}
export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) => {
export const NavBar: React.FC<NavBarProps> = ({
recordingName,
isRecording,
}) => {
const { notify, browserId, setBrowserId } = useGlobalInfoStore();
const { state, dispatch } = useContext(AuthContext);
const { user } = state;
const navigate = useNavigate();
const { darkMode, toggleTheme } = useThemeMode();
const { t, i18n } = useTranslation();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [langAnchorEl, setLangAnchorEl] = useState<null | HTMLElement>(null);
const currentVersion = packageJson.version;
const [open, setOpen] = useState(false);
const [latestVersion, setLatestVersion] = useState<string | null>(null);
const [tab, setTab] = useState(0);
const [isUpdateAvailable, setIsUpdateAvailable] = useState(false);
const fetchLatestVersion = async (): Promise<string | null> => {
try {
const response = await fetch("https://api.github.com/repos/getmaxun/maxun/releases/latest");
const data = await response.json();
const version = data.tag_name.replace(/^v/, ""); // Remove 'v' prefix
return version;
} catch (error) {
console.error("Failed to fetch latest version:", error);
return null;
}
};
const handleUpdateOpen = () => {
setOpen(true);
fetchLatestVersion();
};
const handleUpdateClose = () => {
setOpen(false);
setTab(0); // Reset tab to the first tab
};
const handleUpdateTabChange = (event: React.SyntheticEvent, newValue: number) => {
setTab(newValue);
};
const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleLangMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
setLangAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(null);
setLangAnchorEl(null);
};
const logout = async () => {
dispatch({ type: 'LOGOUT' });
window.localStorage.removeItem('user');
dispatch({ type: "LOGOUT" });
window.localStorage.removeItem("user");
const { data } = await axios.get(`${apiUrl}/auth/logout`);
notify('success', data.message);
navigate('/login');
notify("success", data.message);
navigate("/login");
};
const goToMainMenu = async () => {
if (browserId) {
await stopRecording(browserId);
notify('warning', 'Current Recording was terminated');
notify("warning", t('browser_recording.notifications.terminated'));
setBrowserId(null);
}
navigate('/');
navigate("/");
};
const renderBrandSection = () => (
<BrandContainer>
<LogoImage src={MaxunLogo} alt="Maxun Logo" />
<ProjectName mode={darkMode ? 'dark' : 'light'}>Maxun</ProjectName>
<Chip
label="beta"
variant="outlined"
sx={{
marginTop: '10px',
borderColor: '#ff00c3',
color: '#ff00c3'
}}
/>
</BrandContainer>
);
const changeLanguage = (lang: string) => {
i18n.changeLanguage(lang);
localStorage.setItem("language", lang);
};
const renderSocialButtons = () => (
<>
<IconButton
component="a"
href="https://discord.gg/5GbPjBUkws"
target="_blank"
rel="noopener noreferrer"
sx={{
...styles.socialButton,
color: darkMode ? '#ffffff' : '#333333',
'&:hover': {
color: '#ff00c3'
}
}}
>
<DiscordIcon sx={{ marginRight: '5px' }} />
</IconButton>
<iframe
src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large"
frameBorder="0"
scrolling="0"
width="170"
height="30"
title="GitHub"
/>
</>
);
// const renderBrandSection = () => (
// <BrandContainer>
// <LogoImage src={MaxunLogo} alt="Maxun Logo" />
// <ProjectName mode={darkMode ? 'dark' : 'light'}>Maxun</ProjectName>
// <Chip
// label="beta"
// variant="outlined"
// sx={{
// marginTop: '10px',
// borderColor: '#ff00c3',
// color: '#ff00c3'
// }}
// />
// </BrandContainer>
// );
const renderUserMenu = () => (
<>
<IconButton
onClick={handleMenuOpen}
sx={styles.userButton(darkMode)}
>
<AccountCircle sx={{ marginRight: '5px' }} />
<Typography variant="body1">{user?.email}</Typography>
</IconButton>
<Menu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleMenuClose}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
PaperProps={{
sx: {
backgroundColor: darkMode ? '#1e2124' : '#ffffff',
color: darkMode ? '#ffffff' : '#333333'
}
}}
>
<MenuItem onClick={() => { handleMenuClose(); logout(); }}>
<Logout sx={{ marginRight: '5px' }} /> Logout
</MenuItem>
</Menu>
</>
);
// const renderSocialButtons = () => (
// <>
// <IconButton
// component="a"
// href="https://discord.gg/5GbPjBUkws"
// target="_blank"
// rel="noopener noreferrer"
// sx={{
// ...styles.socialButton,
// color: darkMode ? '#ffffff' : '#333333',
// '&:hover': {
// color: '#ff00c3'
// }
// }}
// >
// <DiscordIcon sx={{ marginRight: '5px' }} />
// </IconButton>
// <iframe
// src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large"
// frameBorder="0"
// scrolling="0"
// width="170"
// height="30"
// title="GitHub"
// />
// </>
// );
const renderThemeToggle = () => (
<Tooltip title="Toggle light/dark theme">
<IconButton
onClick={toggleTheme}
sx={{
color: darkMode ? '#ffffff' : '#333333',
'&:hover': {
color: '#ff00c3'
}
}}
>
{darkMode ? <Brightness7 /> : <Brightness4 />}
</IconButton>
</Tooltip>
);
// const renderUserMenu = () => (
// <>
// <IconButton
// onClick={handleMenuOpen}
// sx={styles.userButton(darkMode)}
// >
// <AccountCircle sx={{ marginRight: '5px' }} />
// <Typography variant="body1">{user?.email}</Typography>
// </IconButton>
// <Menu
// anchorEl={anchorEl}
// open={Boolean(anchorEl)}
// onClose={handleMenuClose}
// anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
// transformOrigin={{ vertical: 'top', horizontal: 'right' }}
// PaperProps={{
// sx: {
// backgroundColor: darkMode ? '#1e2124' : '#ffffff',
// color: darkMode ? '#ffffff' : '#333333'
// }
// }}
// >
// <MenuItem onClick={() => { handleMenuClose(); logout(); }}>
// <Logout sx={{ marginRight: '5px' }} /> Logout
// </MenuItem>
// </Menu>
// </>
// );
const renderRecordingControls = () => (
<>
<IconButton
onClick={goToMainMenu}
sx={styles.discardButton}
>
<Clear sx={{ marginRight: '5px' }} />
Discard
</IconButton>
<SaveRecording fileName={recordingName} />
</>
);
// const renderThemeToggle = () => (
// <Tooltip title="Toggle light/dark theme">
// <IconButton
// onClick={toggleTheme}
// sx={{
// color: darkMode ? '#ffffff' : '#333333',
// '&:hover': {
// color: '#ff00c3'
// }
// }}
// >
// {darkMode ? <Brightness7 /> : <Brightness4 />}
// </IconButton>
// </Tooltip>
// );
return (
// const renderRecordingControls = () => (
// <>
// <IconButton
// onClick={goToMainMenu}
// sx={styles.discardButton}
// >
// <Clear sx={{ marginRight: '5px' }} />
// Discard
// </IconButton>
// <SaveRecording fileName={recordingName} />
// </>
// );
<NavBarWrapper mode={darkMode ? 'dark' : 'light'}>
{renderBrandSection()}
{user && (
<ControlsContainer>
{!isRecording ? (
<>
{renderSocialButtons()}
{renderUserMenu()}
{renderThemeToggle()}
</>
) : (
renderRecordingControls()
)}
</ControlsContainer>
)}
// return (
// <NavBarWrapper mode={darkMode ? 'dark' : 'light'}>
// {renderBrandSection()}
// {user && (
// <ControlsContainer>
// {!isRecording ? (
// <>
// {renderSocialButtons()}
// {renderUserMenu()}
// {renderThemeToggle()}
// </>
// ) : (
// renderRecordingControls()
// )}
// </ControlsContainer>
// )}
</NavBarWrapper>
// </NavBarWrapper>
useEffect(() => {
const checkForUpdates = async () => {
const latestVersion = await fetchLatestVersion();
setLatestVersion(latestVersion);
if (latestVersion && latestVersion !== currentVersion) {
setIsUpdateAvailable(true);
}
};
checkForUpdates();
}, []);
return (
<>
{isUpdateAvailable && (
<Snackbar
open={isUpdateAvailable}
onClose={() => setIsUpdateAvailable(false)}
message={
`${t('navbar.upgrade.modal.new_version_available', { version: latestVersion })} ${t('navbar.upgrade.modal.view_updates')}`
}
action={
<>
<Button
color="primary"
size="small"
onClick={handleUpdateOpen}
style={{
backgroundColor: '#ff00c3',
color: 'white',
fontWeight: 'bold',
textTransform: 'none',
marginRight: '8px',
borderRadius: '5px',
}}
>
{t('navbar.upgrade.button')}
</Button>
<IconButton
size="small"
aria-label="close"
color="inherit"
onClick={() => setIsUpdateAvailable(false)}
style={{ color: 'black' }}
>
<Close />
</IconButton>
</>
}
ContentProps={{
sx: {
background: "white",
color: "black",
}
}}
/>
)}
<NavBarWrapper mode={darkMode ? 'dark' : 'light'}>
<div style={{
display: 'flex',
justifyContent: 'flex-start',
}}>
<img src={MaxunLogo} width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
<div style={{ padding: '11px' }}><ProjectName>{t('navbar.project_name')}</ProjectName></div>
<Chip
label={`${currentVersion}`}
color="primary"
variant="outlined"
sx={{ marginTop: '10px' }}
/>
</div>
{
user ? (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
{!isRecording ? (
<>
<Button variant="outlined" onClick={handleUpdateOpen} sx={{
marginRight: '40px',
color: "#00000099",
border: "#00000099 1px solid",
'&:hover': { color: '#ff00c3', border: '#ff00c3 1px solid' }
}}>
<Update sx={{ marginRight: '5px' }} /> {t('navbar.upgrade.button')} Maxun
</Button>
<Modal open={open} onClose={handleUpdateClose}>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 500,
bgcolor: "background.paper",
boxShadow: 24,
p: 4,
borderRadius: 2,
}}
>
{latestVersion === null ? (
<Typography>Checking for updates...</Typography>
) : currentVersion === latestVersion ? (
<Typography variant="h6" textAlign="center">
{t('navbar.upgrade.modal.up_to_date')}
</Typography>
) : (
<>
<Typography variant="body1" textAlign="left" sx={{ marginLeft: '30px' }}>
{t('navbar.upgrade.modal.new_version_available', { version: latestVersion })}
<br />
{t('navbar.upgrade.modal.view_updates')}
<a href="https://github.com/getmaxun/maxun/releases/" target="_blank" style={{ textDecoration: 'none' }}>{' '}here.</a>
</Typography>
<Tabs
value={tab}
onChange={handleUpdateTabChange}
sx={{ marginTop: 2, marginBottom: 2 }}
centered
>
<Tab label={t('navbar.upgrade.modal.tabs.manual_setup')} />
<Tab label={t('navbar.upgrade.modal.tabs.docker_setup')} />
</Tabs>
{tab === 0 && (
<Box sx={{ marginLeft: '30px', background: '#cfd0d1', padding: 1, borderRadius: 3 }}>
<code style={{ color: 'black' }}>
<p>Run the commands below</p>
# cd to project directory (eg: maxun)
<br />
cd maxun
<br />
<br />
# pull latest changes
<br />
git pull origin master
<br />
<br />
# install dependencies
<br />
npm install
<br />
<br />
# start maxun
<br />
npm run start
</code>
</Box>
)}
{tab === 1 && (
<Box sx={{ marginLeft: '30px', background: '#cfd0d1', padding: 1, borderRadius: 3 }}>
<code style={{ color: 'black' }}>
<p>Run the commands below</p>
# cd to project directory (eg: maxun)
<br />
cd maxun
<br />
<br />
# stop the working containers
<br />
docker-compose down
<br />
<br />
# pull latest docker images
<br />
docker-compose pull
<br />
<br />
# start maxun
<br />
docker-compose up -d
</code>
</Box>
)}
</>
)}
</Box>
</Modal>
<iframe src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
<IconButton onClick={handleMenuOpen} sx={{
display: 'flex',
alignItems: 'center',
borderRadius: '5px',
padding: '8px',
marginRight: '10px',
'&:hover': { backgroundColor: 'white', color: '#ff00c3' }
}}>
<AccountCircle sx={{ marginRight: '5px' }} />
<Typography variant="body1">{user.email}</Typography>
</IconButton>
<Menu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleMenuClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
PaperProps={{ sx: { width: '180px' } }}
>
<MenuItem onClick={() => { handleMenuClose(); logout(); }}>
<Logout sx={{ marginRight: '5px' }} /> {t('navbar.menu_items.logout')}
</MenuItem>
<MenuItem onClick={() => {
window.open('https://discord.gg/5GbPjBUkws', '_blank');
}}>
<DiscordIcon sx={{ marginRight: '5px' }} /> Discord
</MenuItem>
<MenuItem onClick={() => {
window.open('https://www.youtube.com/@MaxunOSS/videos?ref=app', '_blank');
}}>
<YouTube sx={{ marginRight: '5px' }} /> YouTube
</MenuItem>
<MenuItem onClick={() => {
window.open('https://x.com/maxun_io?ref=app', '_blank');
}}>
<X sx={{ marginRight: '5px' }} /> Twitter (X)
</MenuItem>
<MenuItem onClick={handleLangMenuOpen}>
<Language sx={{ marginRight: '5px' }} /> {t('navbar.menu_items.language')}
</MenuItem>
<Menu
anchorEl={langAnchorEl}
open={Boolean(langAnchorEl)}
onClose={handleMenuClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<MenuItem
onClick={() => {
changeLanguage("en");
handleMenuClose();
}}
>
English
</MenuItem>
<MenuItem
onClick={() => {
changeLanguage("es");
handleMenuClose();
}}
>
Español
</MenuItem>
<MenuItem
onClick={() => {
changeLanguage("ja");
handleMenuClose();
}}
>
日本語
</MenuItem>
<MenuItem
onClick={() => {
changeLanguage("zh");
handleMenuClose();
}}
>
中文
</MenuItem>
<MenuItem
onClick={() => {
changeLanguage("de");
handleMenuClose();
}}
>
Deutsch
</MenuItem>
</Menu>
</Menu>
</>
) : (
<>
<IconButton onClick={goToMainMenu} sx={{
borderRadius: '5px',
padding: '8px',
background: 'red',
color: 'white',
marginRight: '10px',
'&:hover': { color: 'white', backgroundColor: 'red' }
}}>
<Clear sx={{ marginRight: '5px' }} />
{t('navbar.recording.discard')}
</IconButton>
<SaveRecording fileName={recordingName} />
</>
)}
</div>
) : (
<><IconButton
onClick={handleLangMenuOpen}
sx={{
display: "flex",
alignItems: "center",
borderRadius: "5px",
padding: "8px",
marginRight: "10px",
}}
>
<Language sx={{ marginRight: '5px' }} /><Typography variant="body1">{t("Language")}</Typography>
</IconButton>
<Menu
anchorEl={langAnchorEl}
open={Boolean(langAnchorEl)}
onClose={handleMenuClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<MenuItem
onClick={() => {
changeLanguage("en");
handleMenuClose();
}}
>
English
</MenuItem>
<MenuItem
onClick={() => {
changeLanguage("es");
handleMenuClose();
}}
>
Español
</MenuItem>
<MenuItem
onClick={() => {
changeLanguage("ja");
handleMenuClose();
}}
>
日本語
</MenuItem>
<MenuItem
onClick={() => {
changeLanguage("zh");
handleMenuClose();
}}
>
中文
</MenuItem>
<MenuItem
onClick={() => {
changeLanguage("de");
handleMenuClose();
}}
>
Deutsch
</MenuItem>
</Menu></>
)}
</NavBarWrapper>
</>
);
};

2
src/components/molecules/Pair.tsx
View File

@@ -1,5 +1,5 @@
import React, { FC, useState } from 'react';
import { Stack, Button, IconButton, Tooltip, Chip, Badge } from "@mui/material";
import { Stack, Button, IconButton, Tooltip, Badge } from "@mui/material";
import { AddPair, deletePair, UpdatePair } from "../../api/workflow";
import { WorkflowFile } from "maxun-core";
import { ClearButton } from "../atoms/buttons/ClearButton";

90
src/components/molecules/RecordingsTable.tsx
View File

@@ -1,4 +1,5 @@
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
@@ -19,6 +20,7 @@ import { useNavigate } from 'react-router-dom';
import { stopRecording } from "../../api/recording";
import { GenericModal } from '../atoms/GenericModal';
/** TODO:
* 1. allow editing existing robot after persisting browser steps
*/
@@ -31,31 +33,6 @@ interface Column {
format?: (value: string) => string;
}
const columns: readonly Column[] = [
{ id: 'interpret', label: 'Run', minWidth: 80 },
{ id: 'name', label: 'Name', minWidth: 80 },
{
id: 'schedule',
label: 'Schedule',
minWidth: 80,
},
{
id: 'integrate',
label: 'Integrate',
minWidth: 80,
},
{
id: 'settings',
label: 'Settings',
minWidth: 80,
},
{
id: 'options',
label: 'Options',
minWidth: 80,
},
];
interface Data {
id: string;
name: string;
@@ -76,12 +53,38 @@ interface RecordingsTableProps {
}
export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handleScheduleRecording, handleIntegrateRecording, handleSettingsRecording, handleEditRobot, handleDuplicateRobot }: RecordingsTableProps) => {
const {t} = useTranslation();
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const [rows, setRows] = React.useState<Data[]>([]);
const [isModalOpen, setModalOpen] = React.useState(false);
const [searchTerm, setSearchTerm] = React.useState('');
const columns: readonly Column[] = [
{ id: 'interpret', label: t('recordingtable.run'), minWidth: 80 },
{ id: 'name', label: t('recordingtable.name'), minWidth: 80 },
{
id: 'schedule',
label: t('recordingtable.schedule'),
minWidth: 80,
},
{
id: 'integrate',
label: t('recordingtable.integrate'),
minWidth: 80,
},
{
id: 'settings',
label: t('recordingtable.settings'),
minWidth: 80,
},
{
id: 'options',
label: t('recordingtable.options'),
minWidth: 80,
},
];
const { notify, setRecordings, browserId, setBrowserId, recordingUrl, setRecordingUrl, recordingName, setRecordingName, recordingId, setRecordingId } = useGlobalInfoStore();
const navigate = useNavigate();
@@ -151,16 +154,17 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
row.name.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<React.Fragment>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography variant="h6" gutterBottom>
My Robots
{t('recordingtable.heading')}
</Typography>
<Box display="flex" alignItems="center" gap={2}>
<TextField
size="small"
placeholder="Search robots..."
placeholder={t('recordingtable.search')}
value={searchTerm}
onChange={handleSearchChange}
InputProps={{
@@ -187,7 +191,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
'&:hover': { color: 'white', backgroundColor: '#ff00c3' }
}}
>
<Add sx={{ marginRight: '5px' }} /> Create Robot
<Add sx={{ marginRight: '5px' }} /> {t('recordingtable.new')}
</IconButton>
</Box>
</Box>
@@ -253,14 +257,14 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
checkRunsForRecording(row.id).then((result: boolean) => {
if (result) {
notify('warning', 'Cannot delete robot as it has associated runs');
notify('warning', t('recordingtable.notifications.delete_warning'));
}
})
deleteRecordingFromStorage(row.id).then((result: boolean) => {
if (result) {
setRows([]);
notify('success', 'Robot deleted successfully');
notify('success', t('recordingtable.notifications.delete_success'));
fetchRecordings();
}
})
@@ -297,9 +301,9 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
/>
<GenericModal isOpen={isModalOpen} onClose={() => setModalOpen(false)} modalStyle={modalStyle}>
<div style={{ padding: '20px' }}>
<Typography variant="h6" gutterBottom>Enter URL To Extract Data</Typography>
<Typography variant="h6" gutterBottom>{t('recordingtable.modal.title')}</Typography>
<TextField
label="URL"
label={t('recordingtable.modal.label')}
variant="outlined"
fullWidth
value={recordingUrl}
@@ -312,7 +316,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
onClick={startRecording}
disabled={!recordingUrl}
>
Start Training Robot
{t('recordingtable.modal.button')}
</Button>
</div>
</GenericModal>
@@ -397,6 +401,8 @@ const OptionsButton = ({ handleEdit, handleDelete, handleDuplicate }: OptionsBut
setAnchorEl(null);
};
const {t} = useTranslation();
return (
<>
<IconButton
@@ -415,19 +421,21 @@ const OptionsButton = ({ handleEdit, handleDelete, handleDuplicate }: OptionsBut
<ListItemIcon>
<Edit fontSize="small" />
</ListItemIcon>
<ListItemText>Edit</ListItemText>
</MenuItem>
<MenuItem onClick={() => { handleDuplicate(); handleClose(); }}>
<ListItemIcon>
<ContentCopy fontSize="small" />
</ListItemIcon>
<ListItemText>Duplicate</ListItemText>
<ListItemText>{t('recordingtable.edit')}</ListItemText>
</MenuItem>
<MenuItem onClick={() => { handleDelete(); handleClose(); }}>
<ListItemIcon>
<DeleteForever fontSize="small" />
</ListItemIcon>
<ListItemText>Delete</ListItemText>
<ListItemText>{t('recordingtable.delete')}</ListItemText>
</MenuItem>
<MenuItem onClick={() => { handleDuplicate(); handleClose(); }}>
<ListItemIcon>
<ContentCopy fontSize="small" />
</ListItemIcon>
<ListItemText>{t('recordingtable.duplicate')}</ListItemText>
</MenuItem>
</Menu>
</>

58
src/components/molecules/RobotDuplicate.tsx
View File

@@ -1,11 +1,12 @@
import React, { useState, useEffect } from 'react';
import { GenericModal } from "../atoms/GenericModal";
import { TextField, Typography, Box, Button, Chip } from "@mui/material";
import { TextField, Typography, Box, Button } from "@mui/material";
import { modalStyle } from "./AddWhereCondModal";
import { useGlobalInfoStore } from '../../context/globalInfo';
import { duplicateRecording, getStoredRecording } from '../../api/storage';
import { WhereWhatPair } from 'maxun-core';
import { getUserById } from "../../api/auth";
import { useTranslation } from 'react-i18next';
interface RobotMeta {
name: string;
@@ -54,6 +55,7 @@ interface RobotSettingsProps {
}
export const RobotDuplicationModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
const { t } = useTranslation();
const [robot, setRobot] = useState<RobotSettings | null>(null);
const [targetUrl, setTargetUrl] = useState<string | undefined>('');
const { recordingId, notify } = useGlobalInfoStore();
@@ -65,7 +67,6 @@ export const RobotDuplicationModal = ({ isOpen, handleStart, handleClose, initia
}, [isOpen]);
useEffect(() => {
// Update the targetUrl when the robot data is loaded
if (robot) {
const lastPair = robot?.recording.workflow[robot?.recording.workflow.length - 1];
const url = lastPair?.what.find(action => action.action === "goto")?.args?.[0];
@@ -78,43 +79,36 @@ export const RobotDuplicationModal = ({ isOpen, handleStart, handleClose, initia
const robot = await getStoredRecording(recordingId);
setRobot(robot);
} else {
notify('error', 'Could not find robot details. Please try again.');
notify('error', t('robot_duplication.notifications.robot_not_found'));
}
}
// const lastPair = robot?.recording.workflow[robot?.recording.workflow.length - 1];
// // Find the `goto` action in `what` and retrieve its arguments
// const targetUrl = lastPair?.what.find(action => action.action === "goto")?.args?.[0];
const handleTargetUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setTargetUrl(e.target.value);
};
const handleSave = async () => {
if (!robot || !targetUrl) {
notify('error', 'Target URL is required.');
notify('error', t('robot_duplication.notifications.url_required'));
return;
}
console.log("handle save");
try {
const success = await duplicateRecording(robot.recording_meta.id, targetUrl);
if (success) {
notify('success', 'Robot duplicated successfully.');
handleStart(robot); // Inform parent about the updated robot
notify('success', t('robot_duplication.notifications.duplicate_success'));
handleStart(robot);
handleClose();
setTimeout(() => {
window.location.reload();
}, 1000);
} else {
notify('error', 'Failed to update the Target URL. Please try again.');
notify('error', t('robot_duplication.notifications.duplicate_error'));
}
} catch (error) {
notify('error', 'An error occurred while updating the Target URL.');
notify('error', t('robot_duplication.notifications.unknown_error'));
console.error('Error updating Target URL:', error);
}
};
@@ -126,34 +120,40 @@ export const RobotDuplicationModal = ({ isOpen, handleStart, handleClose, initia
modalStyle={modalStyle}
>
<>
<Typography variant="h5" style={{ marginBottom: '20px' }}>Duplicate Robot</Typography>
<Typography variant="h5" style={{ marginBottom: '20px' }}>
{t('robot_duplication.title')}
</Typography>
<Box style={{ display: 'flex', flexDirection: 'column' }}>
{
robot && (
<>
<span>Robot duplication is useful to extract data from pages with the same structure.</span>
<span>
{t('robot_duplication.descriptions.purpose')}
</span>
<br />
<span dangerouslySetInnerHTML={{
__html: t('robot_duplication.descriptions.example', {
url1: '<code>producthunt.com/topics/api</code>',
url2: '<code>producthunt.com/topics/database</code>'
})
}}/>
<br />
<span>
Example: If you've created a robot for <code>producthunt.com/topics/api</code>, you can duplicate it to scrape similar pages
like <code>producthunt.com/topics/database</code> without training a robot from scratch.
</span>
<br />
<span>
<b>⚠️ Ensure the new page has the same structure as the original page.</b>
<b>{t('robot_duplication.descriptions.warning')}</b>
</span>
<TextField
label="Robot Target URL"
key="Robot Target URL"
label={t('robot_duplication.fields.target_url')}
key={t('robot_duplication.fields.target_url')}
value={targetUrl}
onChange={handleTargetUrlChange}
style={{ marginBottom: '20px', marginTop: '30px' }}
/>
<Box mt={2} display="flex" justifyContent="flex-end" onClick={handleSave}>
<Button variant="contained" color="primary">
Duplicate Robot
<Box mt={2} display="flex" justifyContent="flex-end">
<Button variant="contained" color="primary" onClick={handleSave}>
{t('robot_duplication.buttons.duplicate')}
</Button>
<Button onClick={handleClose} color="primary" variant="outlined" style={{ marginLeft: '10px' }}>
Cancel
{t('robot_duplication.buttons.cancel')}
</Button>
</Box>
</>

37
src/components/molecules/RobotEdit.tsx
View File

@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { GenericModal } from "../atoms/GenericModal";
import { TextField, Typography, Box, Button } from "@mui/material";
import { modalStyle } from "./AddWhereCondModal";
@@ -54,10 +55,10 @@ interface RobotSettingsProps {
handleStart: (settings: RobotSettings) => void;
handleClose: () => void;
initialSettings?: RobotSettings | null;
}
export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
const { t } = useTranslation();
const [robot, setRobot] = useState<RobotSettings | null>(null);
const { recordingId, notify } = useGlobalInfoStore();
@@ -72,7 +73,7 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
const robot = await getStoredRecording(recordingId);
setRobot(robot);
} else {
notify('error', 'Could not find robot details. Please try again.');
notify('error', t('robot_edit.notifications.update_failed'));
}
}
@@ -102,6 +103,7 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
return { ...prev, recording: { ...prev.recording, workflow: updatedWorkflow } };
});
};
const handleSave = async () => {
if (!robot) return;
@@ -114,7 +116,7 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
const success = await updateRecording(robot.recording_meta.id, payload);
if (success) {
notify('success', 'Robot updated successfully.');
notify('success', t('robot_edit.notifications.update_success'));
handleStart(robot); // Inform parent about the updated robot
handleClose();
@@ -122,10 +124,10 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
window.location.reload();
}, 1000);
} else {
notify('error', 'Failed to update the robot. Please try again.');
notify('error', t('robot_edit.notifications.update_failed'));
}
} catch (error) {
notify('error', 'An error occurred while updating the robot.');
notify('error', t('robot_edit.notifications.update_error'));
console.error('Error updating robot:', error);
}
};
@@ -137,14 +139,16 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
modalStyle={modalStyle}
>
<>
<Typography variant="h5" style={{ marginBottom: '20px' }}>Edit Robot</Typography>
<Typography variant="h5" style={{ marginBottom: '20px' }}>
{t('robot_edit.title')}
</Typography>
<Box style={{ display: 'flex', flexDirection: 'column' }}>
{
robot && (
<>
<TextField
label="Change Robot Name"
key="Change Robot Name"
label={t('robot_edit.change_name')}
key="Robot Name"
type='text'
value={robot.recording_meta.name}
onChange={(e) => handleRobotNameChange(e.target.value)}
@@ -152,7 +156,7 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
/>
{robot.recording.workflow?.[0]?.what?.[0]?.args?.[0]?.limit !== undefined && (
<TextField
label="Robot Limit"
label={t('robot_edit.robot_limit')}
type="number"
value={robot.recording.workflow[0].what[0].args[0].limit || ''}
onChange={(e) =>{
@@ -166,12 +170,17 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
/>
)}
<Box mt={2} display="flex" justifyContent="flex-end" onClick={handleSave}>
<Button variant="contained" color="primary">
Save Changes
<Box mt={2} display="flex" justifyContent="flex-end">
<Button variant="contained" color="primary" onClick={handleSave}>
{t('robot_edit.save')}
</Button>
<Button onClick={handleClose} color="primary" variant="outlined" style={{ marginLeft: '10px' }}>
Cancel
<Button
onClick={handleClose}
color="primary"
variant="outlined"
style={{ marginLeft: '10px' }}
>
{t('robot_edit.cancel')}
</Button>
</Box>
</>

25
src/components/molecules/RobotSettings.tsx
View File

@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { GenericModal } from "../atoms/GenericModal";
import { TextField, Typography, Box } from "@mui/material";
import { modalStyle } from "./AddWhereCondModal";
@@ -50,10 +51,10 @@ interface RobotSettingsProps {
handleStart: (settings: RobotSettings) => void;
handleClose: () => void;
initialSettings?: RobotSettings | null;
}
export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
const { t } = useTranslation();
const [robot, setRobot] = useState<RobotSettings | null>(null);
const [userEmail, setUserEmail] = useState<string | null>(null);
const { recordingId, notify } = useGlobalInfoStore();
@@ -69,7 +70,7 @@ export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSe
const robot = await getStoredRecording(recordingId);
setRobot(robot);
} else {
notify('error', 'Could not find robot details. Please try again.');
notify('error', t('robot_settings.errors.robot_not_found'));
}
}
@@ -97,13 +98,15 @@ export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSe
modalStyle={modalStyle}
>
<>
<Typography variant="h5" style={{ marginBottom: '20px' }}>Robot Settings</Typography>
<Typography variant="h5" style={{ marginBottom: '20px' }}>
{t('robot_settings.title')}
</Typography>
<Box style={{ display: 'flex', flexDirection: 'column' }}>
{
robot && (
<>
<TextField
label="Robot Target URL"
label={t('robot_settings.target_url')}
key="Robot Target URL"
value={targetUrl}
InputProps={{
@@ -112,7 +115,7 @@ export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSe
style={{ marginBottom: '20px' }}
/>
<TextField
label="Robot ID"
label={t('robot_settings.robot_id')}
key="Robot ID"
value={robot.recording_meta.id}
InputProps={{
@@ -122,17 +125,17 @@ export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSe
/>
{robot.recording.workflow?.[0]?.what?.[0]?.args?.[0]?.limit !== undefined && (
<TextField
label="Robot Limit"
label={t('robot_settings.robot_limit')}
type="number"
value={robot.recording.workflow[0].what[0].args[0].limit || ''}
InputProps={{
readOnly: true,
}}
readOnly: true,
}}
style={{ marginBottom: '20px' }}
/>
)}
<TextField
label="Created By User"
label={t('robot_settings.created_by_user')}
key="Created By User"
value={userEmail ? userEmail : ''}
InputProps={{
@@ -141,7 +144,7 @@ export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSe
style={{ marginBottom: '20px' }}
/>
<TextField
label="Robot Created At"
label={t('robot_settings.created_at')}
key="Robot Created At"
value={robot.recording_meta.createdAt}
InputProps={{
@@ -156,4 +159,4 @@ export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSe
</>
</GenericModal>
);
};
};

104
src/components/molecules/RunContent.tsx
View File

@@ -13,6 +13,7 @@ import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import 'highlight.js/styles/github.css';
import { useTranslation } from "react-i18next";
interface RunContentProps {
row: Data,
@@ -23,6 +24,7 @@ interface RunContentProps {
}
export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRef, abortRunHandler }: RunContentProps) => {
const { t } = useTranslation();
const [tab, setTab] = React.useState<string>('log');
const [tableData, setTableData] = useState<any[]>([]);
const [columns, setColumns] = useState<string[]>([]);
@@ -76,49 +78,49 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
<TabContext value={tab}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs
value={tab}
onChange={(e, newTab) => setTab(newTab)}
aria-label="run-content-tabs"
sx={{
// Remove the default blue indicator
'& .MuiTabs-indicator': {
backgroundColor: '#FF00C3', // Change to pink
},
// Remove default transition effects
'& .MuiTab-root': {
'&.Mui-selected': {
color: '#FF00C3',
},
}
}}
>
<Tab
label="Output Data"
value='output'
sx={{
color: (theme) => theme.palette.mode === 'dark' ? '#fff' : '#000',
'&:hover': {
color: '#FF00C3'
},
'&.Mui-selected': {
color: '#FF00C3',
}
}}
/>
<Tab
label="Log"
value='log'
sx={{
color: (theme) => theme.palette.mode === 'dark' ? '#fff' : '#000',
'&:hover': {
color: '#FF00C3'
},
'&.Mui-selected': {
color: '#FF00C3',
}
}}
/>
</Tabs>
value={tab}
onChange={(e, newTab) => setTab(newTab)}
aria-label="run-content-tabs"
sx={{
// Remove the default blue indicator
'& .MuiTabs-indicator': {
backgroundColor: '#FF00C3', // Change to pink
},
// Remove default transition effects
'& .MuiTab-root': {
'&.Mui-selected': {
color: '#FF00C3',
},
}
}}
>
<Tab
label={t('run_content.tabs.output_data')}
value='output'
sx={{
color: (theme) => theme.palette.mode === 'dark' ? '#fff' : '#000',
'&:hover': {
color: '#FF00C3'
},
'&.Mui-selected': {
color: '#FF00C3',
}
}}
/>
<Tab
label={t('run_content.tabs.log')}
value='log'
sx={{
color: (theme) => theme.palette.mode === 'dark' ? '#fff' : '#000',
'&:hover': {
color: '#FF00C3'
},
'&.Mui-selected': {
color: '#FF00C3',
}
}}
/>
</Tabs>
</Box>
<TabPanel value='log'>
<Box sx={{
@@ -142,32 +144,32 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
color="error"
onClick={abortRunHandler}
>
Stop
{t('run_content.buttons.stop')}
</Button> : null}
</TabPanel>
<TabPanel value='output' sx={{ width: '700px' }}>
{!row || !row.serializableOutput || !row.binaryOutput
|| (Object.keys(row.serializableOutput).length === 0 && Object.keys(row.binaryOutput).length === 0)
? <Typography>The output is empty.</Typography> : null}
? <Typography>{t('run_content.empty_output')}</Typography> : null}
{row.serializableOutput &&
Object.keys(row.serializableOutput).length !== 0 &&
<div>
<Typography variant='h6' sx={{ display: 'flex', alignItems: 'center' }}>
<ArticleIcon sx={{ marginRight: '15px' }} />
Captured Data
{t('run_content.captured_data.title')}
</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 2 }}>
<Typography>
<a style={{ textDecoration: 'none' }} href={`data:application/json;utf8,${JSON.stringify(row.serializableOutput, null, 2)}`}
download="data.json">
Download as JSON
{t('run_content.captured_data.download_json')}
</a>
</Typography>
<Typography
onClick={downloadCSV}
>
<a style={{ textDecoration: 'none', cursor: 'pointer' }}>Download as CSV</a>
<a style={{ textDecoration: 'none', cursor: 'pointer' }}>{t('run_content.captured_data.download_csv')}</a>
</Typography>
</Box>
{tableData.length > 0 ? (
@@ -212,7 +214,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
<div>
<Typography variant='h6' sx={{ display: 'flex', alignItems: 'center' }}>
<ImageIcon sx={{ marginRight: '15px' }} />
Captured Screenshot
{t('run_content.captured_screenshot.title')}
</Typography>
{Object.keys(row.binaryOutput).map((key) => {
try {
@@ -222,7 +224,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
width: 'max-content',
}}>
<Typography sx={{ margin: '20px 0px' }}>
<a href={imageUrl} download={key} style={{ textDecoration: 'none' }}>Download Screenshot</a>
<a href={imageUrl} download={key} style={{ textDecoration: 'none' }}>{t('run_content.captured_screenshot.download')}</a>
</Typography>
<img src={imageUrl} alt={key} height='auto' width='700px' />
</Box>
@@ -230,7 +232,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
} catch (e) {
console.log(e)
return <Typography key={`number-of-binary-output-${key}`}>
{key}: The image failed to render
{key}: {t('run_content.captured_screenshot.render_failed')}
</Typography>
}
})}

76
src/components/molecules/RunsTable.tsx
View File

@@ -1,4 +1,6 @@
import * as React from 'react';
import { useEffect, useState } from "react";
import { useTranslation } from 'react-i18next';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
@@ -7,14 +9,24 @@ import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import { useEffect, useState } from "react";
import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import SearchIcon from '@mui/icons-material/Search';
import { useGlobalInfoStore } from "../../context/globalInfo";
import { getStoredRuns } from "../../api/storage";
import { RunSettings } from "./RunSettings";
import { CollapsibleRow } from "./ColapsibleRow";
import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import SearchIcon from '@mui/icons-material/Search';
// Export columns before the component
export const columns: readonly Column[] = [
{ id: 'runStatus', label: 'Status', minWidth: 80 },
{ id: 'name', label: 'Name', minWidth: 80 },
{ id: 'startedAt', label: 'Started At', minWidth: 80 },
{ id: 'finishedAt', label: 'Finished At', minWidth: 80 },
{ id: 'settings', label: 'Settings', minWidth: 80 },
{ id: 'delete', label: 'Delete', minWidth: 80 },
];
interface Column {
id: 'runStatus' | 'name' | 'startedAt' | 'finishedAt' | 'delete' | 'settings';
@@ -24,15 +36,6 @@ interface Column {
format?: (value: string) => string;
}
export const columns: readonly Column[] = [
{ id: 'runStatus', label: 'Status', minWidth: 80 },
{ id: 'name', label: 'Robot Name', minWidth: 80 },
{ id: 'startedAt', label: 'Started at', minWidth: 80 },
{ id: 'finishedAt', label: 'Finished at', minWidth: 80 },
{ id: 'settings', label: 'Settings', minWidth: 80 },
{ id: 'delete', label: 'Delete', minWidth: 80 },
];
export interface Data {
id: number;
status: string;
@@ -58,15 +61,25 @@ interface RunsTableProps {
runningRecordingName: string;
}
export const RunsTable = (
{ currentInterpretationLog, abortRunHandler, runId, runningRecordingName }: RunsTableProps) => {
export const RunsTable: React.FC<RunsTableProps> = ({
currentInterpretationLog,
abortRunHandler,
runId,
runningRecordingName
}) => {
const { t } = useTranslation();
// Update column labels using translation if needed
const translatedColumns = columns.map(column => ({
...column,
label: t(`runstable.${column.id}`, column.label)
}));
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [rows, setRows] = useState<Data[]>([]);
const [searchTerm, setSearchTerm] = useState('');
const { notify, rerenderRuns, setRerenderRuns } = useGlobalInfoStore();
const handleChangePage = (event: unknown, newPage: number) => {
@@ -86,16 +99,13 @@ export const RunsTable = (
const fetchRuns = async () => {
const runs = await getStoredRuns();
if (runs) {
const parsedRows: Data[] = [];
runs.map((run: any, index) => {
parsedRows.push({
id: index,
...run,
});
});
const parsedRows: Data[] = runs.map((run: any, index: number) => ({
id: index,
...run,
}));
setRows(parsedRows);
} else {
notify('error', 'No runs found. Please try again.')
notify('error', t('runstable.notifications.no_runs'));
}
};
@@ -104,15 +114,14 @@ export const RunsTable = (
fetchRuns();
setRerenderRuns(false);
}
}, [rerenderRuns]);
}, [rerenderRuns, rows.length, setRerenderRuns]);
const handleDelete = () => {
setRows([]);
notify('success', 'Run deleted successfully');
notify('success', t('runstable.notifications.delete_success'));
fetchRuns();
};
// Filter rows based on search term
const filteredRows = rows.filter((row) =>
row.name.toLowerCase().includes(searchTerm.toLowerCase())
@@ -120,7 +129,6 @@ export const RunsTable = (
// Group filtered rows by robot meta id
const groupedRows = filteredRows.reduce((acc, row) => {
if (!acc[row.robotMetaId]) {
acc[row.robotMetaId] = [];
}
@@ -132,11 +140,11 @@ export const RunsTable = (
<React.Fragment>
<Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
<Typography variant="h6" gutterBottom>
All Runs
{t('runstable.runs', 'Runs')}
</Typography>
<TextField
size="small"
placeholder="Search runs..."
placeholder={t('runstable.search', 'Search runs...')}
value={searchTerm}
onChange={handleSearchChange}
InputProps={{
@@ -149,16 +157,14 @@ export const RunsTable = (
{Object.entries(groupedRows).map(([id, data]) => (
<Accordion key={id}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography variant="h6">{data[data.length - 1].name}</Typography>
</AccordionSummary>
<AccordionDetails>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
<TableCell />
{columns.map((column) => (
{translatedColumns.map((column) => (
<TableCell
key={column.id}
align={column.align}
@@ -200,4 +206,4 @@ export const RunsTable = (
/>
</React.Fragment>
);
};
};

30
src/components/molecules/SaveRecording.tsx
View File

@@ -9,13 +9,14 @@ import { TextField, Typography } from "@mui/material";
import { WarningText } from "../atoms/texts";
import NotificationImportantIcon from "@mui/icons-material/NotificationImportant";
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
interface SaveRecordingProps {
fileName: string;
}
export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
const { t } = useTranslation();
const [openModal, setOpenModal] = useState<boolean>(false);
const [needConfirm, setNeedConfirm] = useState<boolean>(false);
const [recordingName, setRecordingName] = useState<string>(fileName);
@@ -46,7 +47,7 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
};
const exitRecording = useCallback(async () => {
notify('success', 'Robot saved successfully');
notify('success', t('save_recording.notifications.save_success'));
if (browserId) {
await stopRecording(browserId);
}
@@ -63,7 +64,7 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
setWaitingForSave(true);
console.log(`Saving the recording as ${recordingName} for userId ${user.id}`);
} else {
console.error('User not logged in. Cannot save recording.');
console.error(t('save_recording.notifications.user_not_logged'));
}
};
@@ -76,35 +77,42 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
return (
<div>
<Button onClick={() => setOpenModal(true)} variant='contained' sx={{ marginRight: '20px',backgroundColor: '#ff00c3',color: 'white' }} size="small" color="success">
Finish
<!-- <Button onClick={() => setOpenModal(true)} variant='contained' sx={{ marginRight: '20px',backgroundColor: '#ff00c3',color: 'white' }} size="small" color="success">
Finish -->
<Button onClick={() => setOpenModal(true)} variant="outlined" sx={{ marginRight: '20px' }} size="small" color="success">
{t('right_panel.buttons.finish')}
</Button>
<GenericModal isOpen={openModal} onClose={() => setOpenModal(false)} modalStyle={modalStyle}>
<form onSubmit={handleSaveRecording} style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
<Typography variant="h6">Save Robot</Typography>
<Typography variant="h6">{t('save_recording.title')}</Typography>
<TextField
required
sx={{ width: '300px', margin: '15px 0px' }}
onChange={handleChangeOfTitle}
id="title"
label="Robot Name"
label={t('save_recording.robot_name')}
variant="outlined"
defaultValue={recordingName ? recordingName : null}
/>
{needConfirm
?
(<React.Fragment>
<Button color="error" variant="contained" onClick={saveRecording} sx={{ marginTop: '10px' }}>Confirm</Button>
<Button color="error" variant="contained" onClick={saveRecording} sx={{ marginTop: '10px' }}>
{t('save_recording.buttons.confirm')}
</Button>
<WarningText>
<NotificationImportantIcon color="warning" />
Robot with this name already exists, please confirm the Robot's overwrite.
{t('save_recording.errors.exists_warning')}
</WarningText>
</React.Fragment>)
: <Button type="submit" variant="contained" sx={{ marginTop: '10px' }}>Save</Button>
: <Button type="submit" variant="contained" sx={{ marginTop: '10px' }}>
{t('save_recording.buttons.save')}
</Button>
}
{waitingForSave &&
<Tooltip title='Optimizing and saving the workflow' placement={"bottom"}>
<Tooltip title={t('save_recording.tooltips.optimizing')} placement={"bottom"}>
<Box sx={{ width: '100%', marginTop: '10px' }}>
<LinearProgress />
</Box>

56
src/components/molecules/ScheduleSettings.tsx
View File

@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { GenericModal } from "../atoms/GenericModal";
import { MenuItem, TextField, Typography, Box } from "@mui/material";
import { Dropdown } from "../atoms/DropdownMui";
@@ -25,6 +26,7 @@ export interface ScheduleSettings {
}
export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initialSettings }: ScheduleSettingsProps) => {
const { t } = useTranslation();
const [schedule, setSchedule] = useState<ScheduleSettings | null>(null);
const [settings, setSettings] = useState<ScheduleSettings>({
runEvery: 1,
@@ -77,12 +79,13 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
'SUNDAY'
];
const { recordingId } = useGlobalInfoStore();
const { recordingId, notify } = useGlobalInfoStore();
const deleteRobotSchedule = () => {
if (recordingId) {
deleteSchedule(recordingId);
setSchedule(null);
notify('success', t('Schedule deleted successfully'));
} else {
console.error('No recording id provided');
}
@@ -116,6 +119,25 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
}
}, [isOpen]);
const getDayOrdinal = (day: string | undefined) => {
if (!day) return '';
const lastDigit = day.slice(-1);
const lastTwoDigits = day.slice(-2);
// Special cases for 11, 12, 13
if (['11', '12', '13'].includes(lastTwoDigits)) {
return t('schedule_settings.labels.on_day.th');
}
// Other cases
switch (lastDigit) {
case '1': return t('schedule_settings.labels.on_day.st');
case '2': return t('schedule_settings.labels.on_day.nd');
case '3': return t('schedule_settings.labels.on_day.rd');
default: return t('schedule_settings.labels.on_day.th');
}
};
return (
<GenericModal
isOpen={isOpen}
@@ -129,30 +151,30 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
padding: '20px',
'& > *': { marginBottom: '20px' },
}}>
<Typography variant="h6" sx={{ marginBottom: '20px' }}>Schedule Settings</Typography>
<Typography variant="h6" sx={{ marginBottom: '20px' }}>{t('schedule_settings.title')}</Typography>
<>
{schedule !== null ? (
<>
<Typography>Run every: {schedule.runEvery} {schedule.runEveryUnit.toLowerCase()}</Typography>
<Typography>{['MONTHS', 'WEEKS'].includes(settings.runEveryUnit) ? "Start From" : "On"} {schedule.startFrom.charAt(0).toUpperCase() + schedule.startFrom.slice(1).toLowerCase()}</Typography>
<Typography>{t('schedule_settings.run_every')}: {schedule.runEvery} {schedule.runEveryUnit.toLowerCase()}</Typography>
<Typography>{['MONTHS', 'WEEKS'].includes(settings.runEveryUnit) ? t('schedule_settings.start_from') : t('schedule_settings.start_from')}: {schedule.startFrom.charAt(0).toUpperCase() + schedule.startFrom.slice(1).toLowerCase()}</Typography>
{schedule.runEveryUnit === 'MONTHS' && (
<Typography>On day: {schedule.dayOfMonth}{['1', '21', '31'].includes(schedule.dayOfMonth || '') ? 'st' : ['2', '22'].includes(schedule.dayOfMonth || '') ? 'nd' : ['3', '23'].includes(schedule.dayOfMonth || '') ? 'rd' : 'th'} of the month</Typography>
<Typography>{t('schedule_settings.on_day')}: {schedule.dayOfMonth}{getDayOrdinal(schedule.dayOfMonth)} of the month</Typography>
)}
<Typography>At around: {schedule.atTimeStart}, {schedule.timezone} Timezone</Typography>
<Typography>{t('schedule_settings.at_around')}: {schedule.atTimeStart}, {schedule.timezone} {t('schedule_settings.timezone')}</Typography>
<Box mt={2} display="flex" justifyContent="space-between">
<Button
onClick={deleteRobotSchedule}
variant="outlined"
color="error"
>
Delete Schedule
{t('schedule_settings.buttons.delete_schedule')}
</Button>
</Box>
</>
) : (
<>
<Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
<Typography sx={{ marginRight: '10px' }}>Run once every</Typography>
<Typography sx={{ marginRight: '10px' }}>{t('schedule_settings.labels.run_once_every')}</Typography>
<TextField
type="number"
value={settings.runEvery}
@@ -174,7 +196,9 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
<Typography sx={{ marginBottom: '5px', marginRight: '25px' }}>{['MONTHS', 'WEEKS'].includes(settings.runEveryUnit) ? "Start From" : "On"}</Typography>
<Typography sx={{ marginBottom: '5px', marginRight: '25px' }}>
{['MONTHS', 'WEEKS'].includes(settings.runEveryUnit) ? t('schedule_settings.labels.start_from_label') : t('schedule_settings.labels.start_from_label')}
</Typography>
<Dropdown
label=""
id="startFrom"
@@ -190,7 +214,7 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
{settings.runEveryUnit === 'MONTHS' && (
<Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
<Typography sx={{ marginBottom: '5px', marginRight: '25px' }}>On Day of the Month</Typography>
<Typography sx={{ marginBottom: '5px', marginRight: '25px' }}>{t('schedule_settings.labels.on_day_of_month')}</Typography>
<TextField
type="number"
value={settings.dayOfMonth}
@@ -204,7 +228,7 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
{['MINUTES', 'HOURS'].includes(settings.runEveryUnit) ? (
<Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
<Box sx={{ marginRight: '20px' }}>
<Typography sx={{ marginBottom: '5px' }}>In Between</Typography>
<Typography sx={{ marginBottom: '5px' }}>{t('schedule_settings.labels.in_between')}</Typography>
<TextField
type="time"
value={settings.atTimeStart}
@@ -221,7 +245,7 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
</Box>
) : (
<Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
<Typography sx={{ marginBottom: '5px', marginRight: '10px' }}>At Around</Typography>
<Typography sx={{ marginBottom: '5px', marginRight: '10px' }}>{t('schedule_settings.at_around')}</Typography>
<TextField
type="time"
value={settings.atTimeStart}
@@ -232,7 +256,7 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
)}
<Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
<Typography sx={{ marginRight: '10px' }}>Timezone</Typography>
<Typography sx={{ marginRight: '10px' }}>{t('schedule_settings.timezone')}</Typography>
<Dropdown
label=""
id="timezone"
@@ -247,10 +271,10 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
</Box>
<Box mt={2} display="flex" justifyContent="flex-end">
<Button onClick={() => handleStart(settings)} variant="contained" color="primary">
Save Schedule
{t('schedule_settings.buttons.save_schedule')}
</Button>
<Button onClick={handleClose} color="primary" variant="outlined" style={{ marginLeft: '10px' }}>
Cancel
{t('schedule_settings.buttons.cancel')}
</Button>
</Box>
</>
@@ -271,4 +295,4 @@ const modalStyle = {
height: 'fit-content',
display: 'block',
padding: '20px',
};
};