From b441e1648e05604212657ee51112b939cd029f35 Mon Sep 17 00:00:00 2001
From: pooja-bruno <pooja@usebruno.com>
Date: Mon, 30 Jun 2025 14:48:43 +0530
Subject: [PATCH] add: type in indicator

---
 .../src/components/CollectionSettings/index.js   | 12 ++++++------
 .../src/components/FolderSettings/index.js       |  8 ++++----
 .../bruno-app/src/components/Indicators/index.js | 12 +++++++-----
 .../RequestPane/HttpRequestPane/index.js         | 16 ++++++++--------
 4 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/packages/bruno-app/src/components/CollectionSettings/index.js b/packages/bruno-app/src/components/CollectionSettings/index.js
index 8c639256b..5eeed7e38 100644
--- a/packages/bruno-app/src/components/CollectionSettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/index.js
@@ -15,7 +15,7 @@ import Test from './Tests';
 import Presets from './Presets';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
-import { ContentIndicator } from 'components/Indicators';
+import Indicator from 'components/Indicators';
 import Overview from './Overview/index';
 
 const CollectionSettings = ({ collection }) => {
@@ -147,26 +147,26 @@ const CollectionSettings = ({ collection }) => {
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
           Auth
-          {authMode !== 'none' && <ContentIndicator />}
+          {authMode !== 'none' && <Indicator />}
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
           Script
-          {hasScripts && <ContentIndicator />}
+          {hasScripts && <Indicator />}
         </div>
         <div className={getTabClassname('tests')} role="tab" onClick={() => setTab('tests')}>
           Tests
-          {hasTests && <ContentIndicator />}
+          {hasTests && <Indicator />}
         </div>
         <div className={getTabClassname('presets')} role="tab" onClick={() => setTab('presets')}>
           Presets
         </div>
         <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
           Proxy
-          {Object.keys(proxyConfig).length > 0  && <ContentIndicator />}
+          {Object.keys(proxyConfig).length > 0  && <Indicator />}
         </div>
         <div className={getTabClassname('clientCert')} role="tab" onClick={() => setTab('clientCert')}>
           Client Certificates
-          {clientCertConfig.length > 0 && <ContentIndicator />}
+          {clientCertConfig.length > 0 && <Indicator />}
         </div>
       </div>
       <section className="mt-4 h-full">{getTabPanel(tab)}</section>
diff --git a/packages/bruno-app/src/components/FolderSettings/index.js b/packages/bruno-app/src/components/FolderSettings/index.js
index 6aa1e4b57..79d4a9826 100644
--- a/packages/bruno-app/src/components/FolderSettings/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/index.js
@@ -9,7 +9,7 @@ import StyledWrapper from './StyledWrapper';
 import Vars from './Vars';
 import Documentation from './Documentation';
 import Auth from './Auth';
-import { ContentIndicator } from 'components/Indicators';
+import Indicator from 'components/Indicators';
 import get from 'lodash/get';
 
 const FolderSettings = ({ collection, folder }) => {
@@ -83,11 +83,11 @@ const FolderSettings = ({ collection, folder }) => {
           </div>
           <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
             Script
-            {hasScripts && <ContentIndicator />}
+            {hasScripts && <Indicator />}
           </div>
           <div className={getTabClassname('test')} role="tab" onClick={() => setTab('test')}>
             Test
-            {hasTests && <ContentIndicator />}
+            {hasTests && <Indicator />}
           </div>
           <div className={getTabClassname('vars')} role="tab" onClick={() => setTab('vars')}>
             Vars
@@ -95,7 +95,7 @@ const FolderSettings = ({ collection, folder }) => {
           </div>
           <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
             Auth
-            {hasAuth && <ContentIndicator />}
+            {hasAuth && <Indicator />}
           </div>
           <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
             Docs
diff --git a/packages/bruno-app/src/components/Indicators/index.js b/packages/bruno-app/src/components/Indicators/index.js
index 4acaeb946..3933cacb2 100644
--- a/packages/bruno-app/src/components/Indicators/index.js
+++ b/packages/bruno-app/src/components/Indicators/index.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import DotIcon from 'components/Icons/Dot';
 
-const DotIndicator = ({ colorClass = '' }) => (
-  <sup className={`ml-[.125rem] opacity-80 font-medium ${colorClass}`}>
+const Indicator = ({ type = 'default' }) => (
+  <sup
+    className={`ml-[.125rem] opacity-80 font-medium ${
+      type === 'error' ? 'text-red-500' : ''
+    }`}
+  >
     <DotIcon width="10" />
   </sup>
 );
 
-export const ContentIndicator = () => <DotIndicator />;
-export const ErrorIndicator = () => <DotIndicator colorClass="text-red-500" />;
 
-export default ContentIndicator;
\ No newline at end of file
+export default Indicator;
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
index 8bfb6d5a3..63054f4ff 100644
--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
@@ -16,7 +16,7 @@ import { find, get } from 'lodash';
 import Documentation from 'components/Documentation/index';
 import HeightBoundContainer from 'ui/HeightBoundContainer';
 import { useEffect } from 'react';
-import { ContentIndicator, ErrorIndicator } from 'components/Indicators';
+import Indicator from 'components/Indicators';
 
 const HttpRequestPane = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -120,7 +120,7 @@ const HttpRequestPane = ({ item, collection }) => {
         </div>
         <div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>
           Body
-          {body.mode !== 'none' && <ContentIndicator />}
+          {body.mode !== 'none' && <Indicator />}
         </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
           Headers
@@ -128,7 +128,7 @@ const HttpRequestPane = ({ item, collection }) => {
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>
           Auth
-          {auth.mode !== 'none' && <ContentIndicator />}
+          {auth.mode !== 'none' && <Indicator />}
         </div>
         <div className={getTabClassname('vars')} role="tab" onClick={() => selectTab('vars')}>
           Vars
@@ -138,8 +138,8 @@ const HttpRequestPane = ({ item, collection }) => {
           Script
           {(script.req || script.res) && (
             item.preRequestScriptErrorMessage || item.postResponseScriptErrorMessage ?
-            <ErrorIndicator /> :
-            <ContentIndicator />
+            <Indicator type="error" /> :
+            <Indicator />
           )}
         </div>
         <div className={getTabClassname('assert')} role="tab" onClick={() => selectTab('assert')}>
@@ -150,13 +150,13 @@ const HttpRequestPane = ({ item, collection }) => {
           Tests
           {tests && tests.length > 0 && (
             item.testScriptErrorMessage ?
-              <ErrorIndicator /> :
-              <ContentIndicator />
+              <Indicator type="error" /> :
+              <Indicator />
           )}
         </div>
         <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
           Docs
-          {docs && docs.length > 0 && <ContentIndicator />}
+          {docs && docs.length > 0 && <Indicator />}
         </div>
         {focusedTab.requestPaneTab === 'body' ? (
           <div className="flex flex-grow justify-end items-center">