Merge pull request #190 from AmitChauhan63390/search_logic

feat: search robots & runs

src/components/molecules/RecordingsTable.tsx

@@ -9,8 +9,12 @@ import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
 import { useEffect } from "react";
 import { WorkflowFile } from "maxun-core";
+
+
+import SearchIcon from '@mui/icons-material/Search';
 import { IconButton, Button, Box, Typography, TextField, MenuItem, Menu, ListItemIcon, ListItemText } from "@mui/material";
 import { Schedule, DeleteForever, Edit, PlayCircle, Settings, Power, ContentCopy, } from "@mui/icons-material";
+
 import LinkIcon from '@mui/icons-material/Link';
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { checkRunsForRecording, deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage";
@@ -18,10 +22,12 @@ import { Add } from "@mui/icons-material";
 import { useNavigate } from 'react-router-dom';
 import { stopRecording } from "../../api/recording";
 import { GenericModal } from '../atoms/GenericModal';
+
 import axios from 'axios';
 import { apiUrl } from '../../apiConfig';
 import { Menu as MenuIcon } from '@mui/icons-material';
 
+
 /** TODO:
  *  1. allow editing existing robot after persisting browser steps
  *  2. show robot settings: id, url, etc. 
@@ -38,17 +44,6 @@ interface Column {
 const columns: readonly Column[] = [
   { id: 'interpret', label: 'Run', minWidth: 80 },
   { id: 'name', label: 'Name', minWidth: 80 },
-  // {
-  //   id: 'createdAt',
-  //   label: 'Created at',
-  //   minWidth: 80,
-  //   //format: (value: string) => value.toLocaleString('en-US'),
-  // },
-  // {
-  //   id: 'edit',
-  //   label: 'Edit',
-  //   minWidth: 80,
-  // },
   {
     id: 'schedule',
     label: 'Schedule',
@@ -59,12 +54,6 @@ const columns: readonly Column[] = [
     label: 'Integrate',
     minWidth: 80,
   },
-  // {
-  //   id: 'updatedAt',
-  //   label: 'Updated at',
-  //   minWidth: 80,
-  //   //format: (value: string) => value.toLocaleString('en-US'),
-  // },
   {
     id: 'settings',
     label: 'Settings',
@@ -101,6 +90,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
   const [rows, setRows] = React.useState<Data[]>([]);
   const [isModalOpen, setModalOpen] = React.useState(false);
+  const [searchTerm, setSearchTerm] = React.useState('');
 
   const { notify, setRecordings, browserId, setBrowserId, recordingUrl, setRecordingUrl, recordingName, setRecordingName, recordingId, setRecordingId } = useGlobalInfoStore();
   const navigate = useNavigate();
@@ -114,6 +104,11 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
     setPage(0);
   };
 
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+    setPage(0);
+  };
+
   const fetchRecordings = async () => {
     const recordings = await getStoredRecordings();
     if (recordings) {
@@ -152,7 +147,6 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
   const startRecording = () => {
     setModalOpen(false);
     handleStartRecording();
-    // notify('info', 'New Recording started for ' + recordingUrl);
   };
 
   useEffect(() => {
@@ -161,36 +155,54 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
     }
   }, []);
 
+
+  // Filter rows based on search term
+  const filteredRows = rows.filter((row) =>
+    row.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
    
 
+
   return (
     <React.Fragment>
       <Box display="flex" justifyContent="space-between" alignItems="center">
         <Typography variant="h6" gutterBottom>
           My Robots
         </Typography>
-        <IconButton
+        <Box display="flex" alignItems="center" gap={2}>
-          aria-label="new"
+          <TextField
-          size={"small"}
+            size="small"
-          onClick={handleNewRecording}
+            placeholder="Search robots..."
-          sx={{
+            value={searchTerm}
-            width: '140px',
+            onChange={handleSearchChange}
-            borderRadius: '5px',
+            InputProps={{
-            padding: '8px',
+              startAdornment: <SearchIcon sx={{ color: 'action.active', mr: 1 }} />
-            background: '#ff00c3',
+            }}
-            color: 'white',
+            sx={{ width: '250px' }}
-            marginRight: '10px',
+          />
-            fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+          <IconButton
-            fontWeight: '500',
+            aria-label="new"
-            fontSize: '0.875rem',
+            size={"small"}
-            lineHeight: '1.75',
+            onClick={handleNewRecording}
-            letterSpacing: '0.02857em',
+            sx={{
-            '&:hover': { color: 'white', backgroundColor: '#ff00c3' }
+              width: '140px',
-          }
+              borderRadius: '5px',
-          }
+              padding: '8px',
-        >
+              background: '#ff00c3',
-          <Add sx={{ marginRight: '5px' }} /> Create Robot
+              color: 'white',
-        </IconButton>
+              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>
       </Box>
       <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
         <Table stickyHeader aria-label="sticky table">
@@ -208,7 +220,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
             </TableRow>
           </TableHead>
           <TableBody>
-            {rows.length !== 0 ? rows
+            {filteredRows.length !== 0 ? filteredRows
               .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
               .map((row) => {
                 return (
@@ -230,16 +242,6 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
                                 <InterpretButton handleInterpret={() => handleRunRecording(row.id, row.name, row.params || [])} />
                               </TableCell>
                             );
-                          // case 'edit':
-                          //   return (
-                          //     <TableCell key={column.id} align={column.align}>
-                          //       <IconButton aria-label="add" size="small" onClick={() => {
-                          //         handleEditRecording(row.id, row.name);
-                          //       }} sx={{ '&:hover': { color: '#1976d2', backgroundColor: 'transparent' } }}>
-                          //         <Edit />
-                          //       </IconButton>
-                          //     </TableCell>
-                          //   );
                           case 'schedule':
                             return (
                               <TableCell key={column.id} align={column.align}>
@@ -300,7 +302,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
       <TablePagination
         rowsPerPageOptions={[10, 25, 50]}
         component="div"
-        count={rows ? rows.length : 0}
+        count={filteredRows.length}
         rowsPerPage={rowsPerPage}
         page={page}
         onPageChange={handleChangePage}
@@ -346,7 +348,6 @@ const InterpretButton = ({ handleInterpret }: InterpretButtonProps) => {
   )
 }
 
-
 interface ScheduleButtonProps {
   handleSchedule: () => void;
 }

src/components/molecules/RunsTable.tsx

@@ -12,8 +12,9 @@ import { useGlobalInfoStore } from "../../context/globalInfo";
 import { getStoredRuns } from "../../api/storage";
 import { RunSettings } from "./RunSettings";
 import { CollapsibleRow } from "./ColapsibleRow";
-import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material';
+import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, TextField } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import SearchIcon from '@mui/icons-material/Search';
 
 interface Column {
   id: 'runStatus' | 'name' | 'startedAt' | 'finishedAt' | 'delete' | 'settings';
@@ -28,7 +29,6 @@ export const columns: readonly Column[] = [
   { id: 'name', label: 'Robot Name', minWidth: 80 },
   { id: 'startedAt', label: 'Started at', minWidth: 80 },
   { id: 'finishedAt', label: 'Finished at', minWidth: 80 },
-  // { id: 'task', label: 'Task', minWidth: 80 },
   { id: 'settings', label: 'Settings', minWidth: 80 },
   { id: 'delete', label: 'Delete', minWidth: 80 },
 ];
@@ -42,7 +42,6 @@ export interface Data {
   runByUserId?: string;
   runByScheduleId?: string;
   runByAPI?: boolean;
-  // task: string;
   log: string;
   runId: string;
   robotId: string;
@@ -65,6 +64,9 @@ export const RunsTable = (
   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) => {
@@ -76,6 +78,11 @@ export const RunsTable = (
     setPage(0);
   };
 
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+    setPage(0);
+  };
+
   const fetchRuns = async () => {
     const runs = await getStoredRuns();
     if (runs) {
@@ -105,8 +112,15 @@ export const RunsTable = (
     fetchRuns();
   };
 
-  // Group runs by robot meta id
+
-  const groupedRows = rows.reduce((acc, row) => {
+  // Filter rows based on search term
+  const filteredRows = rows.filter((row) =>
+    row.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  // Group filtered rows by robot meta id
+  const groupedRows = filteredRows.reduce((acc, row) => {
+
     if (!acc[row.robotMetaId]) {
       acc[row.robotMetaId] = [];
     }
@@ -116,14 +130,28 @@ export const RunsTable = (
 
   return (
     <React.Fragment>
-      <Typography variant="h6" gutterBottom>
+      <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
-        All Runs
+        <Typography variant="h6" gutterBottom>
-      </Typography>
+          All Runs
+        </Typography>
+        <TextField
+          size="small"
+          placeholder="Search runs..."
+          value={searchTerm}
+          onChange={handleSearchChange}
+          InputProps={{
+            startAdornment: <SearchIcon sx={{ color: 'action.active', mr: 1 }} />
+          }}
+          sx={{ width: '250px' }}
+        />
+      </Box>
       <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
         {Object.entries(groupedRows).map(([id, data]) => (
           <Accordion key={id}>
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                <Typography variant="h6">{data[data.length - 1].name}</Typography>
+
+              <Typography variant="h6">{data[data.length - 1].name}</Typography>
+
             </AccordionSummary>
             <AccordionDetails>
               <Table stickyHeader aria-label="sticky table">
@@ -164,7 +192,7 @@ export const RunsTable = (
       <TablePagination
         rowsPerPageOptions={[10, 25, 50]}
         component="div"
-        count={rows.length}
+        count={filteredRows.length}
         rowsPerPage={rowsPerPage}
         page={page}
         onPageChange={handleChangePage}