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