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>

packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js

@@ -0,0 +1,80 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .title {
+    font-weight: 700;
+    color: ${(props) => props.theme.text};
+  }
+
+  font-size: 0.8125rem;
+
+  .body-mode-selector {
+    background: transparent;
+    border-radius: 3px;
+
+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+      padding-left: 1.5rem !important;
+    }
+
+    .label-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+
+    .selected-body-mode {
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
+
+    &.cursor-default {
+      opacity: 0.6;
+      
+      .selected-body-mode {
+        color: ${(props) => props.theme.colors.text.muted};
+      }
+    }
+  }
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
+  }
+
+  .btn-action {
+    border-radius: 3px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${(props) => props.theme.colors.text.muted};
+    
+    &:hover {
+      opacity: 0.9;
+    }
+    
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .no-body-text {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  /* CodeEditor container */
+  .code-editor-container {
+    flex: 1;
+    min-height: 200px;
+    height: 200px;
+    border-top: none;
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/index.js

@@ -0,0 +1,80 @@
+import React, { useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import get from 'lodash/get';
+import { updateResponseExampleRequest } from 'providers/ReduxStore/slices/collections';
+import ResponseExampleBodyMode from '../ResponseExampleBodyMode';
+import ResponseExampleBodyRenderer from '../ResponseExampleBodyRenderer';
+import StyledWrapper from './StyledWrapper';
+
+const ResponseExampleBody = ({ editMode, item, collection, exampleUid, onSave }) => {
+  const dispatch = useDispatch();
+
+  const body = useMemo(() => {
+    return item.draft
+      ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.body || { mode: 'none' }
+      : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body || { mode: 'none' };
+  }, [item, exampleUid]);
+
+  const onBodyEdit = (value) => {
+    if (editMode && item && collection.uid && exampleUid) {
+      const updatedBody = { ...body };
+      switch (body.mode) {
+        case 'json':
+          updatedBody.json = value;
+          break;
+        case 'text':
+          updatedBody.text = value;
+          break;
+        case 'xml':
+          updatedBody.xml = value;
+          break;
+        case 'sparql':
+          updatedBody.sparql = value;
+          break;
+        default:
+          break;
+      }
+
+      dispatch(updateResponseExampleRequest({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        request: {
+          body: updatedBody
+        }
+      }));
+    }
+  };
+
+  return (
+    <StyledWrapper className="w-full mt-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <div className="title text-xs mr-2">Body</div>
+        </div>
+        <ResponseExampleBodyMode
+          item={item}
+          collection={collection}
+          exampleUid={exampleUid}
+          body={body}
+          bodyMode={body.mode}
+          onBodyEdit={onBodyEdit}
+          editMode={editMode}
+        />
+      </div>
+
+      <ResponseExampleBodyRenderer
+        bodyMode={body.mode}
+        body={body}
+        editMode={editMode}
+        item={item}
+        collection={collection}
+        exampleUid={exampleUid}
+        onBodyEdit={onBodyEdit}
+        onSave={onSave}
+      />
+    </StyledWrapper>
+  );
+};
+
+export default ResponseExampleBody;