mirror of
https://github.com/usebruno/bruno.git
synced 2026-07-03 01:18:32 +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,204 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import IconEdit from 'components/Icons/IconEdit';
|
||||
import { IconCode, IconDeviceFloppy } from '@tabler/icons';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
import { useTheme } from 'providers/Theme';
|
||||
import TruncatedText from 'components/TruncatedText';
|
||||
import { updateResponseExampleName, updateResponseExampleDescription } from 'providers/ReduxStore/slices/collections';
|
||||
import get from 'lodash/get';
|
||||
|
||||
const ResponseExampleTopBar = ({
|
||||
item,
|
||||
collection,
|
||||
exampleUid,
|
||||
editMode,
|
||||
onEditToggle,
|
||||
onSave,
|
||||
onCancel,
|
||||
onGenerateCode
|
||||
}) => {
|
||||
const { theme } = useTheme();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const example = useMemo(() => {
|
||||
return item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid) : get(item, 'examples', []).find((e) => e.uid === exampleUid);
|
||||
}, [item.draft, item.examples, item, exampleUid]);
|
||||
|
||||
const handleGenerateCode = () => {
|
||||
if (onGenerateCode) {
|
||||
onGenerateCode({
|
||||
...example,
|
||||
isExample: true,
|
||||
exampleUid: exampleUid
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleNameChange = (e) => {
|
||||
// Validate required fields before dispatching
|
||||
if (!item?.uid) {
|
||||
console.error('item.uid is missing');
|
||||
return;
|
||||
}
|
||||
if (!collection?.uid) {
|
||||
console.error('collection.uid is missing');
|
||||
return;
|
||||
}
|
||||
if (!exampleUid) {
|
||||
console.error('exampleUid is missing');
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(updateResponseExampleName({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
name: e.target.value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleDescriptionChange = (e) => {
|
||||
// Validate required fields before dispatching
|
||||
if (!item?.uid) {
|
||||
console.error('item.uid is missing');
|
||||
return;
|
||||
}
|
||||
if (!collection?.uid) {
|
||||
console.error('collection.uid is missing');
|
||||
return;
|
||||
}
|
||||
if (!exampleUid) {
|
||||
console.error('exampleUid is missing');
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(updateResponseExampleDescription({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
description: e.target.value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
// Call the parent save handler
|
||||
if (onSave) {
|
||||
onSave();
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
if (onCancel) {
|
||||
onCancel();
|
||||
}
|
||||
};
|
||||
|
||||
if (!example || !exampleUid) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (editMode) {
|
||||
return (
|
||||
<StyledWrapper className="p-4">
|
||||
<div className="max-w-full">
|
||||
<div className="flex items-start justify-between gap-6 md:flex-row flex-col">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={example?.name || ''}
|
||||
onChange={handleNameChange}
|
||||
className="example-input example-input-name"
|
||||
placeholder="Enter example name"
|
||||
autoFocus
|
||||
data-testid="response-example-name-input"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<textarea
|
||||
value={example?.description || ''}
|
||||
onChange={handleDescriptionChange}
|
||||
className="example-input example-input-description"
|
||||
placeholder="Enter example description"
|
||||
rows={3}
|
||||
data-testid="response-example-description-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 flex-shrink-0 md:w-auto w-full md:justify-end">
|
||||
<button
|
||||
className="secondary-btn flex items-center gap-1.5 px-4 py-2 rounded-md text-xs font-medium cursor-pointer border whitespace-nowrap"
|
||||
onClick={handleCancel}
|
||||
data-testid="response-example-cancel-btn"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="primary-btn flex items-center gap-1.5 px-4 py-2 rounded-md text-xs font-medium cursor-pointer border whitespace-nowrap"
|
||||
onClick={handleSave}
|
||||
data-testid="response-example-save-btn"
|
||||
>
|
||||
<IconDeviceFloppy size={16} color={theme.examples.buttonText} />
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
// Default view mode
|
||||
return (
|
||||
<StyledWrapper className="p-4">
|
||||
<div className="max-w-full">
|
||||
<div className="flex items-start justify-between gap-6 md:flex-row flex-col">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h2 className="response-example-title font-semibold mb-2 leading-tight" data-testid="response-example-title">
|
||||
<span className="opacity-60">{item.name}</span>
|
||||
{' / '}
|
||||
<span>{example.name}</span>
|
||||
</h2>
|
||||
{example.description && example.description.trim().length > 0 && (
|
||||
<TruncatedText
|
||||
text={example.description}
|
||||
maxLines={2}
|
||||
className="response-example-description-container"
|
||||
textClassName="response-example-description text-sm leading-relaxed max-w-fit"
|
||||
buttonClassName="text-blue-600 hover:text-blue-800 font-medium"
|
||||
viewMoreText="View More"
|
||||
viewLessText="View Less"
|
||||
dataTestId="response-example-description"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 flex-shrink-0 md:w-auto w-full md:justify-end">
|
||||
<button
|
||||
className="secondary-btn flex items-center gap-1.5 p-2 rounded-md text-xs font-medium cursor-pointer border whitespace-nowrap"
|
||||
onClick={handleGenerateCode}
|
||||
title="Generate Code"
|
||||
data-testid="response-example-generate-code-btn"
|
||||
>
|
||||
<IconCode size={16} color={theme.examples.buttonIconColor} />
|
||||
</button>
|
||||
<button
|
||||
className="secondary-btn flex items-center gap-1.5 px-4 py-2 rounded-md text-xs font-medium cursor-pointer border whitespace-nowrap"
|
||||
onClick={onEditToggle}
|
||||
data-testid="response-example-edit-btn"
|
||||
>
|
||||
<IconEdit size={16} color={theme.examples.buttonIconColor} />
|
||||
Edit Example
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResponseExampleTopBar;
|
||||
Reference in New Issue
Block a user