feat(#122): supporting process.env vars in UI and electron layer

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js

@@ -5,18 +5,28 @@ const Wrapper = styled.div`
  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) {
+ width: 30%;
+ }
+
+ &:nth-child(3) {
+ width: 70px;
+ }
  }
 
  thead {
  color: ${(props) => props.theme.table.thead.color};
  font-size: 0.8125rem;
  user-select: none;
  }
- td {
+ thead td {
  padding: 6px 10px;
  }
  }

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

@@ -2,13 +2,16 @@ import React, { useReducer } from 'react';
 import toast from 'react-hot-toast';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
+import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import reducer from './reducer';
+import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 
 const EnvironmentVariables = ({ environment, collection }) => {
  const dispatch = useDispatch();
+ const { storedTheme } = useTheme();
  const [state, reducerDispatch] = useReducer(reducer, { hasChanges: false, variables: environment.variables || [] });
  const { variables, hasChanges } = state;
 
@@ -86,15 +89,11 @@ const EnvironmentVariables = ({ environment, collection }) => {
  />
  </td>
  <td>
- <input
- type="text"
- autoComplete="off"
- autoCorrect="off"
- autoCapitalize="off"
- spellCheck="false"
+ <SingleLineEditor
  value={variable.value}
- className="mousetrap"
- onChange={(e) => handleVarChange(e, variable, 'value')}
+ theme={storedTheme}
+ onChange={(newValue) => handleVarChange({ target: { value: newValue } }, variable, 'value')}
+ collection={collection}
  />
  </td>
  <td>

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

@@ -19,7 +19,7 @@ const Wrapper = styled.div`
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
- z-index: 1003;
+ z-index: 10;
  }
 
  .bruno-modal-card {
@@ -28,7 +28,7 @@ const Wrapper = styled.div`
  background: var(--color-background-top);
  border-radius: var(--border-radius);
  position: relative;
- z-index: 1003;
+ z-index: 10;
  max-width: calc(100% - var(--spacing-base-unit));
  box-shadow: var(--box-shadow-base);
  display: flex;

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

@@ -19,6 +19,7 @@ const StyledWrapper = styled.div`
 
  .CodeMirror-scroll {
  overflow: hidden !important;
+ padding-bottom: 50px !important;
  }
 
  .CodeMirror-hscrollbar {

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

@@ -31,6 +31,7 @@ class SingleLineEditor extends Component {
  brunoVarInfo: {
  variables: getAllVariables(this.props.collection)
  },
+ scrollbarStyle: null,
  extraKeys: {
  Enter: () => {
  if (this.props.onRun) {

packages/bruno-app/src/components/VariablesView/VariablesTable/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import forOwn from 'lodash/forOwn';
+import isObject from 'lodash/isObject';
 import cloneDeep from 'lodash/cloneDeep';
 import { uuid } from 'utils/common';
 import StyledWrapper from './StyledWrapper';
@@ -15,6 +16,14 @@ const VariablesTable = ({ variables, collectionVariables }) => {
  });
  });
 
+ const getValueToDisplay = (value) => {
+ if (value === undefined) {
+ return '';
+ }
+
+ return isObject(value) ? JSON.stringify(value) : value;
+ };
+
  return (
  <StyledWrapper>
  <div className="flex flex-col w-full">
@@ -24,7 +33,9 @@ const VariablesTable = ({ variables, collectionVariables }) => {
  return (
  <div key={variable.uid} className="flex">
  <div className="variable-name text-yellow-600 text-right pr-2">{variable.name}</div>
- <div className="variable-value pl-2 whitespace-normal text-left flex-grow">{variable.value}</div>
+ <div className="variable-value pl-2 whitespace-normal text-left flex-grow">
+ {getValueToDisplay(variable.value)}
+ </div>
  </div>
  );
  })
@@ -38,7 +49,9 @@ const VariablesTable = ({ variables, collectionVariables }) => {
  return (
  <div key={variable.uid} className="flex">
  <div className="variable-name text-yellow-600 text-right pr-2">{variable.name}</div>
- <div className="variable-value pl-2 whitespace-normal text-left flex-grow">{variable.value}</div>
+ <div className="variable-value pl-2 whitespace-normal text-left flex-grow">
+ {getValueToDisplay(variable.value)}
+ </div>
  </div>
  );
  })

packages/bruno-app/src/providers/App/useCollectionTreeSync.js

@@ -8,6 +8,7 @@ import {
  collectionUnlinkDirectoryEvent,
  collectionUnlinkEnvFileEvent,
  scriptEnvironmentUpdateEvent,
+ processEnvUpdateEvent,
  collectionRenamedEvent,
  runRequestEvent,
  runFolderEvent
@@ -97,6 +98,10 @@ const useCollectionTreeSync = () => {
  dispatch(scriptEnvironmentUpdateEvent(val));
  };
 
+ const _processEnvUpdate = (val) => {
+ dispatch(processEnvUpdateEvent(val));
+ };
+
  const _collectionRenamed = (val) => {
  dispatch(collectionRenamedEvent(val));
  };
@@ -119,7 +124,8 @@ const useCollectionTreeSync = () => {
  const removeListener6 = ipcRenderer.on('main:collection-renamed', _collectionRenamed);
  const removeListener7 = ipcRenderer.on('main:run-folder-event', _runFolderEvent);
  const removeListener8 = ipcRenderer.on('main:run-request-event', _runRequestEvent);
- const removeListener9 = ipcRenderer.on('main:console-log', (val) => {
+ const removeListener9 = ipcRenderer.on('main:process-env-update', _processEnvUpdate);
+ const removeListener10 = ipcRenderer.on('main:console-log', (val) => {
  console[val.type](...val.args);
  });
 
@@ -133,6 +139,7 @@ const useCollectionTreeSync = () => {
  removeListener7();
  removeListener8();
  removeListener9();
+ removeListener10();
  };
  }, [isElectron]);
 };

packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js

@@ -177,6 +177,14 @@ export const collectionsSlice = createSlice({
  collection.collectionVariables = collectionVariables;
  }
  },
+ processEnvUpdateEvent: (state, action) => {
+ const { collectionUid, processEnvVariables } = action.payload;
+ const collection = findCollectionByUid(state.collections, collectionUid);
+
+ if (collection) {
+ collection.processEnvVariables = processEnvVariables;
+ }
+ },
  requestCancelled: (state, action) => {
  const { itemUid, collectionUid } = action.payload;
  const collection = findCollectionByUid(state.collections, collectionUid);
@@ -1158,6 +1166,7 @@ export const {
  renameItem,
  cloneItem,
  scriptEnvironmentUpdateEvent,
+ processEnvUpdateEvent,
  requestCancelled,
  responseReceived,
  saveRequest,

packages/bruno-app/src/styles/_buttons.scss

@@ -1 +0,0 @@
-

packages/bruno-app/src/styles/app.scss

@@ -1 +1 @@
-@import "buttons";
+@import 'buttons';

packages/bruno-app/src/styles/globals.css

@@ -1,4 +1,3 @@
-
 :root {
  --color-brand: #546de5;
  --color-text: rgb(52 52 52);
@@ -21,7 +20,8 @@
  --color-method-head: rgb(52 52 52);
 }
 
-html, body {
+html,
+body {
  margin: 0;
  padding: 0;
  font-size: 1rem;
@@ -38,15 +38,18 @@ body {
  font-size: 0.875rem;
 }
 
-body::-webkit-scrollbar, .CodeMirror-vscrollbar::-webkit-scrollbar {
+body::-webkit-scrollbar,
+.CodeMirror-vscrollbar::-webkit-scrollbar {
  width: 0.6rem;
 }
-
-body::-webkit-scrollbar-track, .CodeMirror-vscrollbar::-webkit-scrollbar-track {
+
+body::-webkit-scrollbar-track,
+.CodeMirror-vscrollbar::-webkit-scrollbar-track {
  background-color: #f1f1f1;
 }
-
-body::-webkit-scrollbar-thumb, .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
+
+body::-webkit-scrollbar-thumb,
+.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
  background-color: #cdcdcd;
  border-radius: 5rem;
 }

packages/bruno-app/src/utils/codemirror/brunoVarInfo.js

@@ -8,6 +8,7 @@
 
 let CodeMirror;
 const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
+const { get } = require('lodash');
 
 if (!SERVER_RENDERED) {
  CodeMirror = require('codemirror');
@@ -20,7 +21,7 @@ if (!SERVER_RENDERED) {
  // str is of format {{variableName}}, extract variableName
  // we are seeing that from the gql query editor, the token string is of format variableName
  const variableName = str.replace('{{', '').replace('}}', '').trim();
- const variableValue = options.variables[variableName];
+ const variableValue = get(options.variables, variableName);
 
  const into = document.createElement('div');
  const descriptionDiv = document.createElement('div');

packages/bruno-app/src/utils/collections/index.js

@@ -542,6 +542,11 @@ export const getAllVariables = (collection) => {
 
  return {
  ...environmentVariables,
- ...collection.collectionVariables
+ ...collection.collectionVariables,
+ process: {
+ env: {
+ ...collection.processEnvVariables
+ }
+ }
  };
 };

packages/bruno-app/src/utils/common/codemirror.js

@@ -1,10 +1,18 @@
+import get from 'lodash/get';
+import isString from 'lodash/isString';
+
 let CodeMirror;
 const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
 
 if (!SERVER_RENDERED) {
  CodeMirror = require('codemirror');
 }
 
+const pathFoundInVariables = (path, obj) => {
+ const value = get(obj, path);
+ return isString(value);
+};
+
 export const defineCodeMirrorBrunoVariablesMode = (variables, mode) => {
  CodeMirror.defineMode('brunovariables', function (config, parserConfig) {
  let variablesOverlay = {
@@ -15,7 +23,8 @@ export const defineCodeMirrorBrunoVariablesMode = (variables, mode) => {
  while ((ch = stream.next()) != null) {
  if (ch == '}' && stream.next() == '}') {
  stream.eat('}');
- if (word in variables) {
+ let found = pathFoundInVariables(word, variables);
+ if (found) {
  return 'variable-valid';
  } else {
  return 'variable-invalid';

packages/bruno-electron/package.json

@@ -27,6 +27,7 @@
  "form-data": "^4.0.0",
  "fs-extra": "^10.1.0",
  "graphql": "^16.6.0",
+ "handlebars": "^4.7.8",
  "is-valid-path": "^0.1.1",
  "lodash": "^4.17.21",
  "mustache": "^4.2.0",

packages/bruno-electron/src/app/watcher.js

@@ -4,11 +4,13 @@ const path = require('path');
 const chokidar = require('chokidar');
 const { hasJsonExtension, hasBruExtension, writeFile } = require('../utils/filesystem');
 const { bruToEnvJson, envJsonToBru, bruToJson, jsonToBru } = require('../bru');
+const { dotenvToJson } = require('@usebruno/lang');
 
 const { isLegacyEnvFile, migrateLegacyEnvFile, isLegacyBruFile, migrateLegacyBruFile } = require('../bru/migrate');
 const { itemSchema } = require('@usebruno/schema');
 const { uuid } = require('../utils/common');
 const { getRequestUid } = require('../cache/requestUids');
+const { setDotEnvVars } = require('../store/process-env');
 
 const isJsonEnvironmentConfig = (pathname, collectionPath) => {
  const dirname = path.dirname(pathname);
@@ -17,6 +19,13 @@ const isJsonEnvironmentConfig = (pathname, collectionPath) => {
  return dirname === collectionPath && basename === 'environments.json';
 };
 
+const isDotEnvFile = (pathname, collectionPath) => {
+ const dirname = path.dirname(pathname);
+ const basename = path.basename(pathname);
+
+ return dirname === collectionPath && basename === '.env';
+};
+
 const isBruEnvironmentConfig = (pathname, collectionPath) => {
  const dirname = path.dirname(pathname);
  const envDirectory = path.join(collectionPath, 'environments');
@@ -125,6 +134,25 @@ const unlinkEnvironmentFile = async (win, pathname, collectionUid) => {
 const add = async (win, pathname, collectionUid, collectionPath) => {
  console.log(`watcher add: ${pathname}`);
 
+ if (isDotEnvFile(pathname, collectionPath)) {
+ try {
+ const content = fs.readFileSync(pathname, 'utf8');
+ const jsonData = dotenvToJson(content);
+
+ setDotEnvVars(collectionUid, jsonData);
+ const payload = {
+ collectionUid,
+ processEnvVariables: {
+ ...process.env,
+ ...jsonData
+ }
+ };
+ win.webContents.send('main:process-env-update', payload);
+ } catch (err) {
+ console.error(err);
+ }
+ }
+
  if (isJsonEnvironmentConfig(pathname, collectionPath)) {
  try {
  const dirname = path.dirname(pathname);
@@ -220,6 +248,25 @@ const addDirectory = (win, pathname, collectionUid, collectionPath) => {
 };
 
 const change = async (win, pathname, collectionUid, collectionPath) => {
+ if (isDotEnvFile(pathname, collectionPath)) {
+ try {
+ const content = fs.readFileSync(pathname, 'utf8');
+ const jsonData = dotenvToJson(content);
+
+ setDotEnvVars(collectionUid, jsonData);
+ const payload = {
+ collectionUid,
+ processEnvVariables: {
+ ...process.env,
+ ...jsonData
+ }
+ };
+ win.webContents.send('main:process-env-update', payload);
+ } catch (err) {
+ console.error(err);
+ }
+ }
+
  if (isBruEnvironmentConfig(pathname, collectionPath)) {
  return changeEnvironmentFile(win, pathname, collectionUid);
  }