Fix GraphQL editor

https://feedback.yaak.app/p/select-text-of-navbar-in-edit-mode

package-lock.json

@@ -18,6 +18,7 @@
         "plugins/auth-basic",
         "plugins/auth-bearer",
         "plugins/auth-jwt",
+        "plugins/auth-oauth1",
         "plugins/auth-oauth2",
         "plugins/filter-jsonpath",
         "plugins/filter-xpath",
@@ -4163,6 +4164,10 @@
       "resolved": "plugins/auth-jwt",
       "link": true
     },
+    "node_modules/@yaak/auth-oauth1": {
+      "resolved": "plugins/auth-oauth1",
+      "link": true
+    },
     "node_modules/@yaak/auth-oauth2": {
       "resolved": "plugins/auth-oauth2",
       "link": true
@@ -13082,6 +13087,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/oauth-1.0a": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/oauth-1.0a/-/oauth-1.0a-2.2.6.tgz",
+      "integrity": "sha512-6bkxv3N4Gu5lty4viIcIAnq5GbxECviMBeKR3WX/q87SPQ8E8aursPZUtsXDnxCs787af09WPRBLqYrf/lwoYQ==",
+      "license": "MIT"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -18823,6 +18834,13 @@
         "@types/jsonwebtoken": "^9.0.7"
       }
     },
+    "plugins/auth-oauth1": {
+      "name": "@yaak/auth-oauth1",
+      "version": "0.1.0",
+      "dependencies": {
+        "oauth-1.0a": "^2.2.6"
+      }
+    },
     "plugins/auth-oauth2": {
       "name": "@yaak/auth-oauth2",
       "version": "0.1.0"

package.json

@@ -18,6 +18,7 @@
     "plugins/auth-bearer",
     "plugins/auth-jwt",
     "plugins/auth-oauth2",
+    "plugins/auth-oauth1",
     "plugins/filter-jsonpath",
     "plugins/filter-xpath",
     "plugins/importer-curl",

plugins/action-copy-curl/src/index.ts

@@ -46,7 +46,7 @@ export async function convertToCurl(request: Partial<HttpRequest>) {
   // Add API key authentication
   if (request.authenticationType === 'apikey') {
     if (request.authentication?.location === 'query') {
-      const sep = request.url?.includes('?') ? '&' : '?';
+      const sep = finalUrl.includes('?') ? '&' : '?';
       finalUrl = [
         finalUrl,
         sep,

plugins/action-copy-curl/tests/index.test.ts

@@ -275,11 +275,9 @@ describe('exporter-curl', () => {
         },
       }),
     ).toEqual(
-      [
-        `curl 'https://yaak.app'`,
-        `--aws-sigv4 aws:amz:us-east-1:s3`,
-        `--user 'ak:sk'`,
-      ].join(` \\\n  `),
+      [`curl 'https://yaak.app'`, `--aws-sigv4 aws:amz:us-east-1:s3`, `--user 'ak:sk'`].join(
+        ` \\\n  `,
+      ),
     );
   });
 
@@ -314,15 +312,40 @@ describe('exporter-curl', () => {
         authentication: {
           location: 'header',
           key: 'X-Header',
-          value: 'my-token'
+          value: 'my-token',
         },
       }),
-    ).toEqual(
-      [
-        `curl 'https://yaak.app'`,
-        `--header 'X-Header: my-token'`,
-      ].join(` \\\n  `),
-    );
+    ).toEqual([`curl 'https://yaak.app'`, `--header 'X-Header: my-token'`].join(` \\\n  `));
+  });
+
+  test('API key auth header query', async () => {
+    expect(
+      await convertToCurl({
+        url: 'https://yaak.app?hi=there',
+        urlParameters: [{ name: 'param', value: 'hi' }],
+        authenticationType: 'apikey',
+        authentication: {
+          location: 'query',
+          key: 'foo',
+          value: 'bar',
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app?hi=there&param=hi&foo=bar'`].join(` \\\n  `));
+  });
+
+  test('API key auth header query with params', async () => {
+    expect(
+      await convertToCurl({
+        url: 'https://yaak.app',
+        urlParameters: [{ name: 'param', value: 'hi' }],
+        authenticationType: 'apikey',
+        authentication: {
+          location: 'query',
+          key: 'foo',
+          value: 'bar',
+        },
+      }),
+    ).toEqual([`curl 'https://yaak.app?param=hi&foo=bar'`].join(` \\\n  `));
   });
 
   test('API key auth header default', async () => {
@@ -334,12 +357,7 @@ describe('exporter-curl', () => {
           location: 'header',
         },
       }),
-    ).toEqual(
-      [
-        `curl 'https://yaak.app'`,
-        `--header 'X-Api-Key: '`,
-      ].join(` \\\n  `),
-    );
+    ).toEqual([`curl 'https://yaak.app'`, `--header 'X-Api-Key: '`].join(` \\\n  `));
   });
 
   test('API key auth query', async () => {
@@ -350,14 +368,10 @@ describe('exporter-curl', () => {
         authentication: {
           location: 'query',
           key: 'foo',
-          value: 'bar-baz'
+          value: 'bar-baz',
         },
       }),
-    ).toEqual(
-      [
-        `curl 'https://yaak.app?foo=bar-baz'`,
-      ].join(` \\\n  `),
-    );
+    ).toEqual([`curl 'https://yaak.app?foo=bar-baz'`].join(` \\\n  `));
   });
 
   test('API key auth query with existing', async () => {
@@ -368,14 +382,10 @@ describe('exporter-curl', () => {
         authentication: {
           location: 'query',
           key: 'hi',
-          value: 'there'
+          value: 'there',
         },
       }),
-    ).toEqual(
-      [
-        `curl 'https://yaak.app?foo=bar&baz=qux&hi=there'`,
-      ].join(` \\\n  `),
-    );
+    ).toEqual([`curl 'https://yaak.app?foo=bar&baz=qux&hi=there'`].join(` \\\n  `));
   });
 
   test('API key auth query default', async () => {
@@ -387,11 +397,7 @@ describe('exporter-curl', () => {
           location: 'query',
         },
       }),
-    ).toEqual(
-      [
-        `curl 'https://yaak.app?foo=bar&baz=qux&token='`,
-      ].join(` \\\n  `),
-    );
+    ).toEqual([`curl 'https://yaak.app?foo=bar&baz=qux&token='`].join(` \\\n  `));
   });
 
   test('Stale body data', async () => {

plugins/auth-oauth1/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@yaak/auth-oauth1",
+  "displayName": "OAuth 1.0",
+  "description": "Authenticate requests using OAuth 1.0a",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mountain-loop/yaak.git",
+    "directory": "plugins/auth-oauth1"
+  },
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "build": "yaakcli build",
+    "dev": "yaakcli dev",
+    "lint": "tsc --noEmit && eslint . --ext .ts,.tsx"
+  },
+  "dependencies": {
+    "oauth-1.0a": "^2.2.6"
+  }
+}

plugins/auth-oauth1/src/index.ts

@@ -0,0 +1,197 @@
+import type { Context, GetHttpAuthenticationConfigRequest, PluginDefinition } from '@yaakapp/api';
+import crypto from 'node:crypto';
+import OAuth from 'oauth-1.0a';
+
+const signatures = {
+  HMAC_SHA1: 'HMAC-SHA1',
+  HMAC_SHA256: 'HMAC-SHA256',
+  HMAC_SHA512: 'HMAC-SHA512',
+  RSA_SHA1: 'RSA-SHA1',
+  RSA_SHA256: 'RSA-SHA256',
+  RSA_SHA512: 'RSA-SHA512',
+  PLAINTEXT: 'PLAINTEXT',
+} as const;
+const defaultSig = signatures.HMAC_SHA1;
+
+const pkSigs = Object.values(signatures).filter((k) => k.startsWith('RSA-'));
+const nonPkSigs = Object.values(signatures).filter((k) => !pkSigs.includes(k));
+
+type SigMethod = (typeof signatures)[keyof typeof signatures];
+
+function hiddenIfNot(
+  sigMethod: SigMethod[],
+  ...other: ((values: GetHttpAuthenticationConfigRequest['values']) => boolean)[]
+) {
+  return (_ctx: Context, { values }: GetHttpAuthenticationConfigRequest) => {
+    const hasGrantType = sigMethod.find((t) => t === String(values.signatureMethod ?? defaultSig));
+    const hasOtherBools = other.every((t) => t(values));
+    const show = hasGrantType && hasOtherBools;
+    return { hidden: !show };
+  };
+}
+
+export const plugin: PluginDefinition = {
+  authentication: {
+    name: 'oauth1',
+    label: 'OAuth 1.0',
+    shortLabel: 'OAuth 1',
+    args: [
+      {
+        name: 'signatureMethod',
+        label: 'Signature Method',
+        type: 'select',
+        defaultValue: defaultSig,
+        options: Object.values(signatures).map((v) => ({ label: v, value: v })),
+      },
+      { name: 'consumerKey', label: 'Consumer Key', type: 'text', password: true, optional: true },
+      {
+        name: 'consumerSecret',
+        label: 'Consumer Secret',
+        type: 'text',
+        password: true,
+        optional: true,
+      },
+      {
+        name: 'tokenKey',
+        label: 'Access Token',
+        type: 'text',
+        password: true,
+        optional: true,
+      },
+      {
+        name: 'tokenSecret',
+        label: 'Token Secret',
+        type: 'text',
+        password: true,
+        optional: true,
+        dynamic: hiddenIfNot(nonPkSigs),
+      },
+      {
+        name: 'privateKey',
+        label: 'Private Key (RSA-SHA1)',
+        type: 'text',
+        multiLine: true,
+        optional: true,
+        password: true,
+        placeholder:
+          '-----BEGIN RSA PRIVATE KEY-----\nPrivate key in PEM format\n-----END RSA PRIVATE KEY-----',
+        dynamic: hiddenIfNot(pkSigs),
+      },
+      {
+        type: 'accordion',
+        label: 'Advanced',
+        inputs: [
+          { name: 'callback', label: 'Callback Url', type: 'text', optional: true },
+          { name: 'verifier', label: 'Verifier', type: 'text', optional: true, password: true },
+          { name: 'timestamp', label: 'Timestamp', type: 'text', optional: true },
+          { name: 'nonce', label: 'Nonce', type: 'text', optional: true },
+          {
+            name: 'version',
+            label: 'OAuth Version',
+            type: 'text',
+            optional: true,
+            defaultValue: '1.0',
+          },
+          { name: 'realm', label: 'Realm', type: 'text', optional: true },
+        ],
+      },
+    ],
+
+    onApply(
+      _ctx,
+      { values, method, url },
+    ): {
+      setHeaders?: { name: string; value: string }[];
+      setQueryParameters?: { name: string; value: string }[];
+    } {
+      const consumerKey = String(values.consumerKey || '');
+      const consumerSecret = String(values.consumerSecret || '');
+
+      const signatureMethod = String(values.signatureMethod || signatures.HMAC_SHA1) as SigMethod;
+      const version = String(values.version || '1.0');
+      const realm = String(values.realm || '') || undefined;
+
+      const oauth = new OAuth({
+        consumer: { key: consumerKey, secret: consumerSecret },
+        signature_method: signatureMethod,
+        version,
+        hash_function: hashFunction(signatureMethod),
+        realm,
+      });
+
+      if (pkSigs.includes(signatureMethod)) {
+        oauth.getSigningKey = (tokenSecret?: string) => tokenSecret || '';
+      }
+
+      const requestUrl = new URL(url);
+
+      // Base request options passed to oauth-1.0a
+      const requestData: Omit<OAuth.RequestOptions, 'data'> & {
+        data: Record<string, string | string[]>;
+      } = {
+        method,
+        url: requestUrl.toString(),
+        includeBodyHash: false,
+        data: {},
+      };
+
+      // (1) Include existing query params in signature base string
+      for (const key of requestUrl.searchParams.keys()) {
+        if (key.startsWith('oauth_')) continue;
+        const all = requestUrl.searchParams.getAll(key);
+        requestData.data[key] = all.length > 1 ? all : all[0]!;
+      }
+
+      // (2) Manual oauth_* overrides
+      if (values.callback) requestData.data.oauth_callback = String(values.callback);
+      if (values.nonce) requestData.data.oauth_nonce = String(values.nonce);
+      if (values.timestamp) requestData.data.oauth_timestamp = String(values.timestamp);
+      if (values.verifier) requestData.data.oauth_verifier = String(values.verifier);
+
+      let token: OAuth.Token | { key: string } | undefined;
+
+      if (pkSigs.includes(signatureMethod)) {
+        token = {
+          key: String(values.tokenKey || ''),
+          secret: String(values.privateKey || ''),
+        };
+      } else if (values.tokenKey && values.tokenSecret) {
+        token = { key: String(values.tokenKey), secret: String(values.tokenSecret) };
+      } else if (values.tokenKey) {
+        token = { key: String(values.tokenKey) };
+      }
+
+      const authParams = oauth.authorize(requestData, token as OAuth.Token | undefined);
+      const { Authorization } = oauth.toHeader(authParams);
+      return { setHeaders: [{ name: 'Authorization', value: Authorization }] };
+    },
+  },
+};
+
+function hashFunction(signatureMethod: SigMethod) {
+  switch (signatureMethod) {
+    case signatures.HMAC_SHA1:
+      return (base: string, key: string) =>
+        crypto.createHmac('sha1', key).update(base).digest('base64');
+    case signatures.HMAC_SHA256:
+      return (base: string, key: string) =>
+        crypto.createHmac('sha256', key).update(base).digest('base64');
+    case signatures.HMAC_SHA512:
+      return (base: string, key: string) =>
+        crypto.createHmac('sha512', key).update(base).digest('base64');
+    case signatures.RSA_SHA1:
+      return (base: string, privateKey: string) =>
+        crypto.createSign('RSA-SHA1').update(base).sign(privateKey, 'base64');
+    case signatures.RSA_SHA256:
+      return (base: string, privateKey: string) =>
+        crypto.createSign('RSA-SHA256').update(base).sign(privateKey, 'base64');
+    case signatures.RSA_SHA512:
+      return (base: string, privateKey: string) =>
+        crypto.createSign('RSA-SHA512').update(base).sign(privateKey, 'base64');
+    case signatures.PLAINTEXT:
+      return (base: string) => base;
+    default:
+      return (base: string, key: string) =>
+        crypto.createHmac('sha1', key).update(base).digest('base64');
+  }
+}

plugins/auth-oauth1/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

src-web/components/DynamicForm.tsx

@@ -247,6 +247,7 @@ function TextArg({
       name={arg.name}
       multiLine={arg.multiLine}
       onChange={onChange}
+      className={arg.multiLine ? 'min-h-[4rem]' : undefined}
       defaultValue={value === DYNAMIC_FORM_NULL_ARG ? arg.defaultValue : value}
       required={!arg.optional}
       disabled={arg.disabled}

src-web/components/GitDropdown.tsx

@@ -343,7 +343,7 @@ function SetupSyncDropdown({ workspaceMeta }: { workspaceMeta: WorkspaceMeta })
           color: 'success',
           label: 'Open Workspace Settings',
           leftSlot: <Icon icon="settings" />,
-          onSelect: () => openWorkspaceSettings('general'),
+          onSelect: () => openWorkspaceSettings('data'),
         },
         { type: 'separator' },
         {

src-web/components/HttpRequestPane.tsx

@@ -354,7 +354,6 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
             isLoading={activeResponse != null && activeResponse.state !== 'closed'}
           />
           <Tabs
-            key={activeRequest.id} // Freshen tabs on request change
             value={activeTab}
             label="Request"
             onChangeValue={setActiveTab}
@@ -410,6 +409,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
                 ) : activeRequest.bodyType === BODY_TYPE_GRAPHQL ? (
                   <Suspense>
                     <GraphQLEditor
+                      key={forceUpdateKey}
                       forceUpdateKey={forceUpdateKey}
                       baseRequest={activeRequest}
                       request={activeRequest}

src-web/components/Sidebar.tsx

@@ -223,10 +223,12 @@ function Sidebar({ className }: { className?: string }) {
             for (const n of node.children ?? []) {
               if (n.item.model !== 'folder') continue;
               collapsed[n.item.id] = true;
+              collapsed = next(n, collapsed);
             }
             return collapsed;
           };
-          jotaiStore.set(collapsedFamily(treeId), next(tree, {}));
+          const collapsed = next(tree, {});
+          jotaiStore.set(collapsedFamily(treeId), collapsed);
         },
       },
       'sidebar.selected.delete': {
@@ -435,7 +437,7 @@ function Sidebar({ className }: { className?: string }) {
       aria-hidden={hidden ?? undefined}
       className={classNames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)_auto]')}
     >
-      <div className="w-full px-3 pt-3 grid grid-cols-[minmax(0,1fr)_auto] items-center -mr-2.5">
+      <div className="w-full pl-3 pr-0.5 pt-3 grid grid-cols-[minmax(0,1fr)_auto] items-center">
         {(tree.children?.length ?? 0) > 0 && (
           <>
             <Input
@@ -485,7 +487,6 @@ function Sidebar({ className }: { className?: string }) {
                 size="xs"
                 className="ml-0.5 text-text-subtle hover:text-text"
                 icon="ellipsis_vertical"
-                hotkeyAction="sidebar.collapse_all"
                 title="Show sidebar actions menu"
               />
             </Dropdown>
@@ -630,7 +631,7 @@ const sidebarTreeAtom = atom<[TreeNode<SidebarModel>, FieldDef[]] | null>((get)
 
   const root: TreeNode<SidebarModel> = {
     item: activeWorkspace,
-    parent: null, 
+    parent: null,
     children: [],
     depth: 0,
   };

src-web/components/WebsocketRequestPane.tsx

@@ -229,7 +229,6 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
             />
           </div>
           <Tabs
-            key={activeRequest.id} // Freshen tabs on request change
             value={activeTab}
             label="Request"
             onChangeValue={setActiveTab}

src-web/components/WorkspaceSettingsDialog.tsx

@@ -73,7 +73,7 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
         { value: TAB_GENERAL, label: 'General' },
         {
           value: TAB_DATA,
-          label: 'Directory Sync',
+          label: 'Data',
         },
         ...headersTab,
         ...authTab,

src-web/components/core/Editor/Editor.tsx

@@ -91,6 +91,7 @@ export interface EditorProps {
   placeholder?: string;
   readOnly?: boolean;
   singleLine?: boolean;
+  containerOnly?: boolean;
   stateKey: string | null;
   tooltipContainer?: HTMLElement;
   type?: 'text' | 'password';
@@ -131,6 +132,7 @@ export function Editor({
   placeholder,
   readOnly,
   singleLine,
+  containerOnly,
   stateKey,
   type,
   wrapLines,
@@ -376,7 +378,7 @@ export function Editor({
 
   // Initialize the editor when ref mounts
   const initEditorRef = useCallback(
-    function initializeCodemirror(container: HTMLDivElement | null) {
+    function initEditorRef(container: HTMLDivElement | null) {
       if (container === null) {
         cm.current?.view.destroy();
         cm.current = null;
@@ -455,17 +457,9 @@ export function Editor({
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
+    [forceUpdateKey],
   );
 
-  // Update editor doc when force update key changes
-  useEffect(() => {
-    if (cm.current?.view != null) {
-      updateContents(cm.current.view, defaultValue || '');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [forceUpdateKey]);
-
   // For read-only mode, update content when `defaultValue` changes
   useEffect(
     function updateReadOnlyEditor() {
@@ -548,7 +542,7 @@ export function Editor({
     />
   );
 
-  if (singleLine) {
+  if (singleLine || containerOnly) {
     return cmContainer;
   }
 

src-web/components/core/Editor/filter/extension.ts

@@ -112,7 +112,6 @@ function fieldValueCompletions(
 ): Completion[] | null {
   if (!def || !def.values) return null;
   const vals = Array.isArray(def.values) ? def.values : def.values();
-  // console.log("HELLO", v, v.match(IDENT));
   return vals.map((v) => ({
     label: v.match(IDENT_ONLY) ? v : `"${v}"`,
     displayLabel: v,

src-web/components/core/Input.tsx

@@ -302,6 +302,7 @@ function BaseInput({
             id={id.current}
             hideGutter
             singleLine={!multiLine}
+            containerOnly
             stateKey={stateKey}
             wrapLines={wrapLines}
             heightMode="auto"
@@ -401,7 +402,7 @@ function EncryptionInput({
           setState({ fieldType: 'encrypted', security, value, obscured: true, error: null });
           // We're calling this here because we want the input to be fully initialized so the caller
           // can do stuff like change the selection.
-          setRef?.(inputRef.current);
+          requestAnimationFrame(() => setRef?.(inputRef.current));
         },
         onError: (value) => {
           setState({

src-web/components/core/KeyValueRow.tsx

@@ -51,7 +51,7 @@ export function KeyValueRow({
         <span className="select-text cursor-text">{label}</span>
       </td>
       <td className="select-none py-0.5 break-all align-top max-w-[15rem]">
-        <div className="select-text cursor-text max-h-[5rem] overflow-y-auto grid grid-cols-[auto_minmax(0,1fr)_auto]">
+        <div className="select-text cursor-text max-h-[12rem] overflow-y-auto grid grid-cols-[auto_minmax(0,1fr)_auto]">
           {leftSlot ?? <span aria-hidden />}
           {children}
           {rightSlot ? <div className="ml-1.5">{rightSlot}</div> : <span aria-hidden />}

src-web/components/core/PairEditor.tsx

@@ -128,14 +128,19 @@ export function PairEditor({
 
   const initPairEditorRow = useCallback(
     (id: string, n: RowHandle | null) => {
+      const isLast = id === pairs[pairs.length - 1]?.id;
+      if (isLast) return; // Never add the last pair
+
       rowsRef.current[id] = n;
-      const ready =
-        Object.values(rowsRef.current).filter((v) => v != null).length === pairs.length - 1; // Ignore the last placeholder pair
+      const validHandles = Object.values(rowsRef.current).filter((v) => v != null);
+
+      // NOTE: Ignore the last placeholder pair
+      const ready = validHandles.length === pairs.length - 1;
       if (ready) {
         setRef?.(handle);
       }
     },
-    [handle, pairs.length, setRef],
+    [handle, pairs, setRef],
   );
 
   useEffect(() => {

src-web/components/core/tree/TreeItem.tsx

@@ -248,7 +248,7 @@ function TreeItem_<T extends { id: string }>({
     attributes,
     listeners,
     setNodeRef: setDraggableRef,
-  } = useDraggable({ id: node.item.id, disabled: node.draggable === false });
+  } = useDraggable({ id: node.item.id, disabled: node.draggable === false || editing });
 
   const { setNodeRef: setDroppableRef } = useDroppable({ id: node.item.id });
 

src-web/hooks/useHotKey.ts

@@ -35,7 +35,7 @@ export type HotkeyAction =
   | 'workspace_settings.show';
 
 const hotkeys: Record<HotkeyAction, string[]> = {
-  'app.zoom_in': ['CmdCtrl+Plus'],
+  'app.zoom_in': ['CmdCtrl+Equal'],
   'app.zoom_out': ['CmdCtrl+Minus'],
   'app.zoom_reset': ['CmdCtrl+0'],
   'command_palette.toggle': ['CmdCtrl+k'],
@@ -50,7 +50,7 @@ const hotkeys: Record<HotkeyAction, string[]> = {
   'switcher.toggle': ['CmdCtrl+p'],
   'settings.show': ['CmdCtrl+,'],
   'sidebar.filter': ['CmdCtrl+f'],
-  'sidebar.expand_all': ['CmdCtrl+Shift+Plus'],
+  'sidebar.expand_all': ['CmdCtrl+Shift+Equal'],
   'sidebar.collapse_all': ['CmdCtrl+Shift+Minus'],
   'sidebar.selected.delete': ['Delete', 'CmdCtrl+Backspace'],
   'sidebar.selected.duplicate': ['CmdCtrl+d'],
@@ -190,7 +190,7 @@ function handleKeyDown(e: KeyboardEvent) {
     return;
   }
 
-  // Don't support certain single-key combinrations within inputs
+  // Don't support certain single-key combinations within inputs
   if (
     (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) &&
     currentKeysWithModifiers.size === 1 &&
@@ -212,16 +212,7 @@ function handleKeyDown(e: KeyboardEvent) {
 
       for (const hkKey of hkKeys) {
         const keys = hkKey.split('+');
-        const adjustedKeys = keys
-          .map((k) => {
-            // Special case for Plus
-            if (keys.includes('Shift') && k === 'Plus') {
-              return 'Equal';
-            } else {
-              return k;
-            }
-          })
-          .map(resolveHotkeyKey);
+        const adjustedKeys = keys.map(resolveHotkeyKey);
         if (compareKeys(adjustedKeys, Array.from(currentKeysWithModifiers))) {
           if (!options.allowDefault) {
             e.preventDefault();

src-web/lib/editEnvironment.tsx

@@ -39,6 +39,8 @@ export async function editEnvironment(
       }
     }
 
+    let didFocusVariable = false;
+
     toggleDialog({
       id: 'environment-editor',
       noPadding: true,
@@ -48,8 +50,9 @@ export async function editEnvironment(
         <EnvironmentEditDialog
           initialEnvironmentId={environment?.id ?? null}
           setRef={(pairEditor: PairEditorHandle | null) => {
-            if (focusId) {
+            if (focusId && !didFocusVariable) {
               pairEditor?.focusValue(focusId);
+              didFocusVariable = true;
             }
           }}
         />