Merge pull request #77 from amhsirak/develop

feat: move create robot button to robots table
2024-10-21 01:15:41 +05:30
parent 69dbd270bf db789a0fc7
commit fb35a3571f
6 changed files with 109 additions and 111 deletions
--- a/src/components/molecules/BrowserRecordingSave.tsx
+++ b/src/components/molecules/BrowserRecordingSave.tsx
@@ -25,18 +25,19 @@ const BrowserRecordingSave = () => {
            <Grid item xs={12} md={3} lg={3}>
                <div style={{
                     marginTop: '10px',
-                     marginLeft: '10px',
+                    //  marginLeft: '10px',
                     color: 'white',
                     position: 'absolute',
                     background: '#ff00c3',
                     border: 'none',
+                     borderRadius: '5px',
                     padding: '7.5px',
                     width: 'calc(100% - 20px)',  // Ensure it takes full width but with padding
                     overflow: 'hidden',
                     display: 'flex',
                     justifyContent: 'space-between',
                }}>
-                    <Button onClick={goToMainMenu} variant="outlined" sx={{ marginLeft: "20px" }} size="small" color="error">
+                    <Button onClick={goToMainMenu} variant="outlined" sx={{ marginLeft: "25px" }} size="small" color="error">
                      Discard
                    </Button>
                    <SaveRecording fileName={recordingName} />
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -3,28 +3,23 @@ import axios from 'axios';
 import styled from "styled-components";
 import { stopRecording } from "../../api/recording";
 import { useGlobalInfoStore } from "../../context/globalInfo";
-import { Button, IconButton, Typography } from "@mui/material";
+import { IconButton } from "@mui/material";
 import { RecordingIcon } from "../atoms/RecorderIcon";
 import { SaveRecording } from "./SaveRecording";
-import { Circle, Add, Logout, Clear } from "@mui/icons-material";
-import MeetingRoomIcon from '@mui/icons-material/MeetingRoom';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { Logout, Clear } from "@mui/icons-material";
+import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/auth';
-import { GenericModal } from '../atoms/GenericModal';
-import TextField from '@mui/material/TextField';

 interface NavBarProps {
-  newRecording: () => void;
  recordingName: string;
  isRecording: boolean;
 }

-export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isRecording }) => {
+export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) => {

-  const { notify, browserId, setBrowserId, recordingLength, recordingUrl, setRecordingUrl } = useGlobalInfoStore();
+  const { notify, browserId, setBrowserId, recordingUrl } = useGlobalInfoStore();
  const { state, dispatch } = useContext(AuthContext);
  const { user } = state;
-  const [isModalOpen, setModalOpen] = useState(false);

  console.log(`Recording URL: ${recordingUrl}`)

@@ -49,20 +44,6 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
    navigate('/');
  };

-  const handleNewRecording = async () => {
-    if (browserId) {
-      setBrowserId(null);
-      await stopRecording(browserId);
-    }
-    setModalOpen(true);
-  };
-
-  const startRecording = () => {
-    setModalOpen(false);
-    newRecording();
-    notify('info', 'New Recording started for ' + recordingUrl);
-  };
-
  return (
    <NavBarWrapper>
      <div style={{
@@ -82,28 +63,6 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
              {
                !isRecording ? (
                  <>
-                    <IconButton
-                      aria-label="new"
-                      size={"small"}
-                      onClick={handleNewRecording}
-                      sx={{
-                        width: '140px',
-                        borderRadius: '5px',
-                        padding: '8px',
-                        background: '#ff00c3',
-                        color: 'white',
-                        marginRight: '10px',
-                        fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-                        fontWeight: '500',
-                        fontSize: '0.875rem',
-                        lineHeight: '1.75',
-                        letterSpacing: '0.02857em',
-                        '&:hover': { color: 'white', backgroundColor: '#ff00c3' }
-                      }
-                      }
-                    >
-                      <Add sx={{ marginRight: '5px' }} /> Create Robot
-                    </IconButton>
                    <IconButton sx={{
                      width: '140px',
                      borderRadius: '5px',
@@ -121,49 +80,28 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
                      <Logout sx={{ marginRight: '5px' }} />
                      Logout</IconButton>
                  </>
-                ) : 
-                <>
-                <IconButton sx={{
-                  width: '140px',
-                  borderRadius: '5px',
-                  padding: '8px',
-                  background: 'red',
-                  color: 'white',
-                  marginRight: '10px',
-                  fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-                  fontWeight: '500',
-                  fontSize: '0.875rem',
-                  lineHeight: '1.75',
-                  letterSpacing: '0.02857em',
-                  '&:hover': { color: 'white', backgroundColor: 'red' }
-                }} onClick={goToMainMenu}>
-                  <Clear sx={{ marginRight: '5px' }} />
-                  Discard</IconButton>
-                  <SaveRecording fileName={recordingName} />
-                </>
+                ) :
+                  <>
+                    <IconButton sx={{
+                      width: '140px',
+                      borderRadius: '5px',
+                      padding: '8px',
+                      background: 'red',
+                      color: 'white',
+                      marginRight: '10px',
+                      fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+                      fontWeight: '500',
+                      fontSize: '0.875rem',
+                      lineHeight: '1.75',
+                      letterSpacing: '0.02857em',
+                      '&:hover': { color: 'white', backgroundColor: 'red' }
+                    }} onClick={goToMainMenu}>
+                      <Clear sx={{ marginRight: '5px' }} />
+                      Discard</IconButton>
+                    <SaveRecording fileName={recordingName} />
+                  </>
              }
            </div>
-            <GenericModal isOpen={isModalOpen} onClose={() => setModalOpen(false)}>
-              <div style={{ padding: '20px' }}>
-                <Typography variant="h6" gutterBottom>Enter URL To Extract Data</Typography>
-                <TextField
-                  label="URL"
-                  variant="outlined"
-                  fullWidth
-                  value={recordingUrl}
-                  onChange={(e: any) => setRecordingUrl(e.target.value)}
-                  style={{ marginBottom: '20px', marginTop: '20px' }}
-                />
-                <Button
-                  variant="contained"
-                  color="primary"
-                  onClick={startRecording}
-                  disabled={!recordingUrl}
-                >
-                  Start Training Robot
-                </Button>
-              </div>
-            </GenericModal>
          </>
        ) : ""
      }
--- a/src/components/molecules/RecordingsTable.tsx
+++ b/src/components/molecules/RecordingsTable.tsx
@@ -9,12 +9,16 @@ import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
 import { useEffect } from "react";
 import { WorkflowFile } from "maxun-core";
-import { IconButton } from "@mui/material";
+import { IconButton, Button, Box, Typography, TextField } from "@mui/material";
 import { Schedule, DeleteForever, Edit, PlayCircle } from "@mui/icons-material";
 import LinkIcon from '@mui/icons-material/Link';
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage";
-import { Typography } from '@mui/material';
+import { Add } from "@mui/icons-material";
+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
@@ -86,8 +90,10 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
  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 { notify, setRecordings } = useGlobalInfoStore();
+  const { notify, setRecordings, browserId, setBrowserId, recordingUrl, setRecordingUrl, recordingName, setRecordingName, recordingId, setRecordingId } = useGlobalInfoStore();
+  const navigate = useNavigate();

  const handleChangePage = (event: unknown, newPage: number) => {
    setPage(newPage);
@@ -118,6 +124,27 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
    }
  }

+  const handleNewRecording = async () => {
+    if (browserId) {
+      setBrowserId(null);
+      await stopRecording(browserId);
+    }
+    setModalOpen(true);
+  };
+
+  const handleStartRecording = () => {
+    setBrowserId('new-recording');
+    setRecordingName('');
+    setRecordingId('');
+    navigate('/recording');
+  }
+
+  const startRecording = () => {
+    setModalOpen(false);
+    handleStartRecording();
+    notify('info', 'New Recording started for ' + recordingUrl);
+  };
+
  useEffect(() => {
    if (rows.length === 0) {
      fetchRecordings();
@@ -126,9 +153,33 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl

  return (
    <React.Fragment>
-      <Typography variant="h6" gutterBottom component="div">
-        My Robots
-      </Typography>
+      <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Typography variant="h6" gutterBottom>
+          My Robots
+        </Typography>
+        <IconButton
+          aria-label="new"
+          size={"small"}
+          onClick={handleNewRecording}
+          sx={{
+            width: '140px',
+            borderRadius: '5px',
+            padding: '8px',
+            background: '#ff00c3',
+            color: 'white',
+            marginRight: '10px',
+            fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+            fontWeight: '500',
+            fontSize: '0.875rem',
+            lineHeight: '1.75',
+            letterSpacing: '0.02857em',
+            '&:hover': { color: 'white', backgroundColor: '#ff00c3' }
+          }
+          }
+        >
+          <Add sx={{ marginRight: '5px' }} /> Create Robot
+        </IconButton>
+      </Box>
      <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
        <Table stickyHeader aria-label="sticky table">
          <TableHead>
@@ -226,6 +277,27 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
        onPageChange={handleChangePage}
        onRowsPerPageChange={handleChangeRowsPerPage}
      />
+      <GenericModal isOpen={isModalOpen} onClose={() => setModalOpen(false)}>
+        <div style={{ padding: '20px' }}>
+          <Typography variant="h6" gutterBottom>Enter URL To Extract Data</Typography>
+          <TextField
+            label="URL"
+            variant="outlined"
+            fullWidth
+            value={recordingUrl}
+            onChange={(e: any) => setRecordingUrl(e.target.value)}
+            style={{ marginBottom: '20px', marginTop: '20px' }}
+          />
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={startRecording}
+            disabled={!recordingUrl}
+          >
+            Start Training Robot
+          </Button>
+        </div>
+      </GenericModal>
    </React.Fragment>
  );
 }
--- a/src/components/organisms/Recordings.tsx
+++ b/src/components/organisms/Recordings.tsx
@@ -20,8 +20,6 @@ export const Recordings = ({ handleEditRecording, handleRunRecording, setRecordi
  const [params, setParams] = useState<string[]>([]);
  const [selectedRecordingId, setSelectedRecordingId] = useState<string>('');

-  console.log(`Selected reocrding id: ${selectedRecordingId}`);
-
  const handleSettingsAndIntegrate = (id: string, name: string, params: string[]) => {
    if (params.length === 0) {
      setIntegrateSettingsAreOpen(true);
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -375,9 +375,9 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture

  return (
    <Paper variant="outlined" sx={{ height: '520px', width: 'auto', alignItems: "center", background: 'inherit' }} id="browser-actions">
-      <SimpleBox height={60} width='100%' background='lightGray' radius='0%'>
+      {/* <SimpleBox height={60} width='100%' background='lightGray' radius='0%'>
        <Typography sx={{ padding: '10px' }}>Last action: {` ${lastAction}`}</Typography>
-      </SimpleBox>
+      </SimpleBox> */}
      <ActionDescriptionBox />
      <Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px' }}>
        {!getText && !getScreenshot && !getList && showCaptureList && <Button variant="contained" onClick={startGetList}>Capture List</Button>}
--- a/src/pages/PageWrappper.tsx
+++ b/src/pages/PageWrappper.tsx
@@ -20,13 +20,6 @@ export const PageWrapper = () => {

  const { browserId, setBrowserId, notification, recordingName, setRecordingName, recordingId, setRecordingId } = useGlobalInfoStore();

-  const handleNewRecording = () => {
-    setBrowserId('new-recording');
-    setRecordingName('');
-    setRecordingId('');
-    navigate('/recording');
-  }
-
  const handleEditRecording = (recordingId: string, fileName: string) => {
    setRecordingName(fileName);
    setRecordingId(recordingId);
@@ -57,11 +50,7 @@ export const PageWrapper = () => {
      <AuthProvider>
        <SocketProvider>
          <React.Fragment>
-            {
-              !!browserId ? (
-                ""
-              ) : <NavBar newRecording={handleNewRecording} recordingName={recordingName} isRecording={!!browserId} />
-            }
+            <NavBar recordingName={recordingName} isRecording={!!browserId} />
            <Routes>
              <Route element={<UserRoute />}>
                <Route path="/" element={<MainPage handleEditRecording={handleEditRecording} />} />