Merge pull request #137 from FlowTestAI/header-variables

jsajal · web-flow · commit d3b07b0bbb64 · 2024-07-25T22:24:17.000-07:00
feat: allow env variables to be used in request headers
diff --git a/packages/flowtest-cli/graph/compute/requestnode.js b/packages/flowtest-cli/graph/compute/requestnode.js
@@ -119,7 +119,7 @@ class requestNode extends Node {
 
     if (this.nodeData.headers && this.nodeData.headers.length > 0) {
       this.nodeData.headers.map((pair, index) => {
-        headers[pair.name] = pair.value;
+        headers[computeVariables(pair.name, variablesDict)] = computeVariables(pair.value, variablesDict);
       });
     }
 
diff --git a/src/components/atoms/common/TextEditor.js b/src/components/atoms/common/TextEditor.js
@@ -45,6 +45,8 @@ const hideScrollbar = EditorView.theme({
   '.cm-content': {
     padding: '0', // Adjust padding to fit your needs
     overflow: 'auto',
+    lineHeight: '1.75rem',
+    fontSize: '1.125rem',
   },
   '.cm-scroller::-webkit-scrollbar': {
     display: 'none' /* For Chrome, Safari, and Opera */,
@@ -54,10 +56,12 @@ const hideScrollbar = EditorView.theme({
   },
   '&': {
     height: 'auto', // Adjust height to auto for single-line input
+    cursor: 'text',
   },
   '.cm-placeholder': {
     color: '#aaa', // Placeholder text color
   },
+  '&.cm-focused': { outline: 'none' },
 });
 
 // Rebind the Enter key to do nothing
@@ -98,27 +102,13 @@ const highlightStyle = EditorView.baseTheme({
 });
 
 export const TextEditor = ({ placeHolder, onChangeHandler, value, disableState, completionOptions, styles }) => {
-  const editor1 = useRef();
-  const [view, setView] = useState(null);
+  const editorRef = useRef(null);
+  const viewRef = useRef(null);
   const [dynamicOptions, setDynamicOptions] = useState(completionOptions);
 
-  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 } });
-    }
-  }
-
-  const onUpdate = EditorView.updateListener.of((v) => {
-    if (onChangeHandler) {
-      onChangeHandler(v.state.doc.toString());
-    }
-  });
-
   useEffect(() => {
+    if (!editorRef.current) return;
+
     const state = EditorState.create({
       doc: value,
       extensions: [
@@ -127,7 +117,11 @@ export const TextEditor = ({ placeHolder, onChangeHandler, value, disableState,
         //myAutocomplete,
         //basicSetup,
         keymap.of([defaultKeymap, indentWithTab]),
-        onUpdate,
+        EditorView.updateListener.of((v) => {
+          if (onChangeHandler && v.docChanged) {
+            onChangeHandler(v.state.doc.toString());
+          }
+        }),
         //EditorState.readOnly.of(props.readOnly || false),
         history(),
         hideScrollbar,
@@ -138,18 +132,36 @@ export const TextEditor = ({ placeHolder, onChangeHandler, value, disableState,
       ],
     });
 
-    const view = new EditorView({ state, parent: editor1.current });
-    setView(view);
+    const view = new EditorView({ state, parent: editorRef.current });
+    viewRef.current = view;
 
     return () => {
       view.destroy();
-      setView(null);
     };
   }, []);
 
-  const mainStyles =
-    'nodrag nowheel block rounded border border-slate-700 bg-background-light p-2.5 text-sm outline-none';
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+
+    // Update completion options if they've changed
+    if (!isEqual(dynamicOptions, completionOptions)) {
+      updateAutocompleteOptions(view, completionOptions);
+      setDynamicOptions(completionOptions);
+    }
+
+    // Update content if it's different from current editor content
+    const currentContent = view.state.doc.toString();
+    if (value !== currentContent) {
+      view.dispatch({
+        changes: { from: 0, to: currentContent.length, insert: value },
+      });
+    }
+  }, [value, completionOptions]);
+
+  //const mainStyles =
+  //  'nodrag nowheel block border border-slate-700 bg-background-light p-2.5 text-base outline-none';
   const intentStyles = disableState ? 'cursor-not-allowed text-slate-400' : 'text-slate-900';
 
-  return <div ref={editor1} className={`${mainStyles} ${intentStyles} ${styles}`}></div>;
+  return <div ref={editorRef} className={`${styles}`}></div>;
 };
diff --git a/src/components/molecules/flow/graph/compute/requestnode.js b/src/components/molecules/flow/graph/compute/requestnode.js
@@ -99,7 +99,7 @@ class requestNode extends Node {
 
     if (this.nodeData.headers && this.nodeData.headers.length > 0) {
       this.nodeData.headers.map((pair, index) => {
-        headers[pair.name] = pair.value;
+        headers[computeVariables(pair.name, variablesDict)] = computeVariables(pair.value, variablesDict);
       });
     }
 
diff --git a/src/components/molecules/flow/nodes/AuthNode.js b/src/components/molecules/flow/nodes/AuthNode.js
@@ -11,10 +11,11 @@ import { useTabStore } from 'stores/TabStore';
 import { cloneDeep } from 'lodash';
 
 const AuthNode = ({ id, data }) => {
+  const validAuthValues = ['no-auth', 'basic-auth', 'bearer-token'];
   const setAuthNodeType = useCanvasStore((state) => state.setAuthNodeType);
   const setBasicAuthValues = useCanvasStore((state) => state.setBasicAuthValues);
   const setBearerTokenValue = useCanvasStore((state) => state.setBearerTokenValue);
-  const [selected, setSelected] = useState(data.type ? data.type : 'no-auth');
+  const [selected, setSelected] = useState(data.type && validAuthValues.includes(data.type) ? data.type : 'no-auth');
 
   const handleBasicAuthValueChange = (value, option) => {
     setBasicAuthValues(id, option, value);
@@ -148,27 +149,33 @@ const AuthNode = ({ id, data }) => {
                 name={'username'}
                 value={data.username ? data.username : ''}
                 completionOptions={getActiveVariables()}
-                styles={'w-full'}
+                styles={
+                  'w-full nodrag nowheel block rounded border border-slate-700 bg-background-light p-2.5 text-base outline-none'
+                }
               />
               <TextEditor
                 placeHolder={`Password`}
                 onChangeHandler={(value) => handleBasicAuthValueChange(value, 'password')}
                 name={'password'}
                 value={data.password ? data.password : ''}
                 completionOptions={getActiveVariables()}
-                styles={'w-full'}
+                styles={
+                  'w-full nodrag nowheel block rounded border border-slate-700 bg-background-light p-2.5 text-base outline-none'
+                }
               />
             </div>
           )}
           {data.type === 'bearer-token' && (
             <div className='flex flex-col gap-2 py-4'>
               <TextEditor
-                placeHolder={`Token`}
+                placeHolder={'Token'}
                 onChangeHandler={(value) => handleBearerTokenChange(value)}
                 name={'token'}
                 value={data.token ? data.token : ''}
                 completionOptions={getActiveVariables()}
-                styles={'w-full'}
+                styles={
+                  'w-full nodrag nowheel block rounded border border-slate-700 bg-background-light p-2.5 text-base outline-none'
+                }
               />
             </div>
           )}
diff --git a/src/components/molecules/flow/nodes/RequestNode.js b/src/components/molecules/flow/nodes/RequestNode.js
@@ -158,6 +158,28 @@ const RequestNode = ({ id, data }) => {
     );
   };
 
+  const headerNameChange = (index, updateName) => {
+    const currentHeaders = useCanvasStore.getState().nodes.find((n) => n.id === id)?.data?.headers || [];
+    const updatedHeaders = currentHeaders.map((p, idx) => {
+      if (idx === index) {
+        return { name: updateName, value: p.value };
+      }
+      return p;
+    });
+    setRequestNodeHeaders(id, updatedHeaders);
+  };
+
+  const headerValueChange = (index, updateValue) => {
+    const currentHeaders = useCanvasStore.getState().nodes.find((n) => n.id === id)?.data?.headers || [];
+    const updatedHeaders = currentHeaders.map((p, idx) => {
+      if (idx === index) {
+        return { name: p.name, value: updateValue };
+      }
+      return p;
+    });
+    setRequestNodeHeaders(id, updatedHeaders);
+  };
+
   const renderHeaders = () => {
     return (
       <div>
@@ -173,34 +195,27 @@ const RequestNode = ({ id, data }) => {
             <tbody>
               {data.headers.map((pair, index) => (
                 <tr key={index} className='text-ghost-700 hover:bg-ghost-50 border-b border-gray-200 text-sm'>
-                  <td className='whitespace-no-wrap border-2 border-background-dark'>
-                    <input
-                      type='text'
-                      className='nodrag nowheel block h-9 w-full bg-background-light p-2.5 outline-none'
+                  <td className='whitespace-no-wrap w-[45%] border-2 border-background-dark'>
+                    <TextEditor
+                      placeHolder=''
+                      onChangeHandler={(name) => headerNameChange(index, name)}
                       name='header-name'
                       value={pair.name}
-                      onChange={(e) => {
-                        const existingHeaders = [...data.headers];
-                        existingHeaders[index].name = e.target.value;
-                        setRequestNodeHeaders(id, existingHeaders);
-                      }}
+                      completionOptions={getActiveVariables()}
+                      styles={'w-40 nodrag nowheel block bg-background-light p-2.5 outline-none'}
                     />
                   </td>
-                  <td className='whitespace-no-wrap border-2 border-background-dark'>
-                    <input
-                      type='text'
-                      className='nodrag nowheel block h-9 w-full bg-background-light p-2.5 outline-none'
+                  <td className='whitespace-no-wrap w-[45%] border-2 border-background-dark'>
+                    <TextEditor
+                      placeHolder=''
+                      onChangeHandler={(value) => headerValueChange(index, value)}
                       name='header-value'
-                      data-type='text'
-                      onChange={(e) => {
-                        const existingHeaders = [...data.headers];
-                        existingHeaders[index].value = e.target.value;
-                        setRequestNodeHeaders(id, existingHeaders);
-                      }}
                       value={pair.value}
+                      completionOptions={getActiveVariables()}
+                      styles={'w-40 nodrag nowheel block bg-background-light p-2.5 outline-none'}
                     />
                   </td>
-                  <td className='border-2 border-background-dark p-2'>
+                  <td className='w-[10%] border-2 border-background-dark p-2'>
                     <div className='flex items-center gap-4'>
                       {/* <Tooltip text={variables[id].type} /> */}
                       <div
@@ -320,7 +335,9 @@ const RequestNode = ({ id, data }) => {
           name={'url'}
           value={data.url ? data.url : ''}
           completionOptions={getActiveVariables()}
-          styles={'w-full mb-2'}
+          styles={
+            'w-full mb-2 nodrag nowheel rounded block border border-slate-700 bg-background-light p-2.5 text-base outline-none'
+          }
         />
         <NodeHorizontalDivider />
         <Tab.Group defaultIndex={getDefaultIndex()}>

Original file line number	Diff line number	Diff line change
`@@ -119,7 +119,7 @@ class requestNode extends Node {`
`119`	`119`
`120`	`120`	`if (this.nodeData.headers && this.nodeData.headers.length > 0) {`
`121`	`121`	`this.nodeData.headers.map((pair, index) => {`
`122`		`- headers[pair.name] = pair.value;`
	`122`	`+ headers[computeVariables(pair.name, variablesDict)] = computeVariables(pair.value, variablesDict);`
`123`	`123`	`});`
`124`	`124`	`}`
`125`	`125`
Original file line number	Diff line number	Diff line change
`@@ -99,7 +99,7 @@ class requestNode extends Node {`
`99`	`99`
`100`	`100`	`if (this.nodeData.headers && this.nodeData.headers.length > 0) {`
`101`	`101`	`this.nodeData.headers.map((pair, index) => {`
`102`		`- headers[pair.name] = pair.value;`
	`102`	`+ headers[computeVariables(pair.name, variablesDict)] = computeVariables(pair.value, variablesDict);`
`103`	`103`	`});`
`104`	`104`	`}`
`105`	`105`