Dynamic Filters

gui/rpk-gui/src/lib/crud/components/crud-filters.tsx

@@ -1,22 +1,32 @@
 import { useEffect, useState } from "react";
 import { jsonschemaProvider } from "../providers/jsonschema-provider";
-import { CircularProgress } from "@mui/material";
-import { QueryBuilderMaterial } from "@react-querybuilder/material";
-import { QueryBuilder, type RuleGroupType } from 'react-querybuilder';
+import { Accordion, AccordionDetails, AccordionSummary, CircularProgress } from "@mui/material";
+import FilterForm from "../../filter-form/components/filter-form";
+import TextField from "@mui/material/TextField";
+import { useSearchParams } from "react-router";
+import { GridExpandMoreIcon } from "@mui/x-data-grid";
+
+export type OnChangeValue = {
+  search: string | null
+  filters: {[filter: string]: {[op: string]: string}}
+}
 
 type CrudFiltersProps = {
   resourceName: string
   resourcePath: string
+  onChange: (value: OnChangeValue) => void
 }
 
 const CrudFilters = (props: CrudFiltersProps) => {
-  const { resourceName, resourcePath } = props
+  const { resourceName, resourcePath, onChange } = props
 
+  const [hasSearch, setHasSearch] = useState(false)
   const [filtersSchema, setFiltersSchema] = useState<any[]>([])
   const [filtersLoading, setFiltersLoading] = useState(true);
   useEffect(() => {
     const fetchSchema = async () => {
       try {
+        setHasSearch(await jsonschemaProvider.hasSearch(resourcePath))
         const resourceFilters = await jsonschemaProvider.getListFilters(resourceName, resourcePath)
         setFiltersSchema(resourceFilters);
         console.log(resourceFilters);
@@ -29,20 +39,57 @@ const CrudFilters = (props: CrudFiltersProps) => {
     fetchSchema();
   }, []);
 
-  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });
-
   if (filtersLoading) {
     return <CircularProgress />
   }
 
+  let currentValue = {
+    search: "",
+    filters: {}
+  }
+
   return (
-    <QueryBuilderMaterial>
-      <QueryBuilder
-        fields={filtersSchema}
-        defaultQuery={query}
-        onQueryChange={setQuery} />
-    </QueryBuilderMaterial>
+    <>
+      {hasSearch &&
+        <SearchFilter value="" onChange={(value) => {
+            currentValue.search = value;
+            onChange(currentValue);
+          }}
+        />
+      }
+      <Accordion>
+        <AccordionSummary
+          expandIcon={<>Advanced filters<GridExpandMoreIcon /></>}
+        />
+        <AccordionDetails>
+          <FilterForm fields={filtersSchema} values={{}} onChange={(value) => {
+              currentValue.filters = value;
+              onChange(currentValue);
+            }}
+          />
+        </AccordionDetails>
+      </Accordion>
+    </>
   )
 }
 
 export default CrudFilters;
+
+type SearchFilter = {
+  value: string
+  onChange: (value: any) => void
+}
+
+const SearchFilter = (props: SearchFilter) => {
+  const {value, onChange} = props;
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  return (
+    <TextField
+      label="schemas.search"
+      fullWidth={true}
+      onChange={(event) => onChange(event.target.value)}
+      defaultValue={value}
+    />
+  )
+}