[INS-1697] Create WebSocket Request (#5041)

* wip

* add fail safe

Co-authored-by: Mark Kim <[email protected]>

Author: 2 people

packages/insomnia/src/common/render.ts

@@ -562,6 +562,7 @@ export async function getRenderContextAncestors(base?: Request | GrpcRequest | W
   return await db.withAncestors<RenderContextAncestor>(base || null, [
     models.request.type,
     models.grpcRequest.type,
+    models.websocketRequest.type,
     models.requestGroup.type,
     models.workspace.type,
     models.project.type,

packages/insomnia/src/models/index.ts

@@ -35,6 +35,7 @@ import * as _stats from './stats';
 import * as _unitTest from './unit-test';
 import * as _unitTestResult from './unit-test-result';
 import * as _unitTestSuite from './unit-test-suite';
+import * as _websocketRequest from './websocket-request';
 import * as _workspace from './workspace';
 import * as _workspaceMeta from './workspace-meta';
 
@@ -75,6 +76,7 @@ export const protoFile = _protoFile;
 export const protoDirectory = _protoDirectory;
 export const grpcRequest = _grpcRequest;
 export const grpcRequestMeta = _grpcRequestMeta;
+export const websocketRequest = _websocketRequest;
 export const workspace = _workspace;
 export const workspaceMeta = _workspaceMeta;
 
@@ -108,6 +110,7 @@ export function all() {
     protoDirectory,
     grpcRequest,
     grpcRequestMeta,
+    websocketRequest,
   ] as const;
 }
 

packages/insomnia/src/models/websocket-request.ts

@@ -0,0 +1,46 @@
+import { database } from '../common/database';
+import type { BaseModel } from '.';
+
+export const name = 'WebSocket Request';
+
+export const type = 'WebSocketRequest';
+
+export const prefix = 'ws-req';
+
+export const canDuplicate = true;
+
+export const canSync = false;
+
+export interface BaseWebSocketRequest {
+  name: string;
+}
+
+export type WebSocketRequest = BaseWebSocketRequest & BaseModel;
+
+export const isWebSocketRequest = (model: Pick<BaseModel, 'type'>): model is WebSocketRequest => (
+  model.type === type
+);
+
+export const init = (): BaseWebSocketRequest => ({
+  name: 'New WebSocket Request',
+});
+
+export const migrate = (doc: WebSocketRequest) => doc;
+
+export const create = (patch: Partial<WebSocketRequest> = {}) => {
+  if (!patch.parentId) {
+    throw new Error('TODO');
+  }
+  return database.docCreate<WebSocketRequest>(type, patch);
+};
+
+export const remove = (obj: WebSocketRequest) => database.remove(obj);
+
+export const update = (
+  obj: WebSocketRequest,
+  patch: Partial<WebSocketRequest> = {}
+) => database.docUpdate(obj, patch);
+
+export const getById = (_id: string) => database.getWhere<WebSocketRequest>(type, { _id });
+
+export const all = () => database.all<WebSocketRequest>(type);

packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx

@@ -47,7 +47,10 @@ export const RequestGroupActionsDropdown = forwardRef<RequestGroupActionsDropdow
 
   const create = useCallback((requestType: CreateRequestType) => {
     if (activeWorkspaceId) {
-      createRequest({ parentId: requestGroup._id, requestType, workspaceId: activeWorkspaceId });
+      createRequest({
+        parentId: requestGroup._id,
+        requestType, workspaceId: activeWorkspaceId,
+      });
     }
   }, [activeWorkspaceId, requestGroup._id]);
 
@@ -143,6 +146,10 @@ export const RequestGroupActionsDropdown = forwardRef<RequestGroupActionsDropdow
         <i className="fa fa-plus-circle" />New gRPC Request
       </DropdownItem>
 
+      <DropdownItem value="WebSocket" onClick={create}>
+        <i className="fa fa-plus-circle" />WebSocket Request
+      </DropdownItem>
+
       <DropdownItem onClick={createGroup}>
         <i className="fa fa-folder" /> New Folder
         <DropdownHint keyBindings={hotKeyRegistry[hotKeyRefs.REQUEST_SHOW_CREATE_FOLDER.id]} />

packages/insomnia/src/ui/components/sidebar/sidebar-create-dropdown.tsx

@@ -56,6 +56,10 @@ export const SidebarCreateDropdown: FC<Props> = ({ right }) => {
         <i className="fa fa-plus-circle" />gRPC Request
       </DropdownItem>
 
+      <DropdownItem value="WebSocket" onClick={create}>
+        <i className="fa fa-plus-circle" />WebSocket Request
+      </DropdownItem>
+
       <DropdownItem onClick={createGroup}>
         <i className="fa fa-folder" />New Folder
         <DropdownHint keyBindings={hotKeyRegistry[hotKeyRefs.REQUEST_SHOW_CREATE_FOLDER.id]} />

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

@@ -0,0 +1,5 @@
+import React, { FC } from 'react';
+
+export const WebSocketRequestPane: FC = () => {
+  return <div>WebSocket Request</div>;
+};

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

@@ -0,0 +1,5 @@
+import React, { FC } from 'react';
+
+export const WebSocketResponsePane: FC = () => {
+  return <div>WebSocket Response</div>;
+};

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

@@ -5,6 +5,7 @@ import { isGrpcRequest } from '../../models/grpc-request';
 import { isRemoteProject } from '../../models/project';
 import { Request, RequestHeader } from '../../models/request';
 import type { Response } from '../../models/response';
+import { isWebSocketRequest } from '../../models/websocket-request';
 import { isCollection, isDesign } from '../../models/workspace';
 import { VCS } from '../../sync/vcs/vcs';
 import {
@@ -27,6 +28,8 @@ import { RequestPane } from './panes/request-pane';
 import { ResponsePane } from './panes/response-pane';
 import { SidebarChildren } from './sidebar/sidebar-children';
 import { SidebarFilter } from './sidebar/sidebar-filter';
+import { WebSocketRequestPane } from './websocket-request-pane';
+import { WebSocketResponsePane } from './websocket-response-pane';
 import { WorkspacePageHeader } from './workspace-page-header';
 import type { HandleActivityChange } from './wrapper';
 
@@ -114,42 +117,56 @@ export const WrapperDebug: FC<Props> = ({
         : null}
       renderPaneOne={activeWorkspace ?
         <ErrorBoundary showAlert>
-          {activeRequest && isGrpcRequest(activeRequest) ?
-            <GrpcRequestPane
-              activeRequest={activeRequest}
-              environmentId={activeEnvironment ? activeEnvironment._id : ''}
-              workspaceId={activeWorkspace._id}
-              forceRefreshKey={forceRefreshKey}
-              settings={settings}
-            />
-            :
-            <RequestPane
-              environmentId={activeEnvironment ? activeEnvironment._id : ''}
-              forceRefreshCounter={forceRefreshKey}
-              forceUpdateRequest={handleForceUpdateRequest}
-              forceUpdateRequestHeaders={handleForceUpdateRequestHeaders}
-              handleImport={handleImport}
-              headerEditorKey={headerEditorKey}
-              request={activeRequest}
-              settings={settings}
-              updateRequestMimeType={handleUpdateRequestMimeType}
-              workspace={activeWorkspace}
-            />}
+          {activeRequest && (
+            isGrpcRequest(activeRequest) ? (
+              <GrpcRequestPane
+                activeRequest={activeRequest}
+                environmentId={activeEnvironment ? activeEnvironment._id : ''}
+                workspaceId={activeWorkspace._id}
+                forceRefreshKey={forceRefreshKey}
+                settings={settings}
+              />
+            ) : (
+              isWebSocketRequest(activeRequest) ? (
+                <WebSocketRequestPane />
+              ) : (
+                <RequestPane
+                  environmentId={activeEnvironment ? activeEnvironment._id : ''}
+                  forceRefreshCounter={forceRefreshKey}
+                  forceUpdateRequest={handleForceUpdateRequest}
+                  forceUpdateRequestHeaders={handleForceUpdateRequestHeaders}
+                  handleImport={handleImport}
+                  headerEditorKey={headerEditorKey}
+                  request={activeRequest}
+                  settings={settings}
+                  updateRequestMimeType={handleUpdateRequestMimeType}
+                  workspace={activeWorkspace}
+                />
+              )
+            )
+          )}
         </ErrorBoundary>
         : null}
       renderPaneTwo={
         <ErrorBoundary showAlert>
-          {activeRequest && isGrpcRequest(activeRequest) ?
-            <GrpcResponsePane
-              activeRequest={activeRequest}
-              forceRefreshKey={forceRefreshKey}
-            />
-            :
-            <ResponsePane
-              handleSetFilter={handleSetResponseFilter}
-              request={activeRequest}
-              handleSetActiveResponse={handleSetActiveResponse}
-            />}
+          {activeRequest && (
+            isGrpcRequest(activeRequest) ? (
+              <GrpcResponsePane
+                activeRequest={activeRequest}
+                forceRefreshKey={forceRefreshKey}
+              />
+            ) : (
+              isWebSocketRequest(activeRequest) ? (
+                <WebSocketResponsePane />
+              ) : (
+                <ResponsePane
+                  handleSetFilter={handleSetResponseFilter}
+                  request={activeRequest}
+                  handleSetActiveResponse={handleSetActiveResponse}
+                />
+              )
+            )
+          )}
         </ErrorBoundary>}
     />
   );

packages/insomnia/src/ui/hooks/create-request.ts

@@ -50,7 +50,7 @@ export const setActiveRequest = async (
   });
 };
 
-export type CreateRequestType = 'HTTP' | 'gRPC' | 'GraphQL';
+export type CreateRequestType = 'HTTP' | 'gRPC' | 'GraphQL' | 'WebSocket';
 type RequestCreator = (input: {
   parentId: string;
   requestType: CreateRequestType;
@@ -110,6 +110,16 @@ export const createRequest: RequestCreator = async ({
       break;
     }
 
+    case 'WebSocket': {
+      const request = await models.websocketRequest.create({
+        parentId,
+        name: 'New WebSocket Request',
+      });
+      models.stats.incrementCreatedRequests();
+      setActiveRequest(request._id, workspaceId);
+      break;
+    }
+
     default:
       unreachableCase(
         requestType,

packages/insomnia/src/ui/redux/modules/entities.ts

@@ -27,6 +27,7 @@ import { Stats } from '../../../models/stats';
 import { UnitTest } from '../../../models/unit-test';
 import { UnitTestResult } from '../../../models/unit-test-result';
 import { UnitTestSuite } from '../../../models/unit-test-suite';
+import { WebSocketRequest } from '../../../models/websocket-request';
 import { Workspace } from '../../../models/workspace';
 import { WorkspaceMeta } from '../../../models/workspace-meta';
 
@@ -70,6 +71,7 @@ export interface EntitiesState {
   protoDirectories: EntityRecord<ProtoDirectory>;
   grpcRequests: EntityRecord<GrpcRequest>;
   grpcRequestMetas: EntityRecord<GrpcRequestMeta>;
+  websocketRequests: EntityRecord<WebSocketRequest>;
 }
 
 export const initialEntitiesState: EntitiesState = {
@@ -98,6 +100,7 @@ export const initialEntitiesState: EntitiesState = {
   protoDirectories: {},
   grpcRequests: {},
   grpcRequestMetas: {},
+  websocketRequests: {},
 };
 
 export function reducer(state = initialEntitiesState, action: any) {
@@ -108,6 +111,9 @@ export function reducer(state = initialEntitiesState, action: any) {
 
       for (const doc of docs) {
         const referenceName = getReducerName(doc.type);
+        if (!(freshState as any)[referenceName]) {
+          (freshState as any)[referenceName] = {};
+        }
         (freshState as any)[referenceName][doc._id] = doc;
       }
 
@@ -194,5 +200,6 @@ export async function allDocs() {
     ...(await models.protoDirectory.all()),
     ...(await models.grpcRequest.all()),
     ...(await models.grpcRequestMeta.all()),
+    ...(await models.websocketRequest.all()),
   ];
 }

packages/insomnia/src/ui/redux/selectors.ts

@@ -311,7 +311,7 @@ export const selectActiveWorkspaceEntities = createSelector(
 
 export const selectPinnedRequests = createSelector(selectEntitiesLists, entities => {
   const pinned: Record<string, boolean> = {};
-  const requests = [...entities.requests, ...entities.grpcRequests];
+  const requests = [...entities.requests, ...entities.grpcRequests, ...entities.websocketRequests];
   const requestMetas = [...entities.requestMetas, ...entities.grpcRequestMetas];
 
   // Default all to unpinned
@@ -341,13 +341,20 @@ export const selectActiveRequest = createSelector(
   selectActiveWorkspaceMeta,
   (entities, workspaceMeta) => {
     const id = workspaceMeta?.activeRequestId || 'n/a';
+
     if (id in entities.requests) {
       return entities.requests[id];
-    } else if (id in entities.grpcRequests) {
+    }
+
+    if (id in entities.grpcRequests) {
       return entities.grpcRequests[id];
-    } else {
-      return null;
     }
+
+    if (id in entities.websocketRequests) {
+      return entities.websocketRequests[id];
+    }
+
+    return null;
   },
 );