extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2025-02-16 09:50:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(bruno-app): add copy to clipboard button for variables and environments views

Browse Source
This commit is contained in:
Alexandre Boucher 2024-09-22 07:59:44 -04:00
parent 0e7825a5dc
commit 6e687ffaa3
No known key found for this signature in database
10 changed files with 101 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/bruno-app/src/components/CopyToClipboard/StyledWrapper.js Normal file
View File

@ -0,0 +1,14 @@
import styled from 'styled-components';
const StyledWrapper = styled.div`
.copy-to-clipboard {
cursor: pointer;
opacity: 0.5;
&:hover {
opacity: 1 !important;
}
}
`;
export default StyledWrapper;

20
packages/bruno-app/src/components/CopyToClipboard/index.js Normal file
View File

@ -0,0 +1,20 @@
import { IconCopy } from '@tabler/icons';
import toast from 'react-hot-toast';
import { CopyToClipboard as CopyToClipboardBase } from 'react-copy-to-clipboard';
import StyledWrapper from './StyledWrapper';
/**
* A button to copy text to clipboard
*
* @param {Object} props The component props
* @param {string} props.copy The text to copy when clicked
*/
const CopyToClipboard = ({ copy, ...props }) => (
<StyledWrapper {...props}>
<CopyToClipboardBase className="copy-to-clipboard" text={copy} onCopy={() => toast.success('Copied to clipboard!')}>
<IconCopy size={25} strokeWidth={1.5} />
</CopyToClipboardBase>
</StyledWrapper>
);
export default CopyToClipboard;

11
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/StyledCopyToClipboard.js Normal file
View File

@ -0,0 +1,11 @@
import CopyToClipboard from 'components/CopyToClipboard';
import styled from 'styled-components';
const StyledCopyToClipboard = styled(CopyToClipboard)`
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
`;
export default StyledCopyToClipboard;

5
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/StyledWrapper.js
View File

@ -5,11 +5,8 @@ const StyledWrapper = styled.div`
height: 100%;
.copy-to-clipboard {
position: absolute;
cursor: pointer;
top: 10px;
right: 10px;
z-index: 10;
opacity: 0.5;
&:hover {

12
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js
View File

@ -5,11 +5,9 @@ import { useTheme } from 'providers/Theme/index';
import StyledWrapper from './StyledWrapper';
import { buildHarRequest } from 'utils/codegenerator/har';
import { useSelector } from 'react-redux';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import toast from 'react-hot-toast';
import { IconCopy } from '@tabler/icons';
import { findCollectionByItemUid } from '../../../../../../../utils/collections/index';
import { getAuthHeaders } from '../../../../../../../utils/codegenerator/auth';
import StyledCopyToClipboard from './StyledCopyToClipboard';
const CodeView = ({ language, item }) => {
const { displayedTheme } = useTheme();
@ -41,13 +39,7 @@ const CodeView = ({ language, item }) => {
return (
<>
<StyledWrapper>
<CopyToClipboard
className="copy-to-clipboard"
text={snippet}
onCopy={() => toast.success('Copied to clipboard!')}
>
<IconCopy size={25} strokeWidth={1.5} />
</CopyToClipboard>
<StyledCopyToClipboard copy={snippet} />
<CodeEditor
readOnly
collection={collection}

13
packages/bruno-app/src/components/SingleLineEditor/StyledContainer.js Normal file
View File

@ -0,0 +1,13 @@
import styled from 'styled-components';
const StyledContainer = styled.div`
.copy-to-clipboard {
opacity: 0;
}
&:hover .copy-to-clipboard {
opacity: 0.5;
}
`;
export default StyledContainer;

16
packages/bruno-app/src/components/SingleLineEditor/index.js
View File

@ -4,6 +4,8 @@ import { getAllVariables } from 'utils/collections';
import { defineCodeMirrorBrunoVariablesMode, MaskedEditor } from 'utils/common/codemirror';
import StyledWrapper from './StyledWrapper';
import { IconEye, IconEyeOff } from '@tabler/icons';
import CopyToClipboard from 'components/CopyToClipboard';
import StyledContainer from './StyledContainer';
let CodeMirror;
const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
@ -174,10 +176,20 @@ class SingleLineEditor extends Component {
render() {
return (
<div className="flex flex-row justify-between w-full overflow-x-auto">
<StyledContainer className="flex flex-row justify-between w-full overflow-x-auto">
<StyledWrapper ref={this.editorRef} className="single-line-editor grow" />
<CopyToClipboard
className={[
'copy-to-clipboard',
'absolute',
'top-1/2',
'-translate-y-1/2',
this.props.isSecret ? 'right-9' : 'right-1'
]}
copy={this.cachedValue}
/>
{this.secretEye(this.props.isSecret)}
</div>
</StyledContainer>
);
}
}

11
packages/bruno-app/src/components/VariablesEditor/StyledCopyToClipboard.js Normal file
View File

@ -0,0 +1,11 @@
import CopyToClipboard from 'components/CopyToClipboard';
import styled from 'styled-components';
const StyledCopyToClipboard = styled(CopyToClipboard)`
position: absolute;
right: 0.25rem;
top: 50%;
transform: translateY(-50%);
`;
export default StyledCopyToClipboard;

12
packages/bruno-app/src/components/VariablesEditor/StyledWrapper.js
View File

@ -1,15 +1,27 @@
import styled from 'styled-components';
import StyledCopyToClipboard from './StyledCopyToClipboard';
const StyledWrapper = styled.div`
table {
thead,
td {
border: 1px solid ${(props) => props.theme.table.border};
position: relative;
li {
background-color: ${(props) => props.theme.bg} !important;
}
}
tr {
${StyledCopyToClipboard} {
opacity: 0;
}
&:hover ${StyledCopyToClipboard} {
opacity: 0.5;
}
}
}
.muted {

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

@ -6,6 +6,7 @@ import { useTheme } from 'providers/Theme';
import { findEnvironmentInCollection, maskInputValue } from 'utils/collections';
import StyledWrapper from './StyledWrapper';
import { IconEye, IconEyeOff } from '@tabler/icons';
import StyledCopyToClipboard from './StyledCopyToClipboard';
const KeyValueExplorer = ({ data = [], theme }) => {
const [showSecret, setShowSecret] = useState(false);
@ -18,11 +19,12 @@ const KeyValueExplorer = ({ data = [], theme }) => {
{data.map((envVar) => (
<tr key={envVar.name}>
<td className="px-2 py-1">{envVar.name}</td>
<td className="px-2 py-1">
<td className="px-2 py-1 pr-8">
<Inspector
data={!showSecret && envVar.secret ? maskInputValue(envVar.value) : envVar.value}
theme={theme}
/>
<StyledCopyToClipboard copy={envVar.value} />
</td>
</tr>
))}