fix: status filter not shown (#4108)

Signed-off-by: Cheyu Wu <[email protected]>

Author: CheyuWu

dashboard/src/components/ClearableSelect.tsx

@@ -5,10 +5,9 @@ import Select, { SelectProps, SelectStaticProps } from "@mui/joy/Select";
 import React from "react";
 
 // ClearableSelect is a single select component that offers a clear button
-export default function ClearableSelect<
-  OptionValue extends object,
-  D extends React.ElementType = "button",
->(props: SelectProps<OptionValue, false, D>) {
+export default function ClearableSelect<D extends React.ElementType = "button">(
+  props: SelectProps<string, false, D>,
+) {
   const action: SelectStaticProps["action"] = React.useRef(null);
   return (
     <Select

dashboard/src/components/FrontendTable/FrontendTableToolbar.tsx

@@ -58,7 +58,7 @@ export const FrontendTableToolbar: React.FC<FrontendTableToolbarProps> = ({
           size="sm"
           placeholder="Filter by status"
           slotProps={{ button: { sx: { whiteSpace: "nowrap" } } }}
-          value={statusFilter ? { value: statusFilter } : null}
+          value={statusFilter}
           onChange={(e, newValue) => setStatusFilter(newValue)}
         >
           {statuses.map((status, index) => (