Allow filter by request contains

app/src/components/requestLogs/LogFilters/AddFilterButton.tsx

@@ -0,0 +1,30 @@
+import { Button, HStack, Icon, Text } from "@chakra-ui/react";
+import { BsPlus } from "react-icons/bs";
+import { comparators } from "~/state/logFiltersSlice";
+import { useAppStore } from "~/state/store";
+import { useFilterableFields } from "~/utils/hooks";
+
+const AddFilterButton = () => {
+  const filterableFields = useFilterableFields().data;
+
+  const addFilter = useAppStore((s) => s.logFilters.addFilter);
+
+  if (!filterableFields || !filterableFields.length || !comparators || !comparators.length)
+    return null;
+
+  return (
+    <HStack
+      as={Button}
+      variant="ghost"
+      fontWeight="normal"
+      onClick={() =>
+        addFilter({ field: filterableFields[0] as string, comparator: comparators[0] })
+      }
+    >
+      <Icon as={BsPlus} />
+      <Text>Add Filter</Text>
+    </HStack>
+  );
+};
+
+export default AddFilterButton;

app/src/components/requestLogs/LogFilters/LogFilter.tsx

@@ -0,0 +1,56 @@
+import { HStack, IconButton, Input, Select } from "@chakra-ui/react";
+import { BsTrash } from "react-icons/bs";
+
+import { type LogFilter, comparators } from "~/state/logFiltersSlice";
+import { useAppStore } from "~/state/store";
+import { useFilterableFields } from "~/utils/hooks";
+
+const LogFilter = ({ filter, index }: { filter: LogFilter; index: number }) => {
+  const filterableFields = useFilterableFields();
+
+  const updateFilter = useAppStore((s) => s.logFilters.updateFilter);
+  const deleteFilter = useAppStore((s) => s.logFilters.deleteFilter);
+
+  const { field, comparator, value } = filter;
+
+  return (
+    <HStack>
+      <Select
+        value={field}
+        onChange={(e) => updateFilter(index, { ...filter, field: e.target.value })}
+      >
+        {filterableFields.data?.map((field) => (
+          <option key={field} value={field}>
+            {field}
+          </option>
+        ))}
+      </Select>
+      <Select
+        value={comparator}
+        onChange={(e) =>
+          updateFilter(index, {
+            ...filter,
+            comparator: e.target.value as (typeof comparators)[number],
+          })
+        }
+      >
+        {comparators.map((comparator) => (
+          <option key={comparator} value={comparator}>
+            {comparator}
+          </option>
+        ))}
+      </Select>
+      <Input
+        value={value}
+        onChange={(e) => updateFilter(index, { ...filter, value: e.target.value })}
+      />
+      <IconButton
+        aria-label="Delete Filter"
+        icon={<BsTrash />}
+        onClick={() => deleteFilter(index)}
+      />
+    </HStack>
+  );
+};
+
+export default LogFilter;

app/src/components/requestLogs/LogFilters/LogFilters.tsx

@@ -0,0 +1,20 @@
+import { VStack, Text } from "@chakra-ui/react";
+
+import AddFilterButton from "./AddFilterButton";
+import { useAppStore } from "~/state/store";
+import LogFilter from "./LogFilter";
+
+const LogFilters = () => {
+  const filters = useAppStore((s) => s.logFilters.filters);
+  return (
+    <VStack bgColor="white" borderRadius={8} borderWidth={1} w="full" alignItems="flex-start" p={4}>
+      <Text>Filters</Text>
+      {filters.map((filter, index) => (
+        <LogFilter key={index} filter={filter} index={index} />
+      ))}
+      <AddFilterButton />
+    </VStack>
+  );
+};
+
+export default LogFilters;

app/src/components/requestLogs/LoggedCallsTable.tsx

@@ -12,7 +12,7 @@ export default function LoggedCallsTable() {
       <Table>
         <TableHeader showCheckbox />
         <Tbody>
-          {loggedCalls?.calls.map((loggedCall) => {
+          {loggedCalls?.calls?.map((loggedCall) => {
             return (
               <TableRow
                 key={loggedCall.id}