Merge pull request #340 from oslabs-beta/master

Swell v16 Merge

.github/workflows/createPackages.yml

@@ -0,0 +1,128 @@
+name: Master Workflow
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  tests:
+    strategy:
+      matrix:
+        node-version: [16]
+        os: [macos-latest, ubuntu-latest, windows-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: npm i && npm ci
+      - name: Run unit tests
+        uses: coactions/setup-xvfb@v1
+        with:
+          run: npm run test-jest
+
+  create_release:
+    needs: tests
+    runs-on: windows-latest
+
+    env:
+      GH_TOKEN: ${{ secrets.GH_TOKEN }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16.15'
+      - name: Create Release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+        with:
+          tag_name: v1.16.0 # Replace with your desired tag or version number
+          release_name: Release v1.16.0 # Replace with your desired release name
+          draft: true
+          body: |
+            Fully implemented CI/CD pipeline for windows, mac, and linux.
+
+  windows:
+    needs: create_release
+    runs-on: windows-latest
+
+    env:
+      GH_TOKEN: ${{ secrets.GH_TOKEN }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16.15'
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build and Package for Windows
+        run: npm run package-win
+
+  linux:
+    needs: create_release
+    runs-on: ubuntu-latest # Using a Linux runner
+
+    env: # Adding the environment variable for the GH_TOKEN
+      GH_TOKEN: ${{ secrets.GH_TOKEN }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16.15' # Use the specific version of Node that your project requires
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build and Package for Linux
+        run: npm run package-linux
+
+      # Optional step to upload the Linux package as an artifact
+      - name: Upload Linux Package
+        uses: actions/upload-artifact@v2
+        with:
+          name: linux-app
+          path: release/Swell-1.15.0.AppImage # Change the path according to your Linux build output
+
+  mac:
+    needs: create_release
+    runs-on: macOS-latest
+
+    env: # Adding the environment variable for the GH_TOKEN
+      GH_TOKEN: ${{ secrets.GH_TOKEN }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16.15' # Use the specific version of Node that your project requires
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build and Package for Mac
+        run: npm run package-mac
+

.gitignore

@@ -71,6 +71,9 @@ protos/
 test/subSuites/*.png
 test/failedTests/*
 .nyc_output
+# //! DELETE AFTER DONE, THESE ARENT PERMANENT
+# test/testSuite.js
+
 
 
 # db #

docs/DEV-README.md

@@ -2,6 +2,8 @@
 
 If you are considering contributing to Swell in the context of a group or medium-term project, you are at the right place! Here is a document that will give you more information regarding the state of the product and some considerations for future iteration.
 
+NOTE: Here is a super useful excalidraw that describes the processes of the application in detail: https://excalidraw.com/#room=18f1f977e8cd6361eaa1,4vr1DznwcnD-uKM_X7ZhiA
+
 ---
 
 ## As a developer, what experience can you get out of contributing to Swell?
@@ -97,6 +99,8 @@ The impacts to the product are:
 
 **Some of us have found [ReacTree](https://reactree.dev/) VS Code extension incredibly helpful in visualizing the UI components. Utilizing the extension could be your entry into understanding the structure of the codebase.**
 
+**Some of us have found Redux Dev Tools incredibly helpful when trying to understand the flow of state and actions. Redux Dev Tools is installed when running in development mode and can be accessed as the right-most tab in your developer console panel in Electron.**
+
 As you iterate the product, keep in mind the footprint your new feature(s) could add to the codebase. Could you re-use some of the existing modules? Can you even refactor and/or remove the obsolete code to help maintain the health of the codebase?
 
 There are many parts of the codebase that break DRY principles, and with a such a large application, really keep in mind that when you add features it is completely necessary. Past iterators added an experimental feature(s) without it fully working and the next team(s) would add there own experiemental feature. Fixing features the past teams couldn't get to not only is a great way to learn these technologies, but is a great thing to talk to in interviews. " I fixed the webRTC feature that has been stagnant for 5 years", "I addressed the technical debt and reoganized the state...", or "Increasesed the quality of typeScript". These all show maturity as a developer and will allow to focus the entire time of OSP on the 20% problems.
@@ -140,14 +144,22 @@ Currently, the HTTP/2 mock server has the ability to create a server that is acc
 - the ability to mock HTML responses (or remove the HTML option from the BodyEntryForm component)
 - Connect the headers and cookies to the mock endpoint creation
 
-### _WebRTC STUN/TURN server input is read-only_
+### _WebRTC features are there but buggy when interacting with other parts of the app_
+
+In the latest iteration, the WebRTC feature was changed from STUN Server testing to Client RTC Connection testing, allowing Swell to test if another client is able to create an RTC connection to transmit text and video data. Because the RTCPeerConnection has to be initiated before we generate the SDP, this connection is set up differently from the other networks. Other networks purely need the primitive strings as input, and the response is created on click of `Send` (in the workspace panel). For WebRTC, the connection object is created as an input and when the user clicks `Send` then the data transmitted data allowed to be displayed (although data is being transmitted thru the connection even before `Send` is clicked). This means the WebRTC ReqRes cant really be saved in history or re-connected beyond the first connection.
+
+Areas for improvement:
 
-The `RTCConfiguration` format required for WebRTC STUN/TURN server is an object with `iceServers` as the key and an array of objects as the value. With the current input format on the application, it is very difficult and error-prone to attempt to format the user input correctly. Based on research it seems like many other alternatives that test STUN/TURN servers separate each key/value into its input text box (similar to how key/value pairs for headers are done for HTTP/2 in Swell). Our assumption is that this way the application can have better control formatting `RTCConfiguration`. If anyone is considering advancing the current WebRTC functionalities in the future, this should be a priority so we can fully enable the ability to test any STUN/TURN servers using Swell.
+- Currently our WebRTC only works as the connection initiator. A next step would be the `Add Answer` button which allows Swell to be on the receiver end of the connection.
+- Currently our WebRTC end-to-end testing is read only from the previous implementation. It would be a highly valuable addition to modify the old testing to test the current implementation of webRTC. Integration testing has been started but needs to be finished. Relevant files include
+  - End-to-End:'test/**tests**/subSuites/webRTCTest.js'
+  - Integration: 'test/**tests**/IntegrationTests/webRTCIntegrationTests'
 
 ### _Incomplete E2E testing coverage_
 
 Some of the following features either have broken, incomplete, or no E2E testing coverage in the repository:
 
+- webRTC
 - tRPC
 - OpenAPI
 - Mock server

main.js

@@ -45,6 +45,7 @@ const url = require('url');
 const fs = require('fs');
 const log = require('electron-log');
 
+
 // proto-parser func for parsing .proto files
 const protoParserFunc = require('./main_process/protoParser.js');
 
@@ -64,6 +65,11 @@ require('./main_process/main_trpcController.js')();
 // require mac touchbar
 const { touchBar } = require('./main_process/main_touchbar.js');
 
+
+
+const contextMenu = require('electron-context-menu')
+contextMenu()
+
 // configure logging
 // autoUpdater.logger = log;
 // autoUpdater.logger.transports.file.level = 'info';

package.json

@@ -1,12 +1,12 @@
 {
   "name": "swell",
-  "version": "1.15.0",
+  "version": "1.16.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 --exit",
+    "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",
     "server-sse": "node ./test/SSE_HTTP1_server.js",
     "server-gql": "node ./test/graphqlServer.mjs",
     "server-grpc": "node ./test/grpcServer.js",
@@ -16,7 +16,8 @@
     "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 --exit",
+    "test-mocha": "webpack --mode=production --config ./webpack.production.js && cross-env process.env.NODE_ENV=test mocha --timeout 3000 --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 .",
     "lint:fix": "eslint --fix . ",
@@ -82,7 +83,7 @@
     },
     "publish": {
       "provider": "github",
-      "owner": "open-source-labs",
+      "owner": "oslabs-beta",
       "repo": "Swell",
       "private": false
     }
@@ -112,6 +113,7 @@
     "@uiw/codemirror-theme-vscode": "^4.19.9",
     "@uiw/react-codemirror": "^4.19.9",
     "body-parser": "^1.20.0",
+    "buffer": "^6.0.3",
     "bulma": "^0.9.3",
     "bulma-checkradio": "^2.1.3",
     "bulma-switch": "^2.0.4",
@@ -124,6 +126,7 @@
     "dexie": "^3.2.2",
     "dexie-react-hooks": "^1.1.1",
     "dotenv": "^16.0.0",
+    "electron-context-menu": "^3.6.1",
     "electron-devtools-installer": "^3.2.0",
     "electron-log": "^4.4.6",
     "electron-updater": "^5.3.0",
@@ -175,8 +178,8 @@
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.17.9",
     "@mui/icons-material": "^5.6.2",
-    "@mui/lab": "^5.0.0-alpha.80",
-    "@mui/material": "^5.6.4",
+    "@mui/lab": "5.0.0-alpha.137",
+    "@mui/material": "5.14.2",
     "@playwright/test": "^1.21.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@types/cookie": "^0.5.1",
@@ -522,4 +525,3 @@
     }
   ]
 }
-

src/assets/style/webSocketResponse.scss

@@ -50,7 +50,6 @@
   padding: 4px 8x;
   color: #fff;
   text-align: right;
-  margin-right: 8px;
 }
 
 .websocket_message-server {

src/assets/style/workspace.scss

@@ -243,3 +243,27 @@
   float: right;
 }
 
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #6d6969;
+  float: none;
+  width: 100%;
+  overflow: auto;
+  z-index: 1;
+}
+
+.dropdown-content a:hover {
+  background-color: #8e1212;
+}
+
+.dropdown:hover .dropdown-content {
+  display: flex;
+  align-content: center;
+  flex-direction: column;
+}

src/client/components/main/GRPC-composer/GRPCBodyEntryForm.tsx

@@ -41,10 +41,9 @@ const GRPCBodyEntryForm: React.FC<Props> = (props) => {
     // props.saveChanges(false);
     const streamsArr = [...props.newRequestStreams.streamsArr];
     const streamContent = [...props.newRequestStreams.streamContent];
-
     for (let i = 0; i < streamsArr.length; i++) {
       if (streamsArr[i].id === streamID) {
-        streamsArr[streamID].query = value;
+        streamsArr[streamID] = { ...streamsArr[streamID], query: value };
         streamContent[streamID] = value;
         props.newRequestStreamsSet({
           ...props.newRequestStreams,

src/client/components/main/GRPC-composer/GRPCBodyStream.tsx

@@ -81,7 +81,7 @@ const GRPCBodyStream: React.FC<GRPCBodyStreamProps>  = (props) => {
   // pseudocode for the return section:
   // renders the stream body (and the stream number if for client or bidirectional stream)
   return (
-    <div>
+    <div id='grpcBodyEntryTextArea'>
       <div className="warningMessage">{showError}</div>
       <div>
         <div className="mt-1 is-flex is-align-items-center">

src/client/components/main/MainContainer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { ReqRes, $TSFixMe, $TSFixMeObject } from '../../../types';
+import { ReqRes, $TSFixMe, $TSFixMeObject, RequestWebRTC } from '../../../types';
 
 import * as ReqResSlice from '../../toolkit-refactor/slices/reqResSlice';
 
@@ -101,12 +101,11 @@ const mapDispatchToProps = (dispatch: AppDispatch) => ({
   setWorkspaceActiveTab: (tabName: $TSFixMe) => {
     dispatch(setWorkspaceActiveTab(tabName));
   },
+
 });
 
 
 function MainContainer(props: $TSFixMeObject) {
-
-
   return (
     <Box sx={{ width: '75%' }}>
       <Split direction="vertical" gutterSize={5} style={{ height: '100%' }}>
@@ -116,7 +115,8 @@ function MainContainer(props: $TSFixMeObject) {
             <Route path="/graphql" element={<GraphQLComposer {...props} />} />
             <Route path="/grpc" element={<GRPCComposer {...props} />} />
             <Route path="/websocket" element={<WebSocketComposer {...props} />} />
-            <Route path="/webrtc" element={<WebRTCComposer {...props} />} />
+            {/* WebRTC has been completely refactored to hooks - no props needed */}
+            <Route path="/webrtc" element={<WebRTCComposer />} />
             <Route path="/openapi" element={<OpenAPIComposer {...props} />} />
             <Route path="/webhook" element={<WebhookComposer {...props} />} />
             <Route path="/trpc" element={<TRPCComposer {...props} />} />

src/client/components/main/TRPC-composer/TRPCComposer.tsx

@@ -171,7 +171,7 @@ export default function TRPCComposer(props) {
       id,
       createdAt: new Date(),
       protocol,
-      trpc: true,
+      tRPC: true,
       url,
       graphQL,
       gRPC,