Add search to JobModal.tsx

packages/client/src/app/jobs/executeJobModal.tsx

@@ -1,47 +1,50 @@
+import React, { useState, useMemo } from 'react';
 import { Button, Modal, Table, Text } from '@nextui-org/react';
 import { MitmControlDTO } from '@rotom/connections';
 import { Selection } from '@react-types/shared/src/selection';
 import { toast } from 'react-toastify';
-import { useCallback, useState } from 'react';
+
+import { SearchInput } from '../status/search';
 
 interface ExecuteJobModalProps {
   closeModal: () => void;
   devices?: MitmControlDTO[];
   jobId: string;
 }
 
-export const ExecuteJobModal = ({ closeModal, devices, jobId }: ExecuteJobModalProps): JSX.Element => {
+export const ExecuteJobModal: React.FC<ExecuteJobModalProps> = ({ closeModal, devices, jobId }) => {
   const [selectedDevices, setSelectedDevices] = useState<Selection>();
+  const [search, setSearch] = useState('');
 
-  const executeJob = useCallback(
-    async ({ deviceIds }: { deviceIds: string[] | number[] }) => {
-      const promise = fetch(`/api/job/execute/${jobId}/${deviceIds.join()}`, { method: 'POST' }).then(
-        async (response) => {
-          if (response.status !== 200) {
-            throw new Error();
-          }
+  const filteredDevices = useMemo(() => {
+    return devices?.filter((device) => device.deviceId?.includes(search) || device.origin?.includes(search)) || [];
+  }, [devices, search]);
 
-          closeModal();
-        },
-      );
+  const executeJob = async ({ deviceIds }: { deviceIds: string[] | number[] }) => {
+    const promise = fetch(`/api/job/execute/${jobId}/${deviceIds.join()}`, { method: 'POST' }).then(
+      async (response) => {
+        if (response.status !== 200) {
+          throw new Error();
+        }
+        closeModal();
+      },
+    );
 
-      toast.promise(promise, {
-        pending: `Running ${jobId}...`,
-        success: `${jobId} started succesfully`,
-        error: `Failed to start job ${jobId}`,
-      });
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [jobId],
-  );
+    toast.promise(promise, {
+      pending: `Running ${jobId}...`,
+      success: `${jobId} started successfully`,
+      error: `Failed to start job ${jobId}`,
+    });
+  };
 
   return (
     <>
       <Modal.Header>
         <Text h3>Execute {jobId}</Text>
       </Modal.Header>
       <Modal.Body>
-        {devices && (
+        <SearchInput value={search} onChange={setSearch} />
+        {filteredDevices && (
           <Table
             aria-label="Devices"
             bordered
@@ -64,7 +67,7 @@ export const ExecuteJobModal = ({ closeModal, devices, jobId }: ExecuteJobModalP
               <Table.Column>Origin</Table.Column>
             </Table.Header>
             <Table.Body>
-              {devices.map((device) => (
+              {filteredDevices.map((device) => (
                 <Table.Row key={`${device.deviceId}`}>
                   <Table.Cell>{device.deviceId}</Table.Cell>
                   <Table.Cell>{device.origin}</Table.Cell>