dbSpy 8.0 to OSLabs

.ebextensions/certs.config

@@ -0,0 +1,11 @@
+commands:
+  01_create_certs_dir:
+    command: "mkdir -p /usr/src/app/server/certs"
+
+  02_download_ca:
+    command: "aws s3 cp s3://dbspy-secure-certs/ca.pem /usr/src/app/server/certs/ca.pem"
+
+files:
+  "/etc/profile.d/awscli.sh":
+    content: |
+      export PATH=$PATH:/usr/local/bin

.ebextensions/react-router.config

@@ -0,0 +1,9 @@
+files:
+  "/etc/nginx/conf.d/react-router.conf":
+    mode: "000644"
+    owner: root
+    group: root
+    content: |
+      location / {
+        try_files $uri $uri/ /index.html;
+      }

.gitignore

@@ -8,4 +8,6 @@ temp/
 .cert/
 ca.crt/
 ca.key/
-coverage/
+coverage/
+certs/
+.DS_Store

README.md

@@ -1,7 +1,7 @@
 <div align="center">
 
 <a href="https://makeapullrequest.com">![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)</a>
-<a href="https://img.shields.io/badge/version-1.0.1-blue">![Version](https://img.shields.io/badge/version-6.0.0-blue)</a>
+<a href="https://img.shields.io/badge/version-1.0.1-blue">![Version](https://img.shields.io/badge/version-8.0.0-blue)</a>
 ![GitHub Stars](https://img.shields.io/github/stars/oslabs-beta/JAKT?color=%23fb7182)
 ![MIT License](https://img.shields.io/badge/license-MIT-yellow)
 
@@ -16,30 +16,81 @@
 <h1 align="center">Visualize, modify, and build your database with dbSpy!</h1>
 <p align="center">An open-source data modeling tool to facilitate relational database development</p>
 
-### New Features with Version 7.0
+<p align="center">
+  <img src="https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=black" />
+  <img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white" />
+  <img src="https://img.shields.io/badge/Express.js-000000?style=flat-square&logo=express&logoColor=white" />
+  <img src="https://img.shields.io/badge/React--Router-EA4335?style=flat-square&logo=reactrouter&logoColor=white" />
+  <img src="https://img.shields.io/badge/React--Flow-00BFFF?style=flat-square&logo=react&logoColor=white" />
+  <img src="https://img.shields.io/badge/Vite-BB99FF?style=flat-square&logo=vite&logoColor=white" />
+  <img src="https://img.shields.io/badge/TailwindCSS-38B2AC?style=flat-square&logo=tailwindcss&logoColor=white" />
+  <img src="https://img.shields.io/badge/Zustand-FACC15?style=flat-square&logo=react&logoColor=black" />
+  <img src="https://img.shields.io/badge/MySQL-00758F?style=flat-square&logo=mysql&logoColor=white" />
+  <img src="https://img.shields.io/badge/PostgreSQL-336791?style=flat-square&logo=postgresql&logoColor=white" />
+  <img src="https://img.shields.io/badge/Axios-5A29E4?style=flat-square&logo=axios&logoColor=white" />
+  <img src="https://img.shields.io/badge/TypeORM-FF5277?style=flat-square&logo=typescript&logoColor=white" />
+  <img src="https://img.shields.io/badge/OAuth2-3B82F6?style=flat-square&logo=oauth&logoColor=white" />
+  <img src="https://img.shields.io/badge/Jest-C21325?style=flat-square&logo=jest&logoColor=white" />
+  <img src="https://img.shields.io/badge/React--Testing--Library-E33332?style=flat-square&logo=testing-library&logoColor=white" />
+  <img src="https://img.shields.io/badge/Docker-2496ED?style=flat-square&logo=docker&logoColor=white" />
+  <img src="https://img.shields.io/badge/AWS-FF9900?style=flat-square&logo=amazonaws&logoColor=black" />
+</p>
+
+### 🚀 dbSpy v8.0 ✨ New Features
+
+### 🔍 Test New Query Page - a modern querying interface
+
+- Run SQL queries against PostgreSQL or MySQL DBs
+- Live results + metadata: execution time, query name, timestamp
+- Zustand-powered state management
+- Input validation and error handling
+- Component-level Jest + ReactTestLibrary tests
+
+### 💾 View Saved Queries Page
+
+- Access previously saved queries per user
+- Sortable, styled tables with TypeScript typing
+- Track query performance across data models
+
+### 🎨 UI / UX Enhancements
+
+- TailwindCSS redesign: colors, layout, interactions
+- Responsive and fully supported dark/light mode
+- Logo animation integrated in navbar
+- Sidebar and tab layout fixes
+
+### 🛠 Functional Fixes
+
+- Resolved layout shift bugs
+- Optimized backend response handling
+- OAuth (GitHub + local login)
+
+### 📈 Opportunities for Continued Development
+
+- Extend Test Query feature to additional DB types (e.g. Oracle)
+- Persist database sessions across routes
+- Integrate LLMs to suggest efficient queries and schema improvements
+- Add OAuth support for Microsoft accounts
+- Add support for NoSQL (MongoDB) and graph databases
+- Expand UI testing coverage
 
--UI is now full widescreen with a drop down menu to allow for more workspace.
--The Save, Load, and Delete features now take filename, and can save schema, and data.
--Deleting certain elements in tables now locates, and also properly delete depedent elements on other tables
--Implemented an algorithm to highlight all edges connected to currently selected table
--Fixed several Issues where certain Elements would not be deleted from a connected database
--Fixed several Issues with show Data terminating react flow
--Fixed several Issues with Edges being rendered too many times, and not deleted
+---
 
-### Use Cases
+### dbSpy v7.0 updates
 
-- Connecting to an existing remote PostgreSQL, MySQL, MicroSoftSQL, OracleSQL databases
-  - Renders an ER diagram for SCHEMA and DATA of the existing database and provides an interface for users to both modify existing tables and create new tables. A log of changes is stored, and at any point, the user can generate a query containing the changes, such that they are reflected in the existing database.
-- Uploading your database's SQL file
-  - Renders an ER diagram for the provided SQL file (db dump) and provides an interface for a user to both modify existing tables and create new tables. Changes are converted into the corresponding queries, which the user can view and execute on their own database outside of dbSpy.
-- Seamlessly visualize relational databases (both SCHEMA and DATA)
-  - After connecting database tables with one another, users are able to render the relationship connections of individual tables by clicking on the tables.
-- Creating a database + ER diagram from scratch
-  - Provides a canvas for users to create a database by using ER diagrams, thus creating a blueprint for engineering database structures.
+- Full widescreen UI with a dropdown menu for more workspace
+- Enhanced Save, Load, and Delete features that support filenames for saving schema and data
+- Proper deletion of dependent elements across tables
+- Algorithm to highlight edges connected to the selected table
+- Fixed rendering and deletion issues with elements
+- Support for connecting to remote databases (PostgreSQL, MySQL, Microsoft SQL, Oracle SQL)
+- Ability to upload SQL files and render ER diagrams for the provided SQL dump
+- Interface for modifying tables and creating new ones, with changes reflected in the database via generated queries
+- Canvas to create databases and ER diagrams from scratch.
 
 ---
 
-### Key Features
+### 🔑 Key Features
 
 1. **Database Uploads:** Connect to remote SQL database or upload local SQL files
 
@@ -63,9 +114,15 @@
 
 11. **Dark Mode:** Visual settings to provide a more comfortable viewing experience in low-light environements
 
-## <img src="images/dbSpy7_canvas.png">
+12. **Live Querying and Save Queries** Test SQL queries and also save them to track and analyze query performance across data models (<span style="color:green"><strong>dbSpy V8.0</strong></span>)
+
+## <img src="images/dbspy8homepage.png">
+
+## <img src="images/dpspy8testquery.png">
+
+## <img src="images/dpspy8savequery.png">
 
-### Getting started
+### 🛠 Getting started
 
 You will need your own MySQL database for backend functions.
 
@@ -129,7 +186,7 @@ $ npm run dev
 
 To connect with the SQL database, we must create and configure SSL certificates.
 
-### Mac
+### macOS
 
 1. Install mkcert; you can learn more about mkcert [here](https://github.com/FiloSottile/mkcert)
 
@@ -140,7 +197,7 @@ npm install -g mkcert
 2. Run the following script
 
 ```bash
-npm run cert
+npm run cert:mac
 ```
 
 ### Linux
@@ -205,7 +262,7 @@ npm run cert:linux
 2. Click on the confirm icon to delete the column.
 3. Click on the cancel icon to cancel the deletion.
 
-## <img src="images/dbspy7.gif">
+## <img src="images/dbspyv8.gif">
 
 ### Adding a foreign key reference to a column
 
@@ -248,6 +305,11 @@ npm run cert:linux
 
 ### Credits/Contributors
 
+- Yihe Liu • [LinkedIn](https://www.linkedin.com/in/yiheliu) • [Github](https://github.com/SparrowGecko)
+- Emma Vargas • [LinkedIn](https://www.linkedin.com/in/emmavargas/) • [Github](https://github.com/emma-vargas)
+- Vicky Yue • [LinkedIn](https://www.linkedin.com/in/vickyue/) • [Github](https://github.com/vyue013)
+- Roshumba Llewellyn • [LinkedIn](https://www.linkedin.com/in/roshumballewellyn/) • [Github](https://github.com/roshumba)
+- Revathy Venkataraman • [LinkedIn](https://www.linkedin.com/in/revavenk/) • [Github](https://github.com/reva2024)
 - David Jones • [LinkedIn](http://www.linkedin.com/in/davidjonesswe/) • [Github](https://github.com/david-jones-git)
 - John Ruiz • [LinkedIn](https://www.linkedin.com/in/john-ruiz-profile/) • [Github](https://github.com/johnruiz17)
 - Minh Chang • [LinkedIn](https://www.linkedin.com/in/minh-chang/) • [Github](https://github.com/miha-cha)

index.html

@@ -27,12 +27,9 @@
   </head>
   <body
     id="body"
-    class="dark bg-[#fffefd] transition-colors duration-500 dark:bg-gray-900"
+    class="bg-background text-black transition-colors duration-500 dark:bg-primary dark:text-white"
   >
-    <div
-      id="root"
-      class="bg-inherit transition-colors duration-500 dark:bg-gray-900"
-    ></div>
+    <div id="root"></div>
     <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>

jest.config.ts

@@ -23,7 +23,7 @@ export default {
   // collectCoverageFrom: undefined,
 
   // The directory where Jest should output its coverage files
-  coverageDirectory: "coverage",
+  coverageDirectory: 'coverage',
 
   // An array of regexp pattern strings used to skip coverage collection
   // coveragePathIgnorePatterns: [
@@ -89,8 +89,9 @@ export default {
 
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocks/fileMock.js",
-    "\\.(css|less)$": "<rootDir>/mocks/fileMock.js"
+    '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/mocks/fileMock.js',
+    '\\.(css|less)$': '<rootDir>/mocks/fileMock.js',
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
@@ -138,7 +139,8 @@ export default {
   // setupFiles: [],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  // setupFilesAfterEnv: [],
+  //
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
 
   // The number of seconds after which a test is considered as slow and reported as such in the results.
   // slowTestThreshold: 5,
@@ -147,7 +149,7 @@ export default {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  testEnvironment: "jsdom",
+  testEnvironment: 'jsdom',
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},