mirror of
https://github.com/usebruno/bruno.git
synced 2026-06-27 14:44:07 +00:00
Feat/add import export support for examples (#5936)
* feat: enhance Bru grammar to support response blocks and examples - Added new grammar rules for response headers, status, and body types (JSON, XML, text). - Introduced parsing logic for example blocks, allowing multiple examples with various body types. - Implemented tests for example parsing, including edge cases and complex examples with authentication. - Created fixture files for simple and complex examples to validate parsing functionality. feat: extend jsonToBru functionality to support response handling and examples - Updated jsonToBru to include parsing for response headers, status, and body types (JSON, XML, text). - Enhanced example handling to support multiple examples with various body types. - Added comprehensive tests for example parsing, including edge cases and complex scenarios with authentication. - Created fixture files for testing the new features and validating parsing functionality. move: files to fixtures folder refactor: simplify response body handling in Bru grammar and JSON conversion - Removed specific body type handling (JSON, XML, text) from grammar and semantics. - Updated response body parsing in jsonToBru to handle a unified response body format. - Adjusted tests and fixtures to reflect changes in response body structure, ensuring compatibility with the new format. feat: add response bookmarking functionality to ResponsePane - Introduced ResponseBookmark component to allow users to save responses as examples. - Added NameExampleModal for naming saved examples. - Updated ResponsePane to include the new bookmarking feature. - Implemented Redux actions to manage response examples in the collections state. - Enhanced CollectionItem to display saved examples and allow for expansion. fix: remove unnecessary padding from ExampleItem component feat: implement delete and rename functionality for examples in ExampleItem component - Added DeleteExampleModal for confirming deletion of examples. - Integrated modal for renaming examples with state management. - Enhanced ExampleItem to handle example deletion and renaming through modals. - Updated Redux actions to support example updates and deletions in the collections state. fix: example writing to disc properly fix: example parsing errors fix: request with example parsing error fix: handle examples in collections and requests feat: implement response example functionality in the application - Added ResponseExample component to handle displaying and editing response examples. - Integrated ResponseExampleRequestPane and ResponseExampleResponsePane for structured request and response handling. - Enhanced RequestTabPanel and RequestTab components to support response-example tabs. - Introduced new styled components for better UI/UX in response examples. - Updated theme files to include styles for response examples. - Implemented URL bar for editing request URLs in response examples. - Added functionality for managing headers and parameters in response examples. - Improved overall structure and organization of response example components. add styles for example url bar feat: add Checkbox component and Table-v2 for enhanced UI - Introduced a new Checkbox component for better user interaction in forms. - Added Table-v2 component to improve table rendering and resizing functionality. - Updated existing components to utilize the new Checkbox and Table-v2 for managing headers and parameters in response examples. - Enhanced styling for better visual consistency across components. - Updated theme files to include styles for the new components. feat: implement custom scrollbar styles for response example components fix: features add actions , view more feat: enhance response example functionality - Added GenerateCodeItem component for generating code snippets from response examples. - Integrated modal for code generation within ResponseExample component. - Updated ResponseExampleTopBar to handle example name and description editing. - Improved state management for response examples, including new actions for updating names and descriptions. - Enhanced ResponseExampleRequestPane to support editing and saving request details. - Refactored URL handling in ResponseExampleUrlBar to utilize example-specific data. - Improved overall user experience with better UI elements and state management. feat: enhance response example management and UI components feat: enhance editing capabilities in response example components feat: update multipart form parameter handling in response examples feat: refactor response example parameter handling and enhance UI interactions feat: introduce RadioButton component and update Checkbox usage in response examples fix: styles fix radio button styling fixed radio button styles feat: add create example from sidebar feat: enhance ResponseExample components with layout adjustments and new HeightBoundContainer feat: add Checkbox and RadioButton components with comprehensive tests for rendering, user interactions, and accessibility feat: playwright test csaes rm: comments fix: linting fix: tests refactor: update response example tests and enhance functionality fix: tests fix: e2e-tests refactor: implement hasRequestChanges utility for better change detection rm: console rm: consoles fix: lint fix: tests fix: response header disabled by default issue Feat/with bru example parser (#5892) * fix: response header disabled by default issue feat: new parsing logic fix: change test cases to accomodate new brulang add: path params features rm:consoles six: make tab permanent on double click fix width feat: add status editing feat: review fixes review fixes fix: review fixes fix: post review mv: test files fix: review * fix: lint * fix: review comments * fix: icons folder strcuture fix: tests fix: lint fix: unit tests feat: body mode selector fix: close all collections rm: example feat added tests. lang change feat: add custom status text fix: status update feat: add body mode, update tests add default name prefilled for example fix: active tab styles, prefilled name, text fixes fix : pkg lock fix: review fix: review comments fix: hide cursor when readonly fix: height fix: null body fix: response body parsing fix: test cases feat: add method support for examples fix: reponse parsing fix: update response body type when content type is updated rm : commented code feat: update parser logic fix: organize files feat: enhance examples handling in collection export and import feat: postman imports fro examples feat: enhance OpenAPI import functionality to support examples feat: support postman export fix: postman export import fix: open api tests, remove requestbody related logic rm: examples fix: move common attributes files ui fixes fix: clone issue fix: create example from request menu review fixes more review fixes mv: files, fix mode req error organize files fix:tests fix: save dot issue fix: bugs fix: postman export fix: import path params * chore:improve modal handling in environment and response example tests fix: test issues resolved * chore: update response example tests to use new fixture files and improve cleanup logic --------- Co-authored-by: Abhishek S Lal <abhishek@usebruno.com> Co-authored-by: Bijin Bruno <bijin@usebruno.com>
This commit is contained in:
sanish chirayath
GitHub
@@ -0,0 +1,89 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
.title {
|
||||
font-weight: 700;
|
||||
color: ${(props) => props.theme.text};
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
transition: opacity 0.2s ease;
|
||||
color: ${(props) => props.theme.colors.text.muted};
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
|
||||
thead {
|
||||
td {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid ${(props) => props.theme.table.border};
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
border-bottom: 1px solid ${(props) => props.theme.table.border};
|
||||
|
||||
&:hover {
|
||||
background: ${(props) => props.theme.plainGrid.hoverBg};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
tr {
|
||||
position: relative;
|
||||
|
||||
&:hover .delete-button {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.2s ease;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
color: ${(props) => props.theme.colors.text.muted};
|
||||
margin-left: 8px;
|
||||
|
||||
&:hover {
|
||||
color: ${(props) => props.theme.colors.text.red};
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: ${(props) => props.theme.text};
|
||||
}
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
||||
@@ -0,0 +1,272 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { IconTrash } from '@tabler/icons';
|
||||
import { useTheme } from 'providers/Theme';
|
||||
import get from 'lodash/get';
|
||||
import { addResponseExampleParam, updateResponseExampleParam, deleteResponseExampleParam, moveResponseExampleParam, setResponseExampleParams } from 'providers/ReduxStore/slices/collections';
|
||||
import Table from 'components/Table-v2';
|
||||
import ReorderTable from 'components/ReorderTable';
|
||||
import SingleLineEditor from 'components/SingleLineEditor';
|
||||
import BulkEditor from 'components/BulkEditor';
|
||||
import Checkbox from 'components/Checkbox';
|
||||
import InfoTip from 'components/InfoTip';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
|
||||
const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
|
||||
const dispatch = useDispatch();
|
||||
const { storedTheme } = useTheme();
|
||||
const [isBulkEditMode, setIsBulkEditMode] = useState(false);
|
||||
|
||||
const params = useMemo(() => {
|
||||
return item.draft
|
||||
? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.params || []
|
||||
: get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.params || [];
|
||||
}, [item, exampleUid]);
|
||||
|
||||
const queryParams = params.filter((param) => param.type === 'query');
|
||||
const pathParams = params.filter((param) => param.type === 'path');
|
||||
|
||||
const handleAddQueryParam = () => {
|
||||
if (!editMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(addResponseExampleParam({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid
|
||||
}));
|
||||
};
|
||||
|
||||
const handleQueryParamChange = (e, data, key) => {
|
||||
if (!editMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updatedParam = { ...data };
|
||||
switch (key) {
|
||||
case 'name': {
|
||||
updatedParam.name = e.target.value;
|
||||
break;
|
||||
}
|
||||
case 'value': {
|
||||
updatedParam.value = e.target.value;
|
||||
break;
|
||||
}
|
||||
case 'enabled': {
|
||||
updatedParam.enabled = e.target.checked;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
dispatch(updateResponseExampleParam({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
param: updatedParam
|
||||
}));
|
||||
};
|
||||
|
||||
const handleRemoveQueryParam = (param) => {
|
||||
if (!editMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(deleteResponseExampleParam({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
paramUid: param.uid
|
||||
}));
|
||||
};
|
||||
|
||||
const handleQueryParamDrag = ({ updateReorderedItem }) => {
|
||||
if (!editMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(moveResponseExampleParam({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
updateReorderedItem
|
||||
}));
|
||||
};
|
||||
|
||||
const toggleBulkEditMode = () => {
|
||||
setIsBulkEditMode(!isBulkEditMode);
|
||||
};
|
||||
|
||||
const handleBulkParamsChange = (newParams) => {
|
||||
if (!editMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(setResponseExampleParams({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
params: newParams
|
||||
}));
|
||||
};
|
||||
|
||||
const handlePathParamChange = (e, data) => {
|
||||
if (!editMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updatedParam = { ...data };
|
||||
updatedParam.value = e.target.value;
|
||||
|
||||
dispatch(updateResponseExampleParam({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
param: updatedParam
|
||||
}));
|
||||
};
|
||||
|
||||
if (isBulkEditMode && editMode) {
|
||||
return (
|
||||
<StyledWrapper className="w-full mt-3">
|
||||
<BulkEditor
|
||||
params={queryParams}
|
||||
onChange={handleBulkParamsChange}
|
||||
onToggle={toggleBulkEditMode}
|
||||
/>
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
if (queryParams.length === 0 && pathParams.length === 0 && !editMode) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledWrapper className="w-full mt-4">
|
||||
<div className="mb-1 title text-xs font-bold">Query parameters</div>
|
||||
<Table
|
||||
headers={[
|
||||
{ name: 'Name', accessor: 'name', width: '40%' },
|
||||
{ name: 'Value', accessor: 'value', width: '60%' }
|
||||
]}
|
||||
>
|
||||
<ReorderTable updateReorderedItem={handleQueryParamDrag}>
|
||||
{queryParams && queryParams.length
|
||||
? queryParams.map((param, index) => (
|
||||
<tr key={param.uid} data-uid={param.uid}>
|
||||
<td className="flex relative">
|
||||
<div className="flex items-center justify-center mr-3">
|
||||
<Checkbox
|
||||
checked={param.enabled !== false}
|
||||
disabled={!editMode}
|
||||
onChange={(e) => handleQueryParamChange(e, param, 'enabled')}
|
||||
dataTestId={`query-param-checkbox-${index}`}
|
||||
/>
|
||||
</div>
|
||||
<SingleLineEditor
|
||||
value={param.name || ''}
|
||||
theme={storedTheme}
|
||||
onSave={() => {}}
|
||||
onChange={(newValue) => handleQueryParamChange({ target: { value: newValue } }, param, 'name')}
|
||||
onRun={() => {}}
|
||||
collection={collection}
|
||||
variablesAutocomplete={true}
|
||||
readOnly={!editMode}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<div className="flex items-center justify-center pl-4">
|
||||
<SingleLineEditor
|
||||
value={param.value || ''}
|
||||
theme={storedTheme}
|
||||
onSave={() => {}}
|
||||
onChange={(newValue) => handleQueryParamChange({ target: { value: newValue } }, param, 'value')}
|
||||
onRun={() => {}}
|
||||
collection={collection}
|
||||
variablesAutocomplete={true}
|
||||
readOnly={!editMode}
|
||||
/>
|
||||
{editMode && (
|
||||
<button tabIndex="-1" onClick={() => handleRemoveQueryParam(param)} className="delete-button">
|
||||
<IconTrash strokeWidth={1.5} size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
: null}
|
||||
</ReorderTable>
|
||||
</Table>
|
||||
|
||||
{editMode && (
|
||||
<div className="flex justify-between mt-2">
|
||||
<button
|
||||
className="btn-action text-link pr-2 py-3 select-none"
|
||||
onClick={handleAddQueryParam}
|
||||
>
|
||||
+ Add Param
|
||||
</button>
|
||||
<button
|
||||
className="btn-action text-link select-none"
|
||||
onClick={toggleBulkEditMode}
|
||||
>
|
||||
Bulk Edit
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{pathParams && pathParams.length > 0 && (
|
||||
<>
|
||||
<div className="mb-1 title text-xs font-bold flex items-stretch mt-4">
|
||||
<span>Path parameters</span>
|
||||
<InfoTip infotipId="path-param-InfoTip">
|
||||
<div>
|
||||
Path variables are automatically added whenever the
|
||||
<code className="font-mono mx-2">:name</code>
|
||||
template is used in the URL. <br /> For example:
|
||||
<code className="font-mono mx-2">
|
||||
https://example.com/v1/users/<span>:id</span>
|
||||
</code>
|
||||
</div>
|
||||
</InfoTip>
|
||||
</div>
|
||||
<Table
|
||||
headers={[
|
||||
{ name: 'Name', accessor: 'name', width: '40%' },
|
||||
{ name: 'Value', accessor: 'value', width: '60%' }
|
||||
]}
|
||||
>
|
||||
{pathParams && pathParams.length
|
||||
? pathParams.map((path, index) => {
|
||||
return (
|
||||
<tr key={index} data-uid={path.uid}>
|
||||
<td>
|
||||
{path.name}
|
||||
</td>
|
||||
<td>
|
||||
<SingleLineEditor
|
||||
value={path.value}
|
||||
theme={storedTheme}
|
||||
onSave={() => {}}
|
||||
onChange={(newValue) => handlePathParamChange({ target: { value: newValue } }, path)}
|
||||
onRun={() => {}}
|
||||
collection={collection}
|
||||
variablesAutocomplete={true}
|
||||
readOnly={!editMode}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
: null}
|
||||
</Table>
|
||||
{pathParams.length === 0 && <div className="title pr-2 py-3 mt-2 text-xs">No path parameters defined</div>}
|
||||
</>
|
||||
)}
|
||||
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResponseExampleParams;
|
||||
Reference in New Issue
Block a user