feat(#1033): Add possibility to prompt for variables

packages/bruno-app/src/components/CodeEditor/index.js

@@ -61,7 +61,8 @@ if (!SERVER_RENDERED) {
     'bru.setEnvVar(key,value)',
     'bru.getVar(key)',
     'bru.setVar(key,value)',
-    'bru.setNextRequest(requestName)'
+    'bru.setNextRequest(requestName)',
+    'bru.prompt(varName, prompt)'
   ];
   CodeMirror.registerHelper('hint', 'brunoJS', (editor, options) => {
     const cursor = editor.getCursor();

packages/bruno-app/src/components/Prompt/StyledWrapper.js

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 600;
+    table-layout: fixed;
+
+    thead,
+    td {
+      border: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder};
+      padding: 4px 10px;
+
+      &:nth-child(1),
+      &:nth-child(4) {
+        width: 70px;
+      }
+      &:nth-child(5) {
+        width: 40px;
+      }
+
+      &:nth-child(2) {
+        width: 25%;
+      }
+    }
+
+    thead {
+      color: ${(props) => props.theme.table.thead.color};
+      font-size: 0.8125rem;
+      user-select: none;
+    }
+    thead td {
+      padding: 6px 10px;
+    }
+  }
+
+  input[type='text'] {
+    width: 100%;
+    border: solid 1px transparent;
+    outline: none !important;
+    background-color: transparent;
+
+    &:focus {
+      outline: none !important;
+      border: solid 1px transparent;
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Prompt/index.js

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+import { isElectron } from 'utils/common/platform';
+import Modal from 'components/Modal';
+import StyledWrapper from 'components/Prompt/StyledWrapper';
+
+const Prompt = () => {
+  if (typeof window == 'undefined') {
+    return <div></div>;
+  }
+  const { ipcRenderer } = window;
+  const [showPromptModal, setShowPromptModal] = useState(false);
+  const [promptVars, setPromptVars] = useState({});
+  const [variables, setVariables] = useState({});
+
+  useEffect(() => {
+    if (!isElectron()) {
+      return;
+    }
+    const clearListener = ipcRenderer.on('main:prompt-variable', (args) => {
+      setVariables(args.variables);
+      setPromptVars(args.promptVars);
+      setShowPromptModal(true);
+    });
+    return () => {
+      clearListener();
+    };
+  }, [isElectron, ipcRenderer, setShowPromptModal, setVariables, setPromptVars]);
+
+  if (!showPromptModal) {
+    return <div></div>;
+  }
+
+  function onClose() {
+    ipcRenderer.invoke('main:prompt-variable-return', variables);
+    setShowPromptModal(false);
+  }
+  function onCancel() {
+    ipcRenderer.invoke('main:prompt-variable-return', {});
+    setShowPromptModal(false);
+  }
+
+  function changeValue(varName, value) {
+    setVariables({ ...variables, [varName]: value });
+  }
+
+  return (
+    <StyledWrapper>
+      <Modal
+        size="md"
+        title="Variables"
+        confirmText="OK"
+        handleCancel={onCancel}
+        disableEscapeKey={true}
+        disableCloseOnOutsideClick={true}
+        closeModalFadeTimeout={150}
+        hideFooter={true}
+      >
+        <table>
+          <thead>
+            <tr>
+              <td>Name</td>
+              <td>Value</td>
+            </tr>
+          </thead>
+          <tbody>
+            {promptVars.map((promptVar) => (
+              <tr>
+                <td>{promptVar.prompt}</td>
+                <td>
+                  <input
+                    type="text"
+                    className="block textbox mt-2 w-full"
+                    onChange={(event) => changeValue(promptVar.varName, event.target.value)}
+                    value={variables[promptVar.varName]}
+                  ></input>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <button className="btn btn-secondary btn-md mt-4" onClick={onClose}>
+          OK
+        </button>
+      </Modal>
+    </StyledWrapper>
+  );
+};
+
+export default Prompt;

packages/bruno-app/src/components/RequestTabPanel/index.js

@@ -18,6 +18,7 @@ import CollectionSettings from 'components/CollectionSettings';
 import { DocExplorer } from '@usebruno/graphql-docs';
 
 import StyledWrapper from './StyledWrapper';
+import Prompt from 'components/Prompt';
 
 const MIN_LEFT_PANE_WIDTH = 300;
 const MIN_RIGHT_PANE_WIDTH = 350;
@@ -194,6 +195,7 @@ const RequestTabPanel = () => {
           </DocExplorer>
         </div>
       ) : null}
+      <Prompt />
     </StyledWrapper>
   );
 };

packages/bruno-electron/src/ipc/network/index.js

@@ -286,6 +286,20 @@ const registerNetworkIpc = (mainWindow) => {
         scriptingConfig
       );
 
+      if (scriptResult.promptVars) {
+        await new Promise(async (resolve) => {
+          ipcMain.handle('main:prompt-variable-return', (event, variables) => {
+            ipcMain.removeHandler('main:prompt-variable-return');
+            Object.getOwnPropertyNames(variables).forEach((key) => (collectionVariables[key] = variables[key]));
+            resolve();
+          });
+          mainWindow.webContents.send('main:prompt-variable', {
+            variables: collectionVariables,
+            promptVars: scriptResult.promptVars
+          });
+        });
+      }
+
       mainWindow.webContents.send('main:script-environment-update', {
         envVariables: scriptResult.envVariables,
         collectionVariables: scriptResult.collectionVariables,
@@ -366,6 +380,20 @@ const registerNetworkIpc = (mainWindow) => {
         scriptingConfig
       );
 
+      if (scriptResult.promptVars) {
+        await new Promise(async (resolve) => {
+          ipcMain.handle('main:prompt-variable-return', (event, variables) => {
+            ipcMain.removeHandler('main:prompt-variable-return');
+            Object.getOwnPropertyNames(variables).forEach((key) => (collectionVariables[key] = variables[key]));
+            resolve();
+          });
+          mainWindow.webContents.send('main:prompt-variable', {
+            variables: collectionVariables,
+            promptVars: scriptResult.promptVars
+          });
+        });
+      }
+
       mainWindow.webContents.send('main:script-environment-update', {
         envVariables: scriptResult.envVariables,
         collectionVariables: scriptResult.collectionVariables,

packages/bruno-js/src/bru.js

@@ -80,6 +80,13 @@ class Bru {
   setNextRequest(nextRequest) {
     this.nextRequest = nextRequest;
   }
+
+  prompt(varName, prompt) {
+    if (!this.promptVars) {
+      this.promptVars = [];
+    }
+    this.promptVars = [...this.promptVars, { varName, prompt }];
+  }
 }
 
 module.exports = Bru;

packages/bruno-js/src/runtime/script-runtime.js

@@ -124,7 +124,8 @@ class ScriptRuntime {
       request,
       envVariables: cleanJson(envVariables),
       collectionVariables: cleanJson(collectionVariables),
-      nextRequestName: bru.nextRequest
+      nextRequestName: bru.nextRequest,
+      promptVars: bru.promptVars
     };
   }
 
@@ -217,7 +218,8 @@ class ScriptRuntime {
       response,
       envVariables: cleanJson(envVariables),
       collectionVariables: cleanJson(collectionVariables),
-      nextRequestName: bru.nextRequest
+      nextRequestName: bru.nextRequest,
+      promptVars: bru.promptVars
     };
   }
 }