export & import in opencollection format

packages/bruno-app/src/components/ShareCollection/index.js

@@ -1,10 +1,11 @@
 import React, { useMemo } from 'react';
 import Modal from 'components/Modal';
-import { IconDownload, IconLoader2, IconAlertTriangle } from '@tabler/icons';
+import { IconDownload, IconLoader2, IconAlertTriangle, IconFileExport } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 import Bruno from 'components/Bruno';
 import exportBrunoCollection from 'utils/collections/export';
 import exportPostmanCollection from 'utils/exporters/postman-collection';
+import exportOpenCollection from 'utils/exporters/opencollection';
 import { cloneDeep } from 'lodash';
 import { transformCollectionToSaveToExportAsFile } from 'utils/collections/index';
 import { useSelector } from 'react-redux';
@@ -48,6 +49,12 @@ const ShareCollection = ({ onClose, collectionUid }) => {
     onClose();
   };
 
+  const handleExportOpenCollection = () => {
+    const collectionCopy = cloneDeep(collection);
+    exportOpenCollection(transformCollectionToSaveToExportAsFile(collectionCopy));
+    onClose();
+  };
+
   return (
     <Modal
       size="md"
@@ -76,6 +83,27 @@ const ShareCollection = ({ onClose, collectionUid }) => {
             </div>
           </div>
 
+          <div
+            className={`flex border border-gray-200 dark:border-gray-600 items-center p-3 rounded-lg transition-colors ${
+              isCollectionLoading
+                ? 'opacity-50 cursor-not-allowed'
+                : 'hover:bg-gray-100 dark:hover:bg-gray-500/10 cursor-pointer'
+            }`}
+            onClick={isCollectionLoading ? undefined : handleExportOpenCollection}
+          >
+            <div className="mr-3 p-1 rounded-full">
+              {isCollectionLoading ? (
+                <IconLoader2 size={28} className="animate-spin" />
+              ) : (
+                <IconFileExport size={28} strokeWidth={1} />
+              )}
+            </div>
+            <div className="flex-1">
+              <div className="font-medium">OpenCollection</div>
+              <div className="text-xs">{isCollectionLoading ? 'Loading collection...' : 'Export in OpenCollection format'}</div>
+            </div>
+          </div>
+
           <div
             className={`flex flex-col border border-gray-200 dark:border-gray-600 items-center rounded-lg transition-colors ${
               isCollectionLoading

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

@@ -8,6 +8,7 @@ import { isInsomniaCollection } from 'utils/importers/insomnia-collection';
 import { isOpenApiSpec } from 'utils/importers/openapi-collection';
 import { isWSDLCollection } from 'utils/importers/wsdl-collection';
 import { isBrunoCollection } from 'utils/importers/bruno-collection';
+import { isOpenCollection } from 'utils/importers/opencollection';
 import FullscreenLoader from './FullscreenLoader/index';
 
 const convertFileToObject = async (file) => {
@@ -72,6 +73,8 @@ const ImportCollection = ({ onClose, handleSubmit }) => {
         type = 'postman';
       } else if (isInsomniaCollection(data)) {
         type = 'insomnia';
+      } else if (isOpenCollection(data)) {
+        type = 'opencollection';
       } else if (isBrunoCollection(data)) {
         type = 'bruno';
       } else {
@@ -159,7 +162,7 @@ const ImportCollection = ({ onClose, handleSubmit }) => {
                 </button>
               </p>
               <p className="text-xs text-gray-500 dark:text-gray-400">
-                Supports Bruno, Postman, Insomnia, OpenAPI v3, and WSDL formats
+                Supports Bruno, OpenCollection, Postman, Insomnia, OpenAPI v3, and WSDL formats
               </p>
             </div>
           </div>

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

@@ -8,6 +8,7 @@ import { postmanToBruno } from 'utils/importers/postman-collection';
 import { convertInsomniaToBruno } from 'utils/importers/insomnia-collection';
 import { convertOpenapiToBruno } from 'utils/importers/openapi-collection';
 import { processBrunoCollection } from 'utils/importers/bruno-collection';
+import { processOpenCollection } from 'utils/importers/opencollection';
 import { wsdlToBruno } from '@usebruno/converters';
 import { toastError } from 'utils/common/error';
 import Modal from 'components/Modal';
@@ -36,6 +37,8 @@ const getCollectionName = (format, rawData) => {
       return rawData.name || 'Insomnia Collection';
     case 'bruno':
       return rawData.name || 'Bruno Collection';
+    case 'opencollection':
+      return rawData.info?.name || 'OpenCollection';
     case 'wsdl':
       return 'WSDL Collection';
     default:
@@ -64,6 +67,9 @@ const convertCollection = async (format, rawData, groupingType) => {
       case 'bruno':
         collection = await processBrunoCollection(rawData);
         break;
+      case 'opencollection':
+        collection = await processOpenCollection(rawData);
+        break;
       default:
         throw new Error('Unknown collection format');
     }

packages/bruno-app/src/providers/ReduxStore/slices/workspaces/actions.js

@@ -34,6 +34,10 @@ const transformCollection = async (collection, type) => {
       const { convertOpenapiToBruno } = await import('utils/importers/openapi-collection');
       return convertOpenapiToBruno(collection);
     }
+    case 'opencollection': {
+      const { processOpenCollection } = await import('utils/importers/opencollection');
+      return processOpenCollection(collection);
+    }
     case 'wsdl': {
       const { wsdlToBruno } = await import('@usebruno/converters');
       return wsdlToBruno(collection);