allow auth nodes to also use autocompletion and autosuggest variables

Author: jsajal

src/components/atoms/common/TextEditor.js

@@ -9,27 +9,30 @@ import { defaultKeymap } from '@codemirror/commands';
 import { syntaxHighlighting, defaultHighlightStyle, HighlightStyle, StreamLanguage } from '@codemirror/language';
 import { autocompletion, CompletionContext } from '@codemirror/autocomplete';
 import { tags, styleTags } from '@lezer/highlight';
+import { isEqual } from 'lodash';
 
-// Define the autocomplete function
-const myCompletions = (context) => {
-  let word = context.matchBefore(/{{\w*$/);
-  if (!word) return null;
-
-  return {
-    from: word.from,
-    options: [
-      { label: '{{example1}}', type: 'keyword' },
-      { label: '{{example2}}', type: 'variable' },
-      { label: '{{example3}}', type: 'text' },
-    ],
+// Function to dynamically generate autocomplete options
+const createAutocompleteSource = (options) => {
+  return (context) => {
+    let word = context.matchBefore(/\{\{\w*$/);
+    if (!word) return null;
+
+    return {
+      from: word.from,
+      options: options.map((option) => ({ label: `{{${option}}}`, type: 'keyword' })),
+    };
   };
 };
 
-// Configure the autocomplete extension
-const myAutocomplete = autocompletion({
-  override: [myCompletions],
-  activateOnTyping: true,
-});
+// Create a Compartment for autocomplete
+const autocompleteCompartment = new Compartment();
+
+// Function to update autocomplete options
+const updateAutocompleteOptions = (view, newOptions) => {
+  view.dispatch({
+    effects: autocompleteCompartment.reconfigure(autocompletion({ override: [createAutocompleteSource(newOptions)] })),
+  });
+};
 
 // Custom styles to hide scrollbar
 const hideScrollbar = EditorView.theme({
@@ -94,11 +97,16 @@ const highlightStyle = EditorView.baseTheme({
   },
 });
 
-export const TextEditor = ({ id, placeHolder, onChangeHandler, name, value, disableState }) => {
+export const TextEditor = ({ placeHolder, onChangeHandler, value, disableState, completionOptions, styles }) => {
   const editor1 = useRef();
   const [view, setView] = useState(null);
+  const [dynamicOptions, setDynamicOptions] = useState([]);
 
   if (view) {
+    if (!isEqual(dynamicOptions, completionOptions)) {
+      updateAutocompleteOptions(view, completionOptions);
+      setDynamicOptions(completionOptions);
+    }
     if (value != view.state.doc.toString()) {
       view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } });
     }
@@ -116,7 +124,7 @@ export const TextEditor = ({ id, placeHolder, onChangeHandler, name, value, disa
       extensions: [
         //EditorView.lineWrapping,
         placeholder(placeHolder),
-        myAutocomplete,
+        //myAutocomplete,
         //basicSetup,
         keymap.of([defaultKeymap, indentWithTab]),
         onUpdate,
@@ -126,6 +134,7 @@ export const TextEditor = ({ id, placeHolder, onChangeHandler, name, value, disa
         rebindEnterKey,
         highlightPlugin,
         highlightStyle,
+        autocompleteCompartment.of(autocompletion({ override: [createAutocompleteSource(dynamicOptions)] })),
       ],
     });
 
@@ -139,8 +148,8 @@ export const TextEditor = ({ id, placeHolder, onChangeHandler, name, value, disa
   }, []);
 
   const mainStyles =
-    'nodrag nowheel block w-3/4 rounded border border-slate-700 bg-background-light p-2.5 text-sm outline-none';
+    'nodrag nowheel block rounded border border-slate-700 bg-background-light p-2.5 text-sm outline-none';
   const intentStyles = disableState ? 'cursor-not-allowed text-slate-400' : 'text-slate-900';
 
-  return <div ref={editor1} className={`${mainStyles} ${intentStyles}`}></div>;
+  return <div ref={editor1} className={`${mainStyles} ${intentStyles} ${styles}`}></div>;
 };

src/components/molecules/flow/AddNodes.js

@@ -50,7 +50,6 @@ const AddNodes = ({ collectionId }) => {
 
   // Get all requests of this collections
   const collection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
-  console.log(collection);
   const nodesByTags = orderNodesByTags(collection.nodes, searchFilter);
 
   return (

src/components/molecules/flow/nodes/AuthNode.js

@@ -5,6 +5,10 @@ import useCanvasStore from 'stores/CanvasStore';
 import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
 import TextInput from 'components/atoms/common/TextInput';
+import { TextEditor } from 'components/atoms/common/TextEditor';
+import useCollectionStore from 'stores/CollectionStore';
+import { useTabStore } from 'stores/TabStore';
+import { cloneDeep } from 'lodash';
 
 const AuthNode = ({ id, data }) => {
   const setAuthNodeType = useCanvasStore((state) => state.setAuthNodeType);
@@ -15,6 +19,20 @@ const AuthNode = ({ id, data }) => {
     setBasicAuthValues(id, option, value);
   };
 
+  const getActiveVariables = () => {
+    const collectionId = useCanvasStore.getState().collectionId;
+    if (collectionId) {
+      const activeEnv = useCollectionStore
+        .getState()
+        .collections.find((c) => c.id === collectionId)
+        ?.environments.find((e) => e.name === useTabStore.getState().selectedEnv);
+      if (activeEnv) {
+        return Object.keys(cloneDeep(activeEnv.variables));
+      }
+    }
+    return [];
+  };
+
   return (
     <>
       <FlowNode
@@ -89,17 +107,21 @@ const AuthNode = ({ id, data }) => {
         </Listbox>
         {data.type === 'basic-auth' && (
           <div className='flex flex-col gap-2 py-4'>
-            <TextInput
+            <TextEditor
               placeHolder={`Username`}
-              onChangeHandler={(e) => handleChange(e.target.value, 'username')}
+              onChangeHandler={(value) => handleChange(value, 'username')}
               name={'username'}
               value={data.username ? data.username : ''}
+              completionOptions={getActiveVariables()}
+              styles={'w-full'}
             />
-            <TextInput
+            <TextEditor
               placeHolder={`Password`}
-              onChangeHandler={(e) => handleChange(e.target.value, 'password')}
+              onChangeHandler={(value) => handleChange(value, 'password')}
               name={'username'}
               value={data.password ? data.password : ''}
+              completionOptions={getActiveVariables()}
+              styles={'w-full'}
             />
           </div>
         )}

src/components/molecules/flow/nodes/RequestNode.js

@@ -13,6 +13,9 @@ import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
 import requestNodes from '../constants/requestNodes';
 import { TextEditor } from 'components/atoms/common/TextEditor';
+import useCollectionStore from 'stores/CollectionStore';
+import { useTabStore } from 'stores/TabStore';
+import { cloneDeep } from 'lodash';
 
 const RequestNode = ({ id, data }) => {
   const setRequestNodeUrl = useCanvasStore((state) => state.setRequestNodeUrl);
@@ -107,6 +110,20 @@ const RequestNode = ({ id, data }) => {
     );
   };
 
+  const getActiveVariables = () => {
+    const collectionId = useCanvasStore.getState().collectionId;
+    if (collectionId) {
+      const activeEnv = useCollectionStore
+        .getState()
+        .collections.find((c) => c.id === collectionId)
+        ?.environments.find((e) => e.name === useTabStore.getState().selectedEnv);
+      if (activeEnv) {
+        return Object.keys(cloneDeep(activeEnv.variables));
+      }
+    }
+    return [];
+  };
+
   return (
     <FlowNode
       title={data.requestType + ' Request'}
@@ -171,6 +188,8 @@ const RequestNode = ({ id, data }) => {
             onChangeHandler={handleUrlInputChange}
             name={'url'}
             value={data.url ? data.url : ''}
+            completionOptions={getActiveVariables()}
+            styles={'w-3/4'}
           />
         </div>
         <NodeHorizontalDivider />