Base environments fully working

src-web/components/EnvironmentActionsDropdown.tsx

@@ -52,7 +52,11 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
                 label: e.name,
                 rightSlot: e.id === activeEnvironment?.id ? <Icon icon="check" /> : undefined,
                 onSelect: async () => {
-                  routes.setEnvironment(e);
+                  if (e.id !== activeEnvironment?.id) {
+                    routes.setEnvironment(e);
+                  } else {
+                    routes.setEnvironment(null);
+                  }
                 },
               }),
               [activeEnvironment?.id],

src-web/components/EnvironmentEditDialog.tsx

@@ -51,7 +51,7 @@ export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) {
               justify="start"
               className={classNames(
                 'w-full',
-                'text-gray-600 hocus:text-gray-800',
+                'text-gray-600 hocus:text-gray-800 !ring-0',
                 selectedEnvironment == null && 'bg-highlightSecondary !text-gray-900',
               )}
               onClick={() => {

src-web/components/Overlay.tsx

@@ -32,7 +32,7 @@ export function Overlay({
   return (
     <Portal name={portalName}>
       {open && (
-        <FocusTrap>
+        <FocusTrap> 
           <motion.div
             className={classNames('fixed inset-0', zIndexes[zIndex])}
             initial={{ opacity: 0 }}

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

@@ -13,6 +13,7 @@ import { baseExtensions, getLanguageExtension, multiLineExtensions } from './ext
 import type { GenericCompletionConfig } from './genericCompletion';
 import { singleLineExt } from './singleLine';
 import { useActiveEnvironment } from '../../../hooks/useActiveEnvironment';
+import { useActiveWorkspace } from '../../../hooks/useActiveWorkspace';
 
 // Export some things so all the code-split parts are in this file
 export { buildClientSchema, getIntrospectionQuery } from 'graphql/utilities';
@@ -72,7 +73,9 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   ref,
 ) {
   const e = useActiveEnvironment();
+  const w = useActiveWorkspace();
   const environment = autocompleteVariables ? e : null;
+  const workspace = autocompleteVariables ? w : null;
 
   const cm = useRef<{ view: EditorView; languageCompartment: Compartment } | null>(null);
   useImperativeHandle(ref, () => cm.current?.view);
@@ -124,9 +127,15 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   useEffect(() => {
     if (cm.current === null) return;
     const { view, languageCompartment } = cm.current;
-    const ext = getLanguageExtension({ contentType, environment, useTemplating, autocomplete });
+    const ext = getLanguageExtension({
+      contentType,
+      environment,
+      workspace,
+      useTemplating,
+      autocomplete,
+    });
     view.dispatch({ effects: languageCompartment.reconfigure(ext) });
-  }, [contentType, autocomplete, useTemplating, environment]);
+  }, [contentType, autocomplete, useTemplating, environment, workspace]);
 
   useEffect(() => {
     if (cm.current === null) return;
@@ -152,6 +161,7 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
         useTemplating,
         autocomplete,
         environment,
+        workspace,
       });
 
       const state = EditorState.create({
@@ -271,7 +281,7 @@ function getExtensions({
     EditorView.domEventHandlers({
       focus: () => onFocus.current?.(),
       blur: () => onBlur.current?.(),
-      keydown: e => onKeyDown.current?.(e),
+      keydown: (e) => onKeyDown.current?.(e),
     }),
 
     // Handle onChange

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

@@ -36,7 +36,7 @@ import type { EditorProps } from './index';
 import { text } from './text/extension';
 import { twig } from './twig/extension';
 import { url } from './url/extension';
-import type { Environment } from '../../../lib/models';
+import type { Environment, Workspace } from '../../../lib/models';
 
 export const myHighlightStyle = HighlightStyle.define([
   {
@@ -96,8 +96,9 @@ export function getLanguageExtension({
   contentType,
   useTemplating = false,
   environment,
+  workspace,
   autocomplete,
-}: { environment: Environment | null } & Pick<
+}: { environment: Environment | null; workspace: Workspace | null } & Pick<
   EditorProps,
   'contentType' | 'useTemplating' | 'autocomplete'
 >) {
@@ -110,7 +111,7 @@ export function getLanguageExtension({
     return base;
   }
 
-  return twig(base, environment, autocomplete);
+  return twig(base, environment, workspace, autocomplete);
 }
 
 export const baseExtensions = [

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

@@ -7,14 +7,17 @@ import { placeholders } from './placeholder';
 import { textLanguageName } from '../text/extension';
 import { twigCompletion } from './completion';
 import { parser as twigParser } from './twig';
-import type { Environment } from '../../../../lib/models';
+import type { Environment, Workspace } from '../../../../lib/models';
 
 export function twig(
   base: LanguageSupport,
   environment: Environment | null,
+  workspace: Workspace | null,
   autocomplete?: GenericCompletionConfig,
 ) {
-  const variables = environment?.variables.filter(v => v.enabled) ?? [];
+  const variables =
+    [...(workspace?.variables ?? []), ...(environment?.variables ?? [])].filter((v) => v.enabled) ??
+    [];
   const completions = twigCompletion({ options: variables });
 
   const language = mixLanguage(base);