# Installation
-1. First, create a file named `.env` in the root folder of the project
-2. Example env file can be viewed [here](https://github.com/getmaxun/maxun/blob/master/ENVEXAMPLE). Copy all content of example env to your `.env` file.
-3. Choose your installation method below
+1. Create a root folder for your project (e.g. 'maxun')
+2. Create a file named `.env` in the root folder of the project
+3. Example env file can be viewed [here](https://github.com/getmaxun/maxun/blob/master/ENVEXAMPLE). Copy all content of example env to your `.env` file.
+4. Choose your installation method below
### Docker Compose
-1. Copy paste the [docker-compose.yml file](https://github.com/getmaxun/maxun/blob/master/docker-compose.yml)
-2. Ensure you have setup the `.env` file
-3. Run the command below
+1. Copy paste the [docker-compose.yml file](https://github.com/getmaxun/maxun/blob/master/docker-compose.yml) into your root folder
+2. Ensure you have setup the `.env` file in that same folder
+3. Run the command below from a terminal
```
docker-compose up -d
```
diff --git a/docker-compose.yml b/docker-compose.yml
index 3c6e3a0f..874e48d6 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -43,7 +43,7 @@ services:
#build:
#context: .
#dockerfile: server/Dockerfile
- image: getmaxun/maxun-backend:v0.0.7
+ image: getmaxun/maxun-backend:v0.0.9
ports:
- "${BACKEND_PORT:-8080}:${BACKEND_PORT:-8080}"
env_file: .env
@@ -70,7 +70,7 @@ services:
#build:
#context: .
#dockerfile: Dockerfile
- image: getmaxun/maxun-frontend:v0.0.3
+ image: getmaxun/maxun-frontend:v0.0.5
ports:
- "${FRONTEND_PORT:-5173}:${FRONTEND_PORT:-5173}"
env_file: .env
diff --git a/maxun-core/package.json b/maxun-core/package.json
index 36d06aa9..7c92d08e 100644
--- a/maxun-core/package.json
+++ b/maxun-core/package.json
@@ -1,6 +1,6 @@
{
"name": "maxun-core",
- "version": "0.0.6",
+ "version": "0.0.7",
"description": "Core package for Maxun, responsible for data extraction",
"main": "build/index.js",
"typings": "build/index.d.ts",
diff --git a/maxun-core/src/browserSide/scraper.js b/maxun-core/src/browserSide/scraper.js
index 09b6578b..a2009d78 100644
--- a/maxun-core/src/browserSide/scraper.js
+++ b/maxun-core/src/browserSide/scraper.js
@@ -265,41 +265,72 @@ function scrapableHeuristics(maxCountPerPage = 50, minArea = 20000, scrolls = 3,
const scrapedData = [];
while (scrapedData.length < limit) {
- // Get all parent elements matching the listSelector
- const parentElements = Array.from(document.querySelectorAll(listSelector));
+ let parentElements = Array.from(document.querySelectorAll(listSelector));
+
+ // If we only got one element or none, try a more generic approach
+ if (limit > 1 && parentElements.length <= 1) {
+ const [containerSelector, _] = listSelector.split('>').map(s => s.trim());
+ const container = document.querySelector(containerSelector);
+
+ if (container) {
+ const allChildren = Array.from(container.children);
+
+ const firstMatch = document.querySelector(listSelector);
+ if (firstMatch) {
+ // Get classes from the first matching element
+ const firstMatchClasses = Array.from(firstMatch.classList);
+
+ // Find similar elements by matching most of their classes
+ parentElements = allChildren.filter(element => {
+ const elementClasses = Array.from(element.classList);
- // Iterate through each parent element
- for (const parent of parentElements) {
- if (scrapedData.length >= limit) break;
- const record = {};
-
- // For each field, select the corresponding element within the parent
- for (const [label, { selector, attribute }] of Object.entries(fields)) {
- const fieldElement = parent.querySelector(selector);
-
- if (fieldElement) {
- if (attribute === 'innerText') {
- record[label] = fieldElement.innerText.trim();
- } else if (attribute === 'innerHTML') {
- record[label] = fieldElement.innerHTML.trim();
- } else if (attribute === 'src') {
- // Handle relative 'src' URLs
- const src = fieldElement.getAttribute('src');
- record[label] = src ? new URL(src, window.location.origin).href : null;
- } else if (attribute === 'href') {
- // Handle relative 'href' URLs
- const href = fieldElement.getAttribute('href');
- record[label] = href ? new URL(href, window.location.origin).href : null;
- } else {
- record[label] = fieldElement.getAttribute(attribute);
+ // Element should share at least 70% of classes with the first match
+ const commonClasses = firstMatchClasses.filter(cls =>
+ elementClasses.includes(cls));
+ return commonClasses.length >= Math.floor(firstMatchClasses.length * 0.7);
+ });
+ }
}
- }
}
- scrapedData.push(record);
- }
+
+ // Iterate through each parent element
+ for (const parent of parentElements) {
+ if (scrapedData.length >= limit) break;
+ const record = {};
+
+ // For each field, select the corresponding element within the parent
+ for (const [label, { selector, attribute }] of Object.entries(fields)) {
+ const fieldElement = parent.querySelector(selector);
+
+ if (fieldElement) {
+ if (attribute === 'innerText') {
+ record[label] = fieldElement.innerText.trim();
+ } else if (attribute === 'innerHTML') {
+ record[label] = fieldElement.innerHTML.trim();
+ } else if (attribute === 'src') {
+ // Handle relative 'src' URLs
+ const src = fieldElement.getAttribute('src');
+ record[label] = src ? new URL(src, window.location.origin).href : null;
+ } else if (attribute === 'href') {
+ // Handle relative 'href' URLs
+ const href = fieldElement.getAttribute('href');
+ record[label] = href ? new URL(href, window.location.origin).href : null;
+ } else {
+ record[label] = fieldElement.getAttribute(attribute);
+ }
+ }
+ }
+ scrapedData.push(record);
+ }
+
+ // If we've processed all available elements and still haven't reached the limit,
+ // break to avoid infinite loop
+ if (parentElements.length === 0 || scrapedData.length >= parentElements.length) {
+ break;
+ }
}
- return scrapedData
- };
+ return scrapedData;
+};
/**
diff --git a/maxun-core/src/interpret.ts b/maxun-core/src/interpret.ts
index d1cc8318..c581954d 100644
--- a/maxun-core/src/interpret.ts
+++ b/maxun-core/src/interpret.ts
@@ -111,13 +111,21 @@ export default class Interpreter extends EventEmitter {
private async applyAdBlocker(page: Page): Promise
+
+ );
+};
+
+export default DatePicker;
\ No newline at end of file
diff --git a/src/components/atoms/DateTimeLocalPicker.tsx b/src/components/atoms/DateTimeLocalPicker.tsx
new file mode 100644
index 00000000..dc62a79b
--- /dev/null
+++ b/src/components/atoms/DateTimeLocalPicker.tsx
@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { useSocketStore } from '../../context/socket';
+import { Coordinates } from './canvas';
+
+interface DateTimeLocalPickerProps {
+ coordinates: Coordinates;
+ selector: string;
+ onClose: () => void;
+}
+
+const DateTimeLocalPicker: React.FC
+
+
+
+
+
+
+
+
+ );
+};
+
+export default DateTimeLocalPicker;
\ No newline at end of file
diff --git a/src/components/atoms/Dropdown.tsx b/src/components/atoms/Dropdown.tsx
new file mode 100644
index 00000000..c7ead64b
--- /dev/null
+++ b/src/components/atoms/Dropdown.tsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { useSocketStore } from '../../context/socket';
+import { Coordinates } from './canvas';
+
+interface DropdownProps {
+ coordinates: Coordinates;
+ selector: string;
+ options: Array<{
+ value: string;
+ text: string;
+ disabled: boolean;
+ selected: boolean;
+ }>;
+ onClose: () => void;
+}
+
+const Dropdown = ({ coordinates, selector, options, onClose }: DropdownProps) => {
+ const { socket } = useSocketStore();
+ const [hoveredIndex, setHoveredIndex] = useState
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Dropdown;
\ No newline at end of file
diff --git a/src/components/atoms/TimePicker.tsx b/src/components/atoms/TimePicker.tsx
new file mode 100644
index 00000000..31353c7a
--- /dev/null
+++ b/src/components/atoms/TimePicker.tsx
@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import { useSocketStore } from '../../context/socket';
+import { Coordinates } from './canvas';
+
+interface TimePickerProps {
+ coordinates: Coordinates;
+ selector: string;
+ onClose: () => void;
+}
+
+const TimePicker = ({ coordinates, selector, onClose }: TimePickerProps) => {
+ const { socket } = useSocketStore();
+ const [hoveredHour, setHoveredHour] = useState e.stopPropagation()}
+ >
+
+
+ {options.map((option, index) => (
+
+ !option.disabled && setHoveredIndex(index)}
+ onMouseLeave={() => setHoveredIndex(null)}
+ onClick={() => !option.disabled && handleSelect(option.value)}
+ >
+ {option.text}
+
+ ))}
+
+
+ );
+};
+
+export default TimePicker;
\ No newline at end of file
diff --git a/src/components/atoms/canvas.tsx b/src/components/atoms/canvas.tsx
index 1dd88e19..e71a4d93 100644
--- a/src/components/atoms/canvas.tsx
+++ b/src/components/atoms/canvas.tsx
@@ -3,6 +3,10 @@ import { useSocketStore } from '../../context/socket';
import { getMappedCoordinates } from "../../helpers/inputHelpers";
import { useGlobalInfoStore } from "../../context/globalInfo";
import { useActionContext } from '../../context/browserActions';
+import DatePicker from './DatePicker';
+import Dropdown from './Dropdown';
+import TimePicker from './TimePicker';
+import DateTimeLocalPicker from './DateTimeLocalPicker';
interface CreateRefCallback {
(ref: React.RefObject e.stopPropagation()}
+ >
+ {/* Hours column */}
+
+
+ {hours.map((hour) => (
+
+
+ {/* Minutes column */}
+ setHoveredHour(hour)}
+ onMouseLeave={() => setHoveredHour(null)}
+ onClick={() => handleHourSelect(hour)}
+ >
+ {hour.toString().padStart(2, '0')}
+
+ ))}
+
+ {minutes.map((minute) => (
+
+ setHoveredMinute(minute)}
+ onMouseLeave={() => setHoveredMinute(null)}
+ onClick={() => handleMinuteSelect(minute)}
+ >
+ {minute.toString().padStart(2, '0')}
+
+ ))}
+
+ }}>
- Integrate with Google Sheet{" "}
- {/*
{recording && recording.google_sheet_id ? (
<>
- Google Sheet Integrated Successfully.
- 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{" "}
- {t('integration_settings.alerts.success.title')}
+ {t('integration_settings.alerts.success.content', { sheetName: recording.google_sheet_name })}
+
- here
-
- .
+ rel="noreferrer">
+ {t('integration_settings.alerts.success.here')}
+ .
- Note: 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. + {t('integration_settings.alerts.success.note')} {t('integration_settings.alerts.success.sync_limitation')}
) : (
<>
{!recording?.google_sheet_email ? (
<>
-
- Authenticated as: {recording.google_sheet_email}
+ {t('integration_settings.descriptions.authenticated_as', {
+ email: recording.google_sheet_email
+ })}
)}
@@ -247,14 +238,14 @@ export const IntegrationSettingsModal = ({
color="primary"
onClick={fetchSpreadsheetFiles}
>
- Fetch Google Spreadsheets
+ {t('integration_settings.buttons.fetch_sheets')}
@@ -263,7 +254,7 @@ export const IntegrationSettingsModal = ({
- Note: 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. + {t('integration_settings.alerts.success.note')} {t('integration_settings.alerts.success.sync_limitation')}
- If you enable this option, every time this robot runs a task - successfully, its captured data will be appended to your - Google Sheet. -
+{t('integration_settings.descriptions.sync_info')}
) : ( <> {recording.google_sheet_email && (
-
-
+
+
= ({ isOpen, se
{
binaryData ? (
= ({ isOpen, se
- Additional rows of data will be extracted once you finish recording.
+
+ {t('interpretation_log.messages.additional_rows')}
+
) : (
@@ -201,13 +218,13 @@ export const InterpretationLog: React.FC = ({ isOpen, se
{hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction ? (
<>
- 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')}
- 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')}
)}
@@ -219,4 +236,4 @@ export const InterpretationLog: React.FC = ({ isOpen, se
);
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src/components/molecules/NavBar.tsx b/src/components/molecules/NavBar.tsx
index c2f271cf..142d45ab 100644
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -1,10 +1,11 @@
+import { useTranslation } from "react-i18next";
import React, { useState, useContext, useEffect } from 'react';
import axios from 'axios';
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 } from "@mui/icons-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';
@@ -13,18 +14,26 @@ import { apiUrl } from '../../apiConfig';
import MaxunLogo from "../../assets/maxunlogo.png";
import packageJson from "../../../package.json"
+
interface NavBarProps {
recordingName: string;
isRecording: boolean;
}
-export const NavBar: React.FC = ({ recordingName, isRecording }) => {
- const { notify, browserId, setBrowserId, recordingUrl } = useGlobalInfoStore();
+export const NavBar: React.FC = ({
+ recordingName,
+ isRecording,
+}) => {
+ const { notify, browserId, setBrowserId } = useGlobalInfoStore();
const { state, dispatch } = useContext(AuthContext);
const { user } = state;
const navigate = useNavigate();
+ const { t, i18n } = useTranslation();
const [anchorEl, setAnchorEl] = useState(null);
+
+ const [langAnchorEl, setLangAnchorEl] = useState(null);
+
const currentVersion = packageJson.version;
const [open, setOpen] = useState(false);
@@ -40,7 +49,7 @@ export const NavBar: React.FC = ({ recordingName, isRecording }) =>
return version;
} catch (error) {
console.error("Failed to fetch latest version:", error);
- return null; // Handle errors gracefully
+ return null;
}
};
@@ -62,33 +71,43 @@ export const NavBar: React.FC = ({ recordingName, isRecording }) =>
setAnchorEl(event.currentTarget);
};
+ const handleLangMenuOpen = (event: React.MouseEvent) => {
+ 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 changeLanguage = (lang: string) => {
+ i18n.changeLanguage(lang);
+ localStorage.setItem("language", lang);
};
useEffect(() => {
const checkForUpdates = async () => {
const latestVersion = await fetchLatestVersion();
- setLatestVersion(latestVersion); // Set the latest version state
+ setLatestVersion(latestVersion);
if (latestVersion && latestVersion !== currentVersion) {
- setIsUpdateAvailable(true); // Show a notification or highlight the "Upgrade" button
+ setIsUpdateAvailable(true);
}
};
checkForUpdates();
@@ -101,7 +120,7 @@ export const NavBar: React.FC = ({ recordingName, isRecording }) =>
open={isUpdateAvailable}
onClose={() => setIsUpdateAvailable(false)}
message={
- `New version ${latestVersion} available! Click "Upgrade" to update.`
+ `${t('navbar.upgrade.modal.new_version_available', { version: latestVersion })} ${t('navbar.upgrade.modal.view_updates')}`
}
action={
<>
@@ -118,7 +137,7 @@ export const NavBar: React.FC = ({ recordingName, isRecording }) =>
borderRadius: '5px',
}}
>
- Upgrade
+ {t('navbar.upgrade.button')}
= ({ recordingName, isRecording }) =>
}
}}
/>
-
)}
+ {t("Language")}
+
+
+ )}
);
@@ -316,7 +472,7 @@ export const NavBar: React.FC = ({ recordingName, isRecording }) =>
const NavBarWrapper = styled.div`
grid-area: navbar;
background-color: white;
- padding:5px;
+ padding: 5px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #e0e0e0;
diff --git a/src/components/molecules/RecordingsTable.tsx b/src/components/molecules/RecordingsTable.tsx
index 651d3677..01bc524b 100644
--- a/src/components/molecules/RecordingsTable.tsx
+++ b/src/components/molecules/RecordingsTable.tsx
@@ -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,30 +33,9 @@ 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;
@@ -76,12 +57,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([]);
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 +158,17 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
row.name.toLowerCase().includes(searchTerm.toLowerCase())
);
+
return (
- My Robots
+ {t('recordingtable.heading')}
-
@@ -253,14 +261,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 +305,9 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
/>
setModalOpen(false)} modalStyle={modalStyle}>
@@ -397,6 +405,8 @@ const OptionsButton = ({ handleEdit, handleDelete, handleDuplicate }: OptionsBut
setAnchorEl(null);
};
+ const {t} = useTranslation();
+
return (
<>
Edit
-
-
+
+
+
+
);
diff --git a/src/components/molecules/RobotDuplicate.tsx b/src/components/molecules/RobotDuplicate.tsx
index 38b7b422..530aedc6 100644
--- a/src/components/molecules/RobotDuplicate.tsx
+++ b/src/components/molecules/RobotDuplicate.tsx
@@ -6,6 +6,7 @@ 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(null);
const [targetUrl, setTargetUrl] = useState('');
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,22 +79,17 @@ 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) => {
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;
}
@@ -103,18 +99,18 @@ export const RobotDuplicationModal = ({ isOpen, handleStart, handleClose, initia
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 +122,40 @@ export const RobotDuplicationModal = ({ isOpen, handleStart, handleClose, initia
modalStyle={modalStyle}
>
<>
- Duplicate Robot
+
+ {t('robot_duplication.title')}
+
{
robot && (
<>
- Robot duplication is useful to extract data from pages with the same structure.
+
+ {t('robot_duplication.descriptions.purpose')}
+
+
+ producthunt.com/topics/api', + url2: '
- Example: If you've created a robot for
- - ⚠️ Ensure the new page has the same structure as the original page. + {t('robot_duplication.descriptions.warning')}
diff --git a/src/components/molecules/RobotEdit.tsx b/src/components/molecules/RobotEdit.tsx
index 9441ecef..73397da4 100644
--- a/src/components/molecules/RobotEdit.tsx
+++ b/src/components/molecules/RobotEdit.tsx
@@ -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(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,13 +139,15 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
modalStyle={modalStyle}
>
<>
- Edit Robot
+
+ {t('robot_edit.title')}
+
{
robot && (
<>
{
@@ -168,10 +172,15 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
-
diff --git a/src/components/molecules/RobotSettings.tsx b/src/components/molecules/RobotSettings.tsx
index 53d21d7b..d952f43d 100644
--- a/src/components/molecules/RobotSettings.tsx
+++ b/src/components/molecules/RobotSettings.tsx
@@ -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(null);
const [userEmail, setUserEmail] = useState(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}
>
<>
- Robot Settings
+
+ {t('robot_settings.title')}
+
{
robot && (
<>
('log');
const [tableData, setTableData] = useState([]);
const [columns, setColumns] = useState([]);
@@ -76,8 +78,8 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
setTab(newTab)} aria-label="run-content-tabs">
-
@@ -102,32 +104,32 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
color="error"
onClick={abortRunHandler}
>
- Stop
+ {t('run_content.buttons.stop')}
: null}
{!row || !row.serializableOutput || !row.binaryOutput
|| (Object.keys(row.serializableOutput).length === 0 && Object.keys(row.binaryOutput).length === 0)
- ? The output is empty. : null}
+ ? {t('run_content.empty_output')} : null}
{row.serializableOutput &&
Object.keys(row.serializableOutput).length !== 0 &&
- Download as JSON
+ {t('run_content.captured_data.download_json')}
- Download as CSV
+ {t('run_content.captured_data.download_csv')}
{tableData.length > 0 ? (
@@ -171,7 +173,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
{Object.keys(row.binaryOutput).map((key) => {
try {
@@ -181,7 +183,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
width: 'max-content',
}}>
- Download Screenshot
+ {t('run_content.captured_screenshot.download')}
@@ -189,7 +191,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
} catch (e) {
console.log(e)
return
- {key}: The image failed to render
+ {key}: {t('run_content.captured_screenshot.render_failed')}
}
})}
diff --git a/src/components/molecules/RunsTable.tsx b/src/components/molecules/RunsTable.tsx
index 669cecd6..61e139ec 100644
--- a/src/components/molecules/RunsTable.tsx
+++ b/src/components/molecules/RunsTable.tsx
@@ -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 = ({
+ 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([]);
-
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 = (
- All Runs
+ {t('runstable.runs', 'Runs')}
(
{data[data.length - 1].name}
-
- Screenshot
- 
+
+ {t('interpretation_log.titles.screenshot')}
+
+
) : tableData.length > 0 ? (
<>
@@ -193,7 +208,9 @@ export const InterpretationLog: React.FC = ({ recordingName, isRecording }) =>
justifyContent: 'flex-start',
}}>
- Maxun
+ {t('navbar.project_name')}
= ({ recordingName, isRecording }) =>
border: "#00000099 1px solid",
'&:hover': { color: '#ff00c3', border: '#ff00c3 1px solid' }
}}>
-
= ({ recordingName, isRecording }) =>
Checking for updates...
) : currentVersion === latestVersion ? (
- 🎉 You're up to date!
+ {t('navbar.upgrade.modal.up_to_date')}
) : (
<>
- A new version is available: {latestVersion}. Upgrade to the latest version for bug fixes, enhancements and new features!
+ {t('navbar.upgrade.modal.new_version_available', { version: latestVersion })}
- View all the new updates + {t('navbar.upgrade.modal.view_updates')} {' '}here.
= ({ recordingName, isRecording }) =>
sx={{ marginTop: 2, marginBottom: 2 }}
centered
>
-
{tab === 0 && (
- ) : ""
- }
+ ) : (
+ <>- View all the new updates + {t('navbar.upgrade.modal.view_updates')} {' '}here.
Run the commands below
+ # cd to project directory (eg: maxun)
+
+ cd maxun
+
+
# pull latest changes
git pull origin master
@@ -228,6 +251,16 @@ export const NavBar: React.FC = ({ recordingName, isRecording }) =>
Run the commands below
+ # cd to project directory (eg: maxun)
+
+ cd maxun
+
+
+ # stop the working containers
+
+ docker-compose down
+
+
# pull latest docker images
docker-compose pull
@@ -270,7 +303,7 @@ export const NavBar: React.FC = ({ recordingName, isRecording }) =>
PaperProps={{ sx: { width: '180px' } }}
>
+
+
) : (
@@ -300,14 +390,80 @@ export const NavBar: React.FC = ({ recordingName, isRecording }) =>
'&:hover': { color: 'white', backgroundColor: 'red' }
}}>
- Enter URL To Extract Data
+ {t('recordingtable.modal.title')}
- Start Training Robot
+ {t('recordingtable.modal.button')}
+ producthunt.com/topics/api', + url2: '
producthunt.com/topics/database'
+ })
+ }}/>
- Example: If you've created a robot for
producthunt.com/topics/api, you can duplicate it to scrape similar pages
- like producthunt.com/topics/database without training a robot from scratch.
-
- - - ⚠️ Ensure the new page has the same structure as the original page. + {t('robot_duplication.descriptions.warning')}