Add WebSocketRequest to sidebar and update types (#5048)

Kong · Sep 9, 2022 · 815d978 · 815d978
1 parent fb08a08
commit 815d978
Show file tree

Hide file tree

Showing 12 changed files with 111 additions and 59 deletions.
diff --git a/packages/insomnia/src/models/helpers/request-operations.ts b/packages/insomnia/src/models/helpers/request-operations.ts
@@ -1,17 +1,23 @@
 import { GrpcRequest, isGrpcRequest, isGrpcRequestId } from '../grpc-request';
 import * as models from '../index';
 import { Request } from '../request';
+import { isWebSocketRequest, WebSocketRequest } from '../websocket-request';
 
 export function getById(requestId: string): Promise<Request | GrpcRequest | null> {
   return isGrpcRequestId(requestId)
     ? models.grpcRequest.getById(requestId)
     : models.request.getById(requestId);
 }
 
-export function remove(request: Request | GrpcRequest) {
-  return isGrpcRequest(request)
-    ? models.grpcRequest.remove(request)
-    : models.request.remove(request);
+export function remove(request: Request | GrpcRequest | WebSocketRequest) {
+  if (isGrpcRequest(request)) {
+    return models.grpcRequest.remove(request);
+  }
+  if (isWebSocketRequest(request)) {
+    return models.websocketRequest.remove(request);
+  } else {
+    return models.request.remove(request);
+  }
 }
 
 export function update<T extends object>(request: T, patch: Partial<T> = {}): Promise<T> {

diff --git a/packages/insomnia/src/models/websocket-request.ts b/packages/insomnia/src/models/websocket-request.ts
@@ -14,9 +14,10 @@ export const canSync = false;
 export interface BaseWebSocketRequest {
   name: string;
   url: string;
+  metaSortKey: number;
 }
 
-export type WebSocketRequest = BaseWebSocketRequest & BaseModel;
+export type WebSocketRequest = BaseModel & BaseWebSocketRequest & { type: typeof type };
 
 export const isWebSocketRequest = (model: Pick<BaseModel, 'type'>): model is WebSocketRequest => (
   model.type === type
@@ -25,6 +26,7 @@ export const isWebSocketRequest = (model: Pick<BaseModel, 'type'>): model is Web
 export const init = (): BaseWebSocketRequest => ({
   name: 'New WebSocket Request',
   url: '',
+  metaSortKey: -1 * Date.now(),
 });
 
 export const migrate = (doc: WebSocketRequest) => doc;

diff --git a/packages/insomnia/src/ui/components/dropdowns/auth-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/auth-dropdown.tsx
@@ -17,6 +17,7 @@ import {
 } from '../../../common/constants';
 import * as models from '../../../models';
 import { update } from '../../../models/helpers/request-operations';
+import { isRequest } from '../../../models/request';
 import { selectActiveRequest } from '../../redux/selectors';
 import { Dropdown } from '../base/dropdown/dropdown';
 import { DropdownButton } from '../base/dropdown/dropdown-button';
@@ -46,8 +47,7 @@ export const AuthDropdown: FC = () => {
       return;
     }
 
-    if (!('authentication' in activeRequest)) {
-      // gRPC Requests don't have `authentication`
+    if (!isRequest(activeRequest)) {
       return;
     }
 
@@ -86,7 +86,7 @@ export const AuthDropdown: FC = () => {
     if (!activeRequest) {
       return false;
     }
-    if (!('authentication' in activeRequest)) {
+    if (!isRequest(activeRequest)) {
       return false;
     }
     return type === (activeRequest.authentication.type || AUTH_NONE);

diff --git a/packages/insomnia/src/ui/components/dropdowns/content-type-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/content-type-dropdown.tsx
@@ -15,6 +15,7 @@ import {
   CONTENT_TYPE_YAML,
   getContentTypeName,
 } from '../../../common/constants';
+import { isWebSocketRequest } from '../../../models/websocket-request';
 import { selectActiveRequest } from '../../redux/selectors';
 import { Dropdown } from '../base/dropdown/dropdown';
 import { DropdownButton } from '../base/dropdown/dropdown-button';
@@ -38,7 +39,9 @@ const MimeTypeItem: FC<{
   mimeType,
   onChange,
 }) => {
-  const activeRequest = useSelector(selectActiveRequest);
+  const request = useSelector(selectActiveRequest);
+  const activeRequest = request && !isWebSocketRequest(request) ? request : null;
+
   const handleChangeMimeType = useCallback(async (mimeType: string | null) => {
     if (!activeRequest) {
       return;
@@ -91,7 +94,8 @@ const MimeTypeItem: FC<{
 MimeTypeItem.displayName = DropdownItem.name;
 
 export const ContentTypeDropdown: FC<Props> = ({ onChange }) => {
-  const activeRequest = useSelector(selectActiveRequest);
+  const request = useSelector(selectActiveRequest);
+  const activeRequest = request && !isWebSocketRequest(request) ? request : null;
 
   if (!activeRequest) {
     return null;

diff --git a/packages/insomnia/src/ui/components/sidebar/dnd.tsx b/packages/insomnia/src/ui/components/sidebar/dnd.tsx
@@ -7,13 +7,14 @@ import * as models from '../../../models';
 import { GrpcRequest } from '../../../models/grpc-request';
 import { Request } from '../../../models/request';
 import { RequestGroup } from '../../../models/request-group';
+import { WebSocketRequest } from '../../../models/websocket-request';
 
 export type DnDDragProps = ReturnType<typeof sourceCollect>;
 export type DnDDropProps = ReturnType<typeof targetCollect>;
 export type DnDProps =  DnDDragProps & DnDDropProps;
 
 export interface DragObject {
-  item?: GrpcRequest | Request | RequestGroup;
+  item?: GrpcRequest | Request | WebSocketRequest | RequestGroup;
 }
 
 export const sourceCollect = (connect: DragSourceConnector, monitor: DragSourceMonitor) => ({

diff --git a/packages/insomnia/src/ui/components/sidebar/sidebar-children.tsx b/packages/insomnia/src/ui/components/sidebar/sidebar-children.tsx
@@ -2,10 +2,11 @@ import React, { FC, Fragment } from 'react';
 import ReactDOM from 'react-dom';
 import { useSelector } from 'react-redux';
 
-import { GrpcRequest, isGrpcRequest } from '../../../models/grpc-request';
+import { GrpcRequest } from '../../../models/grpc-request';
 import * as models from '../../../models/index';
-import { isRequest, Request } from '../../../models/request';
-import type { RequestGroup } from '../../../models/request-group';
+import { Request } from '../../../models/request';
+import { isRequestGroup, RequestGroup } from '../../../models/request-group';
+import { WebSocketRequest } from '../../../models/websocket-request';
 import { updateRequestMetaByParentId } from '../../hooks/create-request';
 import { selectActiveRequest, selectActiveWorkspaceMeta } from '../../redux/selectors';
 import { selectSidebarChildren } from '../../redux/sidebar-selectors';
@@ -14,7 +15,7 @@ import { SidebarRequestGroupRow } from './sidebar-request-group-row';
 import { SidebarRequestRow } from './sidebar-request-row';
 
 export interface Child {
-  doc: Request | GrpcRequest | RequestGroup;
+  doc: Request | GrpcRequest | WebSocketRequest | RequestGroup;
   children: Child[];
   collapsed: boolean;
   hidden: boolean;
@@ -50,16 +51,37 @@ export const SidebarChildren: FC<Props> = ({
     updateRequestMetaByParentId(requestId, { lastActive: Date.now() });
   };
 
-  const RecursiveSidebarRows: FC<RecursiveSidebarRowsProps> = ({ rows, isInPinnedList }) => {
+  const RecursiveSidebarRows: FC<RecursiveSidebarRowsProps> = ({
+    rows,
+    isInPinnedList,
+  }) => {
     const activeRequest = useSelector(selectActiveRequest);
     const activeRequestId = activeRequest ? activeRequest._id : 'n/a';
 
     return (
       <>
-        {rows.map(row => (!isInPinnedList && row.hidden)
-          ? null
-          : (isRequest(row.doc) || isGrpcRequest(row.doc))
-            ? (
+        {rows
+          .filter(row => !(!isInPinnedList && row.hidden))
+          .map(row => {
+            if (isRequestGroup(row.doc)) {
+              return (
+                <SidebarRequestGroupRow
+                  key={row.doc._id}
+                  filter={filter || ''}
+                  isActive={hasActiveChild(row.children, activeRequestId)}
+                  isCollapsed={row.collapsed}
+                  requestGroup={row.doc}
+                >
+                  {row.children.filter(Boolean).length > 0 ? (
+                    <RecursiveSidebarRows
+                      isInPinnedList={isInPinnedList}
+                      rows={row.children}
+                    />
+                  ) : null}
+                </SidebarRequestGroupRow>
+              );
+            }
+            return (
               <SidebarRequestRow
                 key={row.doc._id}
                 filter={isInPinnedList ? '' : filter || ''}
@@ -70,19 +92,12 @@ export const SidebarChildren: FC<Props> = ({
                 disableDragAndDrop={isInPinnedList}
                 request={row.doc}
               />
-            ) : (
-              <SidebarRequestGroupRow
-                key={row.doc._id}
-                filter={filter || ''}
-                isActive={hasActiveChild(row.children, activeRequestId)}
-                isCollapsed={row.collapsed}
-                requestGroup={row.doc}
-              >
-                {row.children.filter(Boolean).length > 0 ? <RecursiveSidebarRows isInPinnedList={isInPinnedList} rows={row.children} /> : null}
-              </SidebarRequestGroupRow>
-            ))}
-      </>);
+            );
+          })}
+      </>
+    );
   };
+
   const { all, pinned } = sidebarChildren;
   const showSeparator = sidebarChildren.pinned.length > 0;
   const contextMenuPortal = ReactDOM.createPortal(

diff --git a/packages/insomnia/src/ui/components/sidebar/sidebar-request-row.tsx b/packages/insomnia/src/ui/components/sidebar/sidebar-request-row.tsx
@@ -7,8 +7,9 @@ import { CONTENT_TYPE_GRAPHQL } from '../../../common/constants';
 import { getMethodOverrideHeader } from '../../../common/misc';
 import { GrpcRequest, isGrpcRequest } from '../../../models/grpc-request';
 import * as requestOperations from '../../../models/helpers/request-operations';
-import { Request } from '../../../models/request';
+import { isRequest, Request } from '../../../models/request';
 import { RequestGroup } from '../../../models/request-group';
+import { isWebSocketRequest, WebSocketRequest } from '../../../models/websocket-request';
 import { useNunjucks } from '../../context/nunjucks/use-nunjucks';
 import { createRequest } from '../../hooks/create-request';
 import { selectActiveEnvironment, selectActiveProject, selectActiveWorkspace } from '../../redux/selectors';
@@ -21,6 +22,7 @@ import { showModal } from '../modals/index';
 import { RequestSettingsModal } from '../modals/request-settings-modal';
 import { GrpcTag } from '../tags/grpc-tag';
 import { MethodTag } from '../tags/method-tag';
+import { WebSocketTag } from '../tags/websocket-tag';
 import { DnDProps, DragObject, dropHandleCreator, hoverHandleCreator, sourceCollect, targetCollect } from './dnd';
 
 interface RawProps {
@@ -30,7 +32,7 @@ interface RawProps {
   handleDuplicateRequest: Function;
   isActive: boolean;
   isPinned: boolean;
-  request?: Request | GrpcRequest;
+  request?: Request | GrpcRequest | WebSocketRequest;
   requestGroup?: RequestGroup;
 }
 
@@ -138,7 +140,7 @@ export const _SidebarRequestRow: FC<Props> = forwardRef(({
       return;
     }
 
-    if (isGrpcRequest(request)) {
+    if (!isRequest(request)) {
       return;
     }
 
@@ -203,12 +205,17 @@ export const _SidebarRequestRow: FC<Props> = forwardRef(({
       </li>
     );
   } else {
-    const methodTag =
-      isGrpcRequest(request) ? (
-        <GrpcTag />
-      ) : (
-        <MethodTag method={request.method} override={methodOverrideValue} />
-      );
+
+    let methodTag = null;
+
+    if (isGrpcRequest(request)) {
+      methodTag = <GrpcTag />;
+    } else if (isWebSocketRequest(request)) {
+      methodTag = <WebSocketTag />;
+    } else if (isRequest(request)) {
+      methodTag = <MethodTag method={request.method} override={methodOverrideValue} />;
+    }
+
     node = (
       <li ref={nodeRef} className={classes}>
         <div
@@ -243,17 +250,19 @@ export const _SidebarRequestRow: FC<Props> = forwardRef(({
             </div>
           </button>
           <div className="sidebar__actions">
-            <RequestActionsDropdown
-              right
-              ref={requestActionsDropdown}
-              handleDuplicateRequest={handleDuplicateRequest}
-              handleShowSettings={handleShowRequestSettings}
-              request={request}
-              isPinned={isPinned}
-              requestGroup={requestGroup}
-              activeEnvironment={activeEnvironment}
-              activeProject={activeProject}
-            />
+            {!isWebSocketRequest(request) && (
+              <RequestActionsDropdown
+                right
+                ref={requestActionsDropdown}
+                handleDuplicateRequest={handleDuplicateRequest}
+                handleShowSettings={handleShowRequestSettings}
+                request={request}
+                isPinned={isPinned}
+                requestGroup={requestGroup}
+                activeEnvironment={activeEnvironment}
+                activeProject={activeProject}
+              />
+            )}
           </div>
           {isPinned && (
             <div className="sidebar__item__icon-pin">

diff --git a/packages/insomnia/src/ui/components/tags/websocket-tag.tsx b/packages/insomnia/src/ui/components/tags/websocket-tag.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const WebSocketTag = () => (
+  <div className="tag tag--no-bg tag--small">
+    <span className="tag__inner">WS</span>
+  </div>
+);
diff --git a/packages/insomnia/src/ui/containers/app.tsx b/packages/insomnia/src/ui/containers/app.tsx
@@ -29,6 +29,7 @@ import { isNotDefaultProject } from '../../models/project';
 import { Request, updateMimeType } from '../../models/request';
 import { type RequestGroupMeta } from '../../models/request-group-meta';
 import { getByParentId as getRequestMetaByParentId } from '../../models/request-meta';
+import { isWebSocketRequest, WebSocketRequest } from '../../models/websocket-request';
 import { isWorkspace } from '../../models/workspace';
 import * as plugins from '../../plugins';
 import * as themes from '../../plugins/misc';
@@ -266,7 +267,7 @@ class App extends PureComponent<AppProps, State> {
     ];
   }
 
-  _requestDuplicate(request?: Request | GrpcRequest) {
+  _requestDuplicate(request?: Request | GrpcRequest | WebSocketRequest) {
     if (!request) {
       return;
     }
@@ -353,6 +354,11 @@ class App extends PureComponent<AppProps, State> {
       return null;
     }
 
+    if (isWebSocketRequest(this.props.activeRequest)) {
+      console.warn('Tried to update request mime-type on WebSocket request');
+      return null;
+    }
+
     const requestMeta = await models.requestMeta.getOrCreateByParentId(
       this.props.activeRequest._id,
     );

diff --git a/packages/insomnia/src/ui/context/nunjucks/use-nunjucks.ts b/packages/insomnia/src/ui/context/nunjucks/use-nunjucks.ts
@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 
 import { getRenderContext, getRenderContextAncestors, HandleGetRenderContext, HandleRender, render } from '../../../common/render';
+import { isWebSocketRequest } from '../../../models/websocket-request';
 import { NUNJUCKS_TEMPLATE_GLOBAL_PROPERTY_NAME } from '../../../templating';
 import { getKeys } from '../../../templating/utils';
 import { selectActiveEnvironment, selectActiveRequest, selectActiveWorkspace } from '../../redux/selectors';
@@ -19,7 +20,8 @@ initializeNunjucksRenderPromiseCache();
  */
 export const useNunjucks = () => {
   const environmentId = useSelector(selectActiveEnvironment)?._id;
-  const request = useSelector(selectActiveRequest);
+  const activeRequest = useSelector(selectActiveRequest);
+  const request = activeRequest && isWebSocketRequest(activeRequest) ? null : activeRequest;
   const workspace = useSelector(selectActiveWorkspace);
 
   const fetchRenderContext = useCallback(async () => {

diff --git a/packages/insomnia/src/ui/hooks/use-active-request.ts b/packages/insomnia/src/ui/hooks/use-active-request.ts
@@ -2,8 +2,7 @@ import { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 
 import * as models from '../../models';
-import { isGrpcRequest } from '../../models/grpc-request';
-import { Request } from '../../models/request';
+import { isRequest, Request } from '../../models/request';
 import { selectActiveRequest } from '../redux/selectors';
 
 export const useActiveRequest = () => {
@@ -13,8 +12,8 @@ export const useActiveRequest = () => {
     throw new Error('Tried to load null request');
   }
 
-  if (isGrpcRequest(activeRequest)) {
-    throw new Error('Loaded GrpcRequest, expected to load Request');
+  if (!isRequest(activeRequest)) {
+    throw new Error('Expected to load Request');
   }
 
   const patchRequest = useCallback(async (patch: Partial<Request>) => {

diff --git a/packages/insomnia/src/ui/redux/sidebar-selectors.ts b/packages/insomnia/src/ui/redux/sidebar-selectors.ts
@@ -6,6 +6,7 @@ import type { BaseModel } from '../../models';
 import { GrpcRequest, isGrpcRequest } from '../../models/grpc-request';
 import { isRequest, Request } from '../../models/request';
 import { isRequestGroup, RequestGroup } from '../../models/request-group';
+import { isWebSocketRequest } from '../../models/websocket-request';
 import {
   selectActiveWorkspace,
   selectActiveWorkspaceMeta,
@@ -17,7 +18,7 @@ import {
 type SidebarModel = Request | GrpcRequest | RequestGroup;
 
 export const shouldShowInSidebar = (model: BaseModel): boolean =>
-  isRequest(model) || isGrpcRequest(model) || isRequestGroup(model);
+  isRequest(model) || isWebSocketRequest(model) || isGrpcRequest(model) || isRequestGroup(model);
 
 export const shouldIgnoreChildrenOf = (model: SidebarModel): boolean =>
   isRequest(model) || isGrpcRequest(model);