feat: update @opencollection/types to version 0.7.0 and add demo image to GenerateDocumentation component (#6651)

package-lock.json

@@ -29,7 +29,7 @@
         "@eslint/compat": "^1.3.2",
         "@faker-js/faker": "^7.6.0",
         "@jest/globals": "^29.2.0",
-        "@opencollection/types": "~0.6.0",
+        "@opencollection/types": "~0.7.0",
         "@playwright/test": "^1.51.1",
         "@rollup/plugin-json": "^6.1.0",
         "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
@@ -6100,9 +6100,9 @@
       }
     },
     "node_modules/@opencollection/types": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@opencollection/types/-/types-0.6.0.tgz",
-      "integrity": "sha512-nasB4/1hIZ61xp2dnnZWhdH83f0t800VrSl3G2q+BtHabBqN/IG+j9BMOJg0hYZjAVx+Yhl1njkzUqkiX5+Q0g==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@opencollection/types/-/types-0.7.0.tgz",
+      "integrity": "sha512-CSwdaHNPa2bNNBAOy++t6W9gBTExUJZW3aPkWyhAjasusThbvjymD/0uCLR50gCXSs0ezv61jsd19m9x+2DMtQ==",
       "dev": true,
       "license": "MIT"
     },

package.json

@@ -23,7 +23,7 @@
     "@eslint/compat": "^1.3.2",
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
-    "@opencollection/types": "~0.6.0",
+    "@opencollection/types": "~0.7.0",
     "@playwright/test": "^1.51.1",
     "@rollup/plugin-json": "^6.1.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.0",

packages/bruno-app/src/components/Sidebar/Collections/Collection/GenerateDocumentation/StyledWrapper.js

@@ -13,6 +13,30 @@ const StyledWrapper = styled.div`
       line-height: 1.6;
     }
 
+    .preview-container {
+      border-radius: ${(props) => props.theme.border.radius.md};
+      overflow: hidden;
+      border: 1px solid ${(props) => props.theme.border.border1};
+
+      .preview-label {
+        top: 0.5rem;
+        right: 0.5rem;
+        padding: 0.125rem 0.5rem;
+        font-size: ${(props) => props.theme.font.size.xs};
+        font-weight: 500;
+        color: #3b82f6;
+        background-color: rgba(59, 130, 246, 0.1);
+        border: 1px dashed rgba(59, 130, 246, 0.4);
+        border-radius: ${(props) => props.theme.border.radius.sm};
+      }
+
+      .preview-image {
+        width: 100%;
+        height: auto;
+        display: block;
+      }
+    }
+
     .features {
       li {
         font-size: ${(props) => props.theme.font.size.sm};

packages/bruno-app/src/components/Sidebar/Collections/Collection/GenerateDocumentation/index.js

@@ -9,6 +9,7 @@ import { IconBook, IconCheck, IconAlertTriangle, IconLoader2 } from '@tabler/ico
 
 import Modal from 'components/Modal';
 import StyledWrapper from './StyledWrapper';
+import demoImage from './demo.png';
 import { useApp } from 'providers/App';
 import { transformCollectionToSaveToExportAsFile, findCollectionByUid, areItemsLoading } from 'utils/collections/index';
 import { brunoToOpenCollection } from '@usebruno/converters';
@@ -141,12 +142,16 @@ const GenerateDocumentation = ({ onClose, collectionUid }) => {
               <IconBook size={18} />
               <span>Interactive API Documentation</span>
             </h3>
-            <p className="description mb-5">
-              Generate a standalone HTML file containing interactive documentation for your API collection.
-              This file can be hosted anywhere or shared with your team.
+            <p className="description mb-4">
+              Generate a standalone HTML file that can be hosted anywhere or shared with your team.
             </p>
 
-            <ul className="features flex flex-col list-none gap-2.5 p-0 mb-5">
+            <div className="preview-container relative mb-4">
+              <span className="preview-label absolute">Sample Output</span>
+              <img src={demoImage} alt="Documentation preview" className="preview-image" />
+            </div>
+
+            <ul className="features flex flex-col list-none gap-2 p-0 mb-4">
               {FEATURES.map((feature) => (
                 <li key={feature} className="flex items-center gap-2.5">
                   <IconCheck size={16} className="check-icon flex-shrink-0" />
@@ -156,7 +161,7 @@ const GenerateDocumentation = ({ onClose, collectionUid }) => {
             </ul>
 
             <p className="note m-0">
-              The generated file does not embed all assets. It loads OpenCollection’s JavaScript and CSS files from a CDN when viewing docs, which requires an internet connection.
+              The generated file loads OpenCollection's JavaScript and CSS files from a CDN, which requires an internet connection.
             </p>
           </div>
         )}

packages/bruno-app/src/components/Sidebar/CreateCollection/StyledWrapper.js

@@ -14,6 +14,18 @@ const StyledWrapper = styled.div`
     border-radius: ${(props) => props.theme.border.radius.sm};
   }
 
+  .discussion-link {
+    margin-left: 0.5rem;
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.textLink};
+    cursor: pointer;
+    font-weight: 400;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   .report-issue-link {
     display: inline-flex;
     align-items: center;

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

@@ -224,7 +224,19 @@ const CreateCollection = ({ onClose, defaultLocation: propDefaultLocation }) =>
                     </p>
                   </Help>
                   {formik.values.format === 'yml' && (
-                    <span className="beta-badge">Beta</span>
+                    <>
+                      <span className="beta-badge">Beta</span>
+                      <a
+                        href="#"
+                        className="discussion-link"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          window.open('https://github.com/usebruno/bruno/discussions/6634', '_blank', 'noopener,noreferrer');
+                        }}
+                      >
+                        Join the discussion
+                      </a>
+                    </>
                   )}
                 </label>
                 <select

packages/bruno-filestore/src/formats/yml/common/body.ts

@@ -81,6 +81,10 @@ export const toOpenCollectionBody = (body: BrunoHttpRequestBody | null | undefin
           value: entry.value || (entry.type === 'file' ? [] : '')
         };
 
+        if (entry?.contentType?.trim().length) {
+          multipartEntry.contentType = entry.contentType;
+        }
+
         if (entry?.description?.trim().length) {
           multipartEntry.description = entry.description;
         }
@@ -200,7 +204,7 @@ export const toBrunoBody = (body: HttpRequestBody | null | undefined): BrunoHttp
           type: entry.type,
           name: entry.name || '',
           value: entry.value || (entry.type === 'file' ? [] : ''),
-          contentType: null,
+          contentType: entry.contentType || null,
           enabled: entry.disabled !== true
         };