mirror of
https://github.com/usebruno/bruno.git
synced 2025-06-21 20:41:41 +02:00
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>
This commit is contained in:
parent
f8ba781340
commit
82c600a0e6
@ -11,6 +11,7 @@ import { useFormik } from 'formik';
|
|||||||
import * as Yup from 'yup';
|
import * as Yup from 'yup';
|
||||||
import { uuid } from 'utils/common';
|
import { uuid } from 'utils/common';
|
||||||
import { variableNameRegex } from 'utils/common/regex';
|
import { variableNameRegex } from 'utils/common/regex';
|
||||||
|
import { maskInputValue } from 'utils/collections';
|
||||||
|
|
||||||
const EnvironmentVariables = ({ environment, collection }) => {
|
const EnvironmentVariables = ({ environment, collection }) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
@ -120,13 +121,17 @@ const EnvironmentVariables = ({ environment, collection }) => {
|
|||||||
<ErrorMessage name={`${index}.name`} />
|
<ErrorMessage name={`${index}.name`} />
|
||||||
</td>
|
</td>
|
||||||
<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>
|
||||||
<td>
|
<td>
|
||||||
<input
|
<input
|
||||||
|
@ -1,23 +1,29 @@
|
|||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import get from 'lodash/get';
|
import get from 'lodash/get';
|
||||||
import filter from 'lodash/filter';
|
import filter from 'lodash/filter';
|
||||||
import { Inspector } from 'react-inspector';
|
import { Inspector } from 'react-inspector';
|
||||||
import { useTheme } from 'providers/Theme';
|
import { useTheme } from 'providers/Theme';
|
||||||
import { findEnvironmentInCollection } from 'utils/collections';
|
import { findEnvironmentInCollection, maskInputValue } from 'utils/collections';
|
||||||
import StyledWrapper from './StyledWrapper';
|
import StyledWrapper from './StyledWrapper';
|
||||||
|
import { IconEye, IconEyeOff } from '@tabler/icons';
|
||||||
|
|
||||||
const KeyValueExplorer = ({ data, theme }) => {
|
const KeyValueExplorer = ({ data, theme }) => {
|
||||||
data = data || {};
|
data = data || {};
|
||||||
|
const [showSecret, setShowSecret] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<SecretToggle showSecret={showSecret} onClick={() => setShowSecret(!showSecret)} />
|
||||||
<table className="border-collapse">
|
<table className="border-collapse">
|
||||||
<tbody>
|
<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">
|
<td className="px-2 py-1">
|
||||||
<Inspector data={value} theme={theme} />
|
<Inspector
|
||||||
|
data={!showSecret && envVar.secret ? maskInputValue(envVar.value) : envVar.value}
|
||||||
|
theme={theme}
|
||||||
|
/>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
@ -41,10 +47,6 @@ const EnvVariables = ({ collection, theme }) => {
|
|||||||
|
|
||||||
const envVars = get(environment, 'variables', []);
|
const envVars = get(environment, 'variables', []);
|
||||||
const enabledEnvVars = filter(envVars, (variable) => variable.enabled);
|
const enabledEnvVars = filter(envVars, (variable) => variable.enabled);
|
||||||
const envVarsObj = enabledEnvVars.reduce((acc, curr) => {
|
|
||||||
acc[curr.name] = curr.value;
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -53,7 +55,7 @@ const EnvVariables = ({ collection, theme }) => {
|
|||||||
<span className="muted ml-2">({environment.name})</span>
|
<span className="muted ml-2">({environment.name})</span>
|
||||||
</div>
|
</div>
|
||||||
{enabledEnvVars.length > 0 ? (
|
{enabledEnvVars.length > 0 ? (
|
||||||
<KeyValueExplorer data={envVarsObj} theme={theme} />
|
<KeyValueExplorer data={enabledEnvVars} theme={theme} />
|
||||||
) : (
|
) : (
|
||||||
<div className="muted text-xs">No environment variables found</div>
|
<div className="muted text-xs">No environment variables found</div>
|
||||||
)}
|
)}
|
||||||
@ -96,3 +98,12 @@ const VariablesEditor = ({ collection }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default VariablesEditor;
|
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>
|
||||||
|
);
|
||||||
|
@ -639,3 +639,9 @@ export const getAllVariables = (collection) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const maskInputValue = (value) =>
|
||||||
|
value
|
||||||
|
.split('')
|
||||||
|
.map(() => '*')
|
||||||
|
.join('');
|
||||||
|
Loading…
x
Reference in New Issue
Block a user