[TOOL-2800] Insight Playground: Combine all filter query params in a …

…group (#5807)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the `RequestConfigSection` component by improving the handling of parameters. It introduces a new categorization for query parameters, separating them into general query parameters and filter query parameters, and updates the rendering logic accordingly.

### Detailed summary
- Refactored parameter handling in `RequestConfigSection` using `useMemo`.
- Introduced `filterQueryParams` to categorize parameters starting with "filter_".
- Updated rendering to conditionally display `ParameterSection` for `filterQueryParams`.
- Added `className` prop to `ParameterSection` for styling flexibility.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/blueprint-playground.client.tsx

@@ -16,7 +16,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -422,8 +421,32 @@ function RequestConfigSection(props: {
   path: string;
   supportedChainIds: number[];
 }) {
-  const pathVariables = props.parameters.filter((param) => param.in === "path");
-  const queryParams = props.parameters.filter((param) => param.in === "query");
+  const { pathVariables, queryParams, filterQueryParams } = useMemo(() => {
+    const pathVariables: OpenAPIV3.ParameterObject[] = [];
+    const queryParams: OpenAPIV3.ParameterObject[] = [];
+    const filterQueryParams: OpenAPIV3.ParameterObject[] = [];
+
+    for (const param of props.parameters) {
+      if (param.in === "path") {
+        pathVariables.push(param);
+      }
+
+      if (param.in === "query") {
+        if (param.name.startsWith("filter_")) {
+          filterQueryParams.push(param);
+        } else {
+          queryParams.push(param);
+        }
+      }
+    }
+
+    return {
+      pathVariables,
+      queryParams,
+      filterQueryParams,
+    };
+  }, [props.parameters]);
+
   const showError =
     !props.form.formState.isValid &&
     props.form.formState.isDirty &&
@@ -451,10 +474,9 @@ function RequestConfigSection(props: {
           />
         )}
 
-        {pathVariables.length > 0 && queryParams.length > 0 && <Separator />}
-
         {queryParams.length > 0 && (
           <ParameterSection
+            className="border-t"
             parameters={queryParams}
             title="Query Parameters"
             form={props.form}
@@ -463,6 +485,18 @@ function RequestConfigSection(props: {
             supportedChainIds={props.supportedChainIds}
           />
         )}
+
+        {filterQueryParams.length > 0 && (
+          <ParameterSection
+            className="border-t"
+            parameters={filterQueryParams}
+            title="Filter Query Parameters"
+            form={props.form}
+            domain={props.domain}
+            path={props.path}
+            supportedChainIds={props.supportedChainIds}
+          />
+        )}
       </ScrollShadow>
     </div>
   );
@@ -479,10 +513,11 @@ function ParameterSection(props: {
   domain: string;
   path: string;
   supportedChainIds: number[];
+  className?: string;
 }) {
   const url = `${props.domain}${props.path}`;
   return (
-    <div className="p-4 py-6">
+    <div className={cn("p-4 py-6", props.className)}>
       <h3 className="mb-3 font-medium text-sm"> {props.title} </h3>
       <div className="overflow-hidden rounded-lg border">
         {props.parameters.map((param, i) => {