extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-11-21 23:43:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: toggle visibility of secret envVars (#650)

Browse Source 
* 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>
This commit is contained in:
dw-0 2024-03-22 13:54:16 +01:00 committed by GitHub
parent f8ba781340
commit 82c600a0e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 40 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
theme={storedTheme}
collection={collection}
name={`${index}.value`}
value={variable.value}
onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
/>
{variable.secret ? (
<div>{maskInputValue(variable.value)}</div>
) : (
<SingleLineEditor
theme={storedTheme}
collection={collection}
name={`${index}.value`}
value={variable.value}
onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
/>
)}
</td>
<td>
<input

33
packages/bruno-app/src/components/VariablesEditor/index.js
View File

@ -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]) => (
<tr key={key}>
<td className="px-2 py-1">{key}</td>
{data.map((envVar) => (
<tr key={envVar.name}>
<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>
);

6
packages/bruno-app/src/utils/collections/index.js
View File

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