export & import in opencollection format (#6329)

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

@@ -26,6 +26,21 @@ const StyledWrapper = styled.div`
       }
     }
   }
+  
+  .share-button {
+    display: flex;
+    border-radius: ${(props) => props.theme.border.radius.base};
+    padding: 10px;
+    border: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
+    background-color: ${(props) => props.theme.sidebar.bg};
+    color: ${(props) => props.theme.text};
+    cursor: pointer;
+    transition: all 0.1s ease;
+
+    &:hover {
+      background-color: ${(props) => props.theme.listItem.hoverBg};
+    }
+  }
 `;
 
 export default StyledWrapper;

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

@@ -1,10 +1,11 @@
 import React, { useMemo } from 'react';
 import Modal from 'components/Modal';
-import { IconUpload, IconLoader2, IconAlertTriangle } from '@tabler/icons';
+import { IconUpload, 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"
@@ -60,10 +67,10 @@ const ShareCollection = ({ onClose, collectionUid }) => {
       <StyledWrapper className="flex flex-col h-full w-[500px]">
         <div className="space-y-2">
           <div
-            className={`flex border border-gray-200 dark:border-gray-600 items-center p-3 rounded-lg transition-colors ${
+            className={`share-button ${
               isCollectionLoading
                 ? 'opacity-50 cursor-not-allowed'
-                : 'hover:bg-gray-100 dark:hover:bg-gray-500/10 cursor-pointer'
+                : 'cursor-pointer'
             }`}
             onClick={isCollectionLoading ? undefined : handleExportBrunoCollection}
           >
@@ -77,10 +84,31 @@ const ShareCollection = ({ onClose, collectionUid }) => {
           </div>
 
           <div
-            className={`flex flex-col border border-gray-200 dark:border-gray-600 items-center rounded-lg transition-colors ${
+            className={`share-button ${
               isCollectionLoading
                 ? 'opacity-50 cursor-not-allowed'
-                : 'hover:bg-gray-100 dark:hover:bg-gray-500/10 cursor-pointer'
+                : '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 share-button ${
+              isCollectionLoading
+                ? 'opacity-50 cursor-not-allowed'
+                : 'cursor-pointer'
             }`}
             onClick={isCollectionLoading ? undefined : handleExportPostmanCollection}
           >