github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/dashboards/layout/PanelDetail/PanelDetailQuery.tsx (about) 1 import CodeBlock from "../../../CodeBlock"; 2 import { format } from "@supabase/sql-formatter"; 3 import { PanelDetailProps } from "./index"; 4 import { useMemo } from "react"; 5 6 const beautify = (query) => { 7 if (!query) { 8 return null; 9 } 10 return format(query || "", { 11 language: "postgresql", 12 }); 13 }; 14 15 const PanelDetailQuery = ({ definition }: PanelDetailProps) => { 16 const formattedQuery = useMemo( 17 () => beautify(definition.sql), 18 [definition.sql] 19 ); 20 21 if (!formattedQuery) { 22 return <></>; 23 } 24 25 return <CodeBlock language="sql">{formattedQuery}</CodeBlock>; 26 }; 27 28 export default PanelDetailQuery;