[INS-1701] Create/Close Websocket Connection

packages/insomnia/src/ui/components/websocket-request-pane.tsx

@@ -1,5 +1,20 @@
-import React, { FC } from 'react';
+import React, { FunctionComponent } from 'react';
+import styled from 'styled-components';
 
-export const WebSocketRequestPane: FC = () => {
-  return <div>WebSocket Request</div>;
+import { Pane, PaneHeader } from './panes/pane';
+import { WebsocketActionBar } from './websockets/action-bar';
+
+interface Props {
+  requestId: string;
+}
+
+const StretchedPaneHeader = styled(PaneHeader)({ '&&': { alignItems: 'stretch' } });
+export const WebSocketRequestPane: FunctionComponent<Props> = ({ requestId }) => {
+  return (
+    <Pane type="request">
+      <StretchedPaneHeader>
+        <WebsocketActionBar requestId={requestId} />
+      </StretchedPaneHeader>
+    </Pane>
+  );
 };

packages/insomnia/src/ui/components/websockets/action-bar.tsx

@@ -0,0 +1,103 @@
+import React, { FunctionComponent, useEffect } from 'react';
+import styled from 'styled-components';
+
+import { ReadyState } from './types';
+import { useWSControl } from './use-ws-control';
+import { useWSReadyState } from './use-ws-ready-state';
+
+const Button = styled.button({
+  paddingRight: 'var(--padding-md)',
+  paddingLeft: 'var(--padding-md)',
+  textAlign: 'center',
+  background: 'var(--color-surprise)',
+  color: 'var(--color-font-surprise)',
+  flex: '0 0 100px',
+});
+
+interface ActionButtonProps {
+  requestId: string;
+  readyState: ReadyState;
+}
+const ActionButton: FunctionComponent<ActionButtonProps> = ({ requestId, readyState }) => {
+  const { close } = useWSControl(requestId);
+
+  if (readyState === ReadyState.CONNECTING || readyState === ReadyState.CLOSED) {
+    return (
+      <Button
+        type="submit"
+        form="websocketUrlForm"
+      >
+        Connect
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      className="urlbar__send-btn"
+      type="button"
+      onClick={() => {
+        close();
+      }}
+    >
+      Close
+    </Button>
+  );
+};
+
+interface ActionBarProps {
+  requestId: string;
+}
+
+const Form = styled.form({
+  flex: 1,
+  display: 'flex',
+});
+
+const Input = styled.input({
+  boxSizing: 'border-box',
+  width: '100%',
+  height: '100%',
+  paddingRight: 'var(--padding-md)',
+  paddingLeft: 'var(--padding-md)',
+});
+
+const WebSocketIcon = styled.span({
+  color: 'var(--color-notice)',
+  display: 'flex',
+  alignItems: 'center',
+  paddingRight: 'var(--padding-md)',
+  paddingLeft: 'var(--padding-md)',
+});
+
+export const WebsocketActionBar: FunctionComponent<ActionBarProps> = ({ requestId }) => {
+  const { connect } = useWSControl(requestId);
+  const readyState = useWSReadyState(requestId);
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const url = (formData.get('websocketUrlInput') as string) || '';
+    connect(url);
+  };
+
+  useEffect(() => {
+    window.main.webSocketConnection.close({ requestId });
+  }, [requestId]);
+
+  return (
+    <>
+      <WebSocketIcon>WS</WebSocketIcon>
+      <Form aria-disabled={readyState === ReadyState.OPEN} id="websocketUrlForm" onSubmit={handleSubmit}>
+        <Input
+          name="websocketUrlInput"
+          disabled={readyState === ReadyState.OPEN}
+          required
+          placeholder="wss://ws-feed.exchange.coinbase.com"
+          defaultValue="wss://ws-feed.exchange.coinbase.com"
+        />
+      </Form>
+      <ActionButton requestId={requestId} readyState={readyState} />
+    </>
+  );
+};

packages/insomnia/src/ui/components/websockets/types.ts

@@ -0,0 +1,6 @@
+export enum ReadyState {
+  CONNECTING = 0,
+  OPEN = 1,
+  CLOSING = 2,
+  CLOSED = 3,
+}

packages/insomnia/src/ui/components/websockets/use-ws-control.ts

@@ -0,0 +1,36 @@
+import * as models from '../../../models';
+
+interface UseWSControl {
+  send: (message: string | Blob | ArrayBufferLike | ArrayBufferView) => void;
+  connect: (url: string) => void;
+  close: (code?: number, reason?: string) => void;
+}
+
+// TODO: replace the window.main.webSocketConnection.methods with client class or object
+export function useWSControl(requestId: string): UseWSControl {
+  const send = (message: string | Blob | ArrayBufferLike | ArrayBufferView) => {
+    window.main.webSocketConnection.event.send({
+      requestId,
+      // TODO: handle types later
+      message: JSON.stringify(message),
+    });
+  };
+
+  const connect = async (url: string) => {
+    const wsr = await models.websocketRequest.getById(requestId);
+    if (wsr) {
+      await models.websocketRequest.update(wsr, { url });
+      await window.main.webSocketConnection.create({ requestId });
+    }
+  };
+
+  const close = () => {
+    window.main.webSocketConnection.close({ requestId });
+  };
+
+  return {
+    send,
+    connect,
+    close,
+  };
+}

packages/insomnia/src/ui/components/websockets/use-ws-ready-state.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+import { ReadyState } from './types';
+
+export function useWSReadyState(requestId: string): ReadyState {
+  const [readyState, setReadyState] = useState<ReadyState>(ReadyState.CONNECTING);
+
+  useEffect(() => {
+    const unsubscribe = window.main.webSocketConnection.readyState.subscribe(
+      { requestId },
+      (incomingReadyState: ReadyState) => {
+        setReadyState(incomingReadyState);
+      }
+    );
+
+    return unsubscribe;
+  }, [requestId]);
+
+  return readyState;
+}

packages/insomnia/src/ui/components/wrapper-debug.tsx

@@ -128,7 +128,7 @@ export const WrapperDebug: FC<Props> = ({
               />
             ) : (
               isWebSocketRequest(activeRequest) ? (
-                <WebSocketRequestPane />
+                <WebSocketRequestPane requestId={activeRequest._id} />
               ) : (
                 <RequestPane
                   environmentId={activeEnvironment ? activeEnvironment._id : ''}