fix: Fix the visibility of the last results in the SQL Editor (#22099)

* Fix the flex in the results panel.

* Remove unnecessary react fragment.
This commit is contained in:
Ivan Vasilov
2024-04-03 08:49:15 +03:00
committed by GitHub
parent f2b35afc6d
commit 68f4b1c41b
3 changed files with 25 additions and 29 deletions

View File

@@ -90,8 +90,7 @@ const Results = ({ id, rows }: { id: string; rows: readonly any[] }) => {
<DataGrid
columns={columns}
rows={rows}
// style={{ height: '100%' }}
className="flex-grow border-t-0 pb-24"
className="flex-grow border-t-0"
rowClass={() => '[&>.rdg-cell]:items-center'}
onSelectedCellChange={onSelectedCellChange}
/>

View File

@@ -136,20 +136,18 @@ const ResultsDropdown = ({ id }: ResultsDropdownProps) => {
/>
<DropdownMenuContent side="bottom" align="start">
<>
<DropdownMenuItem onClick={onDownloadCSV} className="space-x-2">
<IconDownload size="tiny" />
<p>Download CSV</p>
</DropdownMenuItem>
<DropdownMenuItem onClick={onCopyAsMarkdown} className="space-x-2">
<IconClipboard size="tiny" />
<p>Copy as markdown</p>
</DropdownMenuItem>
<DropdownMenuItem onClick={onCopyAsJSON} className="space-x-2">
<IconClipboard size="tiny" />
<p>Copy as JSON</p>
</DropdownMenuItem>
</>
<DropdownMenuItem onClick={onDownloadCSV} className="space-x-2">
<IconDownload size="tiny" />
<p>Download CSV</p>
</DropdownMenuItem>
<DropdownMenuItem onClick={onCopyAsMarkdown} className="space-x-2">
<IconClipboard size="tiny" />
<p>Copy as markdown</p>
</DropdownMenuItem>
<DropdownMenuItem onClick={onCopyAsJSON} className="space-x-2">
<IconClipboard size="tiny" />
<p>Copy as JSON</p>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)

View File

@@ -1,17 +1,16 @@
import { useMemo, useState } from 'react'
import ResultsDropdown from './ResultsDropdown'
import UtilityActions from './UtilityActions'
import UtilityTabResults from './UtilityTabResults'
import { useQueryClient } from '@tanstack/react-query'
import { useParams } from 'common'
import toast from 'react-hot-toast'
import { useContentQuery } from 'data/content/content-query'
import { useContentUpsertMutation } from 'data/content/content-upsert-mutation'
import { contentKeys } from 'data/content/keys'
import { useSqlEditorStateSnapshot } from 'state/sql-editor'
import { TabsContent_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_, Tabs_Shadcn_ } from 'ui'
import { ChartConfig } from './ChartConfig'
import { useContentUpsertMutation } from 'data/content/content-upsert-mutation'
import { useContentQuery } from 'data/content/content-query'
import { useParams } from 'common'
import { useQueryClient } from '@tanstack/react-query'
import toast from 'react-hot-toast'
import { contentKeys } from 'data/content/keys'
import { SqlSnippets } from 'types'
import ResultsDropdown from './ResultsDropdown'
import UtilityActions from './UtilityActions'
import UtilityTabResults from './UtilityTabResults'
export type UtilityPanelProps = {
id: string
@@ -111,7 +110,7 @@ const UtilityPanel = ({
}
return (
<Tabs_Shadcn_ defaultValue="results" className="w-full h-full">
<Tabs_Shadcn_ defaultValue="results" className="w-full h-full flex flex-col">
<TabsList_Shadcn_ className="flex justify-between px-2">
<div>
<TabsTrigger_Shadcn_ className="py-3 text-xs" value="results">
@@ -125,7 +124,7 @@ const UtilityPanel = ({
Chart
</TabsTrigger_Shadcn_>
</div>
<div className="flex gap-1 h-full">
<div className="flex gap-1 h-full items-center">
{result && result.rows && <ResultsDropdown id={id} />}
<UtilityActions
id={id}