Merge branch 'main' into fix-job-all-devices

UnownHash · Dec 16, 2023 · ebd9890 · ebd9890
2 parents b5881b3 + a481c58
commit ebd9890
Showing 1 changed file with 19 additions and 6 deletions.
diff --git a/packages/client/src/app/jobs/executeJobModal.tsx b/packages/client/src/app/jobs/executeJobModal.tsx
@@ -1,17 +1,30 @@
+import React, { useState, useMemo, useCallback } from 'react';
 import { Button, Modal, Table, Text } from '@nextui-org/react';
 import { DeviceControlDTO } 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?: DeviceControlDTO[];
   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 filteredDevices = useMemo(() => {
+    return (
+      devices?.filter(
+        (device) =>
+          device.deviceId?.toLowerCase().includes(search.toLowerCase()) ||
+          device.origin?.toLowerCase().includes(search.toLowerCase()),
+      ) || []
+    );
+  }, [devices, search]);
 
   const executeJob = useCallback(
     async ({ deviceIds }: { deviceIds: string[] | number[] }) => {
@@ -34,8 +47,7 @@ export const ExecuteJobModal = ({ closeModal, devices, jobId }: ExecuteJobModalP
         error: `Failed to start job ${jobId}`,
       });
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [jobId],
+    [jobId, closeModal],
   );
 
   return (
@@ -44,7 +56,8 @@ export const ExecuteJobModal = ({ closeModal, devices, jobId }: ExecuteJobModalP
         <Text h3>Execute {jobId}</Text>
       </Modal.Header>
       <Modal.Body>
-        {devices && (
+        <SearchInput value={search} onChange={setSearch} />
+        {filteredDevices && (
           <Table
             aria-label="Devices"
             bordered
@@ -67,7 +80,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>