From 1fc53bdeb8ea97c16b0aaeb3baceff61c3ddcef7 Mon Sep 17 00:00:00 2001
From: Siddharth Gelera <ahoy@barelyhuman.dev>
Date: Tue, 16 Sep 2025 12:16:16 +0530
Subject: [PATCH] feat: ws tab specific additions

close tab should close connection
`ws` shown in the tab
---
 .../RequestTabs/RequestTab/index.js           | 38 ++++++++++++++++---
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
index fe574fdaa..2da4ed79e 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useRef, Fragment } from 'react';
+import React, { useCallback, useState, useRef, Fragment } from 'react';
 import get from 'lodash/get';
 import { closeTabs, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
 import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
@@ -18,6 +18,7 @@ import NewRequest from 'components/Sidebar/NewRequest/index';
 import CloseTabIcon from './CloseTabIcon';
 import DraftTabIcon from './DraftTabIcon';
 import { flattenItems } from 'utils/collections/index';
+import { closeWsConnection } from 'utils/network/index';
 
 const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUid }) => {
   const dispatch = useDispatch();
@@ -66,9 +67,15 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
   };
 
   const getMethodColor = (method = '') => {
-    return theme.request.methods[method.toLocaleLowerCase()];
+    const colorMap = {
+      ...theme.request.methods,
+      ...theme.request
+    }
+    return colorMap[method.toLocaleLowerCase()];
   };
 
+  
+
 
   const folder = folderUid ? findItemInCollection(collection, folderUid) : null;
   if (['collection-settings', 'collection-overview', 'folder-settings', 'variables', 'collection-runner', 'security-settings'].includes(tab.type)) {
@@ -90,6 +97,19 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
 
   const item = findItemInCollection(collection, tab.uid);
 
+  const getMethodText = useCallback((item)=>{
+    if(!item) return 
+    const isGrpc = item.type === 'grpc-request';
+    const isWS = item.type === 'ws-request';
+    if(!isWS && !isGrpc){
+      return item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
+    }
+    if(isGrpc){
+      return "gRPC"
+    }
+    return "WS";
+  },[item])
+
   if (!item) {
     return (
       <StyledWrapper
@@ -109,7 +129,9 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
   }
 
   const isGrpc = item.type === 'grpc-request';
-  const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
+  const isWS = item.type === 'ws-request';
+  const method = getMethodText(item)
+  
 
   return (
     <StyledWrapper className="flex items-center justify-between tab-container px-1">
@@ -118,6 +140,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
           item={item}
           onCancel={() => setShowConfirmClose(false)}
           onCloseWithoutSave={() => {
+            isWS && closeWsConnection(item.uid)
             dispatch(
               deleteRequestDraft({
                 itemUid: item.uid,
@@ -161,8 +184,8 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
           }
         }}
       >
-        <span className="tab-method uppercase" style={{ color: isGrpc ? theme.request.grpc : getMethodColor(method), fontSize: 12 }}>
-          {isGrpc ? 'gRPC' : method}
+        <span className="tab-method uppercase" style={{ color:getMethodColor(method), fontSize: 12 }}>
+          {method}
         </span>
         <span className="ml-1 tab-name" title={item.name}>
           {item.name}
@@ -180,7 +203,10 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
       <div
         className="flex px-2 close-icon-container"
         onClick={(e) => {
-          if (!item.draft) return handleCloseClick(e);
+          if (!item.draft) {
+            isWS && closeWsConnection(item.uid)
+            return handleCloseClick(e)
+          };
 
           e.stopPropagation();
           e.preventDefault();