import { Panels , PanelSection } from "./PanelSection" ; import { CodeBlock } from "../../../components/CodeBlock" ; import { CopyButton } from "../../../components/CopyButton" ; import * as safeJson from "../../../helpers/safeJson" ; import { IGraphqlRequestBody } from "../../../helpers/graphqlHelpers" ; interface IRequestViewProps { requests : IGraphqlRequestBody [ ] ; } const isVariablesPopulated = ( request ) => { return Object . keys ( request . variables || { } ) . length > 0 ; } ; export const RequestView = ( props ) => { const { requests } = props ; return ( < Panels > { requests . map ( ( request ) => { return ( < PanelSection key = { request . query } className = "relative" > < CopyButton textToCopy = { request . query } className = "absolute right-3 top-3 z-10" / > { isVariablesPopulated ( request ) && ( < CopyButton label = "Copy Vars" textToCopy = { safeJson . stringify ( request . variables , undefined , 2 ) } className = "absolute right-3 top-3 z-10 mt-14" / > ) } < CodeBlock text = { request . query } language = { "graphql" } / > { isVariablesPopulated ( request ) && ( < div className = "bg-gray-200 dark:bg-gray-800 rounded-lg" > < CodeBlock text = { safeJson . stringify ( request . variables , undefined , 2 ) } language = { "json" } / > < /div>)} < /PanelSection>); } ) } < /Panels>); } ;