Websocket Support (#159)

src-web/components/core/HttpMethodTag.tsx

@@ -1,15 +1,15 @@
-import type { GrpcRequest, HttpRequest } from '@yaakapp-internal/models';
+import type { GrpcRequest, HttpRequest, WebsocketRequest } from '@yaakapp-internal/models';
 import classNames from 'classnames';
 
 interface Props {
-  request: HttpRequest | GrpcRequest;
+  request: HttpRequest | GrpcRequest | WebsocketRequest;
   className?: string;
   shortNames?: boolean;
 }
 
 const methodNames: Record<string, string> = {
-  get: ' GET',
-  put: ' PUT',
+  get: 'GET',
+  put: 'PUT',
   post: 'POST',
   patch: 'PTCH',
   delete: 'DELE',
@@ -24,7 +24,11 @@ export function HttpMethodTag({ request, className }: Props) {
       ? 'GQL'
       : request.model === 'grpc_request'
         ? 'GRPC'
-        : request.method;
+        : request.model === 'websocket_request'
+          ? 'WS'
+          : (methodNames[request.method.toLowerCase()] ?? request.method.slice(0, 4));
+
+  const paddedMethod = method.padStart(4, ' ').toUpperCase();
 
   return (
     <span
@@ -34,7 +38,7 @@ export function HttpMethodTag({ request, className }: Props) {
         'pt-[0.25em]', // Fix for monospace font not vertically centering
       )}
     >
-      {(methodNames[method.toLowerCase()] ?? method.slice(0, 4)).toUpperCase()}
+      {paddedMethod}
     </span>
   );
 }

src-web/components/core/StatusTag.tsx

@@ -1,8 +1,8 @@
-import type { HttpResponse } from '@yaakapp-internal/models';
+import type {HttpResponse, WebsocketConnection} from '@yaakapp-internal/models';
 import classNames from 'classnames';
 
 interface Props {
-  response: HttpResponse;
+  response: HttpResponse | WebsocketConnection;
   className?: string;
   showReason?: boolean;
 }
@@ -28,7 +28,7 @@ export function StatusTag({ response, className, showReason }: Props) {
       )}
     >
       {isInitializing ? 'CONNECTING' : label}{' '}
-      {showReason && response.statusReason && response.statusReason}
+      {showReason && 'statusReason' in response ? response.statusReason : null}
     </span>
   );
 }