UI addons

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<Props, {}> {
           </span>
         </div>
         <div className="Header--container Header--container-hidden">
-          <div
+          <Button
             className="Header--button ion-android-refresh"
-            data-e2e="header-connection-refresh-button"
+            e2eData="header-connection-refresh-button"
             onClick={() => this.props.onRefreshClick()}
           />
-          <div
+          <Button
             className="Header--button ion-android-add"
-            data-e2e="header-create-new-connection-button"
+            e2eData="header-create-new-connection-button"
             onClick={() => this.props.history.push('/login')}
           />
         </div>

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<Props, State> {
     const { errorMessages, connectionName, databasePath } = this.state;
     return (
       <div className="Login">
-        <div className="Login--container" data-e2e="login-container">
+        <div className="Login--container" e2eData="login-container">
           <div className="row no-gutters">
             <div className="col-12 row-margin text-center">
               <h2 className="Login--header">Create Connection</h2>
               {errorMessages.map(e => (
-                <div
-                  data-e2e="login-error-message-box"
-                  className="Login--alert"
-                >
+                <div e2eData="login-error-message-box" className="Login--alert">
                   {e.message}
                 </div>
               ))}
@@ -99,7 +97,7 @@ class Login extends Component<Props, State> {
                 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<Props, State> {
               <input
                 placeholder="/Desktop/sqlite.db"
                 value={databasePath}
-                data-e2e="create-connection-database-name"
+                e2eData="create-connection-database-name"
                 onChange={e => this.setState({ databasePath: e.target.value })}
               />
             </div>
             <div className="col-2" style={buttonStyle}>
-              <button onClick={this.handleDatabasePathSelection} type="button">
+              <Button onClick={this.handleDatabasePathSelection}>
                 Choose Path
-              </button>
+              </Button>
             </div>
             <div className="col-12 row-margin Login--submit-button-container">
               <div
                 className="Login--submit-button"
                 onClick={() => this.handleConnect()}
-                data-e2e="create-connection-submit"
+                e2eData="create-connection-submit"
               >
                 Connect
               </div>

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"
     >
       <ListSymbol type="table" />
       <a>{table.name}</a>

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<TableColumnType>,
@@ -74,6 +82,7 @@ export default class HomePage extends Component<Props, State> {
     // @HACK: HARDCODE
     databaseType: 'SQLite',
     databaseVersion: '',
+    selectedTabIndex: 0,
     selectedTable: null,
     selectedConnection: null,
     tableColumns: [],
@@ -245,6 +254,10 @@ export default class HomePage extends Component<Props, State> {
     });
   };
 
+  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<Props, State> {
     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<Props, State> {
                   activeConnections={this.state.activeConnections}
                 />
               </ResizableBox>
-              <div
-                className="Grid"
-                style={{
-                  position: 'relative',
-                  width: this.state.widthGrid
-                }}
-              >
-                <Switch>
-                  <Route
-                    exact
-                    strict
-                    path="/login"
-                    render={() => (
-                      <LoginPage
-                        connectionManager={this.connectionManager}
-                        onSuccess={() => {
-                          this.setConnections();
-                          this.props.history.push('/content');
-                        }}
-                      />
-                    )}
-                  />
-                  <Route
-                    exact
-                    strict
-                    path="/content"
-                    render={() =>
-                      this.state.selectedTable ? (
-                        <ContentPage
-                          table={{
-                            name: this.state.selectedTable.name,
-                            columns: this.state.tableColumns,
-                            rows: this.state.rows
+              <div>
+                <Tabs
+                  width={this.state.widthGrid}
+                  selectedIndex={this.state.selectedTabIndex}
+                  onSelect={this.onTabSelect}
+                >
+                  <TabList
+                    clientWidth={this.state.widthGrid}
+                    minTabWidth={45}
+                    maxTabWidth={243}
+                    tabOverlapDistance={0}
+                  >
+                    <Tab title="falcon-ui" />
+                    <Tab title="compat-db" />
+                  </TabList>
+                </Tabs>
+                <div
+                  className="Grid"
+                  style={{
+                    position: 'relative',
+                    width: this.state.widthGrid
+                  }}
+                >
+                  <Switch>
+                    <Route
+                      exact
+                      strict
+                      path="/login"
+                      render={() => (
+                        <LoginPage
+                          connectionManager={this.connectionManager}
+                          onSuccess={() => {
+                            this.setConnections();
+                            this.props.history.push('/content');
                           }}
                         />
-                      ) : null
-                    }
-                  />
-                  <Route
-                    exact
-                    strict
-                    path="/structure"
-                    render={() => (
-                      <StructurePage
-                        tableColumns={this.state.tableColumns}
-                        tableDefinition={this.state.tableDefinition}
-                        setRefreshQueryFn={() =>
-                          this.setRefreshQueryFn(() =>
-                            this.onTableSelect(this.state.selectedTable)
-                          )
-                        }
-                      />
-                    )}
-                  />
-                  <Route
-                    exact
-                    strict
-                    path="/query"
-                    render={() => (
-                      <QueryPage
-                        tableColumns={this.state.tableColumns}
-                        setRefreshQueryFn={e => this.setRefreshQueryFn(e)}
-                        executeQuery={query => this.executeQuery(query)}
-                        sqlFormatter={this.sqlFormatter}
-                      />
-                    )}
-                  />
-                  <Route
-                    exact
-                    strict
-                    path="/graph"
-                    render={() =>
-                      this.core &&
-                      this.core.connection &&
-                      this.state.selectedConnection &&
-                      this.state.selectedConnection.database ? (
-                        <GraphPage
-                          databasePath={this.state.selectedConnection.database}
-                          connection={this.core.connection}
+                      )}
+                    />
+                    <Route
+                      exact
+                      strict
+                      path="/content"
+                      render={() =>
+                        this.state.selectedTable ? (
+                          <ContentPage
+                            table={{
+                              name: this.state.selectedTable.name,
+                              columns: this.state.tableColumns,
+                              rows: this.state.rows
+                            }}
+                          />
+                        ) : null
+                      }
+                    />
+                    <Route
+                      exact
+                      strict
+                      path="/structure"
+                      render={() => (
+                        <StructurePage
+                          tableColumns={this.state.tableColumns}
+                          tableDefinition={this.state.tableDefinition}
+                          setRefreshQueryFn={() =>
+                            this.setRefreshQueryFn(() =>
+                              this.onTableSelect(this.state.selectedTable)
+                            )
+                          }
+                        />
+                      )}
+                    />
+                    <Route
+                      exact
+                      strict
+                      path="/query"
+                      render={() => (
+                        <QueryPage
+                          tableColumns={this.state.tableColumns}
+                          setRefreshQueryFn={e => this.setRefreshQueryFn(e)}
+                          executeQuery={query => this.executeQuery(query)}
+                          sqlFormatter={this.sqlFormatter}
                         />
-                      ) : null
-                    }
-                  />
-                  <Route
-                    exact
-                    strict
-                    path="/logs"
-                    render={() => <LogPage logs={this.state.logs} />}
-                  />
-                </Switch>
+                      )}
+                    />
+                    <Route
+                      exact
+                      strict
+                      path="/graph"
+                      render={() =>
+                        this.core &&
+                        this.core.connection &&
+                        this.state.selectedConnection &&
+                        this.state.selectedConnection.database ? (
+                          <GraphPage
+                            databasePath={
+                              this.state.selectedConnection.database
+                            }
+                            connection={this.core.connection}
+                          />
+                        ) : null
+                      }
+                    />
+                    <Route
+                      exact
+                      strict
+                      path="/logs"
+                      render={() => <LogPage logs={this.state.logs} />}
+                    />
+                  </Switch>
+                </div>
               </div>
               <Footer
                 offset={this.state.widthSidebar}

app/containers/QueryPage.js

@@ -1,6 +1,7 @@
 // @flow
 import React, { Component } from 'react';
 import { ResizableBox } from 'react-resizable';
+import { Button } from '@falcon-client/falcon-ui';
 import Editor from '../components/Editor';
 import Content from '../components/Content';
 
@@ -125,7 +126,7 @@ export default class QueryPage extends Component<Props, State> {
             <div className="col-sm-4 QueryPage--actions-container">
               <div className="QueryPage--actions-container-child">
                 <input placeholder="My Query" />
-                <button>Save</button>
+                <Button>Save</Button>
               </div>
               <div className="QueryPage--actions-container-child">
                 <input type="checkbox" checked /> Auto Run

app/index.js

@@ -4,6 +4,7 @@ import { AppContainer } from 'react-hot-loader';
 import Root from './containers/Root';
 import { configureStore, history } from './store/configureStore';
 import './styles/app.global.scss';
+import '@falcon-client/falcon-ui/src/styles/app.global.scss';
 
 const store = configureStore();