Skip to content

Commit fd4664a

Browse files
committed
[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 -->
1 parent 58b75d1 commit fd4664a

File tree

1 file changed

+41
-6
lines changed

1 file changed

+41
-6
lines changed

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

Lines changed: 41 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
SelectTrigger,
1717
SelectValue,
1818
} from "@/components/ui/select";
19-
import { Separator } from "@/components/ui/separator";
2019
import { ToolTipLabel } from "@/components/ui/tooltip";
2120
import { cn } from "@/lib/utils";
2221
import { zodResolver } from "@hookform/resolvers/zod";
@@ -422,8 +421,32 @@ function RequestConfigSection(props: {
422421
path: string;
423422
supportedChainIds: number[];
424423
}) {
425-
const pathVariables = props.parameters.filter((param) => param.in === "path");
426-
const queryParams = props.parameters.filter((param) => param.in === "query");
424+
const { pathVariables, queryParams, filterQueryParams } = useMemo(() => {
425+
const pathVariables: OpenAPIV3.ParameterObject[] = [];
426+
const queryParams: OpenAPIV3.ParameterObject[] = [];
427+
const filterQueryParams: OpenAPIV3.ParameterObject[] = [];
428+
429+
for (const param of props.parameters) {
430+
if (param.in === "path") {
431+
pathVariables.push(param);
432+
}
433+
434+
if (param.in === "query") {
435+
if (param.name.startsWith("filter_")) {
436+
filterQueryParams.push(param);
437+
} else {
438+
queryParams.push(param);
439+
}
440+
}
441+
}
442+
443+
return {
444+
pathVariables,
445+
queryParams,
446+
filterQueryParams,
447+
};
448+
}, [props.parameters]);
449+
427450
const showError =
428451
!props.form.formState.isValid &&
429452
props.form.formState.isDirty &&
@@ -451,10 +474,9 @@ function RequestConfigSection(props: {
451474
/>
452475
)}
453476

454-
{pathVariables.length > 0 && queryParams.length > 0 && <Separator />}
455-
456477
{queryParams.length > 0 && (
457478
<ParameterSection
479+
className="border-t"
458480
parameters={queryParams}
459481
title="Query Parameters"
460482
form={props.form}
@@ -463,6 +485,18 @@ function RequestConfigSection(props: {
463485
supportedChainIds={props.supportedChainIds}
464486
/>
465487
)}
488+
489+
{filterQueryParams.length > 0 && (
490+
<ParameterSection
491+
className="border-t"
492+
parameters={filterQueryParams}
493+
title="Filter Query Parameters"
494+
form={props.form}
495+
domain={props.domain}
496+
path={props.path}
497+
supportedChainIds={props.supportedChainIds}
498+
/>
499+
)}
466500
</ScrollShadow>
467501
</div>
468502
);
@@ -479,10 +513,11 @@ function ParameterSection(props: {
479513
domain: string;
480514
path: string;
481515
supportedChainIds: number[];
516+
className?: string;
482517
}) {
483518
const url = `${props.domain}${props.path}`;
484519
return (
485-
<div className="p-4 py-6">
520+
<div className={cn("p-4 py-6", props.className)}>
486521
<h3 className="mb-3 font-medium text-sm"> {props.title} </h3>
487522
<div className="overflow-hidden rounded-lg border">
488523
{props.parameters.map((param, i) => {

0 commit comments

Comments
 (0)