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

feat(#197): prettier formatting on all files in packages/bruno-app

Browse Source
This commit is contained in:
Anoop M D 2023-09-18 13:37:00 +05:30
parent a103f41d85
commit 19a7f397bb
117 changed files with 1249 additions and 854 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc.json
View File

@ -3,5 +3,5 @@
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"printWidth": 180
"printWidth": 120
}

2
packages/bruno-app/.prettierrc.json
View File

@ -3,5 +3,5 @@
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"printWidth": 180
"printWidth": 120
}

29
packages/bruno-app/src/components/Bruno/index.js
View File

@ -14,7 +14,11 @@ const Bruno = ({ width }) => {
stroke="none"
points="36,47.2521 32.9167,49.6688 30.4167,49.6688 30.3333,53.5021 31.0833,57.0021 32.1667,58.9188 35,60.4188 39.5833,59.8355 41.1667,58.0855 42.1667,53.8355 41.9167,49.8355 39.9167,50.0855"
/>
<polygon fill="#3F3F3F" stroke="none" points="32.5,36.9188 30.9167,40.6688 33.0833,41.9188 34.3333,42.4188 38.6667,42.5855 41.5833,40.3355 39.8333,37.0855" />
<polygon
fill="#3F3F3F"
stroke="none"
points="32.5,36.9188 30.9167,40.6688 33.0833,41.9188 34.3333,42.4188 38.6667,42.5855 41.5833,40.3355 39.8333,37.0855"
/>
</g>
<g id="hair" />
<g id="skin" />
@ -84,8 +88,27 @@ const Bruno = ({ width }) => {
strokeWidth="2"
d="M52.6309,46.4628c0,0-3.0781,6.7216-7.8049,8.2712"
/>
<path fill="none" stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth="2" d="M19.437,46.969c0,0,3.0781,6.0823,7.8049,7.632" />
<line x1="36.2078" x2="36.2078" y1="47.3393" y2="44.3093" fill="none" stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth="2" />
<path
fill="none"
stroke="#000000"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="2"
d="M19.437,46.969c0,0,3.0781,6.0823,7.8049,7.632"
/>
<line
x1="36.2078"
x2="36.2078"
y1="47.3393"
y2="44.3093"
fill="none"
stroke="#000000"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="2"
/>
</g>
</svg>
);

17
packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
View File

@ -6,7 +6,8 @@ const StyledWrapper = styled.div`
border: solid 1px ${(props) => props.theme.codemirror.border};
}
.CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
.CodeMirror-overlayscroll-horizontal div,
.CodeMirror-overlayscroll-vertical div {
background: #d2d7db;
}
@ -17,12 +18,14 @@ const StyledWrapper = styled.div`
// Todo: dark mode temporary fix
// Clean this
.CodeMirror.cm-s-monokai {
.CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
.CodeMirror-overlayscroll-horizontal div,
.CodeMirror-overlayscroll-vertical div {
background: #444444;
}
}
.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
.cm-s-monokai span.cm-property,
.cm-s-monokai span.cm-attribute {
color: #9cdcfe !important;
}
@ -38,8 +41,12 @@ const StyledWrapper = styled.div`
color: #569cd6 !important;
}
.cm-variable-valid{color: green}
.cm-variable-invalid{color: red}
.cm-variable-valid {
color: green;
}
.cm-variable-invalid {
color: red;
}
`;
export default StyledWrapper;

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

@ -43,7 +43,7 @@ export default class CodeEditor extends React.Component {
foldGutter: true,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
readOnly: this.props.readOnly,
scrollbarStyle: "overlay",
scrollbarStyle: 'overlay',
theme: this.props.theme === 'dark' ? 'monokai' : 'default',
extraKeys: {
'Cmd-Enter': () => {
@ -135,7 +135,7 @@ export default class CodeEditor extends React.Component {
defineCodeMirrorBrunoVariablesMode(variables, mode);
this.editor.setOption('mode', 'brunovariables');
}
};
_onEdit = () => {
if (!this.ignoreChangeEvent && this.editor) {

11
packages/bruno-app/src/components/Dropdown/index.js
View File

@ -5,7 +5,16 @@ import StyledWrapper from './StyledWrapper';
const Dropdown = ({ icon, children, onCreate, placement }) => {
return (
<StyledWrapper className="dropdown">
<Tippy content={children} placement={placement || 'bottom-end'} animation={false} arrow={false} onCreate={onCreate} interactive={true} trigger="click" appendTo="parent">
<Tippy
content={children}
placement={placement || 'bottom-end'}
animation={false}
arrow={false}
onCreate={onCreate}
interactive={true}
trigger="click"
appendTo="parent"
>
{icon}
</Tippy>
</StyledWrapper>

17
packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
View File

@ -16,7 +16,10 @@ const CreateEnvironment = ({ collection, onClose }) => {
name: ''
},
validationSchema: Yup.object({
name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
name: Yup.string()
.min(1, 'must be atleast 1 characters')
.max(50, 'must be 50 characters or less')
.required('name is required')
}),
onSubmit: (values) => {
dispatch(addEnvironment(values.name, collection.uid))
@ -40,7 +43,13 @@ const CreateEnvironment = ({ collection, onClose }) => {
return (
<Portal>
<Modal size="sm" title={'Create Environment'} confirmText="Create" handleConfirm={onSubmit} handleCancel={onClose}>
<Modal
size="sm"
title={'Create Environment'}
confirmText="Create"
handleConfirm={onSubmit}
handleCancel={onClose}
>
<form className="bruno-form" onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="name" className="block font-semibold">
@ -59,7 +68,9 @@ const CreateEnvironment = ({ collection, onClose }) => {
onChange={formik.handleChange}
value={formik.values.name || ''}
/>
{formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
{formik.touched.name && formik.errors.name ? (
<div className="text-red-500">{formik.errors.name}</div>
) : null}
</div>
</form>
</Modal>

8
packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js
View File

@ -20,7 +20,13 @@ const DeleteEnvironment = ({ onClose, environment, collection }) => {
return (
<Portal>
<StyledWrapper>
<Modal size="sm" title={'Delete Environment'} confirmText="Delete" handleConfirm={onConfirm} handleCancel={onClose}>
<Modal
size="sm"
title={'Delete Environment'}
confirmText="Delete"
handleConfirm={onConfirm}
handleCancel={onClose}
>
Are you sure you want to delete <span className="font-semibold">{environment.name}</span> ?
</Modal>
</StyledWrapper>

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

@ -12,7 +12,7 @@ const Wrapper = styled.div`
}
thead {
color: ${(props) => props.theme.table.thead.color};;
color: ${(props) => props.theme.table.thead.color};
font-size: 0.8125rem;
user-select: none;
}

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

@ -99,7 +99,12 @@ const EnvironmentVariables = ({ environment, collection }) => {
</td>
<td>
<div className="flex items-center">
<input type="checkbox" checked={variable.enabled} className="mr-3 mousetrap" onChange={(e) => handleVarChange(e, variable, 'enabled')} />
<input
type="checkbox"
checked={variable.enabled}
className="mr-3 mousetrap"
onChange={(e) => handleVarChange(e, variable, 'enabled')}
/>
<button onClick={() => handleRemoveVars(variable)}>
<IconTrash strokeWidth={1.5} size={20} />
</button>
@ -119,7 +124,12 @@ const EnvironmentVariables = ({ environment, collection }) => {
</div>
<div>
<button type="submit" className="submit btn btn-md btn-secondary mt-2" disabled={!hasChanges} onClick={saveChanges}>
<button
type="submit"
className="submit btn btn-md btn-secondary mt-2"
disabled={!hasChanges}
onClick={saveChanges}
>
Save
</button>
</div>

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

@ -10,8 +10,16 @@ const EnvironmentDetails = ({ environment, collection }) => {
return (
<div className="px-6 flex-grow flex flex-col pt-6" style={{ maxWidth: '700px' }}>
{openEditModal && <RenameEnvironment onClose={() => setOpenEditModal(false)} environment={environment} collection={collection} />}
{openDeleteModal && <DeleteEnvironment onClose={() => setOpenDeleteModal(false)} environment={environment} collection={collection} />}
{openEditModal && (
<RenameEnvironment onClose={() => setOpenEditModal(false)} environment={environment} collection={collection} />
)}
{openDeleteModal && (
<DeleteEnvironment
onClose={() => setOpenDeleteModal(false)}
environment={environment}
collection={collection}
/>
)}
<div className="flex">
<div className="flex flex-grow items-center">
<IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />

17
packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
View File

@ -16,7 +16,10 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
name: environment.name
},
validationSchema: Yup.object({
name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
name: Yup.string()
.min(1, 'must be atleast 1 characters')
.max(50, 'must be 50 characters or less')
.required('name is required')
}),
onSubmit: (values) => {
dispatch(renameEnvironment(values.name, environment.uid, collection.uid))
@ -40,7 +43,13 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
return (
<Portal>
<Modal size="sm" title={'Rename Environment'} confirmText="Rename" handleConfirm={onSubmit} handleCancel={onClose}>
<Modal
size="sm"
title={'Rename Environment'}
confirmText="Rename"
handleConfirm={onSubmit}
handleCancel={onClose}
>
<form className="bruno-form" onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="name" className="block font-semibold">
@ -59,7 +68,9 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
onChange={formik.handleChange}
value={formik.values.name || ''}
/>
{formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
{formik.touched.name && formik.errors.name ? (
<div className="text-red-500">{formik.errors.name}</div>
) : null}
</div>
</form>
</Modal>

14
packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
View File

@ -11,11 +11,21 @@ const EnvironmentSettings = ({ collection, onClose }) => {
if (!environments || !environments.length) {
return (
<StyledWrapper>
<Modal size="md" title="Environments" confirmText={'Close'} handleConfirm={onClose} handleCancel={onClose} hideCancel={true}>
<Modal
size="md"
title="Environments"
confirmText={'Close'}
handleConfirm={onClose}
handleCancel={onClose}
hideCancel={true}
>
{openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
<div className="text-center">
<p>No environments found!</p>
<button className="btn-create-environment text-link pr-2 py-3 mt-2 select-none" onClick={() => setOpenCreateModal(true)}>
<button
className="btn-create-environment text-link pr-2 py-3 mt-2 select-none"
onClick={() => setOpenCreateModal(true)}
>
+ <span>Create Environment</span>
</button>
</div>

9
packages/bruno-app/src/components/Icons/Send/index.js
View File

@ -2,16 +2,11 @@ import React from 'react';
const SendIcon = ({ color, width }) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={width}
viewBox="0 0 48 48"
>
<svg xmlns="http://www.w3.org/2000/svg" width={width} height={width} viewBox="0 0 48 48">
<path fill={color} d="M4.02 42l41.98-18-41.98-18-.02 14 30 4-30 4z" />
<path d="M0 0h48v48h-48z" fill="none" />
</svg>
);
}
};
export default SendIcon;

2
packages/bruno-app/src/components/Modal/StyledWrapper.js
View File

@ -100,7 +100,7 @@ const Wrapper = styled.div`
border-radius: 0px;
outline: none;
box-shadow: none;
transition: border-color ease-in-out .1s;
transition: border-color ease-in-out 0.1s;
border-radius: 3px;
background-color: ${(props) => props.theme.modal.input.bg};
border: 1px solid ${(props) => props.theme.modal.input.border};

30
packages/bruno-app/src/components/Modal/index.js
View File

@ -14,7 +14,15 @@ const ModalHeader = ({ title, handleCancel }) => (
const ModalContent = ({ children }) => <div className="bruno-modal-content px-4 py-6">{children}</div>;
const ModalFooter = ({ confirmText, cancelText, handleSubmit, handleCancel, confirmDisabled, hideCancel, hideFooter }) => {
const ModalFooter = ({
confirmText,
cancelText,
handleSubmit,
handleCancel,
confirmDisabled,
hideCancel,
hideFooter
}) => {
confirmText = confirmText || 'Save';
cancelText = cancelText || 'Cancel';
@ -30,7 +38,12 @@ const ModalFooter = ({ confirmText, cancelText, handleSubmit, handleCancel, conf
</button>
</span>
<span>
<button type="submit" className="submit btn btn-md btn-secondary" disabled={confirmDisabled} onClick={handleSubmit}>
<button
type="submit"
className="submit btn btn-md btn-secondary"
disabled={confirmDisabled}
onClick={handleSubmit}
>
{confirmText}
</button>
</span>
@ -38,7 +51,18 @@ const ModalFooter = ({ confirmText, cancelText, handleSubmit, handleCancel, conf
);
};
const Modal = ({ size, title, confirmText, cancelText, handleCancel, handleConfirm, children, confirmDisabled, hideCancel, hideFooter }) => {
const Modal = ({
size,
title,
confirmText,
cancelText,
handleCancel,
handleConfirm,
children,
confirmDisabled,
hideCancel,
hideFooter
}) => {
const [isClosing, setIsClosing] = useState(false);
const escFunction = (event) => {
const escKeyCode = 27;

20
packages/bruno-app/src/components/Preferences/General/index.js
View File

@ -3,22 +3,17 @@ import { usePreferences } from 'providers/Preferences';
import StyledWrapper from './StyledWrapper';
const General = () => {
const {
preferences,
setPreferences,
} = usePreferences();
const { preferences, setPreferences } = usePreferences();
const [sslVerification, setSslVerification] = useState(
preferences.request.sslVerification
);
const [sslVerification, setSslVerification] = useState(preferences.request.sslVerification);
const handleCheckboxChange = () => {
const updatedPreferences = {
...preferences,
request: {
...preferences.request,
sslVerification: !sslVerification,
},
sslVerification: !sslVerification
}
};
setPreferences(updatedPreferences)
@ -33,12 +28,7 @@ const General = () => {
return (
<StyledWrapper>
<div className="flex items-center mt-2">
<input
type="checkbox"
checked={sslVerification}
onChange={handleCheckboxChange}
className="mr-3 mousetrap"
/>
<input type="checkbox" checked={sslVerification} onChange={handleCheckboxChange} className="mr-3 mousetrap" />
SSL Certificate Verification
</div>
</StyledWrapper>

6
packages/bruno-app/src/components/Preferences/Theme/index.js
View File

@ -22,7 +22,7 @@ const Theme = () => {
return (
<StyledWrapper>
<div className='bruno-form'>
<div className="bruno-form">
<div className="flex items-center mt-2">
<input
id="light-theme"
@ -31,7 +31,7 @@ const Theme = () => {
name="theme"
onChange={(e) => {
formik.handleChange(e);
formik.handleSubmit()
formik.handleSubmit();
}}
value="light"
checked={formik.values.theme === 'light'}
@ -47,7 +47,7 @@ const Theme = () => {
name="theme"
onChange={(e) => {
formik.handleChange(e);
formik.handleSubmit()
formik.handleSubmit();
}}
value="dark"
checked={formik.values.theme === 'dark'}

30
packages/bruno-app/src/components/RequestPane/Assertions/AssertionOperator/index.js
View File

@ -33,10 +33,32 @@ import React from 'react';
const AssertionOperator = ({ operator, onChange }) => {
const operators = [
'eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'in', 'notIn',
'contains', 'notContains', 'length', 'matches', 'notMatches',
'startsWith', 'endsWith', 'between', 'isEmpty', 'isNull', 'isUndefined',
'isDefined', 'isTruthy', 'isFalsy', 'isJson', 'isNumber', 'isString', 'isBoolean'
'eq',
'neq',
'gt',
'gte',
'lt',
'lte',
'in',
'notIn',
'contains',
'notContains',
'length',
'matches',
'notMatches',
'startsWith',
'endsWith',
'between',
'isEmpty',
'isNull',
'isUndefined',
'isDefined',
'isTruthy',
'isFalsy',
'isJson',
'isNumber',
'isString',
'isBoolean'
];
const handleChange = (e) => {

92
packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js
View File

@ -43,14 +43,45 @@ const parseAssertionOperator = (str = '') => {
}
const operators = [
'eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'in', 'notIn',
'contains', 'notContains', 'length', 'matches', 'notMatches',
'startsWith', 'endsWith', 'between', 'isEmpty', 'isNull', 'isUndefined',
'isDefined', 'isTruthy', 'isFalsy', 'isJson', 'isNumber', 'isString', 'isBoolean'
'eq',
'neq',
'gt',
'gte',
'lt',
'lte',
'in',
'notIn',
'contains',
'notContains',
'length',
'matches',
'notMatches',
'startsWith',
'endsWith',
'between',
'isEmpty',
'isNull',
'isUndefined',
'isDefined',
'isTruthy',
'isFalsy',
'isJson',
'isNumber',
'isString',
'isBoolean'
];
const unaryOperators = [
'isEmpty', 'isNull', 'isUndefined', 'isDefined', 'isTruthy', 'isFalsy', 'isJson', 'isNumber', 'isString', 'isBoolean'
'isEmpty',
'isNull',
'isUndefined',
'isDefined',
'isTruthy',
'isFalsy',
'isJson',
'isNumber',
'isString',
'isBoolean'
];
const [operator, ...rest] = str.trim().split(' ');
@ -78,22 +109,33 @@ const parseAssertionOperator = (str = '') => {
const isUnaryOperator = (operator) => {
const unaryOperators = [
'isEmpty', 'isNull', 'isUndefined', 'isDefined', 'isTruthy', 'isFalsy', 'isJson', 'isNumber', 'isString', 'isBoolean'
'isEmpty',
'isNull',
'isUndefined',
'isDefined',
'isTruthy',
'isFalsy',
'isJson',
'isNumber',
'isString',
'isBoolean'
];
return unaryOperators.includes(operator);
};
const AssertionRow = ({
item, collection, assertion, handleAssertionChange, handleRemoveAssertion,
onSave, handleRun
item,
collection,
assertion,
handleAssertionChange,
handleRemoveAssertion,
onSave,
handleRun
}) => {
const { storedTheme } = useTheme();
const {
operator,
value
} = parseAssertionOperator(assertion.value);
const { operator, value } = parseAssertionOperator(assertion.value);
return (
<tr key={assertion.uid}>
@ -112,11 +154,17 @@ const AssertionRow = ({
<td>
<AssertionOperator
operator={operator}
onChange={(op) => handleAssertionChange({
onChange={(op) =>
handleAssertionChange(
{
target: {
value: `${op} ${value}`
}
}, assertion, 'value')}
},
assertion,
'value'
)
}
/>
</td>
<td>
@ -126,20 +174,22 @@ const AssertionRow = ({
theme={storedTheme}
readOnly={true}
onSave={onSave}
onChange={(newValue) => handleAssertionChange({
onChange={(newValue) =>
handleAssertionChange(
{
target: {
value: newValue
}
}, assertion, 'value')}
},
assertion,
'value'
)
}
onRun={handleRun}
collection={collection}
/>
) : (
<input
type="text"
className='cursor-default'
disabled
/>
<input type="text" className="cursor-default" disabled />
)}
</td>
<td>

23
packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
View File

@ -4,7 +4,11 @@ import cloneDeep from 'lodash/cloneDeep';
import { IconTrash } from '@tabler/icons';
import { useDispatch } from 'react-redux';
import { useTheme } from 'providers/Theme';
import { addFormUrlEncodedParam, updateFormUrlEncodedParam, deleteFormUrlEncodedParam } from 'providers/ReduxStore/slices/collections';
import {
addFormUrlEncodedParam,
updateFormUrlEncodedParam,
deleteFormUrlEncodedParam
} from 'providers/ReduxStore/slices/collections';
import SingleLineEditor from 'components/SingleLineEditor';
import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
import StyledWrapper from './StyledWrapper';
@ -92,18 +96,29 @@ const FormUrlEncodedParams = ({ item, collection }) => {
value={param.value}
theme={storedTheme}
onSave={onSave}
onChange={(newValue) => handleParamChange({
onChange={(newValue) =>
handleParamChange(
{
target: {
value: newValue
}
}, param, 'value')}
},
param,
'value'
)
}
onRun={handleRun}
collection={collection}
/>
</td>
<td>
<div className="flex items-center">
<input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
<input
type="checkbox"
checked={param.enabled}
className="mr-3 mousetrap"
onChange={(e) => handleParamChange(e, param, 'enabled')}
/>
<button onClick={() => handleRemoveParams(param)}>
<IconTrash strokeWidth={1.5} size={20} />
</button>

37
packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
View File

@ -24,20 +24,15 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
const tabs = useSelector((state) => state.tabs.tabs);
const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
const query = item.draft ? get(item, 'draft.request.body.graphql.query') : get(item, 'request.body.graphql.query');
const variables = item.draft ? get(item, 'draft.request.body.graphql.variables') : get(item, 'request.body.graphql.variables');
const variables = item.draft
? get(item, 'draft.request.body.graphql.variables')
: get(item, 'request.body.graphql.variables');
const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
const {
storedTheme
} = useTheme();
const { storedTheme } = useTheme();
const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
let {
schema,
loadSchema,
isLoading: isSchemaLoading,
error: schemaError
} = useGraphqlSchema(url, environment);
let { schema, loadSchema, isLoading: isSchemaLoading, error: schemaError } = useGraphqlSchema(url, environment);
const loadGqlSchema = () => {
if (!isSchemaLoading) {
@ -75,7 +70,8 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
const getTabPanel = (tab) => {
switch (tab) {
case 'query': {
return <QueryEditor
return (
<QueryEditor
collection={collection}
theme={storedTheme}
schema={schema}
@ -85,7 +81,8 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
onRun={onRun}
onEdit={onQueryChange}
onClickReference={handleGqlClickReference}
/>;
/>
);
}
case 'variables': {
return <GraphQLVariables item={item} variables={variables} collection={collection} />;
@ -151,19 +148,15 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
Tests
</div>
<div className="flex flex-grow justify-end items-center" style={{ fontSize: 13 }}>
<div className='flex items-center cursor-pointer hover:underline' onClick={loadGqlSchema}>
{isSchemaLoading ? (
<IconLoader2 className="animate-spin" size={18} strokeWidth={1.5}/>
) : null}
<div className="flex items-center cursor-pointer hover:underline" onClick={loadGqlSchema}>
{isSchemaLoading ? <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5} /> : null}
{!isSchemaLoading && !schema ? <IconDownload size={18} strokeWidth={1.5} /> : null}
{!isSchemaLoading && schema ? <IconRefresh size={18} strokeWidth={1.5} /> : null}
<span className='ml-1'>Schema</span>
<span className="ml-1">Schema</span>
</div>
<div
className='flex items-center cursor-pointer hover:underline ml-2'
onClick={toggleDocs}
>
<IconBook size={18} strokeWidth={1.5} /><span className='ml-1'>Docs</span>
<div className="flex items-center cursor-pointer hover:underline ml-2" onClick={toggleDocs}>
<IconBook size={18} strokeWidth={1.5} />
<span className="ml-1">Docs</span>
</div>
</div>
</div>

9
packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
View File

@ -9,9 +9,7 @@ import StyledWrapper from './StyledWrapper';
const GraphQLVariables = ({ variables, item, collection }) => {
const dispatch = useDispatch();
const {
storedTheme
} = useTheme();
const { storedTheme } = useTheme();
const onEdit = (value) => {
dispatch(
@ -29,10 +27,11 @@ const GraphQLVariables = ({ variables, item, collection }) => {
return (
<StyledWrapper className="w-full">
<CodeEditor
collection={collection} value={variables || ''}
collection={collection}
value={variables || ''}
theme={storedTheme}
onEdit={onEdit}
mode='javascript'
mode="javascript"
onRun={onRun}
onSave={onSave}
/>

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

@ -103,7 +103,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
</div>
) : null}
</div>
<section className={`flex w-full ${['script', 'vars'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'}`}>{getTabPanel(focusedTab.requestPaneTab)}</section>
<section className={`flex w-full ${['script', 'vars'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'}`}>
{getTabPanel(focusedTab.requestPaneTab)}
</section>
</StyledWrapper>
);
};

1
packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
View File

@ -41,7 +41,6 @@ const Wrapper = styled.div`
color: ${(props) => props.theme.table.input.color};
background: transparent;
&:focus {
outline: none !important;
border: solid 1px transparent;

23
packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
View File

@ -4,7 +4,11 @@ import cloneDeep from 'lodash/cloneDeep';
import { IconTrash } from '@tabler/icons';
import { useDispatch } from 'react-redux';
import { useTheme } from 'providers/Theme';
import { addMultipartFormParam, updateMultipartFormParam, deleteMultipartFormParam } from 'providers/ReduxStore/slices/collections';
import {
addMultipartFormParam,
updateMultipartFormParam,
deleteMultipartFormParam
} from 'providers/ReduxStore/slices/collections';
import SingleLineEditor from 'components/SingleLineEditor';
import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
import StyledWrapper from './StyledWrapper';
@ -92,18 +96,29 @@ const MultipartFormParams = ({ item, collection }) => {
onSave={onSave}
theme={storedTheme}
value={param.value}
onChange={(newValue) => handleParamChange({
onChange={(newValue) =>
handleParamChange(
{
target: {
value: newValue
}
}, param, 'value')}
},
param,
'value'
)
}
onRun={handleRun}
collection={collection}
/>
</td>
<td>
<div className="flex items-center">
<input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
<input
type="checkbox"
checked={param.enabled}
className="mr-3 mousetrap"
onChange={(e) => handleParamChange(e, param, 'enabled')}
/>
<button onClick={() => handleRemoveParams(param)}>
<IconTrash strokeWidth={1.5} size={20} />
</button>

17
packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
View File

@ -15,16 +15,19 @@ const StyledWrapper = styled.div`
// Todo: dark mode temporary fix
// Clean this
.CodeMirror.cm-s-monokai {
.CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
.CodeMirror-overlayscroll-horizontal div,
.CodeMirror-overlayscroll-vertical div {
background: #444444;
}
}
.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
.cm-s-monokai span.cm-property,
.cm-s-monokai span.cm-attribute {
color: #9cdcfe !important;
}
.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
.cm-s-monokai span.cm-property,
.cm-s-monokai span.cm-attribute {
color: #9cdcfe !important;
}
@ -40,8 +43,12 @@ const StyledWrapper = styled.div`
color: #569cd6 !important;
}
.cm-variable-valid{color: green}
.cm-variable-invalid{color: red}
.cm-variable-valid {
color: green;
}
.cm-variable-invalid {
color: red;
}
`;
export default StyledWrapper;

7
packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
View File

@ -43,7 +43,7 @@ export default class QueryEditor extends React.Component {
mode: 'graphql',
// mode: 'brunovariables',
brunoVarInfo: {
variables: getAllVariables(this.props.collection),
variables: getAllVariables(this.props.collection)
},
theme: this.props.editorTheme || 'graphiql',
theme: this.props.theme === 'dark' ? 'monokai' : 'default',
@ -51,7 +51,7 @@ export default class QueryEditor extends React.Component {
autoCloseBrackets: true,
matchBrackets: true,
showCursorWhenSelecting: true,
scrollbarStyle: "overlay",
scrollbarStyle: 'overlay',
readOnly: this.props.readOnly ? 'nocursor' : false,
foldGutter: {
minFoldSize: 4
@ -183,10 +183,9 @@ export default class QueryEditor extends React.Component {
addOverlay = () => {
// let variables = getAllVariables(this.props.collection);
// this.variables = variables;
// defineCodeMirrorBrunoVariablesMode(variables, 'graphql');
// this.editor.setOption('mode', 'brunovariables');
}
};
render() {
return (

5
packages/bruno-app/src/components/RequestPane/QueryEditor/onHasCompletion.js
View File

@ -59,7 +59,10 @@ export default function onHasCompletion(_cm, data, onHintInformationRender) {
const description = ctx.description ? md.render(ctx.description) : 'Self descriptive.';
const type = ctx.type ? '<span className="infoType">' + renderType(ctx.type) + '</span>' : '';
information.innerHTML = '<div className="content">' + (description.slice(0, 3) === '<p>' ? '<p>' + type + description.slice(3) : type + description) + '</div>';
information.innerHTML =
'<div className="content">' +
(description.slice(0, 3) === '<p>' ? '<p>' + type + description.slice(3) : type + description) +
'</div>';
if (ctx && deprecation && ctx.deprecationReason) {
const reason = ctx.deprecationReason ? md.render(ctx.deprecationReason) : '';

2
packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
View File

@ -13,7 +13,7 @@ const Wrapper = styled.div`
}
thead {
color: ${(props) => props.theme.table.thead.color};;
color: ${(props) => props.theme.table.thead.color};
font-size: 0.8125rem;
user-select: none;
}

17
packages/bruno-app/src/components/RequestPane/QueryParams/index.js
View File

@ -95,18 +95,29 @@ const QueryParams = ({ item, collection }) => {
value={param.value}
theme={storedTheme}
onSave={onSave}
onChange={(newValue) => handleParamChange({
onChange={(newValue) =>
handleParamChange(
{
target: {
value: newValue
}
}, param, 'value')}
},
param,
'value'
)
}
onRun={handleRun}
collection={collection}
/>
</td>
<td>
<div className="flex items-center">
<input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
<input
type="checkbox"
checked={param.enabled}
className="mr-3 mousetrap"
onChange={(e) => handleParamChange(e, param, 'enabled')}
/>
<button onClick={() => handleRemoveParam(param)}>
<IconTrash strokeWidth={1.5} size={20} />
</button>

4
packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js
View File

@ -10,7 +10,9 @@ const HttpMethodSelector = ({ method, onMethodSelect }) => {
const Icon = forwardRef((props, ref) => {
return (
<div ref={ref} className="flex w-full items-center pl-3 py-1 select-none uppercase">
<div className="flex-grow font-medium" id="create-new-request-method">{method}</div>
<div className="flex-grow font-medium" id="create-new-request-method">
{method}
</div>
<div>
<IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2} />
</div>

2
packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
View File

@ -18,7 +18,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
const [methodSelectorWidth, setMethodSelectorWidth] = useState(90);
useEffect(() => {
const el = document.querySelector(".method-selector-container");
const el = document.querySelector('.method-selector-container');
setMethodSelectorWidth(el.offsetWidth);
}, [method]);

14
packages/bruno-app/src/components/RequestPane/RequestBody/index.js
View File

@ -13,9 +13,7 @@ const RequestBody = ({ item, collection }) => {
const dispatch = useDispatch();
const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode');
const {
storedTheme
} = useTheme();
const { storedTheme } = useTheme();
const onEdit = (value) => {
dispatch(
@ -45,7 +43,15 @@ const RequestBody = ({ item, collection }) => {
return (
<StyledWrapper className="w-full">
<CodeEditor collection={collection} theme={storedTheme} value={bodyContent[bodyMode] || ''} onEdit={onEdit} onRun={onRun} onSave={onSave} mode={codeMirrorMode[bodyMode]} />
<CodeEditor
collection={collection}
theme={storedTheme}
value={bodyContent[bodyMode] || ''}
onEdit={onEdit}
onRun={onRun}
onSave={onSave}
mode={codeMirrorMode[bodyMode]}
/>
</StyledWrapper>
);
}

17
packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
View File

@ -92,18 +92,29 @@ const RequestHeaders = ({ item, collection }) => {
value={header.value}
theme={storedTheme}
onSave={onSave}
onChange={(newValue) => handleHeaderValueChange({
onChange={(newValue) =>
handleHeaderValueChange(
{
target: {
value: newValue
}
}, header, 'value')}
},
header,
'value'
)
}
onRun={handleRun}
collection={collection}
/>
</td>
<td>
<div className="flex items-center">
<input type="checkbox" checked={header.enabled} className="mr-3 mousetrap" onChange={(e) => handleHeaderValueChange(e, header, 'enabled')} />
<input
type="checkbox"
checked={header.enabled}
className="mr-3 mousetrap"
onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
/>
<button onClick={() => handleRemoveHeader(header)}>
<IconTrash strokeWidth={1.5} size={20} />
</button>

9
packages/bruno-app/src/components/RequestPane/SaveRequest/index.js
View File

@ -28,7 +28,14 @@ const SaveRequest = ({ items, onClose }) => {
return (
<StyledWrapper>
<Modal size="md" title="Save Request" confirmText="Save" cancelText="Cancel" handleCancel={onClose} handleConfirm={onClose}>
<Modal
size="md"
title="Save Request"
confirmText="Save"
cancelText="Cancel"
handleCancel={onClose}
handleConfirm={onClose}
>
<p className="mb-2">Select a folder to save request:</p>
<div className="folder-list">
{showFolders && showFolders.length

22
packages/bruno-app/src/components/RequestPane/Script/index.js
View File

@ -12,9 +12,7 @@ const Script = ({ item, collection }) => {
const requestScript = item.draft ? get(item, 'draft.request.script.req') : get(item, 'request.script.req');
const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res');
const {
storedTheme
} = useTheme();
const { storedTheme } = useTheme();
const onRequestScriptEdit = (value) => {
dispatch(
@ -41,24 +39,26 @@ const Script = ({ item, collection }) => {
return (
<StyledWrapper className="w-full flex flex-col">
<div className='flex-1 mt-2'>
<div className='mb-1 title text-xs'>Pre Request</div>
<div className="flex-1 mt-2">
<div className="mb-1 title text-xs">Pre Request</div>
<CodeEditor
collection={collection} value={requestScript || ''}
collection={collection}
value={requestScript || ''}
theme={storedTheme}
onEdit={onRequestScriptEdit}
mode='javascript'
mode="javascript"
onRun={onRun}
onSave={onSave}
/>
</div>
<div className='flex-1 mt-6'>
<div className='mt-1 mb-1 title text-xs'>Post Response</div>
<div className="flex-1 mt-6">
<div className="mt-1 mb-1 title text-xs">Post Response</div>
<CodeEditor
collection={collection} value={responseScript || ''}
collection={collection}
value={responseScript || ''}
theme={storedTheme}
onEdit={onResponseScriptEdit}
mode='javascript'
mode="javascript"
onRun={onRun}
onSave={onSave}
/>

9
packages/bruno-app/src/components/RequestPane/Tests/index.js
View File

@ -11,9 +11,7 @@ const Tests = ({ item, collection }) => {
const dispatch = useDispatch();
const tests = item.draft ? get(item, 'draft.request.tests') : get(item, 'request.tests');
const {
storedTheme
} = useTheme();
const { storedTheme } = useTheme();
const onEdit = (value) => {
dispatch(
@ -31,10 +29,11 @@ const Tests = ({ item, collection }) => {
return (
<StyledWrapper className="w-full">
<CodeEditor
collection={collection} value={tests || ''}
collection={collection}
value={tests || ''}
theme={storedTheme}
onEdit={onEdit}
mode='javascript'
mode="javascript"
onRun={onRun}
onSave={onSave}
/>

14
packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js
View File

@ -70,14 +70,14 @@ const VarsTable = ({ item, collection, vars, varType }) => {
<td>Name</td>
{varType === 'request' ? (
<td>
<div className='flex items-center'>
<div className="flex items-center">
<span>Value</span>
<Tooltip text="You can write any valid JS Template Literal here" tooltipId="request-var" />
</div>
</td>
) : (
<td>
<div className='flex items-center'>
<div className="flex items-center">
<span>Expr</span>
<Tooltip text="You can write any valid JS expression here" tooltipId="response-var" />
</div>
@ -108,11 +108,17 @@ const VarsTable = ({ item, collection, vars, varType }) => {
value={_var.value}
theme={storedTheme}
onSave={onSave}
onChange={(newValue) => handleVarChange({
onChange={(newValue) =>
handleVarChange(
{
target: {
value: newValue
}
}, _var, 'value')}
},
_var,
'value'
)
}
onRun={handleRun}
collection={collection}
/>

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

@ -12,9 +12,7 @@ const Vars = ({ item, collection }) => {
const requestVars = item.draft ? get(item, 'draft.request.vars.req') : get(item, 'request.vars.req');
const responseVars = item.draft ? get(item, 'draft.request.vars.res') : get(item, 'request.vars.res');
const {
storedTheme
} = useTheme();
const { storedTheme } = useTheme();
const onRequestScriptEdit = (value) => {
dispatch(
@ -41,13 +39,13 @@ const Vars = ({ item, collection }) => {
return (
<StyledWrapper className="w-full flex flex-col">
<div className='flex-1 mt-2'>
<div className='mb-1 title text-xs'>Pre Request</div>
<VarsTable item={item} collection={collection} vars={requestVars} varType='request'/>
<div className="flex-1 mt-2">
<div className="mb-1 title text-xs">Pre Request</div>
<VarsTable item={item} collection={collection} vars={requestVars} varType="request" />
</div>
<div className='flex-1'>
<div className='mt-1 mb-1 title text-xs'>Post Response</div>
<VarsTable item={item} collection={collection} vars={responseVars} varType='response'/>
<div className="flex-1">
<div className="mt-1 mb-1 title text-xs">Post Response</div>
<VarsTable item={item} collection={collection} vars={responseVars} varType="response" />
</div>
</StyledWrapper>
);

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

@ -32,7 +32,9 @@ const RequestNotFound = ({ itemUid }) => {
<div className="mt-6 px-6">
<div className="p-4 bg-orange-100 border-l-4 border-yellow-500 text-yellow-700 bg-yellow-100 p-4">
<div>Request no longer exists.</div>
<div className="mt-2">This can happen when the .bru file associated with this request was deleted on your filesystem.</div>
<div className="mt-2">
This can happen when the .bru file associated with this request was deleted on your filesystem.
</div>
</div>
<button className="btn btn-md btn-secondary mt-6" onClick={closeTab}>
Close Tab

29
packages/bruno-app/src/components/RequestTabPanel/index.js
View File

@ -33,7 +33,9 @@ const RequestTabPanel = () => {
let asideWidth = useSelector((state) => state.app.leftSidebarWidth);
const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
const [leftPaneWidth, setLeftPaneWidth] = useState(focusedTab && focusedTab.requestPaneWidth ? focusedTab.requestPaneWidth : (screenWidth - asideWidth) / 2.2); // 2.2 so that request pane is relatively smaller
const [leftPaneWidth, setLeftPaneWidth] = useState(
focusedTab && focusedTab.requestPaneWidth ? focusedTab.requestPaneWidth : (screenWidth - asideWidth) / 2.2
); // 2.2 so that request pane is relatively smaller
const [rightPaneWidth, setRightPaneWidth] = useState(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
const [dragging, setDragging] = useState(false);
@ -66,7 +68,10 @@ const RequestTabPanel = () => {
if (dragging) {
e.preventDefault();
let leftPaneXPosition = e.clientX + 2;
if (leftPaneXPosition < (asideWidth+ DEFAULT_PADDING + MIN_LEFT_PANE_WIDTH) || leftPaneXPosition > (screenWidth - MIN_RIGHT_PANE_WIDTH )) {
if (
leftPaneXPosition < asideWidth + DEFAULT_PADDING + MIN_LEFT_PANE_WIDTH ||
leftPaneXPosition > screenWidth - MIN_RIGHT_PANE_WIDTH
) {
return;
}
setLeftPaneWidth(leftPaneXPosition - asideWidth);
@ -138,7 +143,13 @@ const RequestTabPanel = () => {
</div>
<section className="main flex flex-grow pb-4 relative">
<section className="request-pane">
<div className="px-4" style={{ width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`, height: `calc(100% - ${DEFAULT_PADDING}px)` }}>
<div
className="px-4"
style={{
width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`,
height: `calc(100% - ${DEFAULT_PADDING}px)`
}}
>
{item.type === 'graphql-request' ? (
<GraphQLRequestPane
item={item}
@ -150,7 +161,9 @@ const RequestTabPanel = () => {
/>
) : null}
{item.type === 'http-request' ? <HttpRequestPane item={item} collection={collection} leftPaneWidth={leftPaneWidth} /> : null}
{item.type === 'http-request' ? (
<HttpRequestPane item={item} collection={collection} leftPaneWidth={leftPaneWidth} />
) : null}
</div>
</section>
@ -165,12 +178,8 @@ const RequestTabPanel = () => {
{item.type === 'graphql-request' ? (
<div className={`graphql-docs-explorer-container ${showGqlDocs ? '' : 'hidden'}`}>
<DocExplorer schema={schema} ref={(r) => docExplorerRef.current = r}>
<button
className='mr-2'
onClick={toggleDocs}
aria-label="Close Documentation Explorer"
>
<DocExplorer schema={schema} ref={(r) => (docExplorerRef.current = r)}>
<button className="mr-2" onClick={toggleDocs} aria-label="Close Documentation Explorer">
{'\u2715'}
</button>
</DocExplorer>

6
packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
View File

@ -10,9 +10,11 @@ const CollectionToolBar = ({ collection }) => {
const dispatch = useDispatch();
const handleRun = () => {
dispatch(toggleRunnerView({
dispatch(
toggleRunnerView({
collectionUid: collection.uid
}));
})
);
};
return (

10
packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
View File

@ -87,7 +87,15 @@ const RequestTab = ({ tab, collection }) => {
></path>
</svg>
) : (
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="8" height="16" fill="#cc7b1b" className="has-changes-icon" viewBox="0 0 8 8">
<svg
focusable="false"
xmlns="http://www.w3.org/2000/svg"
width="8"
height="16"
fill="#cc7b1b"
className="has-changes-icon"
viewBox="0 0 8 8"
>
<circle cx="4" cy="4" r="3" />
</svg>
)}

19
packages/bruno-app/src/components/RequestTabs/index.js
View File

@ -81,7 +81,9 @@ const RequestTabs = () => {
// Todo: Must support ephermal requests
return (
<StyledWrapper className={getRootClassname()}>
{newRequestModalOpen && <NewRequest collection={activeCollection} onClose={() => setNewRequestModalOpen(false)} />}
{newRequestModalOpen && (
<NewRequest collection={activeCollection} onClose={() => setNewRequestModalOpen(false)} />
)}
{collectionRequestTabs && collectionRequestTabs.length ? (
<>
<CollectionToolBar collection={activeCollection} />
@ -106,7 +108,12 @@ const RequestTabs = () => {
{collectionRequestTabs && collectionRequestTabs.length
? collectionRequestTabs.map((tab, index) => {
return (
<li key={tab.uid} className={getTabClassname(tab, index)} role="tab" onClick={() => handleClick(tab)}>
<li
key={tab.uid}
className={getTabClassname(tab, index)}
role="tab"
onClick={() => handleClick(tab)}
>
<RequestTab key={tab.uid} tab={tab} collection={activeCollection} activeTab={activeTab} />
</li>
);
@ -124,7 +131,13 @@ const RequestTabs = () => {
) : null}
<li className="select-none short-tab" id="create-new-tab" onClick={createNewTab}>
<div className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
</div>

9
packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
View File

@ -20,7 +20,14 @@ const QueryResult = ({ item, collection, value, width, disableRunEventListener,
return (
<StyledWrapper className="px-3 w-full" style={{ maxWidth: width }}>
<div className="h-full">
<CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value || ''} mode={mode} readOnly />
<CodeEditor
collection={collection}
theme={storedTheme}
onRun={onRun}
value={value || ''}
mode={mode}
readOnly
/>
</div>
</StyledWrapper>
);

27
packages/bruno-app/src/components/ResponsePane/TestResults/index.js
View File

@ -5,11 +5,7 @@ const TestResults = ({ results, assertionResults }) => {
results = results || [];
assertionResults = assertionResults || [];
if (!results.length && !assertionResults.length) {
return (
<div className="px-3">
No tests found
</div>
);
return <div className="px-3">No tests found</div>;
}
const passedTests = results.filter((result) => result.status === 'pass');
@ -19,7 +15,7 @@ const TestResults = ({ results, assertionResults }) => {
const failedAssertions = assertionResults.filter((result) => result.status === 'fail');
return (
<StyledWrapper className='flex flex-col px-3'>
<StyledWrapper className="flex flex-col px-3">
<div className="py-2 font-medium test-summary">
Tests ({results.length}/{results.length}), Passed: {passedTests.length}, Failed: {failedTests.length}
</div>
@ -27,18 +23,12 @@ const TestResults = ({ results, assertionResults }) => {
{results.map((result) => (
<li key={result.uid} className="py-1">
{result.status === 'pass' ? (
<span className="test-success">
&#x2714;&nbsp; {result.description}
</span>
<span className="test-success">&#x2714;&nbsp; {result.description}</span>
) : (
<>
<span className="test-failure">
&#x2718;&nbsp; {result.description}
</span>
<span className="test-failure">&#x2718;&nbsp; {result.description}</span>
<br />
<span className="error-message pl-8">
{result.error}
</span>
<span className="error-message pl-8">{result.error}</span>
</>
)}
</li>
@ -46,7 +36,8 @@ const TestResults = ({ results, assertionResults }) => {
</ul>
<div className="py-2 font-medium test-summary">
Assertions ({assertionResults.length}/{assertionResults.length}), Passed: {passedAssertions.length}, Failed: {failedAssertions.length}
Assertions ({assertionResults.length}/{assertionResults.length}), Passed: {passedAssertions.length}, Failed:{' '}
{failedAssertions.length}
</div>
<ul className="">
{assertionResults.map((result) => (
@ -61,9 +52,7 @@ const TestResults = ({ results, assertionResults }) => {
&#x2718;&nbsp; {result.lhsExpr}: {result.rhsExpr}
</span>
<br />
<span className="error-message pl-8">
{result.error}
</span>
<span className="error-message pl-8">{result.error}</span>
</>
)}
</li>

14
packages/bruno-app/src/components/ResponsePane/TestResultsLabel/index.js
View File

@ -8,25 +8,21 @@ const TestResultsLabel = ({ results, assertionResults }) => {
}
const numberOfTests = results.length;
const numberOfFailedTests = results.filter(result => result.status === 'fail').length;
const numberOfFailedTests = results.filter((result) => result.status === 'fail').length;
const numberOfAssertions = assertionResults.length;
const numberOfFailedAssertions = assertionResults.filter(result => result.status === 'fail').length;
const numberOfFailedAssertions = assertionResults.filter((result) => result.status === 'fail').length;
const totalNumberOfTests = numberOfTests + numberOfAssertions;
const totalNumberOfFailedTests = numberOfFailedTests + numberOfFailedAssertions;
return (
<div className='flex items-center'>
<div className="flex items-center">
<div>Tests</div>
{totalNumberOfFailedTests ? (
<sup className='sups some-tests-failed ml-1 font-medium'>
{totalNumberOfFailedTests}
</sup>
<sup className="sups some-tests-failed ml-1 font-medium">{totalNumberOfFailedTests}</sup>
) : (
<sup className='sups all-tests-passed ml-1 font-medium'>
{totalNumberOfTests}
</sup>
<sup className="sups all-tests-passed ml-1 font-medium">{totalNumberOfTests}</sup>
)}
</div>
);

12
packages/bruno-app/src/components/ResponsePane/Timeline/index.js
View File

@ -22,32 +22,32 @@ const Timeline = ({ request, response}) => {
return (
<StyledWrapper className="px-3 pb-4 w-full">
<div>
<pre className='line request font-bold'>
<pre className="line request font-bold">
<span className="arrow">{'>'}</span> {request.method} {request.url}
</pre>
{requestHeaders.map((h) => {
return (
<pre className='line request' key={h.name}>
<pre className="line request" key={h.name}>
<span className="arrow">{'>'}</span> {h.name}: {h.value}
</pre>
);
})}
{requestData ? (
<pre className='line request'>
<pre className="line request">
<span className="arrow">{'>'}</span> data {requestData}
</pre>
) : null}
</div>
<div className='mt-4'>
<pre className='line response font-bold'>
<div className="mt-4">
<pre className="line response font-bold">
<span className="arrow">{'<'}</span> {response.status} {response.statusText}
</pre>
{responseHeaders.map((h) => {
return (
<pre className='line response' key={h[0]}>
<pre className="line response" key={h[0]}>
<span className="arrow">{'<'}</span> {h[0]}: {h[1]}
</pre>
);

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

@ -41,7 +41,9 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
item={item}
collection={collection}
width={rightPaneWidth}
value={response.data ? (isJson(response.headers) ? safeStringifyJSON(response.data, true) : response.data) : ''}
value={
response.data ? (isJson(response.headers) ? safeStringifyJSON(response.data, true) : response.data) : ''
}
mode={getContentType(response.headers)}
/>
);

14
packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
View File

@ -15,11 +15,7 @@ import StyledWrapper from './StyledWrapper';
const ResponsePane = ({ rightPaneWidth, item, collection }) => {
const [selectedTab, setSelectedTab] = useState('response');
const {
requestSent,
responseReceived,
testResults
} = item;
const { requestSent, responseReceived, testResults } = item;
const headers = get(item, 'responseReceived.headers', {});
const status = get(item, 'responseReceived.status', 0);
@ -31,13 +27,15 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
const getTabPanel = (tab) => {
switch (tab) {
case 'response': {
return <QueryResult
return (
<QueryResult
item={item}
collection={collection}
width={rightPaneWidth}
disableRunEventListener={true}
value={(responseReceived && responseReceived.data) ? safeStringifyJSON(responseReceived.data, true) : ''}
/>;
value={responseReceived && responseReceived.data ? safeStringifyJSON(responseReceived.data, true) : ''}
/>
);
}
case 'headers': {
return <ResponseHeaders headers={headers} />;

90
packages/bruno-app/src/components/RunnerResults/index.js
View File

@ -18,7 +18,7 @@ const getRelativePath = (fullPath, pathname) => {
let relativePath = path.relative(fullPath, pathname);
const { dir, name } = path.parse(relativePath);
return path.join(dir, name);
}
};
export default function RunnerResults({ collection }) {
const dispatch = useDispatch();
@ -42,7 +42,7 @@ export default function RunnerResults({collection}) {
item.pathname = info.pathname;
item.relativePath = getRelativePath(collection.pathname, info.pathname);
if(item.status !== "error") {
if (item.status !== 'error') {
if (item.testResults) {
const failed = item.testResults.filter((result) => result.status === 'fail');
@ -70,29 +70,31 @@ export default function RunnerResults({collection}) {
};
const closeRunner = () => {
dispatch(closeCollectionRunner({
collectionUid: collection.uid,
}));
dispatch(
closeCollectionRunner({
collectionUid: collection.uid
})
);
};
const totalRequestsInCollection = getTotalRequestCountInCollection(collectionCopy);
const passedRequests = items.filter((item) => {
return item.status !== "error" && item.testStatus === 'pass' && item.assertionStatus === 'pass';
return item.status !== 'error' && item.testStatus === 'pass' && item.assertionStatus === 'pass';
});
const failedRequests = items.filter((item) => {
return item.status !== "error" && item.testStatus === 'fail' || item.assertionStatus === 'fail';
return (item.status !== 'error' && item.testStatus === 'fail') || item.assertionStatus === 'fail';
});
if (!items || !items.length) {
return (
<StyledWrapper className='px-4'>
<div className='font-medium mt-6 title flex items-center'>
<StyledWrapper className="px-4">
<div className="font-medium mt-6 title flex items-center">
Runner
<IconRun size={20} strokeWidth={1.5} className='ml-2'/>
<IconRun size={20} strokeWidth={1.5} className="ml-2" />
</div>
<div className='mt-6'>
You have <span className='font-medium'>{totalRequestsInCollection}</span> requests in this collection.
<div className="mt-6">
You have <span className="font-medium">{totalRequestsInCollection}</span> requests in this collection.
</div>
<button type="submit" className="submit btn btn-sm btn-secondary mt-6" onClick={runCollection}>
@ -107,13 +109,13 @@ export default function RunnerResults({collection}) {
}
return (
<StyledWrapper className='px-4'>
<div className='font-medium mt-6 mb-4 title flex items-center'>
<StyledWrapper className="px-4">
<div className="font-medium mt-6 mb-4 title flex items-center">
Runner
<IconRun size={20} strokeWidth={1.5} className='ml-2'/>
<IconRun size={20} strokeWidth={1.5} className="ml-2" />
</div>
<div className='flex'>
<div className='flex flex-col flex-1'>
<div className="flex">
<div className="flex flex-col flex-1">
<div className="py-2 font-medium test-summary">
Total Requests: {items.length}, Passed: {passedRequests.length}, Failed: {failedRequests.length}
</div>
@ -123,34 +125,31 @@ export default function RunnerResults({collection}) {
<div className="item-path mt-2">
<div className="flex items-center">
<span>
{item.status !== "error" && item.testStatus === 'pass' ? (
{item.status !== 'error' && item.testStatus === 'pass' ? (
<IconCircleCheck className="test-success" size={20} strokeWidth={1.5} />
) : (
<IconCircleX className="test-failure" size={20} strokeWidth={1.5} />
)}
</span>
<span className={`mr-1 ml-2 ${(item.status == "error" || item.testStatus == 'fail') ? 'danger' : ''}`}>{item.relativePath}</span>
{(item.status !== "error" && item.status !== "completed") ? (
<span
className={`mr-1 ml-2 ${item.status == 'error' || item.testStatus == 'fail' ? 'danger' : ''}`}
>
{item.relativePath}
</span>
{item.status !== 'error' && item.status !== 'completed' ? (
<IconRefresh className="animate-spin ml-1" size={18} strokeWidth={1.5} />
) : (
<span className='text-xs link cursor-pointer' onClick={() => setSelectedItem(item)}>
(<span className='mr-1'>
{get(item.responseReceived, 'status')}
</span>
<span>
{get(item.responseReceived, 'statusText')}
</span>)
<span className="text-xs link cursor-pointer" onClick={() => setSelectedItem(item)}>
(<span className="mr-1">{get(item.responseReceived, 'status')}</span>
<span>{get(item.responseReceived, 'statusText')}</span>)
</span>
)}
</div>
{item.status == "error" ? (
<div className="error-message pl-8 pt-2 text-xs">
{item.error}
</div>
) : null }
{item.status == 'error' ? <div className="error-message pl-8 pt-2 text-xs">{item.error}</div> : null}
<ul className="pl-8">
{item.testResults ? item.testResults.map((result) => (
{item.testResults
? item.testResults.map((result) => (
<li key={result.uid}>
{result.status === 'pass' ? (
<span className="test-success flex items-center">
@ -163,14 +162,14 @@ export default function RunnerResults({collection}) {
<IconX size={18} strokeWidth={2} className="mr-2" />
{result.description}
</span>
<span className="error-message pl-8 text-xs">
{result.error}
</span>
<span className="error-message pl-8 text-xs">{result.error}</span>
</>
)}
</li>
)): null}
{item.assertionResults ? item.assertionResults.map((result) => (
))
: null}
{item.assertionResults
? item.assertionResults.map((result) => (
<li key={result.uid}>
{result.status === 'pass' ? (
<span className="test-success flex items-center">
@ -183,13 +182,12 @@ export default function RunnerResults({collection}) {
<IconX size={18} strokeWidth={2} className="mr-2" />
{result.lhsExpr}: {result.rhsExpr}
</span>
<span className="error-message pl-8 text-xs">
{result.error}
</span>
<span className="error-message pl-8 text-xs">{result.error}</span>
</>
)}
</li>
)): null}
))
: null}
</ul>
</div>
</div>
@ -210,11 +208,11 @@ export default function RunnerResults({collection}) {
</div>
) : null}
</div>
<div className='flex flex-1' style={{width: '50%'}}>
<div className="flex flex-1" style={{ width: '50%' }}>
{selectedItem ? (
<div className='flex flex-col w-full overflow-auto'>
<div className="flex flex-col w-full overflow-auto">
<div className="flex items-center px-3 mb-4 font-medium">
<span className='mr-2'>{selectedItem.relativePath}</span>
<span className="mr-2">{selectedItem.relativePath}</span>
<span>
{selectedItem.testStatus === 'pass' ? (
<IconCircleCheck className="test-success" size={20} strokeWidth={1.5} />
@ -231,4 +229,4 @@ export default function RunnerResults({collection}) {
</div>
</StyledWrapper>
);
};
}

15
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js
View File

@ -17,7 +17,10 @@ const CloneCollectionItem = ({ collection, item, onClose }) => {
name: item.name
},
validationSchema: Yup.object({
name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
name: Yup.string()
.min(1, 'must be atleast 1 characters')
.max(50, 'must be 50 characters or less')
.required('name is required')
}),
onSubmit: (values) => {
dispatch(cloneItem(values.name, item.uid, collection.uid))
@ -25,7 +28,7 @@ const CloneCollectionItem = ({ collection, item, onClose }) => {
onClose();
})
.catch((err) => {
toast.error(err ? err.message : 'An error occured while cloning the request')
toast.error(err ? err.message : 'An error occured while cloning the request');
});
}
});
@ -39,7 +42,13 @@ const CloneCollectionItem = ({ collection, item, onClose }) => {
const onSubmit = () => formik.handleSubmit();
return (
<Modal size="sm" title={`Clone ${isFolder ? 'Folder' : 'Request'}`} confirmText="Clone" handleConfirm={onSubmit} handleCancel={onClose}>
<Modal
size="sm"
title={`Clone ${isFolder ? 'Folder' : 'Request'}`}
confirmText="Clone"
handleConfirm={onSubmit}
handleCancel={onClose}
>
<form className="bruno-form" onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="name" className="block font-semibold">

8
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/index.js
View File

@ -31,7 +31,13 @@ const DeleteCollectionItem = ({ onClose, item, collection }) => {
return (
<StyledWrapper>
<Modal size="sm" title={`Delete ${isFolder ? 'Folder' : 'Request'}`} confirmText="Delete" handleConfirm={onConfirm} handleCancel={onClose}>
<Modal
size="sm"
title={`Delete ${isFolder ? 'Folder' : 'Request'}`}
confirmText="Delete"
handleConfirm={onConfirm}
handleCancel={onClose}
>
Are you sure you want to delete <span className="font-semibold">{item.name}</span> ?
</Modal>
</StyledWrapper>

13
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
View File

@ -16,7 +16,10 @@ const RenameCollectionItem = ({ collection, item, onClose }) => {
name: item.name
},
validationSchema: Yup.object({
name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
name: Yup.string()
.min(1, 'must be atleast 1 characters')
.max(50, 'must be 50 characters or less')
.required('name is required')
}),
onSubmit: (values) => {
dispatch(renameItem(values.name, item.uid, collection.uid));
@ -33,7 +36,13 @@ const RenameCollectionItem = ({ collection, item, onClose }) => {
const onSubmit = () => formik.handleSubmit();
return (
<Modal size="sm" title={`Rename ${isFolder ? 'Folder' : 'Request'}`} confirmText="Rename" handleConfirm={onSubmit} handleCancel={onClose}>
<Modal
size="sm"
title={`Rename ${isFolder ? 'Folder' : 'Request'}`}
confirmText="Rename"
handleConfirm={onSubmit}
handleCancel={onClose}
>
<form className="bruno-form" onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="name" className="block font-semibold">

32
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js
View File

@ -11,9 +11,11 @@ const RunCollectionItem = ({ collection, item, onClose }) => {
const dispatch = useDispatch();
const onSubmit = (recursive) => {
dispatch(showRunnerView({
collectionUid: collection.uid,
}));
dispatch(
showRunnerView({
collectionUid: collection.uid
})
);
dispatch(runCollectionFolder(collection.uid, item ? item.uid : null, recursive));
onClose();
};
@ -25,25 +27,21 @@ const RunCollectionItem = ({ collection, item, onClose }) => {
return (
<StyledWrapper>
<Modal size="md" title='Collection Runner' hideFooter={true} handleCancel={onClose}>
<div className='mb-1'>
<span className='font-medium'>Run</span>
<span className='ml-1 text-xs'>({runLength} requests)</span>
</div>
<div className='mb-8'>
This will only run the requests in this folder.
<Modal size="md" title="Collection Runner" hideFooter={true} handleCancel={onClose}>
<div className="mb-1">
<span className="font-medium">Run</span>
<span className="ml-1 text-xs">({runLength} requests)</span>
</div>
<div className="mb-8">This will only run the requests in this folder.</div>
<div className='mb-1'>
<span className='font-medium'>Recursive Run</span>
<span className='ml-1 text-xs'>({recursiveRunLength} requests)</span>
</div>
<div className='mb-8'>
This will run all the requests in this folder and all its subfolders.
<div className="mb-1">
<span className="font-medium">Recursive Run</span>
<span className="ml-1 text-xs">({recursiveRunLength} requests)</span>
</div>
<div className="mb-8">This will run all the requests in this folder and all its subfolders.</div>
<div className="flex justify-end bruno-modal-footer">
<span className='mr-3'>
<span className="mr-3">
<button type="button" onClick={onClose} className="btn btn-md btn-close">
Cancel
</button>

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

@ -86,9 +86,11 @@ const CollectionItem = ({ item, collection, searchText }) => {
});
const handleClick = (event) => {
dispatch(hideRunnerView({
dispatch(
hideRunnerView({
collectionUid: collection.uid
}));
})
);
if (isItemARequest(item)) {
if (itemIsOpenedInTabs(item, tabs)) {
dispatch(
@ -151,12 +153,24 @@ const CollectionItem = ({ item, collection, searchText }) => {
return (
<StyledWrapper className={className}>
{renameItemModalOpen && <RenameCollectionItem item={item} collection={collection} onClose={() => setRenameItemModalOpen(false)} />}
{cloneItemModalOpen && <CloneCollectionItem item={item} collection={collection} onClose={() => setCloneItemModalOpen(false)} />}
{deleteItemModalOpen && <DeleteCollectionItem item={item} collection={collection} onClose={() => setDeleteItemModalOpen(false)} />}
{newRequestModalOpen && <NewRequest item={item} collection={collection} onClose={() => setNewRequestModalOpen(false)} />}
{newFolderModalOpen && <NewFolder item={item} collection={collection} onClose={() => setNewFolderModalOpen(false)} />}
{runCollectionModalOpen && <RunCollectionItem collection={collection} item={item} onClose={() => setRunCollectionModalOpen(false)} />}
{renameItemModalOpen && (
<RenameCollectionItem item={item} collection={collection} onClose={() => setRenameItemModalOpen(false)} />
)}
{cloneItemModalOpen && (
<CloneCollectionItem item={item} collection={collection} onClose={() => setCloneItemModalOpen(false)} />
)}
{deleteItemModalOpen && (
<DeleteCollectionItem item={item} collection={collection} onClose={() => setDeleteItemModalOpen(false)} />
)}
{newRequestModalOpen && (
<NewRequest item={item} collection={collection} onClose={() => setNewRequestModalOpen(false)} />
)}
{newFolderModalOpen && (
<NewFolder item={item} collection={collection} onClose={() => setNewFolderModalOpen(false)} />
)}
{runCollectionModalOpen && (
<RunCollectionItem collection={collection} item={item} onClose={() => setRunCollectionModalOpen(false)} />
)}
<div className={itemRowClassName} ref={(node) => drag(drop(node))}>
<div className="flex items-center h-full w-full">
{indents && indents.length
@ -185,7 +199,14 @@ const CollectionItem = ({ item, collection, searchText }) => {
}}
>
<div style={{ width: 16, minWidth: 16 }}>
{isFolder ? <IconChevronRight size={16} strokeWidth={2} className={iconClassName} style={{ color: 'rgb(160 160 160)' }} /> : null}
{isFolder ? (
<IconChevronRight
size={16}
strokeWidth={2}
className={iconClassName}
style={{ color: 'rgb(160 160 160)' }}
/>
) : null}
</div>
<div className="ml-1 flex items-center overflow-hidden">

5
packages/bruno-app/src/components/Sidebar/Collections/Collection/RenameCollection/index.js
View File

@ -15,7 +15,10 @@ const RenameCollection = ({ collection, onClose }) => {
name: collection.name
},
validationSchema: Yup.object({
name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
name: Yup.string()
.min(1, 'must be atleast 1 characters')
.max(50, 'must be 50 characters or less')
.required('name is required')
}),
onSubmit: (values) => {
dispatch(renameCollection(values.name, collection.uid));

23
packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
View File

@ -97,13 +97,26 @@ const Collection = ({ collection, searchText }) => {
<StyledWrapper className="flex flex-col">
{showNewRequestModal && <NewRequest collection={collection} onClose={() => setShowNewRequestModal(false)} />}
{showNewFolderModal && <NewFolder collection={collection} onClose={() => setShowNewFolderModal(false)} />}
{showRenameCollectionModal && <RenameCollection collection={collection} onClose={() => setShowRenameCollectionModal(false)} />}
{showRemoveCollectionModal && <RemoveCollection collection={collection} onClose={() => setShowRemoveCollectionModal(false)} />}
{showRunCollectionModal && <RunCollectionItem collection={collection} onClose={() => setShowRunCollectionModal(false)} />}
{showRenameCollectionModal && (
<RenameCollection collection={collection} onClose={() => setShowRenameCollectionModal(false)} />
)}
{showRemoveCollectionModal && (
<RemoveCollection collection={collection} onClose={() => setShowRemoveCollectionModal(false)} />
)}
{showRunCollectionModal && (
<RunCollectionItem collection={collection} onClose={() => setShowRunCollectionModal(false)} />
)}
<div className="flex py-1 collection-name items-center" ref={drop}>
<div className="flex flex-grow items-center overflow-hidden" onClick={handleClick}>
<IconChevronRight size={16} strokeWidth={2} className={iconClassName} style={{ width: 16, minWidth:16, color: 'rgb(160 160 160)' }} />
<div className="ml-1" id="sidebar-collection-name">{collection.name}</div>
<IconChevronRight
size={16}
strokeWidth={2}
className={iconClassName}
style={{ width: 16, minWidth: 16, color: 'rgb(160 160 160)' }}
/>
<div className="ml-1" id="sidebar-collection-name">
{collection.name}
</div>
</div>
<div className="collection-actions">
<Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement="bottom-start">

10
packages/bruno-app/src/components/Sidebar/Collections/CreateOrOpenCollection/index.js
View File

@ -18,10 +18,16 @@ const CreateOrOpenCollection = () => {
const [createCollectionModalOpen, setCreateCollectionModalOpen] = useState(false);
const handleOpenCollection = () => {
dispatch(openCollection()).catch((err) => console.log(err) && toast.error('An error occured while opening the collection'));
dispatch(openCollection()).catch(
(err) => console.log(err) && toast.error('An error occured while opening the collection')
);
};
const CreateLink = () => (
<LinkStyle className="underline text-link cursor-pointer" theme={theme} onClick={() => setCreateCollectionModalOpen(true)}>
<LinkStyle
className="underline text-link cursor-pointer"
theme={theme}
onClick={() => setCreateCollectionModalOpen(true)}
>
Create
</LinkStyle>
);

2
packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/StyledWrapper.js
View File

@ -10,7 +10,7 @@ const StyledWrapper = styled.div`
cursor: pointer;
&:hover {
background-color: ${(props) => props.theme.plainGrid.hoverBg};;
background-color: ${(props) => props.theme.plainGrid.hoverBg};
}
}
`;

22
packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
View File

@ -20,8 +20,14 @@ const CreateCollection = ({ onClose }) => {
collectionLocation: ''
},
validationSchema: Yup.object({
collectionName: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('collection name is required'),
collectionFolderName: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('folder name is required'),
collectionName: Yup.string()
.min(1, 'must be atleast 1 characters')
.max(50, 'must be 50 characters or less')
.required('collection name is required'),
collectionFolderName: Yup.string()
.min(1, 'must be atleast 1 characters')
.max(50, 'must be 50 characters or less')
.required('folder name is required'),
collectionLocation: Yup.string().required('location is required')
}),
onSubmit: (values) => {
@ -58,7 +64,7 @@ const CreateCollection = ({ onClose }) => {
<form className="bruno-form" onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="collectionName" className="flex items-center">
<span className='font-semibold'>Name</span>
<span className="font-semibold">Name</span>
<Tooltip text="Name of the collection" tooltipId="collection-name" />
</label>
<input
@ -74,10 +80,12 @@ const CreateCollection = ({ onClose }) => {
spellCheck="false"
value={formik.values.collectionName || ''}
/>
{formik.touched.collectionName && formik.errors.collectionName ? <div className="text-red-500">{formik.errors.collectionName}</div> : null}
{formik.touched.collectionName && formik.errors.collectionName ? (
<div className="text-red-500">{formik.errors.collectionName}</div>
) : null}
<label htmlFor="collectionFolderName" className="flex items-center mt-3">
<span className='font-semibold'>Folder Name</span>
<span className="font-semibold">Folder Name</span>
<Tooltip text="Name of the folder where your collection is stored" tooltipId="collection-folder-name" />
</label>
<input
@ -92,7 +100,9 @@ const CreateCollection = ({ onClose }) => {
spellCheck="false"
value={formik.values.collectionFolderName || ''}
/>
{formik.touched.collectionFolderName && formik.errors.collectionFolderName ? <div className="text-red-500">{formik.errors.collectionFolderName}</div> : null}
{formik.touched.collectionFolderName && formik.errors.collectionFolderName ? (
<div className="text-red-500">{formik.errors.collectionFolderName}</div>
) : null}
<>
<label htmlFor="collectionLocation" className="block font-semibold mt-3">

15
packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
View File

@ -33,22 +33,13 @@ const ImportCollection = ({ onClose, handleSubmit }) => {
return (
<Modal size="sm" title="Import Collection" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
<div>
<div
className='text-link hover:underline cursor-pointer'
onClick={handleImportBrunoCollection}
>
<div className="text-link hover:underline cursor-pointer" onClick={handleImportBrunoCollection}>
Bruno Collection
</div>
<div
className='text-link hover:underline cursor-pointer mt-2'
onClick={handleImportPostmanCollection}
>
<div className="text-link hover:underline cursor-pointer mt-2" onClick={handleImportPostmanCollection}>
Postman Collection
</div>
<div
className='text-link hover:underline cursor-pointer mt-2'
onClick={handleImportInsomniaCollection}
>
<div className="text-link hover:underline cursor-pointer mt-2" onClick={handleImportInsomniaCollection}>
Insomnia Collection
</div>
</div>

7
packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
View File

@ -15,7 +15,10 @@ const ImportCollectionLocation = ({ onClose, handleSubmit, collectionName }) =>
collectionLocation: ''
},
validationSchema: Yup.object({
collectionLocation: Yup.string().min(1, 'must be atleast 1 characters').max(500, 'must be 500 characters or less').required('name is required')
collectionLocation: Yup.string()
.min(1, 'must be atleast 1 characters')
.max(500, 'must be 500 characters or less')
.required('name is required')
}),
onSubmit: (values) => {
console.log('here');
@ -49,7 +52,7 @@ const ImportCollectionLocation = ({ onClose, handleSubmit, collectionName }) =>
<label htmlFor="collectionName" className="block font-semibold">
Name
</label>
<div className='mt-2'>{collectionName}</div>
<div className="mt-2">{collectionName}</div>
<>
<label htmlFor="collectionLocation" className="block font-semibold mt-3">

6
packages/bruno-app/src/components/Sidebar/NewFolder/index.js
View File

@ -25,7 +25,7 @@ const NewFolder = ({ collection, item, onClose }) => {
if (item && item.uid) {
return true;
}
return value && !(value.trim().toLowerCase().includes('environments'))
return value && !value.trim().toLowerCase().includes('environments');
}
})
}),
@ -64,7 +64,9 @@ const NewFolder = ({ collection, item, onClose }) => {
onChange={formik.handleChange}
value={formik.values.folderName || ''}
/>
{formik.touched.folderName && formik.errors.folderName ? <div className="text-red-500">{formik.errors.folderName}</div> : null}
{formik.touched.folderName && formik.errors.folderName ? (
<div className="text-red-500">{formik.errors.folderName}</div>
) : null}
</div>
</form>
</Modal>

15
packages/bruno-app/src/components/Sidebar/NewRequest/index.js
View File

@ -30,7 +30,7 @@ const NewRequest = ({ collection, item, isEphermal, onClose }) => {
.test({
name: 'requestName',
message: 'The request name "index" is reserved in bruno',
test: value => value && !(value.trim().toLowerCase().includes('index')),
test: (value) => value && !value.trim().toLowerCase().includes('index')
})
}),
onSubmit: (values) => {
@ -140,7 +140,9 @@ const NewRequest = ({ collection, item, isEphermal, onClose }) => {
onChange={formik.handleChange}
value={formik.values.requestName || ''}
/>
{formik.touched.requestName && formik.errors.requestName ? <div className="text-red-500">{formik.errors.requestName}</div> : null}
{formik.touched.requestName && formik.errors.requestName ? (
<div className="text-red-500">{formik.errors.requestName}</div>
) : null}
</div>
<div className="mt-4">
@ -150,7 +152,10 @@ const NewRequest = ({ collection, item, isEphermal, onClose }) => {
<div className="flex items-center mt-2 ">
<div className="flex items-center h-full method-selector-container">
<HttpMethodSelector method={formik.values.requestMethod} onMethodSelect={(val) => formik.setFieldValue('requestMethod', val)} />
<HttpMethodSelector
method={formik.values.requestMethod}
onMethodSelect={(val) => formik.setFieldValue('requestMethod', val)}
/>
</div>
<div className="flex items-center flex-grow input-container h-full">
<input
@ -167,7 +172,9 @@ const NewRequest = ({ collection, item, isEphermal, onClose }) => {
/>
</div>
</div>
{formik.touched.requestUrl && formik.errors.requestUrl ? <div className="text-red-500">{formik.errors.requestUrl}</div> : null}
{formik.touched.requestUrl && formik.errors.requestUrl ? (
<div className="text-red-500">{formik.errors.requestUrl}</div>
) : null}
</div>
</form>
</Modal>

8
packages/bruno-app/src/components/Sidebar/TitleBar/index.js
View File

@ -45,13 +45,17 @@ const TitleBar = () => {
const handleTitleClick = () => dispatch(showHomePage());
const handleOpenCollection = () => {
dispatch(openCollection()).catch((err) => console.log(err) && toast.error('An error occured while opening the collection'));
dispatch(openCollection()).catch(
(err) => console.log(err) && toast.error('An error occured while opening the collection')
);
};
return (
<StyledWrapper className="px-2 py-2">
{createCollectionModalOpen ? <CreateCollection onClose={() => setCreateCollectionModalOpen(false)} /> : null}
{importCollectionModalOpen ? <ImportCollection onClose={() => setImportCollectionModalOpen(false)} handleSubmit={handleImportCollection} /> : null}
{importCollectionModalOpen ? (
<ImportCollection onClose={() => setImportCollectionModalOpen(false)} handleSubmit={handleImportCollection} />
) : null}
{importCollectionLocationModalOpen ? (
<ImportCollectionLocation
collectionName={importedCollection.name}

7
packages/bruno-app/src/components/Sidebar/index.js
View File

@ -88,7 +88,12 @@ const Sidebar = () => {
<div className="footer flex px-1 py-2 absolute bottom-0 left-0 right-0 items-center cursor-pointer select-none">
<div className="flex items-center ml-1 text-xs ">
<IconSettings size={18} strokeWidth={1.5} className="mr-2 hover:text-gray-700" onClick={() => setPreferencesOpen(true)} />
<IconSettings
size={18}
strokeWidth={1.5}
className="mr-2 hover:text-gray-700"
onClick={() => setPreferencesOpen(true)}
/>
</div>
<div className="pl-1" style={{ position: 'relative', top: '3px' }}>
{storedTheme === 'dark' ? (

1
packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
View File

@ -49,7 +49,6 @@ const StyledWrapper = styled.div`
padding-right: 0;
}
}
`;
export default StyledWrapper;

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

@ -27,32 +27,32 @@ class SingleLineEditor extends Component {
lineWrapping: false,
lineNumbers: false,
theme: this.props.theme === 'dark' ? 'monokai' : 'default',
mode: "brunovariables",
mode: 'brunovariables',
brunoVarInfo: {
variables: getAllVariables(this.props.collection),
variables: getAllVariables(this.props.collection)
},
extraKeys: {
"Enter": () => {
Enter: () => {
if (this.props.onRun) {
this.props.onRun();
}
},
"Ctrl-Enter": () => {
'Ctrl-Enter': () => {
if (this.props.onRun) {
this.props.onRun();
}
},
"Cmd-Enter": () => {
'Cmd-Enter': () => {
if (this.props.onRun) {
this.props.onRun();
}
},
"Alt-Enter": () => {
'Alt-Enter': () => {
if (this.props.onRun) {
this.props.onRun();
}
},
"Shift-Enter": () => {
'Shift-Enter': () => {
if (this.props.onRun) {
this.props.onRun();
}
@ -69,8 +69,8 @@ class SingleLineEditor extends Component {
},
'Cmd-F': () => {},
'Ctrl-F': () => {},
'Tab': () => {}
},
Tab: () => {}
}
});
this.editor.setValue(this.props.value || '');
this.editor.on('change', this._onEdit);
@ -115,14 +115,12 @@ class SingleLineEditor extends Component {
let variables = getAllVariables(this.props.collection);
this.variables = variables;
defineCodeMirrorBrunoVariablesMode(variables, "text/plain");
defineCodeMirrorBrunoVariablesMode(variables, 'text/plain');
this.editor.setOption('mode', 'brunovariables');
}
};
render() {
return (
<StyledWrapper ref={this.editorRef} className="single-line-editor"></StyledWrapper>
);
return <StyledWrapper ref={this.editorRef} className="single-line-editor"></StyledWrapper>;
}
}
export default SingleLineEditor;

12
packages/bruno-app/src/components/Tooltip/index.js
View File

@ -4,7 +4,17 @@ import { Tooltip as ReactTooltip } from 'react-tooltip';
const Tooltip = ({ text, tooltipId }) => {
return (
<>
<svg tabIndex="-1" id={tooltipId} xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" className="inline-block ml-2 cursor-pointer" viewBox="0 0 16 16" style={{marginTop: 1}}>
<svg
tabIndex="-1"
id={tooltipId}
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
fill="currentColor"
className="inline-block ml-2 cursor-pointer"
viewBox="0 0 16 16"
style={{ marginTop: 1 }}
>
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
</svg>

6
packages/bruno-app/src/components/VariablesView/Popover/index.js
View File

@ -2,11 +2,7 @@ import React, {useRef} from 'react';
import StyledWrapper from './StyledWrapper';
import useOnClickOutside from 'hooks/useOnClickOutside';
const PopOver = ({
children,
iconRef,
handleClose
}) => {
const PopOver = ({ children, iconRef, handleClose }) => {
const popOverRef = useRef(null);
useOnClickOutside(popOverRef, (e) => {

2
packages/bruno-app/src/components/VariablesView/StyledWrapper.js
View File

@ -10,6 +10,6 @@ const StyledWrapper = styled.div`
width: 1rem;
font-size: 10px;
}
`
`;
export default StyledWrapper;

2
packages/bruno-app/src/components/VariablesView/VariablesTable/StyledWrapper.js
View File

@ -14,6 +14,6 @@ const StyledWrapper = styled.div`
inline-size: 600px;
overflow-wrap: break-word;
}
`
`;
export default StyledWrapper;

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

@ -18,25 +18,33 @@ const VariablesTable = ({ variables, collectionVariables }) => {
return (
<StyledWrapper>
<div className="flex flex-col w-full">
<div className='mb-2 font-medium'>Environment Variables</div>
{(variables && variables.length) ? variables.map((variable) => {
<div className="mb-2 font-medium">Environment Variables</div>
{variables && variables.length ? (
variables.map((variable) => {
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-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>
);
}) : <small>No env variables found</small>}
})
) : (
<small>No env variables found</small>
)}
<div className='mt-2 font-medium'>Collection Variables</div>
{(collectionVars && collectionVars.length) ? collectionVars.map((variable) => {
<div className="mt-2 font-medium">Collection Variables</div>
{collectionVars && collectionVars.length ? (
collectionVars.map((variable) => {
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-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>
);
}) : <small>No collection variables found</small>}
})
) : (
<small>No collection variables found</small>
)}
</div>
</StyledWrapper>
);

30
packages/bruno-app/src/components/VariablesView/index.js
View File

@ -14,39 +14,35 @@ const VariablesView = ({collection}) => {
const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
const variables = get(environment, 'variables', []);
const enabledVariables = filter(variables, (variable) => variable.enabled);
const showVariablesTable = enabledVariables.length > 0 || (collection.collectionVariables && Object.keys(collection.collectionVariables).length > 0);
const showVariablesTable =
enabledVariables.length > 0 ||
(collection.collectionVariables && Object.keys(collection.collectionVariables).length > 0);
return (
<StyledWrapper
className="mr-2 server-syncstatus-icon"
ref={iconRef}
>
<div className="flex p-1 items-center"
<StyledWrapper className="mr-2 server-syncstatus-icon" ref={iconRef}>
<div
className="flex p-1 items-center"
onClick={() => setPopOverOpen(true)}
onMouseEnter={() => setPopOverOpen(true)}
onMouseLeave={() => setPopOverOpen(false)}
>
<div className='cursor-pointer view-environment'>
<div className="cursor-pointer view-environment">
<IconEye size={18} strokeWidth={1.5} />
</div>
{popOverOpen && (
<PopOver
iconRef={iconRef}
handleClose={() => setPopOverOpen(false)}
>
<PopOver iconRef={iconRef} handleClose={() => setPopOverOpen(false)}>
<div className="px-2 py-1">
{showVariablesTable ? (
<VariablesTable
variables={enabledVariables}
collectionVariables={collection.collectionVariables}
/>
) : 'No variables found'}
<VariablesTable variables={enabledVariables} collectionVariables={collection.collectionVariables} />
) : (
'No variables found'
)}
</div>
</PopOver>
)}
</div>
</StyledWrapper>
)
);
};
export default VariablesView;

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

@ -18,7 +18,9 @@ const Welcome = () => {
const [importCollectionLocationModalOpen, setImportCollectionLocationModalOpen] = useState(false);
const handleOpenCollection = () => {
dispatch(openCollection()).catch((err) => console.log(err) && toast.error('An error occured while opening the collection'));
dispatch(openCollection()).catch(
(err) => console.log(err) && toast.error('An error occured while opening the collection')
);
};
const handleImportCollection = (collection) => {
@ -37,7 +39,9 @@ const Welcome = () => {
return (
<StyledWrapper className="pb-4 px-6 mt-6">
{createCollectionModalOpen ? <CreateCollection onClose={() => setCreateCollectionModalOpen(false)} /> : null}
{importCollectionModalOpen ? <ImportCollection onClose={() => setImportCollectionModalOpen(false)} handleSubmit={handleImportCollection} /> : null}
{importCollectionModalOpen ? (
<ImportCollection onClose={() => setImportCollectionModalOpen(false)} handleSubmit={handleImportCollection} />
) : null}
{importCollectionLocationModalOpen ? (
<ImportCollectionLocation
collectionName={importedCollection.name}
@ -62,13 +66,13 @@ const Welcome = () => {
</div>
<div className="flex items-center ml-6" onClick={handleOpenCollection}>
<IconFolders size={18} strokeWidth={2} />
<span className="label ml-2">
Open Collection
</span>
<span className="label ml-2">Open Collection</span>
</div>
<div className="flex items-center ml-6" onClick={() => setImportCollectionModalOpen(true)}>
<IconUpload size={18} strokeWidth={2} />
<span className="label ml-2" id="import-collection">Import Collection</span>
<span className="label ml-2" id="import-collection">
Import Collection
</span>
</div>
</div>

2
packages/bruno-app/src/hooks/useOnClickOutside/index.js
View File

@ -4,7 +4,7 @@ import { useEffect } from 'react';
const useOnClickOutside = (ref, handler) => {
useEffect(
() => {
const listener = event => {
const listener = (event) => {
// Do nothing if clicking ref's element or descendent elements
if (!ref.current || ref.current.contains(event.target)) {
return;

5
packages/bruno-app/src/pages/_document.js
View File

@ -31,7 +31,10 @@ export default class MyDocument extends Document {
return (
<Html>
<Head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
</Head>
<body id="bruno-app-body">
<Main />

4
packages/bruno-app/src/providers/App/index.js
View File

@ -29,9 +29,7 @@ export const AppProvider = (props) => {
return (
<AppContext.Provider {...props} value="appProvider">
<StyledWrapper>
{props.children}
</StyledWrapper>
<StyledWrapper>{props.children}</StyledWrapper>
</AppContext.Provider>
);
};

4
packages/bruno-app/src/providers/App/useCollectionTreeSync.js
View File

@ -85,10 +85,10 @@ const useCollectionTreeSync = () => {
};
const _displayError = (error) => {
if(typeof error === "string") {
if (typeof error === 'string') {
return toast.error(error || 'Something went wrong!');
}
if(typeof message === "object") {
if (typeof message === 'object') {
return toast.error(error.message || 'Something went wrong!');
}
};

12
packages/bruno-app/src/providers/Hotkeys/index.js
View File

@ -165,9 +165,15 @@ export const HotkeysProvider = (props) => {
return (
<HotkeysContext.Provider {...props} value="hotkey">
{showBrunoSupportModal && <BrunoSupport onClose={() => setShowBrunoSupportModal(false)} />}
{showSaveRequestModal && <SaveRequest items={getCurrentCollectionItems()} onClose={() => setShowSaveRequestModal(false)} />}
{showEnvSettingsModal && <EnvironmentSettings collection={getCurrentCollection()} onClose={() => setShowEnvSettingsModal(false)} />}
{showNewRequestModal && <NewRequest collection={getCurrentCollection()} onClose={() => setShowNewRequestModal(false)} />}
{showSaveRequestModal && (
<SaveRequest items={getCurrentCollectionItems()} onClose={() => setShowSaveRequestModal(false)} />
)}
{showEnvSettingsModal && (
<EnvironmentSettings collection={getCurrentCollection()} onClose={() => setShowEnvSettingsModal(false)} />
)}
{showNewRequestModal && (
<NewRequest collection={getCurrentCollection()} onClose={() => setShowNewRequestModal(false)} />
)}
<div>{props.children}</div>
</HotkeysContext.Provider>
);

15
packages/bruno-app/src/providers/Preferences/index.js
View File

@ -30,21 +30,20 @@ export const PreferencesProvider = (props) => {
const { ipcRenderer } = window;
useEffect(() => {
ipcRenderer
.invoke('renderer:set-preferences', preferences)
.catch(err => {
ipcRenderer.invoke('renderer:set-preferences', preferences).catch((err) => {
toast.error(err.message || 'Preferences sync error');
});
}, [preferences, toast]);
const validatedSetPreferences = (newPreferences) => {
return new Promise((resolve, reject) => {
preferencesSchema.validate(newPreferences, { abortEarly: true })
.then(validatedPreferences => {
preferencesSchema
.validate(newPreferences, { abortEarly: true })
.then((validatedPreferences) => {
setPreferences(validatedPreferences);
resolve(validatedPreferences);
})
.catch(error => {
.catch((error) => {
let errMsg = error.message || 'Preferences validation error';
toast.error(errMsg);
reject(error);
@ -60,9 +59,7 @@ export const PreferencesProvider = (props) => {
return (
<PreferencesContext.Provider value={value}>
<>
{props.children}
</>
<>{props.children}</>
</PreferencesContext.Provider>
);
};

9
packages/bruno-app/src/providers/ReduxStore/slices/app.js
View File

@ -33,6 +33,13 @@ export const appSlice = createSlice({
}
});
export const { idbConnectionReady, refreshScreenWidth, updateLeftSidebarWidth, updateIsDragging, showHomePage, hideHomePage } = appSlice.actions;
export const {
idbConnectionReady,
refreshScreenWidth,
updateLeftSidebarWidth,
updateIsDragging,
showHomePage,
hideHomePage
} = appSlice.actions;
export default appSlice.reducer;

72
packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
View File

@ -56,10 +56,7 @@ export const renameCollection = (newName, collectionUid) => (dispatch, getState)
return reject(new Error('Collection not found'));
}
ipcRenderer
.invoke('renderer:rename-collection', newName, collection.pathname)
.then(resolve)
.catch(reject);
ipcRenderer.invoke('renderer:rename-collection', newName, collection.pathname).then(resolve).catch(reject);
});
};
@ -166,12 +163,21 @@ export const runCollectionFolder = (collectionUid, folderUid, recursive) => (dis
const environment = findEnvironmentInCollection(collectionCopy, collection.activeEnvironmentUid);
dispatch(resetRunResults({
dispatch(
resetRunResults({
collectionUid: collection.uid
}));
})
);
ipcRenderer
.invoke('renderer:run-collection-folder', folder, collectionCopy, environment, collectionCopy.collectionVariables, recursive)
.invoke(
'renderer:run-collection-folder',
folder,
collectionCopy,
environment,
collectionCopy.collectionVariables,
recursive
)
.then(resolve)
.catch((err) => {
toast.error(get(err, 'error.message') || 'Something went wrong!');
@ -190,7 +196,10 @@ export const newFolder = (folderName, collectionUid, itemUid) => (dispatch, getS
}
if (!itemUid) {
const folderWithSameNameExists = find(collection.items, (i) => i.type === 'folder' && trim(i.name) === trim(folderName));
const folderWithSameNameExists = find(
collection.items,
(i) => i.type === 'folder' && trim(i.name) === trim(folderName)
);
if (!folderWithSameNameExists) {
const fullName = `${collection.pathname}${PATH_SEPARATOR}${folderName}`;
const { ipcRenderer } = window;
@ -205,7 +214,10 @@ export const newFolder = (folderName, collectionUid, itemUid) => (dispatch, getS
} else {
const currentItem = findItemInCollection(collection, itemUid);
if (currentItem) {
const folderWithSameNameExists = find(currentItem.items, (i) => i.type === 'folder' && trim(i.name) === trim(folderName));
const folderWithSameNameExists = find(
currentItem.items,
(i) => i.type === 'folder' && trim(i.name) === trim(folderName)
);
if (!folderWithSameNameExists) {
const fullName = `${currentItem.pathname}${PATH_SEPARATOR}${folderName}`;
const { ipcRenderer } = window;
@ -250,10 +262,7 @@ export const renameItem = (newName, itemUid, collectionUid) => (dispatch, getSta
}
const { ipcRenderer } = window;
ipcRenderer
.invoke('renderer:rename-item', item.pathname, newPathname, newName)
.then(resolve)
.catch(reject);
ipcRenderer.invoke('renderer:rename-item', item.pathname, newPathname, newName).then(resolve).catch(reject);
});
};
@ -280,12 +289,15 @@ export const cloneItem = (newName, itemUid, collectionUid) => (dispatch, getStat
const itemToSave = refreshUidsInItem(transformRequestToSaveToFilesystem(item));
itemToSave.name = trim(newName);
if (!parentItem) {
const reqWithSameNameExists = find(collection.items, (i) => i.type !== 'folder' && trim(i.filename) === trim(filename));
const reqWithSameNameExists = find(
collection.items,
(i) => i.type !== 'folder' && trim(i.filename) === trim(filename)
);
if (!reqWithSameNameExists) {
const fullName = `${collection.pathname}${PATH_SEPARATOR}${filename}`;
const { ipcRenderer } = window;
const requestItems = filter(collection.items, (i) => i.type !== 'folder');
itemToSave.seq = requestItems ? (requestItems.length + 1) : 1;
itemToSave.seq = requestItems ? requestItems.length + 1 : 1;
itemSchema
.validate(itemToSave)
@ -296,13 +308,16 @@ export const cloneItem = (newName, itemUid, collectionUid) => (dispatch, getStat
return reject(new Error('Duplicate request names are not allowed under the same folder'));
}
} else {
const reqWithSameNameExists = find(parentItem.items, (i) => i.type !== 'folder' && trim(i.filename) === trim(filename));
const reqWithSameNameExists = find(
parentItem.items,
(i) => i.type !== 'folder' && trim(i.filename) === trim(filename)
);
if (!reqWithSameNameExists) {
const dirname = getDirectoryName(item.pathname);
const fullName = path.join(dirname, filename);
const { ipcRenderer } = window;
const requestItems = filter(parentItem.items, (i) => i.type !== 'folder');
itemToSave.seq = requestItems ? (requestItems.length + 1) : 1;
itemToSave.seq = requestItems ? requestItems.length + 1 : 1;
itemSchema
.validate(itemToSave)
@ -542,7 +557,10 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
// itemUid is null when we are creating a new request at the root level
const filename = resolveRequestFilename(requestName);
if (!itemUid) {
const reqWithSameNameExists = find(collection.items, (i) => i.type !== 'folder' && trim(i.filename) === trim(filename));
const reqWithSameNameExists = find(
collection.items,
(i) => i.type !== 'folder' && trim(i.filename) === trim(filename)
);
const requestItems = filter(collection.items, (i) => i.type !== 'folder');
item.seq = requestItems.length + 1;
@ -557,7 +575,10 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
} else {
const currentItem = findItemInCollection(collection, itemUid);
if (currentItem) {
const reqWithSameNameExists = find(currentItem.items, (i) => i.type !== 'folder' && trim(i.filename) === trim(filename));
const reqWithSameNameExists = find(
currentItem.items,
(i) => i.type !== 'folder' && trim(i.filename) === trim(filename)
);
const requestItems = filter(currentItem.items, (i) => i.type !== 'folder');
item.seq = requestItems.length + 1;
if (!reqWithSameNameExists) {
@ -583,13 +604,17 @@ export const addEnvironment = (name, collectionUid) => (dispatch, getState) => {
ipcRenderer
.invoke('renderer:create-environment', collection.pathname, name)
.then(dispatch(updateLastAction({
.then(
dispatch(
updateLastAction({
collectionUid,
lastAction: {
type: 'ADD_ENVIRONMENT',
payload: name
}
})))
})
)
)
.then(resolve)
.catch(reject);
});
@ -793,9 +818,6 @@ export const importCollection = (collection, collectionLocation) => (dispatch, g
return new Promise((resolve, reject) => {
const { ipcRenderer } = window;
ipcRenderer
.invoke('renderer:import-collection', collection, collectionLocation)
.then(resolve)
.catch(reject);
ipcRenderer.invoke('renderer:import-collection', collection, collectionLocation).then(resolve).catch(reject);
});
};

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

@ -482,7 +482,10 @@ export const collectionsSlice = createSlice({
if (!item.draft) {
item.draft = cloneDeep(item);
}
item.draft.request.body.formUrlEncoded = filter(item.draft.request.body.formUrlEncoded, (p) => p.uid !== action.payload.paramUid);
item.draft.request.body.formUrlEncoded = filter(
item.draft.request.body.formUrlEncoded,
(p) => p.uid !== action.payload.paramUid
);
}
}
},
@ -537,7 +540,10 @@ export const collectionsSlice = createSlice({
if (!item.draft) {
item.draft = cloneDeep(item);
}
item.draft.request.body.multipartForm = filter(item.draft.request.body.multipartForm, (p) => p.uid !== action.payload.paramUid);
item.draft.request.body.multipartForm = filter(
item.draft.request.body.multipartForm,
(p) => p.uid !== action.payload.paramUid
);
}
}
},
@ -729,7 +735,9 @@ export const collectionsSlice = createSlice({
if (!item.draft) {
item.draft = cloneDeep(item);
}
item.draft.request.assertions = item.draft.request.assertions.filter((a) => a.uid !== action.payload.assertUid);
item.draft.request.assertions = item.draft.request.assertions.filter(
(a) => a.uid !== action.payload.assertUid
);
}
}
},
@ -1088,7 +1096,6 @@ export const collectionsSlice = createSlice({
info.status = 'ended';
}
if (type === 'request-queued') {
collection.runnerResult.items.push({
uid: request.uid,
@ -1122,7 +1129,7 @@ export const collectionsSlice = createSlice({
const item = collection.runnerResult.items.find((i) => i.uid === request.uid);
item.error = action.payload.error;
item.responseReceived = action.payload.responseReceived;
item.status = "error";
item.status = 'error';
}
}
},

3
packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
View File

@ -80,6 +80,7 @@ export const tabsSlice = createSlice({
}
});
export const { addTab, focusTab, updateRequestPaneTabWidth, updateRequestPaneTab, updateResponsePaneTab, closeTabs } = tabsSlice.actions;
export const { addTab, focusTab, updateRequestPaneTabWidth, updateRequestPaneTab, updateResponsePaneTab, closeTabs } =
tabsSlice.actions;
export default tabsSlice.reducer;

2
packages/bruno-app/src/providers/Theme/index.js
View File

@ -6,7 +6,7 @@ import { ThemeProvider as SCThemeProvider } from 'styled-components';
export const ThemeContext = createContext();
export const ThemeProvider = (props) => {
const isBrowserThemeLight = window.matchMedia("(prefers-color-scheme: light)").matches;
const isBrowserThemeLight = window.matchMedia('(prefers-color-scheme: light)').matches;
const [storedTheme, setStoredTheme] = useLocalStorage('bruno.theme', isBrowserThemeLight ? 'light' : 'dark');
const theme = themes[storedTheme];

8
packages/bruno-app/src/providers/Toaster/index.js
View File

@ -5,9 +5,7 @@ import { useTheme } from 'providers/Theme';
export const ToastContext = React.createContext();
export const ToastProvider = (props) => {
const {
storedTheme
} = useTheme();
const { storedTheme } = useTheme();
const toastOptions = { duration: 2000 };
if (storedTheme === 'dark') {
@ -21,9 +19,7 @@ export const ToastProvider = (props) => {
return (
<ToastContext.Provider {...props} value="toastProvider">
<Toaster toastOptions={toastOptions} />
<div>
{props.children}
</div>
<div>{props.children}</div>
</ToastContext.Provider>
);
};

2
packages/bruno-app/src/themes/dark.js
View File

@ -20,7 +20,7 @@ const darkTheme = {
bg: 'rgb(48, 48, 49)',
name: {
color: '#569cd6',
color: '#569cd6'
}
},

4
packages/bruno-app/src/themes/light.js
View File

@ -9,7 +9,7 @@ const lightTheme = {
green: '#047857',
danger: 'rgb(185, 28, 28)',
muted: '#4b5563',
purple: '#8e44ad',
purple: '#8e44ad'
},
bg: {
danger: '#dc3545'
@ -24,7 +24,7 @@ const lightTheme = {
bg: '#fff',
name: {
color: '#546de5',
color: '#546de5'
}
},

23
packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
View File

@ -33,7 +33,6 @@ if (!SERVER_RENDERED) {
};
CodeMirror.defineOption('brunoVarInfo', false, function (cm, options, old) {
if (old && old !== CodeMirror.Init) {
const oldOnMouseOver = cm.state.brunoVarInfo.onMouseOver;
CodeMirror.off(cm.getWrapperElement(), 'mouseover', oldOnMouseOver);
@ -50,10 +49,7 @@ if (!SERVER_RENDERED) {
function createState(options) {
return {
options:
options instanceof Function
? {render: options}
: options === true ? {} : options,
options: options instanceof Function ? { render: options } : options === true ? {} : options
};
}
@ -105,7 +101,7 @@ if (!SERVER_RENDERED) {
function onMouseHover(cm, box) {
const pos = cm.coordsChar({
left: (box.left + box.right) / 2,
top: (box.top + box.bottom) / 2,
top: (box.top + box.bottom) / 2
});
const state = cm.state.brunoVarInfo;
@ -128,21 +124,12 @@ if (!SERVER_RENDERED) {
const popupBox = popup.getBoundingClientRect();
const popupStyle = popup.currentStyle || window.getComputedStyle(popup);
const popupWidth =
popupBox.right -
popupBox.left +
parseFloat(popupStyle.marginLeft) +
parseFloat(popupStyle.marginRight);
popupBox.right - popupBox.left + parseFloat(popupStyle.marginLeft) + parseFloat(popupStyle.marginRight);
const popupHeight =
popupBox.bottom -
popupBox.top +
parseFloat(popupStyle.marginTop) +
parseFloat(popupStyle.marginBottom);
popupBox.bottom - popupBox.top + parseFloat(popupStyle.marginTop) + parseFloat(popupStyle.marginBottom);
let topPos = box.bottom;
if (
popupHeight > window.innerHeight - box.bottom - 15 &&
box.top > window.innerHeight - box.bottom
) {
if (popupHeight > window.innerHeight - box.bottom - 15 && box.top > window.innerHeight - box.bottom) {
topPos = box.top - popupHeight;
}

1
packages/bruno-app/src/utils/collections/export.js
View File

@ -61,7 +61,6 @@ const exportCollection = (collection) => {
deleteUidsInEnvs(collection.environments);
transformItem(collection.items);
const fileName = `${collection.name}.json`;
const fileBlob = new Blob([JSON.stringify(collection, null, 2)], { type: 'application/json' });

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

@ -522,7 +522,7 @@ export const getEnvironmentVariables = (collection) => {
}
return variables;
}
};
export const getTotalRequestCountInCollection = (collection) => {
let count = 0;
@ -544,4 +544,4 @@ export const getAllVariables = (collection) => {
...environmentVariables,
...collection.collectionVariables
};
}
};

17
packages/bruno-app/src/utils/common/codemirror.js
View File

@ -1,4 +1,3 @@
let CodeMirror;
const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
@ -7,25 +6,25 @@ if (!SERVER_RENDERED) {
}
export const defineCodeMirrorBrunoVariablesMode = (variables, mode) => {
CodeMirror.defineMode("brunovariables", function(config, parserConfig) {
CodeMirror.defineMode('brunovariables', function (config, parserConfig) {
let variablesOverlay = {
token: function (stream, state) {
if (stream.match("{{", true)) {
if (stream.match('{{', true)) {
let ch;
let word = "";
let word = '';
while ((ch = stream.next()) != null) {
if (ch == "}" && stream.next() == "}") {
stream.eat("}");
if (ch == '}' && stream.next() == '}') {
stream.eat('}');
if (word in variables) {
return "variable-valid";
return 'variable-valid';
} else {
return "variable-invalid";
return 'variable-invalid';
}
}
word += ch;
}
}
while (stream.next() != null && !stream.match("{{", false)) {}
while (stream.next() != null && !stream.match('{{', false)) {}
return null;
}
};

4
packages/bruno-app/src/utils/common/index.js
View File

@ -48,7 +48,7 @@ export const safeStringifyJSON = (obj, indent=false) => {
} catch (e) {
return obj;
}
}
};
// Remove any characters that are not alphanumeric, spaces, hyphens, or underscores
export const normalizeFileName = (name) => {
@ -60,4 +60,4 @@ export const normalizeFileName = (name) => {
const formattedName = name.replace(validChars, '-');
return formattedName;
}
};

26
packages/bruno-app/src/utils/common/index.spec.js
View File

@ -1,19 +1,19 @@
const { describe, it, expect } = require("@jest/globals");
const { describe, it, expect } = require('@jest/globals');
import { normalizeFileName } from './index';
describe("common utils", () => {
describe("normalizeFileName", () => {
it("should remove special characters", () => {
expect(normalizeFileName("hello world")).toBe("hello world");
expect(normalizeFileName("hello-world")).toBe("hello-world");
expect(normalizeFileName("hello_world")).toBe("hello_world");
expect(normalizeFileName("hello_world-")).toBe("hello_world-");
expect(normalizeFileName("hello_world-123")).toBe("hello_world-123");
expect(normalizeFileName("hello_world-123!@#$%^&*()")).toBe("hello_world-123----------");
expect(normalizeFileName("hello_world?")).toBe("hello_world-");
expect(normalizeFileName("foo/bar/")).toBe("foo-bar-");
expect(normalizeFileName("foo\\bar\\")).toBe("foo-bar-");
describe('common utils', () => {
describe('normalizeFileName', () => {
it('should remove special characters', () => {
expect(normalizeFileName('hello world')).toBe('hello world');
expect(normalizeFileName('hello-world')).toBe('hello-world');
expect(normalizeFileName('hello_world')).toBe('hello_world');
expect(normalizeFileName('hello_world-')).toBe('hello_world-');
expect(normalizeFileName('hello_world-123')).toBe('hello_world-123');
expect(normalizeFileName('hello_world-123!@#$%^&*()')).toBe('hello_world-123----------');
expect(normalizeFileName('hello_world?')).toBe('hello_world-');
expect(normalizeFileName('foo/bar/')).toBe('foo-bar-');
expect(normalizeFileName('foo\\bar\\')).toBe('foo-bar-');
});
});
});

2
packages/bruno-app/src/utils/common/platform.js
View File

@ -32,4 +32,4 @@ export const getDirectoryName = (pathname) => {
pathname = slash(pathname);
return path.dirname(pathname);
}
};

2
packages/bruno-app/src/utils/common/slash.js
View File

@ -15,6 +15,6 @@ const slash = (path) => {
}
return path.replace(/\\/g, '/');
}
};
export default slash;

3
packages/bruno-app/src/utils/importers/common.js
View File

@ -1,4 +1,3 @@
import each from 'lodash/each';
import get from 'lodash/get';
@ -101,4 +100,4 @@ export const hydrateSeqInCollection = (collection) => {
hydrateSeq(collection.items);
return collection;
}
};

Some files were not shown because too many files have changed in this diff Show More