Fixed WSS and header/cookie references

Author: abbychao

src/client/components/composer/NewRequest/ComposerNewRequest.jsx

@@ -43,7 +43,7 @@ class ComposerNewRequest extends Component {
       const protocol = this.props.newRequestFields.url.match(/(https?:\/\/)|(wss?:\/\/)/)[0]
 
       // HTTP && GRAPHQL REQUESTS
-      if (this.props.newRequestFields.protocol !== 'ws://') {
+      if (!/wss?:\/\//.test(this.props.newRequestFields.protocol)) {
         let URIWithoutProtocol = `${this.props.newRequestFields.url.split(protocol)[1]}/`;
         const host = protocol + URIWithoutProtocol.split('/')[0];
         let path = `/${URIWithoutProtocol.split('/')
@@ -157,10 +157,10 @@ class ComposerNewRequest extends Component {
 
   render() {
     let HeaderEntryFormStyle = { //trying to change style to conditional created strange duplication effect when continuously changing protocol
-      display: this.props.newRequestFields.protocol !== 'ws://' ? 'block' : 'none',
+      display: !/wss?:\/\//.test(this.props.newRequestFields.protocol) ? 'block' : 'none',
     }
     let SubmitButtonClassName = "composer_submit";
-    if (this.props.newRequestFields.protocol === "ws://") { SubmitButtonClassName += " ws" }
+    if (/wss?:\/\//.test(this.props.newRequestFields.protocol)) { SubmitButtonClassName += " ws" }
     else if (this.props.newRequestFields.graphQL) { SubmitButtonClassName += " gql" }
     else { SubmitButtonClassName += " http" }
 
@@ -190,15 +190,18 @@ class ComposerNewRequest extends Component {
         />
 
         {
-          this.props.newRequestFields.method && this.props.newRequestFields.protocol !== 'ws://' &&
+          this.props.newRequestFields.method && !/wss?:\/\//.test(this.props.newRequestFields.protocol) &&
           <CookieEntryForm
             newRequestCookies={this.props.newRequestCookies}
             newRequestBody={this.props.newRequestBody}
             setNewRequestCookies={this.props.setNewRequestCookies}
           />
         }
         {
-          !this.props.newRequestFields.graphQL && this.props.newRequestFields.method !== 'GET' && this.props.newRequestFields.protocol !== 'ws://' &&
+          !this.props.newRequestFields.graphQL
+          && this.props.newRequestFields.method !== 'GET'
+          && !/wss?:\/\//.test(this.props.newRequestFields.protocol)
+          &&
           <BodyEntryForm
             newRequestHeaders={this.props.newRequestHeaders}
             newRequestBody={this.props.newRequestBody}

src/client/components/composer/NewRequest/FieldEntryForm.jsx

@@ -24,8 +24,8 @@ class FieldEntryForm extends Component {
         let grabbedProtocol, afterProtocol;
         if (!!this.props.newRequestFields.url) {
           grabbedProtocol = this.props.newRequestFields.url.match(/(https?:\/\/)|(wss?:\/\/)/) !== null
-          ? this.props.newRequestFields.url.match(/(https?:\/\/)|(wss?:\/\/)/)[0]
-          : ""
+            ? this.props.newRequestFields.url.match(/(https?:\/\/)|(wss?:\/\/)/)[0]
+            : ""
           afterProtocol = this.props.newRequestFields.url.substring(grabbedProtocol.length, this.props.newRequestFields.url.length)
         }
         else afterProtocol = ''
@@ -151,7 +151,7 @@ class FieldEntryForm extends Component {
 
           {/* below conditional method selection rendering for http/s */}
           {
-            this.props.newRequestFields.protocol !== 'ws://' && !this.props.newRequestFields.graphQL &&
+            !/wss?:\/\//.test(this.props.newRequestFields.protocol) && !this.props.newRequestFields.graphQL &&
 
             <select style={{ display: 'block' }} value={this.props.newRequestFields.method} className={'composer_method_select http'} onChange={(e) => {
               this.onChangeHandler(e, 'method')
@@ -165,7 +165,7 @@ class FieldEntryForm extends Component {
           }
           {/* below conditional method selection rendering for graphql */}
           {
-            this.props.newRequestFields.protocol !== 'ws://' && this.props.newRequestFields.graphQL &&
+            !/wss?:\/\//.test(this.props.newRequestFields.protocol) && this.props.newRequestFields.graphQL &&
 
             <select style={{ display: 'block' }} value={this.props.newRequestFields.method} className={'composer_method_select gql'} onChange={(e) => {
               this.onChangeHandler(e, 'method')

src/client/components/composer/NewRequest/ProtocolSelect.jsx

@@ -17,7 +17,7 @@ class ProtocolSelect extends Component {
     const WSStyleClasses = classNames({
       composer_protocol_button: true,
       ws: true,
-      'composer_protocol_button-selected_ws': this.props.currentProtocol === 'ws://',
+      'composer_protocol_button-selected_ws': /wss?:\/\//.test(this.props.currentProtocol),
     });
     const GQLStyleClasses = classNames({
       composer_protocol_button: true,

src/client/components/containers/SingleReqResContainer.jsx

@@ -35,7 +35,7 @@ class SingleReqResContainer extends Component {
   render() {
     const contentBody = [];
 
-    if (this.props.content.protocol === 'ws://') {
+    if (/wss?:\/\//.test(this.props.content.protocol)) {
       contentBody.push(<WebSocketWindow
         key={0}
         outgoingMessages={this.props.content.request.messages}
@@ -138,7 +138,9 @@ class SingleReqResContainer extends Component {
 
                 <span className="tertiary-title">{this.props.content.connectionType}</span>
 
-                {this.props.content.request.method === "SUBSCRIPTION" || this.props.content.protocol === "ws://"  || this.props.content.connectionType === "SSE" ? <></> :
+                {this.props.content.request.method === "SUBSCRIPTION"
+                  || /wss?:\/\//.test(this.props.content.protocol)
+                  || this.props.content.connectionType === "SSE" ? <></> :
                   <span className="tertiary-title roundtrip" title="The amount of time it takes to recieve response">
                     Roundtrip: {(this.props.content.connection === "open" || this.props.content.connection === 'pending' || this.props.content.timeReceived === null) ? 0 : this.props.content.timeReceived - this.props.content.timeSent} ms
                   </span>

src/client/components/display/RequestTabs.jsx

@@ -63,7 +63,7 @@ class RequestTabs extends Component {
 
     else if (this.state.openTab === "Request Headers") {
       tabContentShown = [];
-      if (this.props.requestContent.headers.length > 0) {
+      if (this.props.requestContent.headers && this.props.requestContent.headers.length > 0) {
         this.props.requestContent.headers.forEach((cur, idx) => {
           tabContentShown.push(
             <div className={"grid-2"} key={idx}>
@@ -80,7 +80,7 @@ class RequestTabs extends Component {
 
     else if (this.state.openTab === "Request Cookies") {
       tabContentShown = [];
-      if (this.props.requestContent.cookies.length > 0) {
+      if (this.props.requestContent.cookies && this.props.requestContent.cookies.length > 0) {
         this.props.requestContent.cookies.forEach((cur, idx) => {
           tabContentShown.push(
             <div className={"grid-2"} key={idx}>
@@ -98,9 +98,9 @@ class RequestTabs extends Component {
     return (
       <div className={"request_tabs_container"}>
         <ul className={"tab_list"}>
-          <Tab onTabSelected={this.handleTabSelect} tabName={headers} openTab={this.state.openTab}/>
-          <Tab onTabSelected={this.handleTabSelect} tabName={cookies} openTab={this.state.openTab}/>
-          <Tab onTabSelected={this.handleTabSelect} tabName={body} openTab={this.state.openTab}/>
+          <Tab onTabSelected={this.handleTabSelect} tabName={headers} openTab={this.state.openTab} />
+          <Tab onTabSelected={this.handleTabSelect} tabName={cookies} openTab={this.state.openTab} />
+          <Tab onTabSelected={this.handleTabSelect} tabName={body} openTab={this.state.openTab} />
           {
             this.props.requestContent.bodyType === "GQL" &&
             <Tab onTabSelected={this.handleTabSelect} tabName={variables} openTab={this.state.openTab} />

src/client/components/display/ResponseSubscriptionDisplay.jsx

@@ -9,7 +9,7 @@ import { WebSocketLink } from 'apollo-link-ws';
 
 const ResponseSubscriptionDisplay = ({ content, reqResUpdate }) => {
   const { body, bodyVariables } = content.request;
-  const uri = content.protocol === /wss?:\/\// ? content.url : content.url.replace(content.protocol, 'ws://');
+  const uri = /wss?:\/\//.test(content.protocol) ? content.url : content.url.replace(content.protocol, 'ws://');
 
   const link = new WebSocketLink({
     uri,

src/client/controllers/reqResController.js

@@ -48,7 +48,7 @@ const connectionController = {
 
     if (reqResObj.request.method === 'SUBSCRIPTION') graphQLController.openSubscription(reqResObj);
     else if (reqResObj.graphQL) graphQLController.openGraphQLConnection(reqResObj);
-    else if (reqResObj.protocol === 'ws://') wsController.openWSconnection(reqResObj, this.openConnectionArray);
+    else if (/wss?:\/\//.test(reqResObj.protocol)) wsController.openWSconnection(reqResObj, this.openConnectionArray);
     else httpController.openHTTPconnection(reqResObj, this.openConnectionArray);
   },