Merge pull request #316 from oslabs-beta/development47

Swell version 1.10.1

Author: kurto8

CONTRIBUTING.md

@@ -53,6 +53,4 @@ People _love_ thorough bug reports. I'm not even kidding.
 
 By contributing, you agree that your contributions will be licensed under its MIT License.
 
-## References
 
-This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/a9316a723f9e918afde44dea68b5f9f39b7d9b00/CONTRIBUTING.md)

LICENSE.txt

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Swell
+Copyright (c) 2022 Swell
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -76,6 +76,9 @@ Swell is a one-stop shop for sending and monitoring your API requests
 
 ## Additional Features
 
+- _Send Request Directly to Endpoint_: You are able to immedeately send a request to an endpoint OR stage a request in your workspace for multi-level testing.
+  <kbd><img src="./ReadMeGifs/Gifs/DirectSendRequest.gif"
+       style="float: left; margin-right: 10px; margin-bottom : 30px; margin-top : 10px; border: 1px solid black;" /></kbd>
 - _Scripting in Swell_: Swell allows you to write assertion tests to aid in the test-driven development cycle of backend API services.
   <kbd><img src="./ReadMeGifs/Gifs/SimpleResponseTest.gif"
        style="float: left; margin-right: 10px; margin-bottom : 30px; margin-top : 10px; border: 1px solid black;" /></kbd>
@@ -159,6 +162,11 @@ Swell is a one-stop shop for sending and monitoring your API requests
 - **Jennifer Wu** - [jsh-wu](https://github.com/jsh-wu)
 - **Jacob Viesselman** - [JacobViesselman](https://github.com/JacobViesselman)
 - **Michael Prince** - [MichaelGPrince](https://github.com/MichaelGPrince)
+- **Genevieve Annable** - [gigifeeds](https://github.com/gigifeeds)
+- **Jay Wall** - [hanswand](https://github.com/hanswand)
+- **Sam Pyo** - [samhpyo](https://github.com/samhpyo)
+- **Drew Pomatti** - [thedrewery](https://github.com/thedrewery)
+- **Kurtis Waterbury** - [kurto8](https://github.com/kurto8)	
 
 ## License
 

ReadMeGifs/Gifs/AdditionalFeatures.gif

@@ -1,8 +1,28 @@
+// https://github.com/electron/electron/issues/10257
+// Code fix to support NODE_EXTRA_CA_CERTS env. There is currently no other fixes to the NODE_TLS_REJECT_UNAUTHORIZED at the moment.
+
+(function(){
+	if(!process.env.NODE_EXTRA_CA_CERTS) return;
+	try{
+		const extraca = require("fs").readFileSync(process.env.NODE_EXTRA_CA_CERTS);
+	}catch(e){
+		return;
+	} 
+	
+	const NativeSecureContext = process.binding('crypto').SecureContext;
+	const oldaddRootCerts = NativeSecureContext.prototype.addRootCerts;
+	NativeSecureContext.prototype.addRootCerts = function(){
+		const ret = oldaddRootCerts.apply(this, ...args);
+		this.addCACert(extraca);
+		return ret;
+	};
+})();
+
 // Allow self-signing HTTPS over TLS
 // process.env.NODE_TLS_REJECT_UNAUTHORIZED = 1;
 // Allow self-signing HTTPS over TLS
 // Disabling Node's rejection of invalid/unauthorized certificates
-process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
+// process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
 // from stack overflow: https://stackoverflow.com/a/35633993/11606641
 // Your fix is insecure and shouldn't really be done at all, but is often done in development (it should never be done in production).
 // The proper solution should be to put the self-signed certificate in your trusted root store OR to get a proper certificate signed by an existing Certificate Authority (which is already trusted by your server).

ReadMeGifs/Gifs/CollectionTest.gif

@@ -268,17 +268,17 @@ const httpController = {
   // ----------------------------------------------------------------------------
 
   makeFetch(args, event, reqResObj) {
-    console.log('args===>', args);
-    console.log('event===>', event);
-    console.log('reqRESSSSOBJ===>', reqResObj);
+    //console.log('args===>', args);
+    //console.log('event===>', event);
+    //console.log('reqRESSSSOBJ===>', reqResObj);
     return new Promise((resolve) => {
       const { method, headers, body } = args.options;
 
       fetch2(headers.url, { method, headers, body })
         .then((response) => {
-          console.log('responsefromendpoint====>', response);
+          //console.log('responsefromendpoint====>', response);
           const headers = response.headers.raw();
-          console.log('headersfromfetch==>', headers);
+          //console.log('headersfromfetch==>', headers);
           // check if the endpoint sends SSE
           // add status-==== code for regular http requests in the response header
           if (headers['content-type'][0].includes('stream')) {
@@ -292,16 +292,16 @@ const httpController = {
           headers[':status'] = response.status;
 
           const receivedCookie = headers['set-cookie'];
-          console.log('receivedCookie===>', receivedCookie);
+          //console.log('receivedCookie===>', receivedCookie);
           headers.cookies = receivedCookie;
-          console.log('newheaders==>', headers);
+          //console.log('newheaders==>', headers);
           const contents = /json/.test(response.headers.get('content-type'))
             ? response.json()
             : response.text();
 
           contents
             .then((body) => {
-              console.log('bodyyyy====>', body);
+              //console.log('bodyyyy====>', body);
 
               resolve({
                 headers,
@@ -344,7 +344,7 @@ const httpController = {
     } else {
       this.makeFetch({ options }, event, reqResObj)
         .then((response) => {
-          console.log('makefetchResponse===>', response);
+          //console.log('makefetchResponse===>', response);
           // Parse response headers now to decide if SSE or not.
           const heads = response.headers;
           reqResObj.response.headers = heads;
@@ -366,7 +366,7 @@ const httpController = {
           }
           // update reqres object to include new event
           reqResObj = this.addSingleEvent(body, reqResObj);
-          console.log('latest REQRESOBJ=>', reqResObj);
+          //console.log('latest REQRESOBJ=>', reqResObj);
           // check if there is a test script to run
           if (reqResObj.request.testContent) {
             reqResObj.response.testResult = testingController.runTest(
@@ -389,7 +389,7 @@ const httpController = {
 
   parseFetchOptionsFromReqRes(reqResObject) {
     const { headers, body, cookies } = reqResObject.request;
-    console.log('reqresOBJJJ=>', reqResObject);
+    //console.log('reqresOBJJJ=>', reqResObject);
 
     let { method } = reqResObject.request;
 

ReadMeGifs/Gifs/ConcurrentStreams.gif

@@ -1,6 +1,6 @@
 {
   "name": "swell",
-  "version": "1.0.0",
+  "version": "1.10.1",
   "description": "Swell",
   "main": "main.js",
   "repository": "https://github.com/open-source-labs/Swell",
@@ -139,6 +139,7 @@
     "eventsource": "^1.0.7",
     "express": "^4.17.1",
     "express-sse": "^0.5.3",
+    "fs": "0.0.1-security",
     "google-auth-library": "^5.10.1",
     "graphql": "^14.6.0",
     "graphql-language-service-interface": "2.8.2",
@@ -148,15 +149,17 @@
     "graphql-tools": "^6.1.0",
     "highland": "^2.13.5",
     "identity-obj-proxy": "^3.0.0",
+    "install": "^0.13.0",
     "js-beautify": "^1.14.0",
     "mali": "^0.21.0",
     "material-ui-dropzone": "^3.5.0",
     "mongoose": "^5.9.29",
     "ngrok": "^4.2.2",
     "node-fetch": "^2.6.0",
     "node-pre-gyp": "^0.6.39",
-    "node-sass": "^4.14.1",
+    "node-sass": "npm:sass@^1.45.2",
     "nodemon": "^1.19.4",
+    "npm": "^8.3.0",
     "npm-http-server": "^4.3.0",
     "path": "^0.12.7",
     "prop-types": "^15.6.2",
@@ -202,15 +205,14 @@
     "@testing-library/react": "^10.4.3",
     "@types/cookie": "^0.4.0",
     "@types/jest": "^26.0.4",
-    "@types/node": "^14.0.20",
+    "@types/node": "^14.18.3",
     "@types/node-fetch": "^2.5.7",
     "@types/react": "^16.9.41",
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.9",
     "@types/react-router-dom": "^5.1.6",
     "@types/set-cookie-parser": "0.0.6",
     "@types/uuid": "^8.3.1",
-    "@types/webrtc": "^0.0.19",
     "@types/ws": "^7.2.6",
     "@typescript-eslint/eslint-plugin": "^3.6.0",
     "@typescript-eslint/parser": "^3.10.1",
@@ -494,6 +496,31 @@
       "name": "Adrian Uesugui",
       "email": "https://www.linkedin.com/in/auesugui/",
       "url": "https://github.com/auesugui"
+    },
+    {
+      "name": "Genevieve Annable",
+      "email": "https://www.linkedin.com/in/genevieveannable/",
+      "url": "https://github.com/gigifeeds"
+    },
+    {
+      "name": "Drew Pomatti",
+      "email": "https://www.linkedin.com/in/drewpomatti/",
+      "url": "https://github.com/thedrewery"
+    },
+    {
+      "name": "Sam Pyo",
+      "email": "https://www.linkedin.com/in/samhpyo/",
+      "url": "https://github.com/samhpyo"
+    },
+    {
+      "name": "Jay Wall",
+      "email": "https://www.linkedin.com/in/walljay/",
+      "url": "https://github.com/hanswand"
+    },
+    {
+      "name": "Kurtis Waterbury",
+      "email": "https://www.linkedin.com/in/kurtiswaterbury/",
+      "url": "https://github.com/kurto8"
     }
   ]
 }

ReadMeGifs/Gifs/DarkMode.gif

@@ -1,18 +1,20 @@
 
 * {
   box-sizing: border-box;
+  font-size: 12px;
   // background-color: lightgray;
+  // background-color: aquamarine;
 }
 
 // BULMA ADJUSTMENTS
 .hero {
-  height: 2.5rem;
-  padding-top: 0.5rem;
+  height: 2.5rem; // nothing happened when changed
+  padding-top: 0.5rem; // makes purple banner change height
 }
 
 .hero h3 {
   font-family: "Source Sans Pro", sans-serif;
-  font-weight: 600;
+  font-weight: 600; // font boldness in banner (composer, workspace responses)
 }
 
 input:focus {

ReadMeGifs/Gifs/DirectSendRequest.gif

@@ -1,24 +1,25 @@
 $primary-100: #ffd645;
 $primary-200: #f66b61;
 $primary-300: #21d4a4;
-$primary-400: #50809b; // this is not currently used
-$primary-500: #3834a9;
-
-$rest: #6843ff;
-$graphql: #de33a6;
-$grpc: #6cacc1;
-$websockets: #f47d31;
-$webrtc: #4285f4;
-$openapi: #94c73d;
-$webhook: rgb(185, 52, 52);
-$webhookOn: #037448;
+$primary-400: #9b5088; // this is not currently used
+$primary-500: #50809b;
+
+$rest: #ff9e43;
+$graphql: #ff9e43;
+$grpc: #ff9e43;
+$websockets: #ff9e43;
+$webrtc: #ff9e43;
+$openapi: #ff9e43;
+$webhook: #ff9e43;
+$webhookOn: #ff9e43;
 
 $neutral-100: #5e5e5e;
 $neutral-200: #f4f5f7;
 $neutral-300: #e1e1e1;
 $neutral-400: #737581;
 $neutral-500: #4a4b53;
 $neutral-600: #000000;
+$neutral-700: #f3f3f3; // gigi added to set background of 3 main containers
 
 // BULMA COLORS
 $primary: $primary-500;
@@ -193,6 +194,7 @@ $text: $neutral-400;
 .is-divider-neutral-300 { // this is the divider between the tabs -Prince
   border-left: 1px solid $neutral-300;
   border-right: 1px solid $neutral-300;
+  background-color: $neutral-700;
 }
 
 .is-awesome-icon {

ReadMeGifs/Gifs/GRPCResponses.gif

@@ -1,7 +1,7 @@
 $neutral-100: #AEAEAE;
 $neutral-200: #9F9F9F;
 $neutral-300: #575757;
-$neutral-400: #383838;
+$neutral-400: #1f282e;
 $neutral-500: #434343;
 $neutral-600: #000000;
 $text: #94959e;

ReadMeGifs/Gifs/GraphQL.gif

@@ -7,7 +7,7 @@
 }
 
 .empty-state-img {
-  max-width: 160px;
+  max-width: 300px;
 }
 
 .is-not-8rem-tall {

ReadMeGifs/Gifs/SSE.gif

@@ -4,6 +4,11 @@
 //   background-color: gray;
 // }
 
+.composer {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
 .include-data-checkbox {
   background: #FFFFFF;
   /* neutral-300 */
@@ -12,17 +17,29 @@
   border-radius: 2px;
   max-width: 26px;
   max-height: 26px;
+  margin-left: 2px !important;
 }
 
 .switch:focus {
   border: none;
   outline: none;
 }
 
+.add-header-gRPC-cookie-button {
+   color: $primary !important;
+  border-color: $primary !important;
+  width: 3px !important;
+  height: 3px !important;
+  margin-left: 2px !important;
+  margin-right: 2px !important;
+  font-size: 16px !important;
+  border-radius: 2px !important;
+}
+
 .add-header-or-cookie-button {
   color: $primary !important;
   border-color: $primary !important;
-  min-width: 80px;
+  min-width: 5px;
 }
 
 .prettify-select {
@@ -56,6 +73,17 @@
 
 .input {
   outline: none !important;
+
+}
+
+.key {
+  border: 1px solid $neutral-200 !important;
+  border-radius: 4px;
+}
+
+.value {
+  border: 1px solid $neutral-200 !important;
+  border-radius: 4px;
 }
 
 // HISTORY TAB
@@ -91,7 +119,7 @@
   & :global(.react-codemirror2) {
          overflow: auto; /* you can use hidden here as well */
     }
- }
+}
 
 .cm-s-responsebody .CodeMirror-wrap {
   height: 1000px !important;
@@ -163,4 +191,16 @@
 
 .no-border-please {
   border: none !important;
+}
+
+.inputs {
+  display: flex;
+  justify-content: space-between;
+}
+
+.restReqBtns {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  // justify-content: start;
 }