Skip to content

Commit 82c62f2

Browse files
amhsirakamhsirak
authored
Merge pull request #336 from getmaxun/routing
feat: routing
2 parents 98a8b09 + 6d6ef21 commit 82c62f2

File tree

6 files changed

+143
-183
lines changed

6 files changed

+143
-183
lines changed

‎src/components/dashboard/MainMenu.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import Tabs from '@mui/material/Tabs';
33
import Tab from '@mui/material/Tab';
44
import Box from '@mui/material/Box';
5+
import { useNavigate } from 'react-router-dom';
56
import { Paper, Button, useTheme } from "@mui/material";
67
import { AutoAwesome, FormatListBulleted, VpnKey, Usb, Article, CloudQueue, Code, } from "@mui/icons-material";
78
import { apiUrl } from "../../apiConfig";
@@ -13,11 +14,13 @@ interface MainMenuProps {
1314
handleChangeContent: (newValue: string) => void;
1415
}
1516

16-
export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenuProps) => {
17+
export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProps) => {
1718
const theme = useTheme();
1819
const { t } = useTranslation();
20+
const navigate = useNavigate();
1921

2022
const handleChange = (event: React.SyntheticEvent, newValue: string) => {
23+
navigate(`/${newValue}`);
2124
handleChangeContent(newValue);
2225
};
2326

@@ -65,7 +68,7 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
6568
textAlign: 'left',
6669
fontSize: 'medium',
6770
}}
68-
value="recordings"
71+
value="robots"
6972
label={t('mainmenu.recordings')}
7073
icon={<AutoAwesome />}
7174
iconPosition="start"

‎src/components/robot/Recordings.tsx‎

Lines changed: 98 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import React, { useState } from 'react';
1+
import React, { useState } from "react";
22
import { RecordingsTable } from "./RecordingsTable";
33
import { Grid } from "@mui/material";
44
import { RunSettings, RunSettingsModal } from "../run/RunSettings";
55
import { ScheduleSettings, ScheduleSettingsModal } from "./ScheduleSettings";
66
import { IntegrationSettings, IntegrationSettingsModal } from "../integration/IntegrationSettings";
77
import { RobotSettings, RobotSettingsModal } from "./RobotSettings";
8-
import { RobotEditModal } from './RobotEdit';
9-
import { RobotDuplicationModal } from './RobotDuplicate';
8+
import { RobotEditModal } from "./RobotEdit";
9+
import { RobotDuplicationModal } from "./RobotDuplicate";
10+
import { useNavigate, useLocation, useParams } from "react-router-dom";
1011

1112
interface RecordingsProps {
1213
handleEditRecording: (id: string, fileName: string) => void;
@@ -15,181 +16,115 @@ interface RecordingsProps {
1516
setRecordingInfo: (id: string, name: string) => void;
1617
}
1718

18-
export const Recordings = ({ handleEditRecording, handleRunRecording, setRecordingInfo, handleScheduleRecording }: RecordingsProps) => {
19-
const [runSettingsAreOpen, setRunSettingsAreOpen] = useState(false);
20-
const [scheduleSettingsAreOpen, setScheduleSettingsAreOpen] = useState(false);
21-
const [integrateSettingsAreOpen, setIntegrateSettingsAreOpen] = useState(false);
22-
const [robotSettingsAreOpen, setRobotSettingsAreOpen] = useState(false);
23-
const [robotEditAreOpen, setRobotEditAreOpen] = useState(false);
24-
const [robotDuplicateAreOpen, setRobotDuplicateAreOpen] = useState(false);
19+
export const Recordings = ({
20+
handleEditRecording,
21+
handleRunRecording,
22+
setRecordingInfo,
23+
handleScheduleRecording,
24+
}: RecordingsProps) => {
25+
const navigate = useNavigate();
26+
const location = useLocation();
27+
const { selectedRecordingId } = useParams();
2528
const [params, setParams] = useState<string[]>([]);
26-
const [selectedRecordingId, setSelectedRecordingId] = useState<string>('');
27-
const handleIntegrateRecording = (id: string, settings: IntegrationSettings) => { };
28-
const handleSettingsRecording = (id: string, settings: RobotSettings) => { };
29-
const handleEditRobot = (id: string, settings: RobotSettings) => { };
30-
const handleDuplicateRobot = (id: string, settings: RobotSettings) => { };
3129

32-
const handleSettingsAndIntegrate = (id: string, name: string, params: string[]) => {
33-
if (params.length === 0) {
34-
setIntegrateSettingsAreOpen(true);
35-
setRecordingInfo(id, name);
36-
setSelectedRecordingId(id);
37-
} else {
38-
setParams(params);
39-
setIntegrateSettingsAreOpen(true);
40-
setRecordingInfo(id, name);
41-
setSelectedRecordingId(id);
42-
}
43-
}
44-
45-
const handleSettingsAndRun = (id: string, name: string, params: string[]) => {
46-
if (params.length === 0) {
47-
setRunSettingsAreOpen(true);
48-
setRecordingInfo(id, name);
49-
setSelectedRecordingId(id);
50-
} else {
51-
setParams(params);
52-
setRunSettingsAreOpen(true);
53-
setRecordingInfo(id, name);
54-
setSelectedRecordingId(id);
55-
}
56-
}
57-
58-
const handleSettingsAndSchedule = (id: string, name: string, params: string[]) => {
59-
if (params.length === 0) {
60-
setScheduleSettingsAreOpen(true);
61-
setRecordingInfo(id, name);
62-
setSelectedRecordingId(id);
63-
} else {
64-
setParams(params);
65-
setScheduleSettingsAreOpen(true);
66-
setRecordingInfo(id, name);
67-
setSelectedRecordingId(id);
68-
}
69-
}
70-
71-
const handleRobotSettings = (id: string, name: string, params: string[]) => {
72-
if (params.length === 0) {
73-
setRobotSettingsAreOpen(true);
74-
setRecordingInfo(id, name);
75-
setSelectedRecordingId(id);
76-
} else {
77-
setParams(params);
78-
setRobotSettingsAreOpen(true);
79-
setRecordingInfo(id, name);
80-
setSelectedRecordingId(id);
81-
}
82-
}
83-
84-
const handleEditRobotOption = (id: string, name: string, params: string[]) => {
85-
if (params.length === 0) {
86-
setRobotEditAreOpen(true);
87-
setRecordingInfo(id, name);
88-
setSelectedRecordingId(id);
89-
} else {
90-
setParams(params);
91-
setRobotEditAreOpen(true);
92-
setRecordingInfo(id, name);
93-
setSelectedRecordingId(id);
94-
}
95-
}
96-
97-
const handleDuplicateRobotOption = (id: string, name: string, params: string[]) => {
98-
if (params.length === 0) {
99-
setRobotDuplicateAreOpen(true);
100-
setRecordingInfo(id, name);
101-
setSelectedRecordingId(id);
102-
} else {
103-
setParams(params);
104-
setRobotDuplicateAreOpen(true);
105-
setRecordingInfo(id, name);
106-
setSelectedRecordingId(id);
107-
}
108-
}
30+
const handleNavigate = (path: string, id: string, name: string, params: string[]) => {
31+
setParams(params);
32+
setRecordingInfo(id, name);
33+
navigate(path);
34+
};
10935

11036
const handleClose = () => {
11137
setParams([]);
112-
setRunSettingsAreOpen(false);
113-
setRecordingInfo('', '');
114-
setSelectedRecordingId('');
115-
}
116-
117-
const handleIntegrateClose = () => {
118-
setParams([]);
119-
setIntegrateSettingsAreOpen(false);
120-
setRecordingInfo('', '');
121-
setSelectedRecordingId('');
122-
}
123-
124-
const handleScheduleClose = () => {
125-
setParams([]);
126-
setScheduleSettingsAreOpen(false);
127-
setRecordingInfo('', '');
128-
setSelectedRecordingId('');
129-
}
38+
setRecordingInfo("", "");
39+
navigate("/robots"); // Navigate back to the main robots page
40+
};
13041

131-
const handleRobotSettingsClose = () => {
132-
setParams([]);
133-
setRobotSettingsAreOpen(false);
134-
setRecordingInfo('', '');
135-
setSelectedRecordingId('');
136-
}
137-
138-
const handleRobotEditClose = () => {
139-
setParams([]);
140-
setRobotEditAreOpen(false);
141-
setRecordingInfo('', '');
142-
setSelectedRecordingId('');
143-
}
42+
// Determine which modal to open based on the current route
43+
const getCurrentModal = () => {
44+
const currentPath = location.pathname;
14445

145-
const handleRobotDuplicateClose = () => {
146-
setParams([]);
147-
setRobotDuplicateAreOpen(false);
148-
setRecordingInfo('', '');
149-
setSelectedRecordingId('');
150-
}
46+
if (currentPath.endsWith("/run")) {
47+
return (
48+
<RunSettingsModal
49+
isOpen={true}
50+
handleClose={handleClose}
51+
handleStart={handleRunRecording}
52+
isTask={params.length !== 0}
53+
params={params}
54+
/>
55+
);
56+
} else if (currentPath.endsWith("/schedule")) {
57+
return (
58+
<ScheduleSettingsModal
59+
isOpen={true}
60+
handleClose={handleClose}
61+
handleStart={handleScheduleRecording}
62+
/>
63+
);
64+
} else if (currentPath.endsWith("/integrate")) {
65+
return (
66+
<IntegrationSettingsModal
67+
isOpen={true}
68+
handleClose={handleClose}
69+
handleStart={() => {}}
70+
/>
71+
);
72+
} else if (currentPath.endsWith("/settings")) {
73+
return (
74+
<RobotSettingsModal
75+
isOpen={true}
76+
handleClose={handleClose}
77+
handleStart={() => {}}
78+
/>
79+
);
80+
} else if (currentPath.endsWith("/edit")) {
81+
return (
82+
<RobotEditModal
83+
isOpen={true}
84+
handleClose={handleClose}
85+
handleStart={() => {}}
86+
/>
87+
);
88+
} else if (currentPath.endsWith("/duplicate")) {
89+
return (
90+
<RobotDuplicationModal
91+
isOpen={true}
92+
handleClose={handleClose}
93+
handleStart={() => {}}
94+
/>
95+
);
96+
}
97+
return null;
98+
};
15199

152100
return (
153101
<React.Fragment>
154-
<RunSettingsModal isOpen={runSettingsAreOpen}
155-
handleClose={handleClose}
156-
handleStart={(settings) => handleRunRecording(settings)}
157-
isTask={params.length !== 0}
158-
params={params}
159-
/>
160-
<ScheduleSettingsModal isOpen={scheduleSettingsAreOpen}
161-
handleClose={handleScheduleClose}
162-
handleStart={(settings) => handleScheduleRecording(settings)}
163-
/>
164-
<IntegrationSettingsModal isOpen={integrateSettingsAreOpen}
165-
handleClose={handleIntegrateClose}
166-
handleStart={(settings) => handleIntegrateRecording(selectedRecordingId, settings)}
167-
/>
168-
<RobotSettingsModal isOpen={robotSettingsAreOpen}
169-
handleClose={handleRobotSettingsClose}
170-
handleStart={(settings) => handleSettingsRecording(selectedRecordingId, settings)}
171-
/>
172-
<RobotEditModal isOpen={robotEditAreOpen}
173-
handleClose={handleRobotEditClose}
174-
handleStart={(settings) => handleEditRobot(selectedRecordingId, settings)}
175-
/>
176-
<RobotDuplicationModal isOpen={robotDuplicateAreOpen}
177-
handleClose={handleRobotDuplicateClose}
178-
handleStart={(settings) => handleDuplicateRobot(selectedRecordingId, settings)}
179-
/>
180-
<Grid container direction="column" sx={{ padding: '30px' }}>
102+
{getCurrentModal()}
103+
<Grid container direction="column" sx={{ padding: "30px" }}>
181104
<Grid item xs>
182105
<RecordingsTable
183106
handleEditRecording={handleEditRecording}
184-
handleRunRecording={handleSettingsAndRun}
185-
handleScheduleRecording={handleSettingsAndSchedule}
186-
handleIntegrateRecording={handleSettingsAndIntegrate}
187-
handleSettingsRecording={handleRobotSettings}
188-
handleEditRobot={handleEditRobotOption}
189-
handleDuplicateRobot={handleDuplicateRobotOption}
107+
handleRunRecording={(id, name, params) =>
108+
handleNavigate(`/robots/${id}/run`, id, name, params)
109+
}
110+
handleScheduleRecording={(id, name, params) =>
111+
handleNavigate(`/robots/${id}/schedule`, id, name, params)
112+
}
113+
handleIntegrateRecording={(id, name, params) =>
114+
handleNavigate(`/robots/${id}/integrate`, id, name, params)
115+
}
116+
handleSettingsRecording={(id, name, params) =>
117+
handleNavigate(`/robots/${id}/settings`, id, name, params)
118+
}
119+
handleEditRobot={(id, name, params) =>
120+
handleNavigate(`/robots/${id}/edit`, id, name, params)
121+
}
122+
handleDuplicateRobot={(id, name, params) =>
123+
handleNavigate(`/robots/${id}/duplicate`, id, name, params)
124+
}
190125
/>
191126
</Grid>
192127
</Grid>
193128
</React.Fragment>
194129
);
195-
}
130+
};

‎src/components/run/ColapsibleRow.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { GenericModal } from "../ui/GenericModal";
1111
import { modalStyle } from "../recorder/AddWhereCondModal";
1212
import { getUserById } from "../../api/auth";
1313
import { useTranslation } from "react-i18next";
14+
import { useNavigate } from "react-router-dom";
1415

1516
interface RunTypeChipProps {
1617
runByUserId?: string;
@@ -37,6 +38,7 @@ interface CollapsibleRowProps {
3738
}
3839
export const CollapsibleRow = ({ row, handleDelete, isOpen, currentLog, abortRunHandler, runningRecordingName }: CollapsibleRowProps) => {
3940
const { t } = useTranslation();
41+
const navigate = useNavigate();
4042
const [open, setOpen] = useState(isOpen);
4143
const [openSettingsModal, setOpenSettingsModal] = useState(false);
4244
const [userEmail, setUserEmail] = useState<string | null>(null);
@@ -47,7 +49,7 @@ export const CollapsibleRow = ({ row, handleDelete, isOpen, currentLog, abortRun
4749
: row.runByAPI
4850
? 'API'
4951
: 'Unknown';
50-
52+
5153
const logEndRef = useRef<HTMLDivElement | null>(null);
5254

5355
const scrollToLogBottom = () => {
@@ -60,9 +62,20 @@ export const CollapsibleRow = ({ row, handleDelete, isOpen, currentLog, abortRun
6062
abortRunHandler();
6163
}
6264

63-
useEffect(() => {
64-
scrollToLogBottom();
65-
}, [currentLog])
65+
const handleRowExpand = () => {
66+
const newOpen = !open;
67+
setOpen(newOpen);
68+
if (newOpen) {
69+
navigate(`/runs/${row.robotMetaId}/run/${row.runId}`);
70+
} else {
71+
navigate(`/runs/${row.robotMetaId}`);
72+
}
73+
//scrollToLogBottom();
74+
};
75+
76+
// useEffect(() => {
77+
// scrollToLogBottom();
78+
// }, [currentLog])
6679

6780
useEffect(() => {
6881
const fetchUserEmail = async () => {
@@ -83,10 +96,7 @@ export const CollapsibleRow = ({ row, handleDelete, isOpen, currentLog, abortRun
8396
<IconButton
8497
aria-label="expand row"
8598
size="small"
86-
onClick={() => {
87-
setOpen(!open);
88-
scrollToLogBottom();
89-
}}
99+
onClick={handleRowExpand}
90100
>
91101
{open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
92102
</IconButton>

0 commit comments

Comments
 (0)