Skip to content

Commit

Permalink
Merge pull request #340 from oslabs-beta/master
Browse files Browse the repository at this point in the history
Swell v16 Merge
  • Loading branch information
NManem authored Aug 22, 2023
2 parents d3df136 + 1327f92 commit 4330a8b
Show file tree
Hide file tree
Showing 58 changed files with 2,701 additions and 916 deletions.
128 changes: 128 additions & 0 deletions .github/workflows/createPackages.yml
Original file line number Diff line number Diff line change
@@ -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

3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,9 @@ protos/
test/subSuites/*.png
test/failedTests/*
.nyc_output
# //! DELETE AFTER DONE, THESE ARENT PERMANENT
# test/testSuite.js



# db #
Expand Down
16 changes: 14 additions & 2 deletions docs/DEV-README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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?
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down
6 changes: 6 additions & 0 deletions main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand All @@ -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';
Expand Down
16 changes: 9 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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 . ",
Expand Down Expand Up @@ -82,7 +83,7 @@
},
"publish": {
"provider": "github",
"owner": "open-source-labs",
"owner": "oslabs-beta",
"repo": "Swell",
"private": false
}
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -522,4 +525,3 @@
}
]
}

1 change: 0 additions & 1 deletion src/assets/style/webSocketResponse.scss
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@
padding: 4px 8x;
color: #fff;
text-align: right;
margin-right: 8px;
}

.websocket_message-server {
Expand Down
24 changes: 24 additions & 0 deletions src/assets/style/workspace.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
8 changes: 4 additions & 4 deletions src/client/components/main/MainContainer.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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%' }}>
Expand All @@ -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} />} />
Expand Down
2 changes: 1 addition & 1 deletion src/client/components/main/TRPC-composer/TRPCComposer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ export default function TRPCComposer(props) {
id,
createdAt: new Date(),
protocol,
trpc: true,
tRPC: true,
url,
graphQL,
gRPC,
Expand Down
Loading

0 comments on commit 4330a8b

Please sign in to comment.