Swell Versions Save

Redux Toolkit

Finalized the codebase’s conversion to Redux Toolkit, implementing type-safe hooks as recommended by the Redux documentation. We also refactored a number of legacy functions to a more modern and streamlined hook implementation.

File Upload

Addressed an outstanding issue that requested the ability to attach files on HTTP requests. You are now able to select binary in the body drop down tab and attach a file of your choice that will be sent as binary to your specified endpoint.

Dark Mode

Dark mode has now been integrated across the application.

TypeScript

Numerous improvements were made to the TypeScript quality across the codebase, allowing future contributors to more easily identify imported types and minimize type errors.

Test Coverage

Test coverage was expanded to over 60% globally, including unit, integration, and end to end testing using both Jest and Mocha. We primarily focused on the main electron controllers but expanded test coverage in numerous other areas, including testing for new features.

CSP

Implemented a Content Security Policy (CSP) into the Electron and webpack bundle to generate nonce values for all scripts and styles in order to reduce the possibility of cross-site scripting attacks.

WSL Users

Documentation for Swell was already quite good for an open-source project, but we made quite a few improvements. Most notably, we added in-depth, step by step instructions for WSL users on how to properly set up your dev environment to work on an Electron app.

Implemented WebRTC

• Implemented WebRTC features to allow users to send video or text information through an RTC peer connection
• Enabled users to set up SDP connection

Continuous Integration/Deployment Pipeline

• createPackages.yml: This workflow is triggered by a push event to the master branch (successful merge request). It runs the unit tests to ensure the merged code does not have any bugs and then creates the packages for macOS, Windows, and Linux operating systems. The packages get deployed as a draft on Github Actions.
• Added new tests to Continuous Integration workflow

Integration Testing

• Created integration tests to test if front end user actions were correctly changing the redux state
• Created tests for the following networking tools: HTTP, GraphQL, WebSockets, gRPC
• Created WebRTC Integration tests backbone. Needs minor bug fixing
• Fixed various bugs in the E2E and Unit tests

Incorporated full support for tRPC

• Users are no longer required to manually supply the method type for their procedure calls and can instead select it from a dropdown menu.
• Inputs and arguments for end points are now separated in a more streamlined UI reducing user error and providing a much more user-friendly experience.
• Users can batch together calls by adding additional procedures into their list before hitting the send request button.
• Subscriptions feature is also now fully functional and users can seamlessly subscribe to a specific websocket endpoint while concurrently performing mutate and query procedure calls. These actions can be carried out without interrupting the websocket connection, ensuring a smooth and uninterrupted user experience.
• Headers and Cookies are now included with each request, and can be extracted from responses to be displayed properly.
• The history tab now displays prior network activity that can be selected to automatically rebuild prior requests.
• Removed unnecessary node modules, reducing bundle filesize by 5%

Incorporated gRPC in the list of features

• Now you can upload pre-written protos or write out a new proto in the code mirror. Once you save the document, you can select one of the proto’s services from a drop down menu.
• After you’ve selected a service, the requests associated with the selected service will be accessible through another drop down menu.
• gRPC is able to test Unary, Client Streaming, Server Streaming, and Bi-directional requests.

Continuous Integration Implementation

• repaired the continuous integration pipeline with GitHub Actions
• unit-tests.yml: This workflow is triggered by a push event to the ci-draft, ci-main, dev, or main branches, and it runs unit tests on macOS, Windows, and Linux runners
• codeql-analysis.yml: This workflow is triggered by a push event to the repo or a pull request event to the dev or main branches. Its purpose is to check for any security vulnerabilities and language-based errors.)

Increasing Maintainability

Testing

• doubled both unit testing and end-to-end testing
• added new meaningful tests for the core features (HTTP/2, SSE, GraphQL, WebSockets, and gRPC)
• implemented complete coverage for all of the core features and a majority of the UI/UX components.

TypeScript

• created meaningful types for the core features and the UI/UX components that were already converted to TypeScript.
• the frontend has been fully converted to TypeScript
• The overall coverage has increased from 36% to 54%

Stress testing for HTTP/2 and GraphQL

• Enabled for HTTP/2 GET and GraphQL QUERY requests
• Ability to test the limits of their existing HTTP/2 and GraphQL server infrastructure or discover unintended bottlenecks such as being rate limited during fast and frequent API calls

Mock server for HTTP/2

• Includes a lightweight mock server that is accessible inside and outside of Swell
• Start and stop the server at the push of a button, create mock endpoints and receive user-defined responses when making a request
• Allows front-end development without depending on a fully-built backend server

UX/UI improvements

• Consistent color palette, font size and contrast
• Consistent button and tooltip styling
• Separation of stable and experimental features on the navigation bar to provide more distinction for the user

Bug Fixes

• Unsubscribe from GraphQL subscriptions
• Revived most end-to-end (E2E) tests in the repository
• Removed non-functional GitHub integration from the app
• WebSocket message dialogue in the response pane is automatically displayed as soon as the server connection is established
• Fix crash when navigating to the Test tab in the response pane to view assertion testing results

tRPC functionality

-Added support for all three types of tRPC query methods: Query, Mutation, Subscription. -Support for tRPC Batch requests

UI/UX Improvements:

-Added resizable panels between composer, response, and workspace. -Added user feedback when selecting between web communication protocols.

BugFixes:

-Fixed a bug where selecting the WebRTC protocol would occasionally cause the application to crash.

State Management

• Major overhaul of front-end state management
• Fully converted to Redux Toolkit, broke down the large Redux store into manageable slices
• Updated mutable syntax to account for new Immer objects
• Removed deprecated Reducers and Action files

GraphQL and Apollo

• Completed upgrade to version 3 of Apollo Client and Server for GraphQL subscriptions
• Removed code for deprecated versions

TypeScript

• Tightened up existing TypeScript definitions

Electron

• Tested building out of Mac, Win, and Linux images which were previously failing for Mac dmg's

What's Changed

• Increased Webhooks Capabilities & Security
• User Interface Overhaul
• Dark Mode Enhancements
• Increased TypeScript Coverage

Full Changelog: https://github.com/open-source-labs/Swell/compare/v1.0.0...v1.10.1

WebHooks

• Swell now 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.

TypeScript

• TypeScript coverage was increased by 600%. Most of the Redux library has been upgraded to identify errors at compile instead of at build, helping to save time. This is particularly helpful for future developers looking to add new features.

Dark Mode

• Swell now allows you to toggle between light and dark mode when viewing the application.

Bug Fixes

• Fixed the "Show Response History" graph so that it no longer causes the application to crash.

OpenAPI

• Make API requests based on a range of provided options that are generated according to specifications defined in a yaml or json-formatted OpenAPI document.

WebRTC

• Verify connectivity of ICE servers (STUN and TURN) for WebRTC applications by gathering ICE candidates and generating an SDP.

Bug Fixes

• Fixed right margin bug on WebSocket message container
• Fixed UI reducer composerDisplay test
• Fixed initial state test in business reducer

Code Quality

• Removed unused imports.
• Removed unused props.
• Updated ESLint config to be Typescript aware.
• Added formatting and linting npm scripts.
• Fixed as many inherited linting errors as possible. Disabled rules per file for many others. Tweaking rules and tending to the existing errors will need to continue, but the included updates should help enforce more standardization and best practices moving forward.
• Updated Typescript declarations to match new redux store state, and to utilize enums and interface inheritance.
• Updated vulnerable npm packages