Merge pull request #5 from oslabs-beta/feature/newSbBtn

Added sidebar button and new tab for login
open-source-labs · Jun 23, 2023 · 8facbe0 · 8facbe0
2 parents 447b11d + 98ef167
commit 8facbe0
Show file tree

Hide file tree

Showing 53 changed files with 4,436 additions and 3,795 deletions.
diff --git a/backend/BE_types.ts b/backend/BE_types.ts
@@ -49,6 +49,7 @@ export enum DBType {
   MySQL = 'mysql',
   RDSPostgres = 'rds-pg',
   RDSMySQL = 'rds-mysql',
+  CloudDB = 'cloud-database', //added for cloud dbs
   SQLite = 'sqlite',
   directPGURI = 'directPGURI',
 }
@@ -67,8 +68,8 @@ export interface DocConfigFile {
   pg: { user: string; password: string; port: number };
   rds_mysql: { user: string; password: string; port: number; host: string };
   rds_pg: { user: string; password: string; port: number; host: string };
-  sqlite: { path: string },
-  directPGURI: { uri: string }
+  sqlite: { path: '' };
+  directPGURI: { uri: '' };
 }
 
 type dbsInputted = {

diff --git a/backend/channels.ts b/backend/channels.ts
@@ -9,7 +9,7 @@ import generateDummyData from './DummyD/dummyDataMain';
 import { ColumnObj, DBList, DummyRecords, DBType, LogType } from './BE_types';
 import backendObjToQuery from './ertable-functions';
 import logger from './Logging/masterlog';
-import { Integer } from 'type-fest';
+// import { Integer } from 'type-fest';
 
 const db = require('./models');
 const docConfig = require('./_documentsConfig');

diff --git a/backend/main.ts b/backend/main.ts
@@ -1,7 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { BrowserWindow, Menu } from 'electron';
-
-const { app, session } = require('electron');
+import { BrowserWindow, Menu, app, session } from 'electron'; // added session here
 
 const dev: boolean = process.env.NODE_ENV === 'development';
 const os = require('os');
@@ -21,10 +19,12 @@ let mainWindow: BrowserWindow | null;
 // download react devtools and save them on desktop in folder named ReactDevTools
 // devtools: https://github.com/facebook/react/issues/25843
 // https://github.com/mondaychen/react/raw/017f120369d80a21c0e122106bd7ca1faa48b8ee/packages/react-devtools-extensions/ReactDevTools.zip 
-// const reactDevToolsPath = path.join(os.homedir(), '/Desktop/ReactDevTools');
-// app.whenReady().then(async () => {
-//   await session.defaultSession.loadExtension(reactDevToolsPath);
-// });
+// ******************** Comment out when done ******************** //
+const reactDevToolsPath = path.join(os.homedir(), '/Desktop/ReactDevTools');
+app.whenReady().then(async () => {
+  await session.defaultSession.loadExtension(reactDevToolsPath);
+});
+// ******************** Comment out when done ******************** //
 
 
 // Add an event listener for uncaught exceptions

diff --git a/frontend/components/App.tsx b/frontend/components/App.tsx
@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react';
+// import '../lib/style.css'
 import styled from 'styled-components';
-import { MuiThemeProvider } from '@material-ui/core/';
-import { StylesProvider } from '@material-ui/core/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
+import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/';
+// import '@mui/material/styles/defaultTheme';
+import CssBaseline from '@mui/material/CssBaseline';
+import { IpcRendererEvent, ipcRenderer } from 'electron';
 import {
   MuiTheme,
   bgColor,
@@ -30,10 +32,17 @@ import QuickStartView from './views/QuickStartView';
 import NewSchemaView from './views/NewSchemaView/NewSchemaView';
 import FeedbackModal from './modal/FeedbackModal';
 import Spinner from './modal/Spinner';
-import { once } from './../lib/utils';
-import { IpcRendererEvent, ipcRenderer } from 'electron';
+import { once } from '../lib/utils';
 import CreateDBDialog from './Dialog/CreateDBDialog';
 import ConfigView from './Dialog/ConfigView';
+import NewChart from './views/NewChart';
+
+
+declare module '@mui/material/styles/' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}
+
 
 ///////eric//////Increase the maximum number of listeners to 20///////////////
 const EventEmitter = require('events');
@@ -95,7 +104,7 @@ const App = () => {
         setPGStatus(dbLists.databaseConnected[0]);
         setMYSQLStatus(dbLists.databaseConnected[1]);
 
-        setSelectedTable(selectedTable ? selectedTable : dbTables[0]);
+        setSelectedTable(selectedTable || dbTables[0]);
       }
     };
     ipcRenderer.on('db-lists', dbListFromBackend); // dummy data error here?
@@ -146,15 +155,19 @@ const App = () => {
     case 'newSchemaView':
       shownView = 'newSchemaView';
       break;
+    case 'newChart':                // added for new chart
+      shownView = 'newChart';
+      break;
     case 'quickStartView':
     default:
       shownView = 'quickStartView';
   }
 
   return (
     // Styled Components must be injected last in order to override Material UI style: https://material-ui.com/guides/interoperability/#controlling-priority-3
-    <StylesProvider injectFirst>
-      <MuiThemeProvider theme={MuiTheme}>
+    // <StylesProvider injectFirst>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={MuiTheme}>
         <Spinner />
         <AppContainer>
           <CssBaseline />
@@ -225,6 +238,8 @@ const App = () => {
             />
             <QuickStartView show={shownView === 'quickStartView'} />
 
+            <NewChart show={shownView === 'newChart'} />
+
             <NewSchemaView
               query={workingQuery}
               setQuery={setWorkingQuery}
@@ -254,8 +269,9 @@ const App = () => {
           </Main>
           <FeedbackModal />
         </AppContainer>
-      </MuiThemeProvider>
-    </StylesProvider>
+      </ThemeProvider>
+    </StyledEngineProvider>
+    // </StylesProvider>
   );
 };
 

diff --git a/frontend/components/Dialog/ConfigView.tsx b/frontend/components/Dialog/ConfigView.tsx
@@ -15,7 +15,7 @@ import {
   StyledButton,
   StyledTextField,
 } from '../../style-variables';
-import '../../lib/style.scss';
+import '../../lib/style.css';
 
 /*
 junaid
@@ -46,6 +46,7 @@ function TabPanel(props: TabPanelProps) {
       <Box sx={{
         display:'flex',
         flexDirection: 'column',
+        gap: '.25rem',
         alignItems: 'center',
         pt: 2
       }}
@@ -70,6 +71,7 @@ const BasicTabs = ({ onClose }: BasicTabsProps) => {
   const [pg, setpg] = useState({});
   const [rds_mysql, setrds_mysql] = useState({});
   const [rds_pg, setrds_pg] = useState({});
+  const [sqlite, setSqlite] = useState({}); // added sqlite
   // Toggle TabPanel display
   const [value, setValue] = useState(0);
   // Toggle show password in input fields
@@ -78,13 +80,15 @@ const BasicTabs = ({ onClose }: BasicTabsProps) => {
     mysql: false,
     rds_mysql: false,
     rds_pg: false,
+    sqlite: false,
   });
   // Storing input StyledTextFields to render in state
   const [inputFieldsToRender, setInputFieldsToRender] = useState({
     pg: [],
     mysql: [],
     rds_mysql: [],
     rds_pg: [],
+    sqlite: [], // added sqlite
   });
   // Function to make StyledTextFields and store them in inputFieldsToRender state
   function inputFieldMaker(dbTypeFromState, setDbTypeFromState, dbString) {
@@ -110,6 +114,7 @@ const BasicTabs = ({ onClose }: BasicTabsProps) => {
                       [dbString]: !showpass[dbString],
                     })
                   }
+                  size="large"
                 >
                   {showpass[dbString] ? <Visibility /> : <VisibilityOff />}
                 </IconButton>
@@ -157,6 +162,7 @@ const BasicTabs = ({ onClose }: BasicTabsProps) => {
       setpg({ ...config.pg });
       setrds_mysql({ ...config.rds_mysql });
       setrds_pg({ ...config.rds_pg });
+      setSqlite({ ...config.sqlite }); // added sqlite
     };
     ipcRenderer.on('get-config', configFromBackend);
     ipcRenderer.invoke('get-config');
@@ -180,6 +186,9 @@ const BasicTabs = ({ onClose }: BasicTabsProps) => {
   useEffect(() => {
     inputFieldMaker(rds_mysql, setrds_mysql, 'rds_mysql');
   }, [rds_mysql, showpass.rds_mysql]);
+  useEffect(() => {
+    inputFieldMaker(sqlite, setSqlite, 'sqlite'); // added sqlite
+  }, [sqlite]);
 
   const handleClose = () => {
     onClose();
@@ -193,6 +202,7 @@ const BasicTabs = ({ onClose }: BasicTabsProps) => {
         pg: { ...pg },
         rds_mysql: { ...rds_mysql },
         rds_pg: { ...rds_pg },
+        sqlite: { ...sqlite }, // added sqlite
       })
       .then(() => {
         handleClose();
@@ -207,7 +217,7 @@ const BasicTabs = ({ onClose }: BasicTabsProps) => {
   // Function to handle onChange -- when tab panels change
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     // On panel change reset all passwords to hidden
-    setShowpass({ mysql: false, pg: false, rds_mysql: false, rds_pg: false });
+    setShowpass({ mysql: false, pg: false, rds_mysql: false, rds_pg: false, sqlite: false });
     // Change which tab panel is hidden/shown
     setValue(newValue);
   };
@@ -225,6 +235,8 @@ const BasicTabs = ({ onClose }: BasicTabsProps) => {
           <Tab label="Postgres" {...a11yProps(1)} />
           <Tab label="RDS MySql" wrapped {...a11yProps(2)} />
           <Tab label="RDS Postgres" wrapped {...a11yProps(3)} />
+          {/* added sqlite */}
+          <Tab label="Sqlite" wrapped {...a11yProps(4)} />
         </Tabs>
       </Box>
       <TabPanel value={value} index={0}>
@@ -239,6 +251,10 @@ const BasicTabs = ({ onClose }: BasicTabsProps) => {
       <TabPanel value={value} index={3}>
         {inputFieldsToRender.rds_pg}
       </TabPanel>
+      {/* added sqlite */}
+      <TabPanel value={value} index={4}>
+        {inputFieldsToRender.sqlite}
+      </TabPanel>
 
       <ButtonContainer>
         <StyledButton variant="contained" color="secondary" onClick={handleClose}>

diff --git a/frontend/components/Dialog/CreateDBDialog.tsx b/frontend/components/Dialog/CreateDBDialog.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { DatabaseInfo } from '../../types';
-import { DBType } from '../../../backend/BE_types';
-import { ipcRenderer } from 'electron';
-import styled from 'styled-components';
 import {
   DialogTitle,
-} from '@material-ui/core/';
+} from '@mui/material/';
 import { Dialog, Tooltip } from '@mui/material';
+import { ipcRenderer } from 'electron';
+import styled from 'styled-components';
+import { DatabaseInfo } from '../../types';
+import { DBType } from '../../../backend/BE_types';
 import { sendFeedback } from '../../lib/utils';
 import {
   ButtonContainer,
@@ -82,7 +82,7 @@ const CreateDBDialog = function ({ show, DBInfo, onClose }) {
       .invoke(
         'initialize-db',
         {
-          newDbName: newDbName,
+          newDbName,
         },
         dbt
       )
@@ -152,13 +152,19 @@ const CreateDBDialog = function ({ show, DBInfo, onClose }) {
             <StyledNativeOption value={DBType.Postgres}>
               Postgres
             </StyledNativeOption>
-            <StyledNativeOption value={DBType.MySQL}>MySQL</StyledNativeOption>
+            <StyledNativeOption value={DBType.MySQL}>
+              MySQL
+            </StyledNativeOption>
             <StyledNativeOption value={DBType.RDSPostgres}>
               RDS Postgres
             </StyledNativeOption>
             <StyledNativeOption value={DBType.RDSMySQL}>
               RDS MySQL
             </StyledNativeOption>
+            {/* Added this cloud db to create db dropdowns */}
+            <StyledNativeOption value={DBType.CloudDB}>
+              Cloud Database
+            </StyledNativeOption>
           </StyledNativeDropdown>
         </DropdownContainer>
 

diff --git a/frontend/components/modal/AddNewDbModalCorrect.tsx b/frontend/components/modal/AddNewDbModalCorrect.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { Dialog, DialogTitle, Tooltip } from '@material-ui/core/';
-import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import { Dialog, DialogTitle, Tooltip } from '@mui/material/';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import { ipcRenderer, remote } from 'electron';
 import { sendFeedback } from '../../lib/utils';
 import {

diff --git a/frontend/components/modal/DummyDataModal.tsx b/frontend/components/modal/DummyDataModal.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Dialog } from '@material-ui/core/';
+import { Dialog } from '@mui/material/';
 import { ipcRenderer } from 'electron';
 import {
   ButtonContainer,