mirror of
https://github.com/usebruno/bruno.git
synced 2026-07-01 00:24:08 +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,16 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
/* CodeEditor container */
|
||||
.code-editor-container {
|
||||
flex: 1;
|
||||
min-height: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
||||
@@ -0,0 +1,94 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useTheme } from 'providers/Theme';
|
||||
import { useSelector } from 'react-redux';
|
||||
import get from 'lodash/get';
|
||||
import { updateResponseExampleResponse } from 'providers/ReduxStore/slices/collections';
|
||||
import CodeEditor from 'components/CodeEditor';
|
||||
import { getCodeMirrorModeBasedOnContentType } from 'utils/common/codemirror';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
|
||||
const ResponseExampleResponseContent = ({ editMode, item, collection, exampleUid, onSave }) => {
|
||||
const dispatch = useDispatch();
|
||||
const { displayedTheme } = useTheme();
|
||||
const preferences = useSelector((state) => state.app.preferences);
|
||||
|
||||
const response = useMemo(() => {
|
||||
return item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.response || {} : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.response || {};
|
||||
}, [item, exampleUid]);
|
||||
|
||||
const getResponseContent = () => {
|
||||
if (!response) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (!response.body) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return response.body.content;
|
||||
};
|
||||
|
||||
const getCodeMirrorMode = () => {
|
||||
if (!response) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (response.body && response.body.type) {
|
||||
const bodyType = response.body.type;
|
||||
if (bodyType === 'json') {
|
||||
return 'application/ld+json';
|
||||
} else if (bodyType === 'xml') {
|
||||
return 'application/xml';
|
||||
} else if (bodyType === 'html') {
|
||||
return 'application/html';
|
||||
} else if (bodyType === 'text') {
|
||||
return 'application/text';
|
||||
}
|
||||
}
|
||||
|
||||
const contentType = response.headers?.find((h) => h.name?.toLowerCase() === 'content-type')?.value?.toLowerCase() || '';
|
||||
|
||||
return getCodeMirrorModeBasedOnContentType(contentType);
|
||||
};
|
||||
|
||||
const onResponseEdit = (value) => {
|
||||
if (editMode && item && collection && exampleUid) {
|
||||
const currentBody = response.body || {};
|
||||
dispatch(updateResponseExampleResponse({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
response: {
|
||||
body: {
|
||||
type: currentBody.type || 'text',
|
||||
content: value
|
||||
}
|
||||
}
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledWrapper className="w-full px-4">
|
||||
<div className="code-editor-container">
|
||||
<CodeEditor
|
||||
collection={collection}
|
||||
item={item}
|
||||
theme={displayedTheme}
|
||||
font={get(preferences, 'font.codeFont', 'default')}
|
||||
fontSize={get(preferences, 'font.codeFontSize')}
|
||||
value={getResponseContent()}
|
||||
onEdit={onResponseEdit}
|
||||
onRun={() => {}}
|
||||
onSave={onSave}
|
||||
mode={getCodeMirrorMode()}
|
||||
enableVariableHighlighting={false}
|
||||
readOnly={!editMode}
|
||||
/>
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResponseExampleResponseContent;
|
||||
@@ -0,0 +1,56 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
.btn-action {
|
||||
background: none;
|
||||
color: ${(props) => props.theme.colors.text.muted};
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
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,240 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useTheme } from 'providers/Theme';
|
||||
import { IconTrash } from '@tabler/icons';
|
||||
import get from 'lodash/get';
|
||||
import { addResponseExampleHeader, updateResponseExampleHeader, deleteResponseExampleHeader, moveResponseExampleHeader, setResponseExampleHeaders, updateResponseExampleResponse } from 'providers/ReduxStore/slices/collections';
|
||||
import { getBodyType } from 'utils/responseBodyProcessor';
|
||||
import Table from 'components/Table-v2';
|
||||
import ReorderTable from 'components/ReorderTable';
|
||||
import SingleLineEditor from 'components/SingleLineEditor';
|
||||
import BulkEditor from 'components/BulkEditor';
|
||||
import { headers as StandardHTTPHeaders } from 'know-your-http-well';
|
||||
import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
|
||||
const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
|
||||
|
||||
const ResponseExampleResponseHeaders = ({ editMode, item, collection, exampleUid }) => {
|
||||
const dispatch = useDispatch();
|
||||
const { storedTheme } = useTheme();
|
||||
const [isBulkEditMode, setIsBulkEditMode] = useState(false);
|
||||
|
||||
const headers = useMemo(() => {
|
||||
return item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.response?.headers || [] : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.response?.headers || [];
|
||||
}, [item, exampleUid]);
|
||||
|
||||
const response = useMemo(() => {
|
||||
return item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.response || {} : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.response || {};
|
||||
}, [item, exampleUid]);
|
||||
|
||||
const handleAddHeader = () => {
|
||||
if (!editMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(addResponseExampleHeader({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid
|
||||
}));
|
||||
};
|
||||
|
||||
const handleHeaderValueChange = (e, header, type) => {
|
||||
if (!editMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updatedHeader = { ...header };
|
||||
switch (type) {
|
||||
case 'name': {
|
||||
updatedHeader.name = e.target.value;
|
||||
break;
|
||||
}
|
||||
case 'value': {
|
||||
updatedHeader.value = e.target.value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
dispatch(updateResponseExampleHeader({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
header: updatedHeader
|
||||
}));
|
||||
|
||||
// If content-type header is being updated, automatically update the body type
|
||||
if (header.name?.toLowerCase() === 'content-type' && type === 'value') {
|
||||
const newContentType = updatedHeader.value?.toLowerCase() || '';
|
||||
const newBodyType = getBodyType(newContentType);
|
||||
const currentBodyType = response.body?.type || 'text';
|
||||
|
||||
// Only update if the body type has changed
|
||||
if (newBodyType !== currentBodyType) {
|
||||
dispatch(updateResponseExampleResponse({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
response: {
|
||||
body: {
|
||||
type: newBodyType,
|
||||
content: response.body?.content || ''
|
||||
}
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveHeader = (header) => {
|
||||
if (!editMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(deleteResponseExampleHeader({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
headerUid: header.uid
|
||||
}));
|
||||
};
|
||||
|
||||
const handleHeaderDrag = ({ updateReorderedItem }) => {
|
||||
if (!editMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(moveResponseExampleHeader({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
updateReorderedItem
|
||||
}));
|
||||
};
|
||||
|
||||
const toggleBulkEditMode = () => {
|
||||
setIsBulkEditMode(!isBulkEditMode);
|
||||
};
|
||||
|
||||
const handleBulkHeadersChange = (newHeaders) => {
|
||||
if (!editMode) {
|
||||
return;
|
||||
}
|
||||
const cleanedHeaders = newHeaders.map((header) => ({
|
||||
uid: header.uid,
|
||||
name: header.name,
|
||||
value: header.value
|
||||
}));
|
||||
|
||||
dispatch(setResponseExampleHeaders({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
headers: cleanedHeaders
|
||||
}));
|
||||
};
|
||||
|
||||
if (isBulkEditMode && editMode) {
|
||||
// Ensure all headers have enabled: true for bulk edit display
|
||||
const headersForBulkEdit = headers.map((header) => ({
|
||||
...header,
|
||||
enabled: true
|
||||
}));
|
||||
return (
|
||||
<StyledWrapper className="w-full overflow-auto">
|
||||
<BulkEditor
|
||||
params={headersForBulkEdit}
|
||||
onChange={handleBulkHeadersChange}
|
||||
onToggle={toggleBulkEditMode}
|
||||
/>
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledWrapper className="w-full px-4">
|
||||
<Table
|
||||
headers={[
|
||||
{ name: 'Key', accessor: 'key', width: '40%' },
|
||||
{ name: 'Value', accessor: 'value', width: '60%' }
|
||||
]}
|
||||
>
|
||||
<ReorderTable updateReorderedItem={handleHeaderDrag}>
|
||||
{headers && headers.length
|
||||
? headers.map((header) => (
|
||||
<tr key={header.uid} data-uid={header.uid}>
|
||||
<td className="flex relative">
|
||||
<SingleLineEditor
|
||||
value={header.name || ''}
|
||||
theme={storedTheme}
|
||||
onSave={() => {}}
|
||||
onChange={(newValue) =>
|
||||
handleHeaderValueChange({
|
||||
target: {
|
||||
value: newValue
|
||||
}
|
||||
},
|
||||
header,
|
||||
'name')}
|
||||
autocomplete={headerAutoCompleteList}
|
||||
onRun={() => {}}
|
||||
collection={collection}
|
||||
readOnly={!editMode}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<div className="flex items-center justify-center pl-4">
|
||||
<SingleLineEditor
|
||||
value={header.value || ''}
|
||||
theme={storedTheme}
|
||||
onSave={() => {}}
|
||||
onChange={(newValue) =>
|
||||
handleHeaderValueChange({
|
||||
target: {
|
||||
value: newValue
|
||||
}
|
||||
},
|
||||
header,
|
||||
'value')}
|
||||
onRun={() => {}}
|
||||
autocomplete={MimeTypes}
|
||||
allowNewlines={true}
|
||||
collection={collection}
|
||||
item={item}
|
||||
readOnly={!editMode}
|
||||
/>
|
||||
{editMode && (
|
||||
<button tabIndex="-1" onClick={() => handleRemoveHeader(header)} className="delete-button">
|
||||
<IconTrash strokeWidth={1.5} size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
: null}
|
||||
</ReorderTable>
|
||||
</Table>
|
||||
|
||||
{editMode && (
|
||||
<div className="flex justify-between mt-2 flex-shrink-0">
|
||||
<button
|
||||
className="btn-action text-link pr-2 py-3 select-none"
|
||||
onClick={handleAddHeader}
|
||||
>
|
||||
+ Add Header
|
||||
</button>
|
||||
<button
|
||||
className="btn-action text-link select-none"
|
||||
onClick={toggleBulkEditMode}
|
||||
>
|
||||
Bulk Edit
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResponseExampleResponseHeaders;
|
||||
@@ -0,0 +1,83 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.response-status-input {
|
||||
background: ${(props) => props.theme.requestTabPanel.url.bg};
|
||||
border: 1px solid ${(props) => props.theme.modal.input.border};
|
||||
border-radius: 3px;
|
||||
padding: 0.35rem 0.6rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
color: ${(props) => props.theme.text.primary};
|
||||
min-width: 120px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: ${(props) => props.theme.colors.primary};
|
||||
box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary}20;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: ${(props) => props.theme.text.muted};
|
||||
}
|
||||
|
||||
&.text-ok {
|
||||
color: ${(props) => props.theme.colors.success};
|
||||
}
|
||||
|
||||
&.text-warning {
|
||||
color: ${(props) => props.theme.colors.warning};
|
||||
}
|
||||
|
||||
&.text-error {
|
||||
color: ${(props) => props.theme.colors.error};
|
||||
}
|
||||
}
|
||||
|
||||
.status-suggestions {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: ${(props) => props.theme.dropdown.bg};
|
||||
border: 1px solid ${(props) => props.theme.modal.input.border};
|
||||
border-top: none;
|
||||
border-radius: 0 0 3px 3px;
|
||||
box-shadow: ${(props) => props.theme.dropdown.shadow};
|
||||
z-index: 1000;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.suggestion-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.35rem 0.6rem;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
font-size: 0.8125rem;
|
||||
color: ${(props) => props.theme.dropdown.primaryText};
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: ${(props) => props.theme.dropdown.hoverBg};
|
||||
}
|
||||
|
||||
.status {
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
margin-right: 0.5rem;
|
||||
min-width: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
||||
@@ -0,0 +1,208 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { updateResponseExampleStatusCode, updateResponseExampleStatusText } from 'providers/ReduxStore/slices/collections';
|
||||
import statusCodePhraseMap from 'components/ResponsePane/StatusCode/get-status-code-phrase';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
|
||||
const ResponseExampleStatusInput = ({ item, collection, exampleUid, status, statusText }) => {
|
||||
const dispatch = useDispatch();
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const [filteredSuggestions, setFilteredSuggestions] = useState([]);
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const inputRef = useRef(null);
|
||||
const suggestionsRef = useRef(null);
|
||||
|
||||
// Initialize inputValue from Redux state on mount or when prop changes
|
||||
useEffect(() => {
|
||||
const displayValue = () => {
|
||||
if (status && statusText) {
|
||||
return `${status} ${statusText}`;
|
||||
} else if (status) {
|
||||
return status;
|
||||
}
|
||||
return '';
|
||||
};
|
||||
setInputValue(displayValue());
|
||||
}, [status, statusText]);
|
||||
|
||||
// Create suggestions from status code map
|
||||
const suggestions = Object.entries(statusCodePhraseMap).map(([code, phrase]) => ({
|
||||
code: parseInt(code),
|
||||
phrase,
|
||||
display: `${code} ${phrase}`
|
||||
}));
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const value = e.target.value;
|
||||
|
||||
// Update local state to allow typing freely (including spaces)
|
||||
setInputValue(value);
|
||||
|
||||
if (value.trim()) {
|
||||
// Filter suggestions based on input
|
||||
const filtered = suggestions.filter((suggestion) =>
|
||||
suggestion.display.toLowerCase().includes(value.toLowerCase())
|
||||
|| suggestion.code.toString().includes(value)
|
||||
|| suggestion.phrase.toLowerCase().includes(value.toLowerCase()));
|
||||
setFilteredSuggestions(filtered);
|
||||
setShowSuggestions(true);
|
||||
} else {
|
||||
setShowSuggestions(false);
|
||||
setFilteredSuggestions([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
// Handle Cmd+S to save status to Redux
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 's') {
|
||||
e.preventDefault();
|
||||
parseAndSaveStatus(inputValue);
|
||||
}
|
||||
|
||||
if (!showSuggestions) return;
|
||||
|
||||
switch (e.key) {
|
||||
case 'Escape':
|
||||
setShowSuggestions(false);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const selectSuggestion = (suggestion) => {
|
||||
setShowSuggestions(false);
|
||||
|
||||
// Update local input value
|
||||
const newValue = `${suggestion.code} ${suggestion.phrase}`;
|
||||
setInputValue(newValue);
|
||||
|
||||
// Save the status and statusText
|
||||
dispatch(updateResponseExampleStatusCode({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
statusCode: String(suggestion.code)
|
||||
}));
|
||||
|
||||
dispatch(updateResponseExampleStatusText({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
statusText: suggestion.phrase
|
||||
}));
|
||||
};
|
||||
|
||||
const parseAndSaveStatus = (value) => {
|
||||
// Find the first space
|
||||
const firstSpaceIndex = value.indexOf(' ');
|
||||
|
||||
let statusCode, statusText;
|
||||
|
||||
if (firstSpaceIndex === -1) {
|
||||
// No space found, treat entire value as status code
|
||||
statusCode = value;
|
||||
statusText = '';
|
||||
} else {
|
||||
// Split on first space only, preserving all other spaces
|
||||
statusCode = value.substring(0, firstSpaceIndex);
|
||||
statusText = value.substring(firstSpaceIndex + 1);
|
||||
}
|
||||
|
||||
// Save both as strings - no validation needed
|
||||
dispatch(updateResponseExampleStatusCode({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
statusCode: statusCode
|
||||
}));
|
||||
|
||||
dispatch(updateResponseExampleStatusText({
|
||||
itemUid: item.uid,
|
||||
collectionUid: collection.uid,
|
||||
exampleUid: exampleUid,
|
||||
statusText: statusText
|
||||
}));
|
||||
|
||||
setShowSuggestions(false);
|
||||
};
|
||||
|
||||
const handleBlur = (e) => {
|
||||
// Check if the blur is caused by clicking on a suggestion
|
||||
const relatedTarget = e.relatedTarget;
|
||||
if (relatedTarget && relatedTarget.closest('.status-suggestions')) {
|
||||
return; // Don't close suggestions if clicking on them
|
||||
}
|
||||
|
||||
// Save the status to Redux
|
||||
parseAndSaveStatus(inputValue);
|
||||
|
||||
// Small delay to allow click events on suggestions
|
||||
setTimeout(() => {
|
||||
setShowSuggestions(false);
|
||||
}, 150);
|
||||
};
|
||||
|
||||
const handleFocus = () => {
|
||||
if (inputValue.trim()) {
|
||||
const filtered = suggestions.filter((suggestion) =>
|
||||
suggestion.display.toLowerCase().includes(inputValue.toLowerCase())
|
||||
|| suggestion.code.toString().includes(inputValue)
|
||||
|| suggestion.phrase.toLowerCase().includes(inputValue.toLowerCase()));
|
||||
setFilteredSuggestions(filtered);
|
||||
setShowSuggestions(true);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusClass = (status) => {
|
||||
const numStatus = parseInt(status);
|
||||
if (!isNaN(numStatus)) {
|
||||
if (numStatus >= 200 && numStatus < 300) return 'text-ok';
|
||||
if (numStatus >= 300 && numStatus < 400) return 'text-warning';
|
||||
if (numStatus >= 400) return 'text-error';
|
||||
}
|
||||
return 'text-ok';
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledWrapper className="relative">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
onFocus={handleFocus}
|
||||
placeholder="e.g., 200 OK, 404 Unknown, 999 Custom Error"
|
||||
className={`response-status-input ${getStatusClass(status)}`}
|
||||
data-testid="response-status-input"
|
||||
/>
|
||||
|
||||
{showSuggestions && filteredSuggestions.length > 0 && (
|
||||
<div
|
||||
ref={suggestionsRef}
|
||||
className="status-suggestions"
|
||||
data-testid="status-suggestions"
|
||||
onMouseDown={(e) => e.preventDefault()} // Prevent input blur when clicking on suggestions
|
||||
>
|
||||
{filteredSuggestions.map((suggestion) => (
|
||||
<div
|
||||
key={suggestion.code}
|
||||
className="suggestion-item"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
selectSuggestion(suggestion);
|
||||
}}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
data-testid={`suggestion-${suggestion.code}`}
|
||||
>
|
||||
<span className="status">{`${suggestion.code} ${suggestion.phrase}`}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResponseExampleStatusInput;
|
||||
@@ -0,0 +1,39 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
div.tabs {
|
||||
div.tab {
|
||||
padding: 6px 0px;
|
||||
border: none;
|
||||
border-bottom: solid 2px transparent;
|
||||
margin-right: 1.25rem;
|
||||
color: var(--color-tab-inactive);
|
||||
cursor: pointer;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:focus-within,
|
||||
&:focus-visible,
|
||||
&:target {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: ${(props) => props.theme.tabs.active.color} !important;
|
||||
border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.some-tests-failed {
|
||||
color: ${(props) => props.theme.colors.text.danger} !important;
|
||||
}
|
||||
|
||||
.all-tests-passed {
|
||||
color: ${(props) => props.theme.colors.text.green} !important;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
||||
@@ -0,0 +1,102 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import get from 'lodash/get';
|
||||
import Tab from 'components/Tab';
|
||||
import ResponseLayoutToggle from 'components/ResponsePane/ResponseLayoutToggle';
|
||||
import StatusCode from 'components/ResponsePane/StatusCode';
|
||||
import ResponseExampleResponseContent from './ResponseExampleResponseContent';
|
||||
import ResponseExampleResponseHeaders from './ResponseExampleResponseHeaders';
|
||||
import ResponseExampleStatusInput from './ResponseExampleStatusInput';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
import HeightBoundContainer from 'ui/HeightBoundContainer';
|
||||
|
||||
const ResponseExampleResponsePane = ({ item, collection, editMode, exampleUid, onSave }) => {
|
||||
const [activeTab, setActiveTab] = useState('response');
|
||||
|
||||
const exampleData = useMemo(() => {
|
||||
return item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid) || {} : get(item, 'examples', []).find((e) => e.uid === exampleUid) || {};
|
||||
}, [item, exampleUid]);
|
||||
|
||||
const getTabPanel = (tab) => {
|
||||
switch (tab) {
|
||||
case 'response': {
|
||||
return (
|
||||
<ResponseExampleResponseContent
|
||||
editMode={editMode}
|
||||
item={item}
|
||||
collection={collection}
|
||||
exampleUid={exampleUid}
|
||||
onSave={onSave}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case 'headers': {
|
||||
return (
|
||||
<ResponseExampleResponseHeaders
|
||||
editMode={editMode}
|
||||
item={item}
|
||||
collection={collection}
|
||||
exampleUid={exampleUid}
|
||||
onSave={onSave}
|
||||
/>
|
||||
);
|
||||
}
|
||||
default: {
|
||||
return <div>404 | Not found</div>;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const tabConfig = [
|
||||
{
|
||||
name: 'response',
|
||||
label: 'Response'
|
||||
},
|
||||
{
|
||||
name: 'headers',
|
||||
label: 'Headers',
|
||||
count: (exampleData?.response?.headers || []).length
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<StyledWrapper className="flex flex-col h-full relative">
|
||||
<div className="flex flex-wrap items-center tabs mb-4 px-4" role="tablist">
|
||||
{tabConfig.map((tab) => (
|
||||
<Tab
|
||||
key={tab.name}
|
||||
name={tab.name}
|
||||
label={tab.label}
|
||||
isActive={activeTab === tab.name}
|
||||
onClick={setActiveTab}
|
||||
count={tab.count}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="flex flex-grow justify-end items-center">
|
||||
<ResponseLayoutToggle />
|
||||
{editMode ? (
|
||||
<ResponseExampleStatusInput
|
||||
item={item}
|
||||
collection={collection}
|
||||
exampleUid={exampleUid}
|
||||
status={exampleData?.response?.status}
|
||||
statusText={exampleData?.response?.statusText}
|
||||
/>
|
||||
) : (
|
||||
exampleData?.response?.status && (
|
||||
<StatusCode status={exampleData.response.status} statusText={exampleData.response.statusText} />
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="flex w-full flex-1 relative">
|
||||
<HeightBoundContainer>
|
||||
{getTabPanel(activeTab)}
|
||||
</HeightBoundContainer>
|
||||
</section>
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResponseExampleResponsePane;
|
||||
Reference in New Issue
Block a user