From be6abf421f75e2955517e67c5200af46b33d3dd6 Mon Sep 17 00:00:00 2001
From: therealrinku <rinkunited2032@gmail.com>
Date: Sun, 8 Oct 2023 19:38:13 +0545
Subject: [PATCH 1/2] feat: added active query, headers and asserts count

---
 .../components/RequestPane/HttpRequestPane/index.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
index ec20514fe..8310e2f24 100644
--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
@@ -14,6 +14,7 @@ import Assertions from 'components/RequestPane/Assertions';
 import Script from 'components/RequestPane/Script';
 import Tests from 'components/RequestPane/Tests';
 import StyledWrapper from './StyledWrapper';
+import { get } from 'lodash';
 
 const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
   const dispatch = useDispatch();
@@ -76,17 +77,28 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
     });
   };
 
+  // get the length of active params, headers and asserts
+  const params = item.draft ? get(item, 'draft.request.params') : get(item, 'request.params');
+  const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
+  const assertions = item.draft ? get(item, 'draft.request.assertions') : get(item, 'request.assertions');
+
+  const activeParamsLength = params.filter((param) => param.enabled).length;
+  const activeHeadersLength = headers.filter((header) => header.enabled).length;
+  const activeAssertionsLength = assertions.filter((assertion) => assertion.enabled).length;
+
   return (
     <StyledWrapper className="flex flex-col h-full relative">
       <div className="flex flex-wrap items-center tabs" role="tablist">
         <div className={getTabClassname('params')} role="tab" onClick={() => selectTab('params')}>
           Query
+          {activeParamsLength > 0 && <sup className="ml-1 font-medium">{activeParamsLength}</sup>}
         </div>
         <div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>
           Body
         </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
           Headers
+          {activeHeadersLength > 0 && <sup className="ml-1 font-medium">{activeHeadersLength}</sup>}
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>
           Auth
@@ -99,6 +111,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         </div>
         <div className={getTabClassname('assert')} role="tab" onClick={() => selectTab('assert')}>
           Assert
+          {activeAssertionsLength > 0 && <sup className="ml-1 font-medium">{activeAssertionsLength}</sup>}
         </div>
         <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
           Tests

From 5ea9799c49cc5caa6cf58caed0a59934c7a6a2f2 Mon Sep 17 00:00:00 2001
From: therealrinku <rinkunited2032@gmail.com>
Date: Wed, 11 Oct 2023 15:34:09 +0545
Subject: [PATCH 2/2] update: active vars count added

---
 .../src/components/RequestPane/HttpRequestPane/index.js   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
index 8310e2f24..099272ce2 100644
--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
@@ -77,14 +77,19 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
     });
   };
 
-  // get the length of active params, headers and asserts
+  // get the length of active params, headers, asserts and vars
   const params = item.draft ? get(item, 'draft.request.params') : get(item, 'request.params');
   const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
   const assertions = item.draft ? get(item, 'draft.request.assertions') : get(item, 'request.assertions');
+  const requestVars = item.draft ? get(item, 'draft.request.vars.req') : get(item, 'request.vars.req');
+  const responseVars = item.draft ? get(item, 'draft.request.vars.res') : get(item, 'request.vars.res');
 
   const activeParamsLength = params.filter((param) => param.enabled).length;
   const activeHeadersLength = headers.filter((header) => header.enabled).length;
   const activeAssertionsLength = assertions.filter((assertion) => assertion.enabled).length;
+  const activeVarsLength =
+    requestVars.filter((request) => request.enabled).length +
+    responseVars.filter((response) => response.enabled).length;
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
@@ -105,6 +110,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         </div>
         <div className={getTabClassname('vars')} role="tab" onClick={() => selectTab('vars')}>
           Vars
+          {activeVarsLength > 0 && <sup className="ml-1 font-medium">{activeVarsLength}</sup>}
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => selectTab('script')}>
           Script