Add: Modify consumer form

Author: Poleg Kashti

frontend/src/components/ACLPage/Form/ForConsumers/Form.tsx

@@ -49,7 +49,7 @@ const ForConsumersForm: FC<AclDetailedFormProps> = ({ formRef }) => {
   const topicCount = clusterStats?.[0]?.topicCount ?? 0;
   const topics = useTopicsOptions(clusterName, topicCount);
 
-  const consumerGroups = useConsumerGroupsOptions(clusterName, 100);
+  const consumerGroups = useConsumerGroupsOptions(clusterName, 1000);
   const consumerCount = consumerGroups.length;
 
   const onSubmit = async (formData: FormValues) => {

frontend/src/components/common/Checkbox/Checkbox.tsx

@@ -8,15 +8,17 @@ interface CheckboxProps {
   name: string;
   label: React.ReactNode;
   hint?: string;
+  checked?: boolean;
+  onChange?: (value: boolean) => void; // Add onChange prop
 }
 
-const Checkbox: React.FC<CheckboxProps> = ({ name, label, hint }) => {
+const Checkbox: React.FC<CheckboxProps> = ({ name, label, hint, checked, onChange}) => {
   const { register } = useFormContext();
 
   return (
     <div>
       <InputLabel>
-        <input {...register(name)} type="checkbox" />
+        <input {...register && register(name)} type="checkbox" checked={checked} onChange={onChange ? (e) => onChange(e.target.checked) : undefined} />
         {label}
       </InputLabel>
       <InputHint>{hint}</InputHint>

frontend/src/lib/hooks/api/consumers.ts

@@ -30,7 +30,7 @@ export function useConsumerGroups(props: UseConsumerGroupsProps) {
   return useQuery(
     ['clusters', clusterName, 'consumerGroups', rest],
     () => api.getConsumerGroupsPage(props),
-    { suspense: false, keepPreviousData: true }
+    { suspense: true, keepPreviousData: true }
   );
 }