fix(UI Improvements) (#7626)

* Display selected environments in environment picker

* display the number of active cookies/certificates

* persist the position of the graphql variables panels

* gray out disabled items in the key-value editor

packages/insomnia/src/ui/components/cookie-list.tsx

@@ -7,6 +7,7 @@ import { cookieToString } from '../../common/cookies';
 import { Cookie } from '../../models/cookie-jar';
 import { Dropdown, DropdownButton, DropdownItem, ItemContent } from './base/dropdown';
 import { PromptButton } from './base/prompt-button';
+import { Icon } from './icon';
 import { CookieModifyModal } from './modals/cookie-modify-modal';
 import { RenderedText } from './rendered-text';
 
@@ -152,9 +153,9 @@ export const CookieList: FC<CookieListProps> = ({
     </table>
     {cookies.length === 0 && <div className="pad faint italic text-center">
       <p>I couldn't find any cookies for you.</p>
-      <p>
+      <p className='pt-4'>
         <button className="btn btn--clicky" onClick={addCookie}>
-          Add Cookie <i className="fa fa-plus-circle" />
+          <Icon icon="plus" /> Add Cookie
         </button>
       </p>
     </div>}

packages/insomnia/src/ui/components/editors/body/graph-ql-editor.tsx

@@ -577,7 +577,7 @@ export const GraphQLEditor: FC<Props> = ({
           </DropdownSection>
         </Dropdown>
       </Toolbar>
-      <PanelGroup direction={'vertical'}>
+      <PanelGroup direction={'vertical'} autoSaveId='graphql-variables'>
         <Panel id="GraphQL Editor" minSize={20} defaultSize={60}>
           <CodeEditor
             id="graphql-editor"

packages/insomnia/src/ui/components/environment-picker.tsx

@@ -54,9 +54,29 @@ export const EnvironmentPicker = ({
 
   return (
     <DialogTrigger isOpen={isOpen} onOpenChange={onOpenChange}>
-      <Button className="py-1 px-4 max-w-full gap-2 truncate flex items-center justify-center aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
-        <Icon icon="code" className='w-5 flex-shrink-0' />
-        <span className='truncate'>{activeGlobalEnvironment?._id || activeEnvironment._id ? 'Manage' : 'Add'} Environments</span>
+      <Button aria-label='Manage Environments' className="py-1 px-4 max-w-full items-start gap-2 truncate flex flex-col aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+        {activeGlobalEnvironment && activeGlobalBaseEnvironment && (
+          <div className='flex flex-col w-full'>
+            <div className='flex items-center gap-2 w-full'>
+              <Icon icon={activeGlobalEnvironment.isPrivate ? 'laptop-code' : 'globe-americas'} style={{ color: activeGlobalEnvironment.color || '' }} className='w-5 flex-shrink-0' />
+              <span className='truncate'>
+                {activeGlobalEnvironment.name}
+              </span>
+            </div>
+            <div className='flex items-center gap-2 w-full'>
+              <Icon icon="0" className='w-5 flex-shrink-0 invisible' />
+              <span className='flex-shrink truncate text-xs text-[--hl]'>
+                {activeGlobalBaseEnvironment.workspaceName}
+              </span>
+            </div>
+          </div>
+        )}
+        <div className='flex flex-1 items-center gap-2 w-full'>
+          <Icon icon={activeEnvironment.isPrivate ? 'laptop-code' : 'globe-americas'} style={{ color: activeEnvironment.color || '' }} className='w-5 flex-shrink-0' />
+          <span className='truncate'>
+            {activeSubEnvironment ? activeSubEnvironment.name : activeBaseEnvironment.name}
+          </span>
+        </div>
       </Button>
       <Popover className="min-w-max max-h-[90vh] flex flex-col !z-10" placement='bottom start' offset={8}>
         <Dialog className="border h-full w-full grid grid-flow-col [grid-auto-columns:min(260px,calc(40vw))_min(340px,calc(50vw))] overflow-hidden divide-x divide-solid divide-[--hl-md] select-none text-sm border-solid border-[--hl-sm] bg-[--color-bg] shadow-lg rounded-md focus:outline-none">

packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx

@@ -456,7 +456,7 @@ export const KeyValueEditor: FC<Props> = ({
           }
 
           return (
-            <GridListItem id={pair.id} textValue={pair.name + '-' + pair.value} className={`grid relative outline-none bg-[--color-bg] flex-shrink-0 h-[--line-height-sm] gap-2 px-2 data-[dragging]:opacity-50 ${showDescription ? '[grid-template-columns:max-content_1fr_1fr_1fr_max-content]' : '[grid-template-columns:max-content_1fr_1fr_max-content]'}`}>
+            <GridListItem id={pair.id} textValue={pair.name + '-' + pair.value} style={{ opacity: pair.disabled ? '0.4' : '1' }} className={`grid relative outline-none bg-[--color-bg] flex-shrink-0 h-[--line-height-sm] gap-2 px-2 data-[dragging]:opacity-50 ${showDescription ? '[grid-template-columns:max-content_1fr_1fr_1fr_max-content]' : '[grid-template-columns:max-content_1fr_1fr_max-content]'}`}>
               <Button slot="drag" className="cursor-grab p-2 w-5 flex focus-visible:bg-[--hl-sm] justify-center items-center flex-shrink-0">
                 <Icon icon="grip-vertical" className='w-2 text-[--hl]' />
               </Button>

packages/insomnia/src/ui/routes/debug.tsx

@@ -40,7 +40,7 @@ import {
 
 import { DEFAULT_SIDEBAR_SIZE, getProductName, SORT_ORDERS, SortOrder, sortOrderName } from '../../common/constants';
 import { ChangeBufferEvent, database as db } from '../../common/database';
-import { generateId } from '../../common/misc';
+import { generateId, isNotNullOrUndefined } from '../../common/misc';
 import { PlatformKeyCombinations } from '../../common/settings';
 import type { GrpcMethodInfo } from '../../main/ipc/grpc';
 import * as models from '../../models';
@@ -750,14 +750,14 @@ export const Debug: FC = () => {
                 className="px-4 py-1 max-w-full truncate flex-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
               >
                 <Icon icon="cookie-bite" className='w-5 flex-shrink-0' />
-                <span className='truncate'>{activeCookieJar.cookies.length === 0 ? 'Add' : 'Manage'} Cookies</span>
+                <span className='truncate'>{activeCookieJar.cookies.length === 0 ? 'Add' : 'Manage'} Cookies {activeCookieJar.cookies.length > 0 ? `(${activeCookieJar.cookies.length})` : ''}</span>
               </Button>
               <Button
                 onPress={() => setCertificatesModalOpen(true)}
                 className="px-4 py-1 max-w-full truncate flex-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
               >
                 <Icon icon="file-contract" className='w-5 flex-shrink-0' />
-                <span className='truncate'>{clientCertificates.length === 0 || caCertificate ? 'Add' : 'Manage'} Certificates</span>
+                <span className='truncate'>{clientCertificates.length === 0 || caCertificate ? 'Add' : 'Manage'} Certificates {[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length > 0 ? `(${[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length})` : ''}</span>
               </Button>
             </div>
           </div>

packages/insomnia/src/ui/routes/design.tsx

@@ -47,7 +47,7 @@ import YAMLSourceMap from 'yaml-source-map';
 
 import { parseApiSpec } from '../../common/api-specs';
 import { ACTIVITY_SPEC, DEFAULT_SIDEBAR_SIZE } from '../../common/constants';
-import { debounce } from '../../common/misc';
+import { debounce, isNotNullOrUndefined } from '../../common/misc';
 import { ApiSpec } from '../../models/api-spec';
 import * as models from '../../models/index';
 import { invariant } from '../../utils/invariant';
@@ -483,14 +483,14 @@ const Design: FC = () => {
               className="px-4 py-1 max-w-full truncate flex-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
             >
                 <Icon icon="cookie-bite" className='w-5 flex-shrink-0' />
-              <span className='truncate'>{activeCookieJar.cookies.length === 0 ? 'Add' : 'Manage'} Cookies</span>
+                <span className='truncate'>{activeCookieJar.cookies.length === 0 ? 'Add' : 'Manage'} Cookies {activeCookieJar.cookies.length > 0 ? `(${activeCookieJar.cookies.length})` : ''}</span>
             </Button>
             <Button
               onPress={() => setCertificatesModalOpen(true)}
               className="px-4 py-1 max-w-full truncate flex-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
             >
                 <Icon icon="file-contract" className='w-5 flex-shrink-0' />
-              <span className='truncate'>{clientCertificates.length === 0 || caCertificate ? 'Add' : 'Manage'} Certificates</span>
+                <span className='truncate'>{clientCertificates.length === 0 || caCertificate ? 'Add' : 'Manage'} Certificates {[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length > 0 ? `(${[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length})` : ''}</span>
             </Button>
           </div>
           </div>

packages/insomnia/src/ui/routes/unit-test.tsx

@@ -30,6 +30,7 @@ import {
 
 import { DEFAULT_SIDEBAR_SIZE } from '../../common/constants';
 import { database } from '../../common/database';
+import { isNotNullOrUndefined } from '../../common/misc';
 import * as models from '../../models';
 import type { UnitTestSuite } from '../../models/unit-test-suite';
 import { showModal } from '../../ui/components/modals';
@@ -316,14 +317,14 @@ const TestRoute: FC = () => {
                   className="px-4 py-1 max-w-full truncate flex-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
                 >
                   <Icon icon="cookie-bite" className='w-5 flex-shrink-0' />
-                  <span className='truncate'>{activeCookieJar.cookies.length === 0 ? 'Add' : 'Manage'} Cookies</span>
+                  <span className='truncate'>{activeCookieJar.cookies.length === 0 ? 'Add' : 'Manage'} Cookies {activeCookieJar.cookies.length > 0 ? `(${activeCookieJar.cookies.length})` : ''}</span>
                 </Button>
                 <Button
                   onPress={() => setCertificatesModalOpen(true)}
                   className="px-4 py-1 max-w-full truncate flex-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
                 >
                   <Icon icon="file-contract" className='w-5 flex-shrink-0' />
-                  <span className='truncate'>{clientCertificates.length === 0 || caCertificate ? 'Add' : 'Manage'} Certificates</span>
+                  <span className='truncate'>{clientCertificates.length === 0 || caCertificate ? 'Add' : 'Manage'} Certificates {[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length > 0 ? `(${[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length})` : ''}</span>
                 </Button>
               </div>
             </div>