Merge pull request #351 from oslabs-beta/master

feat: Swell v1.18
open-source-labs · Apr 18, 2024 · f1d1f71 · f1d1f71
2 parents 5275074 + 19fa5f1
commit f1d1f71
Show file tree

Hide file tree

Showing 119 changed files with 2,665 additions and 1,568 deletions.
diff --git a/README.md b/README.md
@@ -27,6 +27,10 @@ Swell is a one-stop shop for sending and monitoring your API requests:
 - Import and export workspaces locally
 - Compose test suites in JavaScript with Chai-style TDD/BDD assertion syntax
 
+## Considering iterating Swell in the future?
+
+We highly encourage you to check out the `DEV-README.md` in the `docs` folder. We've included a comprehensive guide on the latest updates, which areas would benefit from future iterations, as well as details of core components.
+
 ## Core features
 
 - _HTTP2_: Swell supports full HTTP2 multiplexing of requests and responses. HTTP requests to the same host will be sent over the same connection. Swell will attempt to initiate an HTTP2 connection for all HTTPS requests by default, with the ability to revert to HTTP1.1 for legacy servers. Multiple concurrent streams are allowed for each connection.
@@ -83,6 +87,10 @@ Swell is a one-stop shop for sending and monitoring your API requests:
 
 - _Collection Runner_: You can also stage requests in the workspace and automate the process of sending off each one. No need to manually press send on each one; instead each request will fire off in the order of staging.
 
+- _File Upload/Dark Mode_: If you click on the body drop down menu, you can select binary, which allows you to upload a file that can be sent along with any request to test backend file upload routes. Additionally, you can toggle dark mode via the button in the top right-hand corner.
+
+  <img src="./ReadMeGifs/Gifs/FileUploadAndDarkMode.gif"
+       style="display: block; margin: 10px auto 30px; border: 1px solid black;" />
 ## Experimental Features
 
 - _Mock Server_: Swell allows you to create your own HTTP/2 mock server to facilitate front-end development without depending on a fully built backend server.
@@ -115,11 +123,12 @@ Swell is a one-stop shop for sending and monitoring your API requests:
 - Mocha
 - Playwright
 
-## Considering iterating Swell in the future?
-
-Feel free to check out the `DEV-README.md` in the `docs` folder.
-
 ## Authors
+- **Karol Krzywon** - [kkrzywon](https://github.com/kkrzywon)
+- **Howard Sun** - [howardCodeGit](https://github.com/howardCodeGit)
+- **Carter Sarkela** - [CarterSarkela](https://github.com/CarterSarkela)
+- **Adeeb Bayat** - [adeebbayat](https://github.com/adeebbayat)
+- **Michael Underbrink** - [MUnderbrink90](https://github.com/MUnderbrink90)
 - **Aaron Cruz** - [AArCruz](https://github.com/AArCruz)
 - **Katya Villano** - [k-villano](https://github.com/k-villano)
 - **Brooke Sauro** - [bhsauro](https://github.com/bhsauro)

diff --git a/ReadMeGifs/Gifs/FileUploadAndDarkMode.gif b/ReadMeGifs/Gifs/FileUploadAndDarkMode.gif
diff --git a/docs/DEV-README.md b/docs/DEV-README.md
diff --git a/docs/vcxsrv_alt_disable_access_control.png b/docs/vcxsrv_alt_disable_access_control.png
diff --git a/docs/vcxsrv_client_startup.png b/docs/vcxsrv_client_startup.png
diff --git a/docs/vcxsrv_disable_access_control.png b/docs/vcxsrv_disable_access_control.png
diff --git a/docs/vcxsrv_display_settings.png b/docs/vcxsrv_display_settings.png
diff --git a/index-csp.html b/index-csp.html
@@ -1,10 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Swell</title>
-  </head>
-
-  <body></body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
+</head>
+
+<body>
+  <div id="root"></div>
+
+</body>
+
+</html>
diff --git a/jest.config.js b/jest.config.js
@@ -6,7 +6,7 @@ module.exports = {
     // "collectCoverage": true,
     electron: '<rootDir>/__mocks__/electronMock.js',
     '\\.(css|less|sass|scss)$': '<rootDir>/__mocks__/styleMocks.js',
-    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/__mocks__/fileMock.js',
+    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
     '^dexie$': '<rootDir>/node_modules/dexie'
   },
   testPathIgnorePatterns: [

diff --git a/main.js b/main.js
@@ -31,7 +31,14 @@
 // app - Control your application's event lifecycle
 // ipcMain - Communicate asynchronously from the main process to renderer processes
 // ** Entry point for Electron **
-const { app, BrowserWindow, ipcMain, dialog, shell, session } = require('electron');
+const {
+  app,
+  BrowserWindow,
+  ipcMain,
+  dialog,
+  shell,
+  session,
+} = require('electron');
 const os = require('node:os');
 
 const { autoUpdater } = require('electron-updater');
@@ -70,10 +77,8 @@ require('./main_process/main_trpcController.js')();
 // require mac touchbar
 const { touchBar } = require('./main_process/main_touchbar.js');
 
-
-
-const contextMenu = require('electron-context-menu')
-contextMenu()
+const contextMenu = require('electron-context-menu');
+contextMenu();
 
 // configure logging
 // autoUpdater.logger = log;
@@ -155,12 +160,12 @@ function createWindow() {
 
     // dev mode title
     mainWindow.setTitle('Swell (devMode)');
-
-    // if we are in developer mode Add React & Redux DevTools to Electron App
 
+    // if we are in developer mode Add React & Redux DevTools to Electron App
 
     // this manually installs the depricated dev tools that are compatible with electron
-    session.defaultSession.loadExtension(reactDevToolsPath)
+    session.defaultSession
+      .loadExtension(reactDevToolsPath)
       .then((name) => console.log(`Added Extension:  ${name}`))
       .catch((err) => console.log('An error occurred: ', err));
     // ****** if current react dev tools version did work with electron we would use the below commented code ****
@@ -229,7 +234,7 @@ app.on('ready', () => {
      * should not be removed. The servers must be required upon app startup (especially in
      * packaged versions) or else the packaged app would not recognize the servers at all.
      */
-    const express = require('./src/server/server');
+    const express = require('./src/server/server.js');
     const mockServer = require('./src/server/mockServer.js');
     autoUpdater.checkForUpdates();
   }
@@ -519,7 +524,7 @@ const { fork } = require('child_process');
 
 // starts the mock server by forking a Node child process
 ipcMain.on('start-mock-server', () => {
-  mockServerProcess = fork('node', ['./src/server/mockServer.js']);
+  mockServerProcess = fork('./src/server/mockServer.js');
   mockServerProcess.on('error', (err) => {
     console.log('Error starting mock server', err);
   });

diff --git a/main_process/SSEController.js b/main_process/SSEController.js
@@ -53,10 +53,6 @@ SSEController.readStream = (reqResObj, event, timeDiff) => {
   const sse = new EventSource(reqResObj.url);
   SSEController.sseOpenConnections[reqResObj.id] = sse;
 
-  sse.onopen = () => {
-    // console.log(`SSE at ${reqResObj.url} opened!`);
-  };
-
   sse.onmessage = (message) => {
     // message is not a javascript object, so we spread its contents into one
     const newMessage = { ...message };

diff --git a/main_process/main_testingController.js b/main_process/main_testingController.js
@@ -78,7 +78,7 @@ testHttpController.runTest = (
 
       addOneResult({
         message: errObj.message,
-        status: 'FAILhi',
+        status: 'FAIL',
         expected: errObj.expected,
         actual: err,
       });

diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "swell",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "Swell",
   "main": "main.js",
   "repository": "https://github.com/open-source-labs/Swell",
   "scripts": {
     "report": "istanbul report --dir ./test/coverage/total-coverage html",
-    "test": "webpack --mode=production --config ./webpack.production.js && cross-env process.env.NODE_ENV=test nyc --report-dir ./test/coverage/mocha-coverage --reporter json --reporter text --reporter html mocha --timeout 3000 --exit",
+    "test": "jest && webpack --mode=production --config ./webpack.production.js && cross-env process.env.NODE_ENV=test nyc --report-dir ./test/coverage/mocha-coverage --reporter json --reporter text --reporter html mocha --timeout 15000 --exit",
     "server-sse": "node ./test/SSE_HTTP1_server.js",
     "server-gql": "node ./test/graphqlServer.mjs",
     "server-grpc": "node ./test/grpcServer.js",
@@ -16,7 +16,7 @@
     "server-websocket": "node ./test/websocketServer.js",
     "server-webrtc": "node ./test/webrtcWSServer.js",
     "test-jest": "jest",
-    "test-mocha": "webpack --mode=production --config ./webpack.production.js && cross-env process.env.NODE_ENV=test mocha --timeout 3000 --exit",
+    "test-mocha": "webpack --mode=production --config ./webpack.production.js && cross-env process.env.NODE_ENV=test nyc --report-dir ./test/coverage/mocha-coverage --reporter json --reporter text --reporter html mocha --timeout 15000 --exit",
     "test-mocha-zero": "webpack --mode=production --config ./webpack.production.js && cross-env process.env.NODE_ENV=test mocha --timeout 0 --exit",
     "format": "prettier --write \"**/*.+(js|jsx| tsx| json|css|md)\"",
     "lint": "eslint .",
@@ -97,8 +97,9 @@
   "dependencies": {
     "@apollo/client": "^3.5.0",
     "@apollo/server": "^4.6.0",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@graphql-tools/schema": "^8.3.10",
     "@grpc/grpc-js": "^1.6.7",
     "@grpc/proto-loader": "^0.6.9",
@@ -115,6 +116,7 @@
     "bulma": "^0.9.3",
     "bulma-checkradio": "^2.1.3",
     "bulma-switch": "^2.0.4",
+    "chai": "^4.3.10",
     "classnames": "^2.3.1",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
@@ -127,10 +129,11 @@
     "electron-devtools-installer": "^3.2.0",
     "electron-log": "^4.4.6",
     "electron-updater": "^5.3.0",
+    "esm": "^3.2.25",
     "eventsource": "^2.0.1",
     "express": "^4.18.0",
     "express-sse": "^0.5.3",
-    "fs": "0.0.1-security",
+    "fs": "^0.0.1-security",
     "fs-extra": "^10.1.0",
     "graphql": "^16.4.0",
     "graphql-tag": "^2.12.6",
@@ -184,6 +187,7 @@
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@types/cookie": "^0.5.1",
+    "@types/cookie-parser": "^1.4.7",
     "@types/node": "^17.0.28",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.0",
@@ -196,7 +200,6 @@
     "@typescript-eslint/eslint-plugin": "^5.21.0",
     "@typescript-eslint/parser": "^5.21.0",
     "babel-loader": "^8.2.5",
-    "chai": "^4.3.10",
     "chai-http": "^4.4.0",
     "concurrently": "^8.0.1",
     "cross-env": "^7.0.3",
@@ -227,12 +230,13 @@
     "postcss-pxtorem": "^6.0.0",
     "prettier": "^2.6.2",
     "prettier-eslint": "^14.0.1",
+    "redux-mock-store": "^1.5.4",
     "sass-loader": "^12.6.0",
     "source-map-loader": "^3.0.1",
     "style-loader": "^3.3.1",
     "ts-migrate": "^0.1.28",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.6.3",
+    "ts-node": "^10.9.2",
+    "typescript": "^4.9.5",
     "url-loader": "^4.1.1",
     "webpack": "^5.72.0",
     "webpack-bundle-analyzer": "^4.5.0",
@@ -247,6 +251,31 @@
     "url": "http://www.getswell.io"
   },
   "contributors": [
+    {
+      "name": "Carter Sarkela",
+      "email": "[email protected]",
+      "url": "https://github.com/CarterSarkela"
+    },
+    {
+      "name": "Karol Krzywon",
+      "email": "[email protected]",
+      "url": "https://github.com/kkrzywon"
+    },
+    {
+      "name": "Howard Sun",
+      "email": "[email protected]",
+      "url": "https://github.com/howardCodeGit"
+    },
+    {
+      "name": "Michael Underbrink",
+      "email": "[email protected]",
+      "url": "https://github.com/MUnderbrink90"
+    },
+    {
+      "name": "Adeeb Bayat",
+      "email": "[email protected]",
+      "url": "https://github.com/adeebbayat"
+    },
     {
       "name": "Chris Suzukida",
       "email": "[email protected]",
@@ -543,3 +572,4 @@
     }
   ]
 }
+
diff --git a/preload.js b/preload.js
@@ -74,6 +74,7 @@ const apiObj = {
       console.log('Channel not allowed: ', channel);
     }
   },
+  versions: process.versions,
 };
 
 // this is because we need to have context isolation to be false for spectron

diff --git a/src/assets/style/darkMode.scss b/src/assets/style/darkMode.scss
@@ -1,10 +1,12 @@
 $neutral-100: #aeaeae;
-$neutral-200: #9f9f9f;
+$neutral-200: #9c9cb1;
 $neutral-300: #575757;
 $neutral-400: #1f282e;
 $neutral-500: #434343;
 $neutral-600: #000000;
-$text: #00000099;
+$text: #1e3163;
+$text-dark: #000000;
+$text-dark-placeholder: #558a78;
 
 .is-dark-mode {
   background-color: $neutral-500 !important;
@@ -41,13 +43,16 @@ $text: #00000099;
   color: white;
 }
 
-.dark-protocol-text {
-  color: $text !important;
+.dark-text {
+  color: $text-dark !important;
 }
 .dark-address-input {
   background-color: $neutral-300 !important;
   color: white !important;
 }
+.dark-address-input::placeholder {
+ color: $text-dark-placeholder !important;
+}
 .dark-divider {
   // this is the divider underneath tabs -Prince
   border-left: 1px solid $neutral-300;

diff --git a/src/assets/style/workspace.scss b/src/assets/style/workspace.scss
@@ -266,4 +266,4 @@
   display: flex;
   align-content: center;
   flex-direction: column;
-}
+}
diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx
@@ -39,6 +39,7 @@ const App = () => {
    * All of the main components are rendered from here. Excluding the update pop
    * up, there are only 3 main containers for this application.
    */
+
   return (
     <div id="app" className="is-tall">
       <HashRouter>
@@ -60,7 +61,7 @@ const App = () => {
             />
           </ErrorBoundary>
 
-          {/* Main container. Contains the composer and response panes. */}
+          {/* Main container, Contains the composer and response panes. */}
           <ErrorBoundary>
             <MainContainer currentWorkspaceId={currentWorkspaceId} />
           </ErrorBoundary>

diff --git a/src/client/components/Versions.tsx b/src/client/components/Versions.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useState } from 'react';
+
+function Versions(): JSX.Element {
+  const [versions] = useState(window.api.versions);
+
+  return (
+    <ul className="versions">
+      <li className="electron-version">Electron v{versions.electron}</li>
+      <li className="chrome-version">Chromium v{versions.chrome}</li>
+      <li className="node-version">Node v{versions.node}</li>
+    </ul>
+  );
+}
+
+export default Versions;
+