Merge pull request #1 from oslabs-beta/seeqrv5

Merging SeeQR version 5

README.md

@@ -10,7 +10,7 @@
 [![Github stars](https://img.shields.io/github/stars/oslabs-beta/SeeQR?style=social)](https://github.com/oslabs-beta/SeeQR)
 [![Tests](https://github.com/open-source-labs/SeeQR/actions/workflows/test.yml/badge.svg)](https://github.com/open-source-labs/SeeQR/actions/workflows/test.yml)
 
-[theSeeQR.io](http://www.theseeqr.io)
+[theSeeQR.com](http://www.theseeqr.com)
 
 <p><b>SeeQR: </b>A database analytic tool to compare the efficiency of different schemas and queries on a granular level so that developers/architects can make better informed architectural decisions regarding SQL databases at various scales.</p>
 
@@ -56,7 +56,7 @@ To get started on contributing to this project:
   - The application connects to the local instance of PostgreSQL using the role 'postgres', so all databases that 'postgres' has access to are available
   - Besides using the existing databases, the application also provides various options to create new databases:
       - Importing `.sql` or `.tar` files
-      - Manually running `CREATE DATABASE` queries in SeeQR
+      - Navigating to the `Create Database` view at bottom of sidebar
       - Copying an existing database (with or without original data)
   - Users can toggle between the 'DATABASES' view and the 'QUERIES' view
 
@@ -81,7 +81,19 @@ To get started on contributing to this project:
   <div align="center">
     <img src="./assets/readmeImages/gifs/dummy_data.gif" width=800/>
   </div>
+- Create/Edit Database
 
+  - Users can create a new database from scratch by clicking the `Create New Database` button at the bottom of the sidebar
+  - Once a the database is given a name, htiting the `Initialize Database` button will create new database on the users PostgreSQL instance
+  - Users can then input SQL commands and click `Update Database` to create and drop tables in the database
+  - Users have the option to alter any existing databases as well by selecting the database on the sidebar and running any SQL commands they would like. 
+  - The `Export` button will write a .sql file on the user's desktop of the selected database
+
+
+<br>
+<div align="center">
+    <img src="./assets/readmeImages/gifs/create_db.gif" width=800/>
+  </div>
 - Queries
 
   - In the 'QUERIES' view, the main panel is where the query input text field is located, utilizing CodeMirror. The paint button in the top right corner of the panel auto-formats the inputted query
@@ -139,7 +151,7 @@ We've released SeeQR because it's a useful tool to help optimize SQL databases.
 
 ## Core Team
 
-[Casey Escovedo](https://github.com/caseyescovedo) | [Casey Walker](https://github.com/cwalker3011) | [Catherine Chiu](https://github.com/catherinechiu) | [Chris Akinrinade](https://github.com/chrisakinrinade) | [Cindy Chau](https://github.com/cindychau) | [Claudio Santos](https://github.com/Claudiohbsantos) | [Faraz Akhtar](https://github.com/faraza22) | [Frank Norton](https://github.com/FrankNorton32) | [James Kolotouros](https://github.com/dkolotouros) | [Jennifer Courtner](https://github.com/jcourtner) | [Justin Dury-Agri](https://github.com/justinD-A) | [Katie Klochan](https://github.com/kklochan) | [Mercer Stronck](https://github.com/mercerstronck) | [Muhammad Trad](https://github.com/muhammadtrad) | [Richard Lam](https://github.com/rlam108) | [Sam Frakes](https://github.com/frakes413) | [Serena Kuo](https://github.com/serenackuo)
+[Allison Le](https://github.com/allisonle1) | [Brandon Lee](https://github.com/BrandonW-Lee) | [Casey Escovedo](https://github.com/caseyescovedo) | [Casey Walker](https://github.com/cwalker3011) | [Catherine Chiu](https://github.com/catherinechiu) | [Chris Akinrinade](https://github.com/chrisakinrinade) | [Cindy Chau](https://github.com/cindychau) | [Claudio Santos](https://github.com/Claudiohbsantos) | [Faraz Akhtar](https://github.com/faraza22) | [Frank Norton](https://github.com/FrankNorton32) | [Harrison Nam](https://github.com/harrynam07) | [James Kolotouros](https://github.com/dkolotouros) | [Jennifer Courtner](https://github.com/jcourtner) | [Justin Dury-Agri](https://github.com/justinD-A) | [Katie Klochan](https://github.com/kklochan) | [Mercer Stronck](https://github.com/mercerstronck) | [Muhammad Trad](https://github.com/muhammadtrad) | [Richard Guo](https://github.com/richardguoo) | [Richard Lam](https://github.com/rlam108) | [Sam Frakes](https://github.com/frakes413) | [Serena Kuo](https://github.com/serenackuo) | [Timothy Sin](https://github.com/timothysin)
 
 
 ## License

frontend/components/App.tsx

@@ -18,6 +18,7 @@ import QueryView from './views/QueryView/QueryView';
 import DbView from './views/DbView/DbView';
 import CompareView from './views/CompareView/CompareView';
 import QuickStartView from './views/QuickStartView';
+import NewSchemaView from './views/NewSchemaView/NewSchemaView';
 import FeedbackModal from './modal/FeedbackModal';
 import Spinner from './modal/Spinner';
 
@@ -84,6 +85,9 @@ const App = () => {
       }
       shownView = 'queryView';
       break;
+    case 'newSchemaView': 
+      shownView = 'newSchemaView';
+      break;
     case 'quickStartView':
     default:
       shownView = 'quickStartView';
@@ -128,6 +132,14 @@ const App = () => {
               show={shownView === 'queryView'}
             />
             <QuickStartView show={shownView === 'quickStartView'} />
+            <NewSchemaView 
+              query={workingQuery}
+              setQuery={setWorkingQuery}
+              selectedDb={selectedDb}
+              setSelectedDb={setSelectedDb}
+              createNewQuery={createNewQuery}
+              show={shownView === 'newSchemaView'} 
+            />
           </Main>
           <FeedbackModal />
         </AppContainer>

frontend/components/sidebar/BottomButtons.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ButtonGroup, Button } from '@material-ui/core/';
+import styled from 'styled-components';
+import { ipcRenderer } from 'electron';
+import { AppState } from '../../types';
+import { selectedColor, textColor, defaultMargin } from '../../style-variables';
+import { sendFeedback } from '../../lib/utils';
+
+const ViewBtnGroup = styled(ButtonGroup)`
+  margin: ${defaultMargin} 5px;
+  position: fixed;
+  bottom: 0px;
+  width: 300px;
+`;
+
+interface ViewButtonProps {
+  $isSelected: boolean;
+}
+
+const ViewButton = styled(Button)`
+  background: ${({ $isSelected }: ViewButtonProps) =>
+    $isSelected ? selectedColor : textColor};
+
+`;
+
+
+type ViewSelectorProps = Pick<AppState, 'selectedView' | 'setSelectedView' | 'setSelectedDb' | 'selectedDb'>;
+
+/**
+ * Selector for view on sidebar. Updates App state with selected view
+ */
+const BottomButtons = ({ selectedView, setSelectedView, setSelectedDb, selectedDb}: ViewSelectorProps) => (
+  <ViewBtnGroup variant="contained" fullWidth>
+    <ViewButton
+      onClick={() => {
+        setSelectedView('newSchemaView');
+        setSelectedDb('');
+
+        ipcRenderer
+          .invoke('select-db', '')
+          .catch(() => 
+            sendFeedback({
+              type: 'error',
+              message: `Database connection error`
+            })
+          )
+      }}
+      $isSelected={
+        selectedView === 'newSchemaView' || selectedView === 'compareView'
+      }
+    >
+      Create New Database
+    </ViewButton>
+  </ViewBtnGroup>
+);
+export default BottomButtons;

frontend/components/sidebar/DbList.tsx

@@ -68,7 +68,7 @@ const DbList = ({
   };
 
   const selectHandler = (dbName: string) => {
-    setSelectedView('dbView');
+    // setSelectedView('dbView');
     if (dbName === selectedDb) return;
     ipcRenderer
       .invoke('select-db', dbName)
@@ -109,7 +109,7 @@ const DbList = ({
             databases={databases}
           />
         ) : null}
-      </StyledSidebarList>
+      </StyledSidebarList> 
       <AddNewDbModal
         open={openAdd}
         onClose={handleCloseAdd}

frontend/components/sidebar/Sidebar.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Drawer, IconButton, Tooltip } from '@material-ui/core/';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 import styled from 'styled-components';
-import { AppState } from '../../types';
+import { AppState, TableInfo } from '../../types';
 import TopButtons from './TopButtons';
 import QueryList from './QueryList';
 import DbList from './DbList';
 import ViewSelector from './ViewSelector';
 import logo from '../../../assets/logo/seeqr_dock.png';
+import BottomButtons from './BottomButtons';
 
 import {
   greyDarkest,
@@ -38,6 +39,7 @@ const Logo = styled.img`
   height: 100px;
 `;
 
+
 const ShowSidebarBtn = styled(IconButton)`
   width: ${sidebarShowButtonSize};
   height: ${sidebarShowButtonSize};
@@ -60,6 +62,7 @@ const Sidebar = ({
   setSidebarHidden,
   sidebarIsHidden,
 }: AppState) => {
+
   const toggleOpen = () => setSidebarHidden(!sidebarIsHidden);
   /**
    * Show empty query view for user to create new query.
@@ -87,7 +90,7 @@ const Sidebar = ({
         <DbList
           selectedDb={selectedDb}
           setSelectedDb={setSelectedDb}
-          show={selectedView === 'dbView' || selectedView === 'quickStartView'}
+          show={selectedView === 'dbView' || selectedView === 'quickStartView' || selectedView === 'newSchemaView'}
           setSelectedView={setSelectedView}
         />
         <QueryList
@@ -100,7 +103,13 @@ const Sidebar = ({
           setWorkingQuery={setWorkingQuery}
           show={selectedView === 'queryView' || selectedView === 'compareView'}
         />
-        <Logo src={logo} alt="Logo" />
+        <BottomButtons
+          selectedDb={selectedDb}
+          selectedView={selectedView}
+          setSelectedView={setSelectedView}
+          setSelectedDb={setSelectedDb}
+        />
+        {/* <Logo src={logo} alt="Logo" /> */}
       </StyledDrawer>
     </>
   );

frontend/components/views/DbView/DbView.tsx

@@ -61,6 +61,7 @@ const DbView = ({ selectedDb, show }: DbViewProps) => {
       <DatabaseDetails db={db} />
       <br />
       <TablesTabs
+        // setTables={setTables}
         tables={dbTables}
         selectTable={(table: TableInfo) => setSelectedTable(table)}
         selectedTable={selectedTable}

frontend/components/views/DbView/TablesTabBar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect }from 'react';
 import { Tabs, Tab } from '@material-ui/core';
 import styled from 'styled-components';
 import TableDetails from './TableDetails';
@@ -33,7 +33,8 @@ const a11yProps = (index: any) => ({
   'aria-controls': `scrollable-auto-tabpanel-${index}`,
 });
 
-interface TablesTabBarProps {
+interface TablesTabBarProps { 
+
   tables: TableInfo[];
   selectTable: (table: TableInfo) => void;
   selectedTable: TableInfo | undefined;
@@ -44,6 +45,10 @@ const TablesTabs = ({
   selectTable,
   selectedTable,
 }: TablesTabBarProps) => {
+
+
+
+
   const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
     selectTable(tables[newValue]);
   };