feat: toggle visibility of secret envVars (#650)

* feat: toggle visibility of secret envVars

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* feat: also hide secrets in environment settings

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* style: run prettier

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor: resolve conflict

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

---------

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

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

@@ -11,6 +11,7 @@ import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import { uuid } from 'utils/common';
 import { variableNameRegex } from 'utils/common/regex';
+import { maskInputValue } from 'utils/collections';
 
 const EnvironmentVariables = ({ environment, collection }) => {
   const dispatch = useDispatch();
@@ -120,13 +121,17 @@ const EnvironmentVariables = ({ environment, collection }) => {
                   <ErrorMessage name={`${index}.name`} />
                 </td>
                 <td>
-                  <SingleLineEditor
+                  {variable.secret ? (
-                    theme={storedTheme}
+                    <div>{maskInputValue(variable.value)}</div>
-                    collection={collection}
+                  ) : (
-                    name={`${index}.value`}
+                    <SingleLineEditor
-                    value={variable.value}
+                      theme={storedTheme}
-                    onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
+                      collection={collection}
-                  />
+                      name={`${index}.value`}
+                      value={variable.value}
+                      onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
+                    />
+                  )}
                 </td>
                 <td>
                   <input

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

@@ -1,23 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
 import get from 'lodash/get';
 import filter from 'lodash/filter';
 import { Inspector } from 'react-inspector';
 import { useTheme } from 'providers/Theme';
-import { findEnvironmentInCollection } from 'utils/collections';
+import { findEnvironmentInCollection, maskInputValue } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
+import { IconEye, IconEyeOff } from '@tabler/icons';
 
 const KeyValueExplorer = ({ data, theme }) => {
   data = data || {};
+  const [showSecret, setShowSecret] = useState(false);
 
   return (
     <div>
+      <SecretToggle showSecret={showSecret} onClick={() => setShowSecret(!showSecret)} />
       <table className="border-collapse">
         <tbody>
-          {Object.entries(data).map(([key, value]) => (
+          {data.map((envVar) => (
-            <tr key={key}>
+            <tr key={envVar.name}>
-              <td className="px-2 py-1">{key}</td>
+              <td className="px-2 py-1">{envVar.name}</td>
               <td className="px-2 py-1">
-                <Inspector data={value} theme={theme} />
+                <Inspector
+                  data={!showSecret && envVar.secret ? maskInputValue(envVar.value) : envVar.value}
+                  theme={theme}
+                />
               </td>
             </tr>
           ))}
@@ -41,10 +47,6 @@ const EnvVariables = ({ collection, theme }) => {
 
   const envVars = get(environment, 'variables', []);
   const enabledEnvVars = filter(envVars, (variable) => variable.enabled);
-  const envVarsObj = enabledEnvVars.reduce((acc, curr) => {
-    acc[curr.name] = curr.value;
-    return acc;
-  }, {});
 
   return (
     <>
@@ -53,7 +55,7 @@ const EnvVariables = ({ collection, theme }) => {
         <span className="muted ml-2">({environment.name})</span>
       </div>
       {enabledEnvVars.length > 0 ? (
-        <KeyValueExplorer data={envVarsObj} theme={theme} />
+        <KeyValueExplorer data={enabledEnvVars} theme={theme} />
       ) : (
         <div className="muted text-xs">No environment variables found</div>
       )}
@@ -96,3 +98,12 @@ const VariablesEditor = ({ collection }) => {
 };
 
 export default VariablesEditor;
+
+const SecretToggle = ({ showSecret, onClick }) => (
+  <div className="cursor-pointer mb-2 text-xs" onClick={onClick}>
+    <div className="flex items-center">
+      {showSecret ? <IconEyeOff size={16} strokeWidth={1.5} /> : <IconEye size={16} strokeWidth={1.5} />}
+      <span className="pl-1">{showSecret ? 'Hide secret variable values' : 'Show secret variable values'}</span>
+    </div>
+  </div>
+);

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

@@ -639,3 +639,9 @@ export const getAllVariables = (collection) => {
     }
   };
 };
+
+export const maskInputValue = (value) =>
+  value
+    .split('')
+    .map(() => '*')
+    .join('');