add: type in indicator

This commit is contained in:
pooja-bruno
2025-06-30 14:48:43 +05:30
committed by Maintainer Bruno
parent cff4f5457b
commit b441e1648e
4 changed files with 25 additions and 23 deletions

View File

@@ -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>

View File

@@ -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

View File

@@ -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;
export default Indicator;

View File

@@ -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">