Fix autocomplete for environment editor names

src-web/components/EnvironmentEditDialog.tsx

@@ -281,7 +281,7 @@ function SidebarButton({
               },
             },
             {
-              key: 'delete',
+              key: 'delete-environment',
               variant: 'danger',
               label: 'Delete',
               leftSlot: <Icon icon="trash" size="sm" />,

src-web/components/GlobalHooks.tsx

@@ -4,6 +4,7 @@ import { useEffect } from 'react';
 import { useClipboardText } from '../hooks/useClipboardText';
 import { useCommandPalette } from '../hooks/useCommandPalette';
 import { cookieJarsQueryKey } from '../hooks/useCookieJars';
+import { environmentsQueryKey } from '../hooks/useEnvironments';
 import { foldersQueryKey } from '../hooks/useFolders';
 import { useGlobalCommands } from '../hooks/useGlobalCommands';
 import { grpcConnectionsQueryKey } from '../hooks/useGrpcConnections';
@@ -62,6 +63,8 @@ export function GlobalHooks() {
         ? httpResponsesQueryKey(model)
         : model.model === 'folder'
         ? foldersQueryKey(model)
+        : model.model === 'environment'
+        ? environmentsQueryKey(model)
         : model.model === 'grpc_connection'
         ? grpcConnectionsQueryKey(model)
         : model.model === 'grpc_event'
@@ -96,10 +99,8 @@ export function GlobalHooks() {
     queryClient.setQueryData<Model[]>(queryKey, (values = []) => {
       const index = values.findIndex((v) => modelsEq(v, model)) ?? -1;
       if (index >= 0) {
-        // console.log('UPDATED', payload);
         return [...values.slice(0, index), model, ...values.slice(index + 1)];
       } else {
-        // console.log('CREATED', payload);
         return pushToFront ? [model, ...(values ?? [])] : [...(values ?? []), model];
       }
     });
@@ -117,6 +118,8 @@ export function GlobalHooks() {
       queryClient.setQueryData(httpResponsesQueryKey(model), removeById(model));
     } else if (model.model === 'folder') {
       queryClient.setQueryData(foldersQueryKey(model), removeById(model));
+    } else if (model.model === 'environment') {
+      queryClient.setQueryData(environmentsQueryKey(model), removeById(model));
     } else if (model.model === 'grpc_request') {
       queryClient.setQueryData(grpcRequestsQueryKey(model), removeById(model));
     } else if (model.model === 'grpc_connection') {

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

@@ -266,7 +266,7 @@
   }
 
   &.cm-completionInfo-right {
-    @apply ml-1 -mt-0.5;
+    @apply ml-1 -mt-0.5 font-sans;
   }
 
   &.cm-completionInfo-right-narrow {
@@ -278,7 +278,7 @@
   }
 
   &.cm-tooltip-autocomplete {
-    @apply font-mono text-editor;
+    @apply font-mono;
 
     & > ul {
       @apply p-1 max-h-[40vh];

src-web/components/core/Editor/genericCompletion.ts

@@ -20,7 +20,11 @@ export interface GenericCompletionConfig {
 /**
  * Complete options, always matching until the start of the line
  */
-export function genericCompletion({ options, minMatch = 1 }: GenericCompletionConfig) {
+export function genericCompletion(config?: GenericCompletionConfig) {
+  if (config == null) return [];
+
+  const { minMatch = 1, options } = config;
+
   return function completions(context: CompletionContext) {
     const toMatch = context.matchBefore(/.*/);
 

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

@@ -1,13 +1,13 @@
 import type { LanguageSupport } from '@codemirror/language';
 import { LRLanguage } from '@codemirror/language';
 import { parseMixed } from '@lezer/common';
+import type { Environment, Workspace } from '../../../../lib/models';
 import type { GenericCompletionConfig } from '../genericCompletion';
 import { genericCompletion } from '../genericCompletion';
-import { placeholders } from './placeholder';
 import { textLanguageName } from '../text/extension';
 import { twigCompletion } from './completion';
+import { placeholders } from './placeholder';
 import { parser as twigParser } from './twig';
-import type { Environment, Workspace } from '../../../../lib/models';
 
 export function twig(
   base: LanguageSupport,
@@ -15,25 +15,19 @@ export function twig(
   workspace: Workspace | null,
   autocomplete?: GenericCompletionConfig,
 ) {
-  const variables =
-    [...(workspace?.variables ?? []), ...(environment?.variables ?? [])].filter((v) => v.enabled) ??
-    [];
-  const completions = twigCompletion({ options: variables });
-
   const language = mixLanguage(base);
-  const completion = language.data.of({ autocomplete: completions });
-  const completionBase = base.language.data.of({ autocomplete: completions });
-  const additionalCompletion = autocomplete
-    ? [base.language.data.of({ autocomplete: genericCompletion(autocomplete) })]
-    : [];
+  const allVariables = [...(workspace?.variables ?? []), ...(environment?.variables ?? [])];
+  const variables = allVariables.filter((v) => v.enabled) ?? [];
+  const completions = twigCompletion({ options: variables });
 
   return [
     language,
-    completion,
-    completionBase,
     base.support,
     placeholders(variables),
-    ...additionalCompletion,
+    language.data.of({ autocomplete: completions }),
+    base.language.data.of({ autocomplete: completions }),
+    language.data.of({ autocomplete: genericCompletion(autocomplete) }),
+    base.language.data.of({ autocomplete: genericCompletion(autocomplete) }),
   ];
 }