jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix horizontal scroll in Databases plugin

Browse Source 
Summary:
changelog: make sure database plugin is horizontally scrollable

fixes https://github.com/facebook/flipper/issues/2306

(assumed that'd be fixed by previous diff, but the plugin doesn't use the `DataTable` abstraction yet, athough it has a component with the same name :')

Reviewed By: cekkaewnumchai

Differential Revision: D33368215

fbshipit-source-id: f6a9b876ba3cd4aea7faa85b045a7614278e1c86
This commit is contained in:
Michel Weststrate
2022-01-04 08:31:14 -08:00
committed by Facebook GitHub Bot
parent 80bb372920
commit c0fac38282
1 changed files with 34 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
desktop/plugins/public/databases/DatabasesPlugin.tsx
View File

@@ -278,7 +278,7 @@ const QueryTable = React.memo(
const columns = table.columns;
const rows = table.rows;
return (
<Layout.Horizontal grow>
<Layout.Container grow>
<ManagedTable
floating={false}
multiline
@@ -304,7 +304,7 @@ const QueryTable = React.memo(
columnValues={table.rows[table.highlightedRows[0]]}
/>
)}
</Layout.Horizontal>
</Layout.Container>
);
} else if (query.id && query.id !== null) {
return (
@@ -744,40 +744,38 @@ export function Component() {
</Toolbar>
</Layout.Container>
) : null}
<Layout.Horizontal grow>
<Layout.Container grow>
{state.viewMode === 'data' ? (
<DataTable
page={state.currentPage}
highlightedRowsChanged={pageHighlightedRowsChanged}
onRowEdited={onRowEdited}
sortOrderChanged={sortOrderChanged}
currentSort={state.currentSort}
currentStructure={state.currentStructure}
/>
) : null}
{state.viewMode === 'structure' && state.currentStructure ? (
<DatabaseStructure structure={state.currentStructure} />
) : null}
{state.viewMode === 'SQL' ? (
<QueryTable
query={state.queryResult}
highlightedRowsChanged={queryHighlightedRowsChanged}
/>
) : null}
{state.viewMode === 'tableInfo' ? (
<Layout.Horizontal
grow
pad={theme.space.small}
style={{paddingBottom: 0}}>
<TextArea value={sqlFormatter.format(state.tableInfo)} readOnly />
</Layout.Horizontal>
) : null}
{state.viewMode === 'queryHistory' ? (
<QueryHistory history={state.queryHistory} />
) : null}
</Layout.Container>
</Layout.Horizontal>
<Layout.Container grow>
{state.viewMode === 'data' ? (
<DataTable
page={state.currentPage}
highlightedRowsChanged={pageHighlightedRowsChanged}
onRowEdited={onRowEdited}
sortOrderChanged={sortOrderChanged}
currentSort={state.currentSort}
currentStructure={state.currentStructure}
/>
) : null}
{state.viewMode === 'structure' && state.currentStructure ? (
<DatabaseStructure structure={state.currentStructure} />
) : null}
{state.viewMode === 'SQL' ? (
<QueryTable
query={state.queryResult}
highlightedRowsChanged={queryHighlightedRowsChanged}
/>
) : null}
{state.viewMode === 'tableInfo' ? (
<Layout.Horizontal
grow
pad={theme.space.small}
style={{paddingBottom: 0}}>
<TextArea value={sqlFormatter.format(state.tableInfo)} readOnly />
</Layout.Horizontal>
) : null}
{state.viewMode === 'queryHistory' ? (
<QueryHistory history={state.queryHistory} />
) : null}
</Layout.Container>
<Toolbar position="bottom" style={{paddingLeft: 8}}>
<Layout.Horizontal grow>
{state.viewMode === 'SQL' && state.executionTime !== 0 ? (