feat(pane-tabs): Consistent styles for tabs (#7062)

* response/request pane tab counts * tab dropdown colors
Kong · Feb 5, 2024 · a09c233 · a09c233
1 parent 99f34cf
commit a09c233
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 31 deletions.
diff --git a/packages/insomnia/src/ui/components/dropdowns/auth-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/auth-dropdown.tsx
@@ -184,7 +184,7 @@ export const AuthDropdown: FC<Props> = ({ authTypes = defaultTypes, disabled = f
       aria-label='Authentication Dropdown'
       isDisabled={disabled}
       triggerButton={
-        <DropdownButton className="tall">
+        <DropdownButton className="tall !text-[--hl]">
           {'authentication' in activeRequest ? getAuthTypeName(activeRequest.authentication.type) || 'Auth' : 'Auth'}
           <i className="fa fa-caret-down space-left" />
         </DropdownButton>

diff --git a/packages/insomnia/src/ui/components/dropdowns/content-type-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/content-type-dropdown.tsx
@@ -81,9 +81,13 @@ export const ContentTypeDropdown: FC = () => {
       aria-label='Change Body Type'
       triggerButton={
         <DropdownButton>
+          <div className='flex items-center gap-2 !text-[--hl]'>
           {hasMimeType ? getContentTypeName(body.mimeType) : 'Body'}
-          {numBodyParams ? <span className="bubble space-left">{numBodyParams}</span> : null}
+            {numBodyParams ?
+              <span className="p-2 aspect-square flex items-center color-inherit justify-between border-solid border border-[--hl-md] overflow-hidden rounded-lg text-xs shadow-small">{numBodyParams}</span>
+              : null}
           <i className="fa fa-caret-down space-left" />
+          </div>
         </DropdownButton>
       }
     >

diff --git a/packages/insomnia/src/ui/components/dropdowns/preview-mode-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/preview-mode-dropdown.tsx
@@ -90,7 +90,7 @@ export const PreviewModeDropdown: FC<Props> = ({
     <Dropdown
       aria-label='Preview Mode Dropdown'
       triggerButton={
-        <DropdownButton className="tall">
+        <DropdownButton className="tall !text-[--hl]">
           {getPreviewModeName(previewMode)}
           <i className="fa fa-caret-down space-left" />
         </DropdownButton>

diff --git a/packages/insomnia/src/ui/components/dropdowns/websocket-preview-mode.tsx b/packages/insomnia/src/ui/components/dropdowns/websocket-preview-mode.tsx
@@ -12,7 +12,7 @@ export const WebSocketPreviewMode: FC<Props> = ({ previewMode, onClick }) => {
     <Dropdown
       aria-label="Websocket Preview Mode Dropdown"
       triggerButton={
-        <DropdownButton className="tall">
+        <DropdownButton className="tall !text-[--hl]">
           {{
             [CONTENT_TYPE_JSON]: 'JSON',
             [CONTENT_TYPE_PLAINTEXT]: 'Raw',

diff --git a/packages/insomnia/src/ui/components/panes/request-pane.tsx b/packages/insomnia/src/ui/components/panes/request-pane.tsx
@@ -117,7 +117,9 @@ export const RequestPane: FC<Props> = ({
   const onPathParameterChange = (pathParameters: RequestParameter[]) => {
     patchRequest(requestId, { pathParameters });
   };
-  const numHeaders = activeRequest.headers.filter(h => !h.disabled).length;
+
+  const parametersCount = pathParameters.length + activeRequest.parameters.filter(p => !p.disabled).length;
+  const headersCount = activeRequest.headers.filter(h => !h.disabled).length;
   const urlHasQueryParameters = activeRequest.url.indexOf('?') >= 0;
   const contentType =
     getContentTypeFromHeaders(activeRequest.headers) ||
@@ -139,7 +141,14 @@ export const RequestPane: FC<Props> = ({
       <Tabs aria-label="Request pane tabs">
         <TabItem
           key="query"
-          title={'Parameters'}
+          title={
+            <div className='flex items-center gap-2'>
+              Parameters
+              {parametersCount > 0 && (
+                <span className="p-2 aspect-square flex items-center color-inherit justify-between border-solid border border-[--hl-md] overflow-hidden rounded-lg text-xs shadow-small">{parametersCount}</span>
+              )}
+            </div>
+          }
         >
           <div className='h-full flex flex-col'>
             <div className="p-4">
@@ -249,12 +258,12 @@ export const RequestPane: FC<Props> = ({
         <TabItem
           key="headers"
           title={
-            <>
+            <div className='flex items-center gap-2'>
               Headers{' '}
-              {numHeaders > 0 && (
-                <span className="bubble space-left">{numHeaders}</span>
+              {headersCount > 0 && (
+                <span className="p-2 aspect-square flex items-center color-inherit justify-between border-solid border border-[--hl-md] overflow-hidden rounded-lg text-xs shadow-small">{headersCount}</span>
               )}
-            </>
+            </div>
           }
         >
           <HeaderContainer>

diff --git a/packages/insomnia/src/ui/components/panes/response-pane.tsx b/packages/insomnia/src/ui/components/panes/response-pane.tsx
@@ -180,12 +180,12 @@ export const ResponsePane: FC<Props> = ({
         <TabItem
           key="headers"
           title={
-            <>
+            <div className='flex items-center gap-2'>
               Headers
               {activeResponse.headers.length > 0 && (
-                <span className="bubble">{activeResponse.headers.length}</span>
+                <span className="p-2 aspect-square flex items-center color-inherit justify-between border-solid border border-[--hl-md] overflow-hidden rounded-lg text-xs shadow-small">{activeResponse.headers.length}</span>
               )}
-            </>
+            </div>
           }
         >
           <PanelContainer className="pad">
@@ -197,12 +197,12 @@ export const ResponsePane: FC<Props> = ({
         <TabItem
           key="cookies"
           title={
-            <>
+            <div className='flex items-center gap-2'>
               Cookies
-              {cookieHeaders.length ? (
-                <span className="bubble">{cookieHeaders.length}</span>
-              ) : null}
-            </>
+              {cookieHeaders.length > 0 && (
+                <span className="p-2 aspect-square flex items-center color-inherit justify-between border-solid border border-[--hl-md] overflow-hidden rounded-lg text-xs shadow-small">{cookieHeaders.length}</span>
+              )}
+            </div>
           }
         >
           <PanelContainer className="pad">

diff --git a/packages/insomnia/src/ui/components/websockets/realtime-response-pane.tsx b/packages/insomnia/src/ui/components/websockets/realtime-response-pane.tsx
@@ -251,12 +251,12 @@ const RealtimeActiveResponsePane: FC<{ response: WebSocketResponse | Response }>
         <TabItem
           key="headers"
           title={
-            <>
-              Headers{' '}
-              {response?.headers.length > 0 && (
-                <span className="bubble">{response.headers.length}</span>
+            <div className='flex items-center gap-2'>
+              Headers
+              {response.headers.length > 0 && (
+                <span className="p-2 aspect-square flex items-center color-inherit justify-between border-solid border border-[--hl-md] overflow-hidden rounded-lg text-xs shadow-small">{response.headers.length}</span>
               )}
-            </>
+            </div>
           }
         >
           <PanelContainer className="pad">
@@ -268,12 +268,12 @@ const RealtimeActiveResponsePane: FC<{ response: WebSocketResponse | Response }>
         <TabItem
           key="cookies"
           title={
-            <>
-              Cookies{' '}
-              {cookieHeaders.length ? (
-                <span className="bubble">{cookieHeaders.length}</span>
-              ) : null}
-            </>
+            <div className='flex items-center gap-2'>
+              Cookies
+              {cookieHeaders.length > 0 && (
+                <span className="p-2 aspect-square flex items-center color-inherit justify-between border-solid border border-[--hl-md] overflow-hidden rounded-lg text-xs shadow-small">{cookieHeaders.length}</span>
+              )}
+            </div>
           }
         >
           <PanelContainer className="pad">

diff --git a/packages/insomnia/src/ui/components/websockets/websocket-request-pane.tsx b/packages/insomnia/src/ui/components/websockets/websocket-request-pane.tsx
@@ -243,6 +243,9 @@ export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
     patchRequest(requestId, { pathParameters });
   };
 
+  const parametersCount = pathParameters.length + activeRequest.parameters.filter(p => !p.disabled).length;
+  const headersCount = activeRequest.headers.filter(h => !h.disabled).length;
+
   const upsertPayloadWithMode = async (mode: string) => {
     // @TODO: multiple payloads
     const payload = await models.webSocketPayload.getByParentId(requestId);
@@ -277,7 +280,17 @@ export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
         />
       </PaneHeader>
       <Tabs aria-label="Websocket request pane tabs">
-        <TabItem key="query" title="Parameters">
+        <TabItem
+          key="query"
+          title={
+            <div className='flex items-center gap-2'>
+              Parameters
+              {parametersCount > 0 && (
+                <span className="p-2 aspect-square flex items-center color-inherit justify-between border-solid border border-[--hl-md] overflow-hidden rounded-lg text-xs shadow-small">{parametersCount}</span>
+              )}
+            </div>
+          }
+        >
           <div className="grid h-full auto-rows-auto [grid-template-columns:100%] divide-y divide-solid divide-[--hl-md]">
             {disabled && <PaneReadOnlyBanner />}
             <div className='h-full flex flex-col'>
@@ -378,7 +391,17 @@ export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
             disabled={disabled}
           />
         </TabItem>
-        <TabItem key="headers" title="Headers">
+        <TabItem
+          key="headers"
+          title={
+            <div className='flex items-center gap-2'>
+              Headers{' '}
+              {headersCount > 0 && (
+                <span className="p-2 aspect-square flex items-center color-inherit justify-between border-solid border border-[--hl-md] overflow-hidden rounded-lg text-xs shadow-small">{headersCount}</span>
+              )}
+            </div>
+          }
+        >
           {disabled && <PaneReadOnlyBanner />}
           <RequestHeadersEditor
             key={uniqueKey}