Adding Crud filters form

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

@@ -0,0 +1,48 @@
+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';
+
+type CrudFiltersProps = {
+  resourceName: string
+  resourcePath: string
+}
+
+const CrudFilters = (props: CrudFiltersProps) => {
+  const { resourceName, resourcePath } = props
+
+  const [filtersSchema, setFiltersSchema] = useState<any[]>([])
+  const [filtersLoading, setFiltersLoading] = useState(true);
+  useEffect(() => {
+    const fetchSchema = async () => {
+      try {
+        const resourceFilters = await jsonschemaProvider.getListFilters(resourceName, resourcePath)
+        setFiltersSchema(resourceFilters);
+        console.log(resourceFilters);
+        setFiltersLoading(false);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+        setFiltersLoading(false);
+      }
+    };
+    fetchSchema();
+  }, []);
+
+  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });
+
+  if (filtersLoading) {
+    return <CircularProgress />
+  }
+
+  return (
+    <QueryBuilderMaterial>
+      <QueryBuilder
+        fields={filtersSchema}
+        defaultQuery={query}
+        onQueryChange={setQuery} />
+    </QueryBuilderMaterial>
+  )
+}
+
+export default CrudFilters;