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:
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user