diff --git a/app/components/Header.js b/app/components/Header.js index bf5b9d7..0ab267f 100644 --- a/app/components/Header.js +++ b/app/components/Header.js @@ -1,7 +1,7 @@ // @flow import React, { Component } from 'react'; import NProgress from 'nprogress'; -import { Button, Tab } from '@falcon-client/falcon-ui'; +import { Button } from '@falcon-client/falcon-ui'; import ListSymbol from './ListSymbol'; type Props = { @@ -78,14 +78,14 @@ export default class Header extends Component {
-
this.props.onRefreshClick()} /> -
this.props.history.push('/login')} />
diff --git a/app/components/Login.js b/app/components/Login.js index b42c631..3c4c1e2 100644 --- a/app/components/Login.js +++ b/app/components/Login.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import { remote, ipcRenderer } from 'electron'; import { connect } from 'react-redux'; +import { Button } from '@falcon-client/falcon-ui'; import { OPEN_FILE_CHANNEL } from '../types/channels'; import { setDatabasePath } from '../actions/index'; @@ -78,15 +79,12 @@ class Login extends Component { const { errorMessages, connectionName, databasePath } = this.state; return (
-
+

Create Connection

{errorMessages.map(e => ( -
+
{e.message}
))} @@ -99,7 +97,7 @@ class Login extends Component { placeholder="My first connection" value={connectionName} type="text" - data-e2e="create-connection-name" + e2eData="create-connection-name" onChange={e => this.setState({ connectionName: e.target.value }) } @@ -110,20 +108,20 @@ class Login extends Component { this.setState({ databasePath: e.target.value })} />
- +
this.handleConnect()} - data-e2e="create-connection-submit" + e2eData="create-connection-submit" > Connect
diff --git a/app/components/Sidebar.js b/app/components/Sidebar.js index 965aca7..b968156 100644 --- a/app/components/Sidebar.js +++ b/app/components/Sidebar.js @@ -60,7 +60,7 @@ export default function Sidebar(props: Props) { : 'Sidebar--list-item' } style={{ paddingLeft: 40 }} - data-e2e="Sidebar--list-item" + e2eData="Sidebar--list-item" > {table.name} diff --git a/app/containers/HomePage.js b/app/containers/HomePage.js index 55cffe4..3f3e38f 100644 --- a/app/containers/HomePage.js +++ b/app/containers/HomePage.js @@ -4,6 +4,13 @@ import React, { Component } from 'react'; import { ResizableBox } from 'react-resizable'; import { ipcRenderer } from 'electron'; import { Switch, Route } from 'react-router'; +import { + Tabs, + Tab, + TabPanel, + TabList, + HTMLTabs +} from '@falcon-client/falcon-ui'; import Loadable from 'react-loadable'; import Header from '../components/Header'; import Footer from '../components/Footer'; @@ -47,6 +54,7 @@ type State = { widthSidebar: number, // 200 widthGrid: number, // window.innerWidth - 200 databaseName: ?string, + selectedTabIndex: number, selectedTable: ?TableType, selectedConnection: ?connectionType, tableColumns: Array, @@ -74,6 +82,7 @@ export default class HomePage extends Component { // @HACK: HARDCODE databaseType: 'SQLite', databaseVersion: '', + selectedTabIndex: 0, selectedTable: null, selectedConnection: null, tableColumns: [], @@ -245,6 +254,10 @@ export default class HomePage extends Component { }); }; + onTabSelect = (index: number, event: SyntheticEvent) => { + this.setState({ selectedTabIndex: index }); + }; + /** * Upon mounting, component fetches initial database data and configures * grid/sidebar resizing data. Also core @@ -299,11 +312,12 @@ export default class HomePage extends Component { const sidebar = document.querySelector('.Sidebar'); if (grid && sidebar) { const height = 32 + 10 + 21 + 15; - grid.style.height = `${window.innerHeight - height}px`; + // -32 for Tabs Height + grid.style.height = `${window.innerHeight - height - 32}px`; sidebar.style.height = `${window.innerHeight - height + 40}px`; // If the window is resized, change the height of the grid repsectively window.onresizeFunctions['resize-grid-resize'] = () => { - grid.style.height = `${window.innerHeight - height}px`; + grid.style.height = `${window.innerHeight - height - 32}px`; sidebar.style.height = `${window.innerHeight - height + 40}px`; }; } @@ -358,96 +372,115 @@ export default class HomePage extends Component { activeConnections={this.state.activeConnections} /> -
- - ( - { - this.setConnections(); - this.props.history.push('/content'); - }} - /> - )} - /> - - this.state.selectedTable ? ( - + + + + + + +
+ + ( + { + this.setConnections(); + this.props.history.push('/content'); }} /> - ) : null - } - /> - ( - - this.setRefreshQueryFn(() => - this.onTableSelect(this.state.selectedTable) - ) - } - /> - )} - /> - ( - this.setRefreshQueryFn(e)} - executeQuery={query => this.executeQuery(query)} - sqlFormatter={this.sqlFormatter} - /> - )} - /> - - this.core && - this.core.connection && - this.state.selectedConnection && - this.state.selectedConnection.database ? ( - + + this.state.selectedTable ? ( + + ) : null + } + /> + ( + + this.setRefreshQueryFn(() => + this.onTableSelect(this.state.selectedTable) + ) + } + /> + )} + /> + ( + this.setRefreshQueryFn(e)} + executeQuery={query => this.executeQuery(query)} + sqlFormatter={this.sqlFormatter} /> - ) : null - } - /> - } - /> - + )} + /> + + this.core && + this.core.connection && + this.state.selectedConnection && + this.state.selectedConnection.database ? ( + + ) : null + } + /> + } + /> + +