Merge pull request #355 from oslabs-beta/dev

feat: WebRTC integration and front-end updates

Author: rchldn

.github/workflows/codeql-analysis.yml

@@ -30,6 +30,23 @@ jobs:
     steps:
     - name: Checkout repository
       uses: actions/checkout@v3
+
+    - name: Use Node.js 18 
+      uses: actions/setup-node@v3
+      with:
+        node-version: 18.20.6 # Or your preferred 18.x version
+
+    - name: Print Node.js version
+      run: node -v
+
+    - name: Install dependencies
+      run: npm ci # Or npm install if you prefer
+
+    - name: Build project
+      run:  |
+        make boostrap
+        make release
+        npm run build
       
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
@@ -43,19 +60,15 @@ jobs:
 
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+    # - name: Autobuild
+    #   uses: github/codeql-action/autobuild@v2
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
 
     # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
     #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
+    #    uses a compiled language (we moved the "below" lines up to 42 and edited them)
 
     - name: Perform CodeQL Analysis
       uses: github/codeql-action/analyze@v2

.github/workflows/createPackages.yml

@@ -9,16 +9,16 @@ jobs:
   tests:
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18.20.6]
         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 }}
+      - name: Use Node.js 18.20.6 # this used to be dynamically updated, but kept pulling an old version number. you'll have to manually update these throughout this file to be safe.
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 18.20.6
       - name: Install dependencies
         run: npm i && npm ci
       - name: Run unit tests
@@ -40,15 +40,15 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '16.15'
+          node-version: '18.20.6'
       - 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
+          tag_name: v1.19.0 # Replace with your desired tag or version number
+          release_name: Release v1.19.0 # Replace with your desired release name
           draft: true
           body: |
             <Temporary Body for Github Release>
@@ -67,7 +67,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '16.15'
+          node-version: '18.20.6'
 
       - name: Install Dependencies
         run: npm install
@@ -89,7 +89,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '16.15' # Use the specific version of Node that your project requires
+          node-version: '18.20.6' # Use the specific version of Node that your project requires
 
       - name: Install Dependencies
         run: npm install
@@ -118,7 +118,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '16.15' # Use the specific version of Node that your project requires
+          node-version: '18.20.6' # Use the specific version of Node that your project requires
 
       - name: Install Dependencies
         run: npm install

.github/workflows/unit-tests.yml

@@ -6,7 +6,7 @@ jobs:
   tests:
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18.20.6]
         os: [macos-latest, ubuntu-latest, windows-latest]
     runs-on: ${{ matrix.os }}
     steps:
@@ -18,7 +18,11 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
         run: npm i && npm ci
+      - name: Apply patches
+        env:
+          NODE_ENV: --no-node-snapshot
+        run: npx patch-package
       - name: Run unit tests
         uses: coactions/setup-xvfb@v1
         with:
-          run: npm run test-jest
+          run: npm run test-jest

Dockerfile-dev

@@ -0,0 +1,6 @@
+From node:18.20
+RUN npm install -g webpack
+Workdir /app
+Copy package*.json /app
+Run npm install
+Expose 8080

README.md

@@ -21,6 +21,7 @@ Swell is a one-stop shop for sending and monitoring your API requests:
 
 - Send and monitor streams over HTTP/2 (including SSEs) and WebSockets
 - Create GraphQL queries, introspections, mutations, and subscriptions
+- Test WebRTC applications over video, audio and text channels
 - Stress testing HTTP/2 and GraphQL endpoints
 - Create your own HTTP/2 mock server
 - Store workspaces of multiple requests for later use
@@ -67,6 +68,34 @@ We highly encourage you to check out the `DEV-README.md` in the `docs` folder. W
 
   See [tRPC docs](https://trpc.io/docs/) for more information on sending tRPC requests or setting up a tRPC server.
 
+
+- _WebRTC_: Swell makes it easy to test WebRTC applications for video, audio and text channels. Currently Swell supports manual entry of SDPs.
+
+  ### Walkthrough for setting up a text channel connection using the app's generated offer and answer:
+
+  - Step 1
+    Caller: Generate an offer by clicking “Get Offer.” Copy the offer to your computer's clipboard and send it to recipient (we recommend sending by email).
+  - Step 2
+    Recipient: Copy the offer you received from the caller and paste it into the offer box (the top text box)
+  - Step 3
+    Recipient: Click “Get answer” button, generate an answer and copy it to your computer's clipboard. Send it to caller (email recommended)
+  - Step 4
+    Caller: Copy answer to your computer's clipboard and paste it into the answer box (bottom text box).
+  - Step 5
+    Caller: Click the “add answer” button. Now the connection is open!
+  - Step 6
+    Caller: Click “add to workspace” button.
+  - Step 7
+    Recipient: Click “add to workspace” button.
+  - Step 8
+    Caller: Click "Send" button on the left-hand side of the app.
+  - Step 9
+    Recipient: Click "Send" button on the left-hand side of the app.
+  - Step 10
+    Send and receive text messages via the response panel at the bottom of the app.
+  <img src="./ReadMeGifs/Gifs/webrtc.gif" style="display: block; margin: 10px auto 30px; " />
+
+
 ## Additional features
 
 - _Stress testing for HTTP/2 and GraphQL_: Test your server backend with Swell's stress testing feature to ensure your server can manage expected and unexpected loads accordingly
@@ -91,16 +120,14 @@ We highly encourage you to check out the `DEV-README.md` in the `docs` folder. W
 
   <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.
   <img src="./ReadMeGifs/Gifs/MockServer.gif" style="display: block;  margin: 10px auto 30px;" />
 
 - _Webhooks_: Swell includes user-defined HTTP callback connection testing designed to test other server's connection to the web and ability to send data. The test insures that when an event occurs, the source site makes an HTTP request to the URL configured for the webhook.
 
-- _WebRTC_: Swell makes it easy to test WebRTC applications for both video and text channels. Currently Swell supports manual entry of SDPs. 
-  <img src="./ReadMeGifs/Gifs/webrtc.gif" style="display: block; margin: 10px auto 30px; " />
-
 - _OpenAPI_: Swell supports the enumeration and execution of REST and RPC API requests as defined in a user-provided OpenAPI document.
   <img src="./ReadMeGifs/Gifs/openapi.gif" style="display: block; margin: 10px auto 30px;" />
 
@@ -110,7 +137,7 @@ We highly encourage you to check out the `DEV-README.md` in the `docs` folder. W
 - React
 - React Router
 - Material UI
-- Redux
+- Redux Toolkit
 - Apollo Client
 - Websockets
 - gRPC-js
@@ -124,6 +151,12 @@ We highly encourage you to check out the `DEV-README.md` in the `docs` folder. W
 - Playwright
 
 ## Authors
+
+- **Isaac Mbambo** - [IM236](https://github.com/IM236)
+- **Kiki Hunt** - [Iloveeverything](https://github.com/Iloveeverything)
+- **Ting Lee** - [tingEng](https://github.com/tingEng)
+- **Rachel Dean** - [rchldn](https://github.com/rchldn)
+- **Kadeem Reid** - [Kadeem929](https://github.com/Kadeem929)
 - **Karol Krzywon** - [kkrzywon](https://github.com/kkrzywon)
 - **Howard Sun** - [howardCodeGit](https://github.com/howardCodeGit)
 - **Carter Sarkela** - [CarterSarkela](https://github.com/CarterSarkela)
@@ -215,4 +248,4 @@ We highly encourage you to check out the `DEV-README.md` in the `docs` folder. W
 
 ## License
 
-This project is licensed under the MIT License
+This project is licensed under the MIT License

build/config.gypi

@@ -1,7 +1,7 @@
 # Do not edit. File was generated by node-gyp's "configure" step
 {
   "target_defaults": {
-    "cflags": [],
+    "cflags": ['-std=c++20'],
     "default_configuration": "Release",
     "defines": [],
     "include_dirs": [],
@@ -52,7 +52,7 @@
     "node_use_dtrace": "true",
     "node_use_etw": "false",
     "node_use_node_code_cache": "true",
-    "node_use_node_snapshot": "true",
+    "node_use_node_snapshot": "false",
     "node_use_openssl": "true",
     "node_use_v8_platform": "true",
     "node_with_ltcg": "false",