feat: export collections

packages/bruno-app/package.json

@@ -19,6 +19,7 @@
     "codemirror": "^5.65.2",
     "codemirror-graphql": "^1.2.5",
     "escape-html": "^1.0.3",
+    "file-saver": "^2.0.5",
     "formik": "^2.2.9",
     "graphiql": "^1.5.9",
     "graphql": "^16.2.0",

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

@@ -1,6 +1,7 @@
 import React, { useState, forwardRef, useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import filter from 'lodash/filter';
+import cloneDeep from 'lodash/cloneDeep';
 import { IconChevronRight, IconDots } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
 import { collectionClicked } from 'providers/ReduxStore/slices/collections';
@@ -10,7 +11,8 @@ import NewFolder from 'components/Sidebar/NewFolder';
 import CollectionItem from './CollectionItem';
 import RemoveCollectionFromWorkspace from './RemoveCollectionFromWorkspace';
 import { doesCollectionHaveItemsMatchingSearchText } from 'utils/collections/search';
-import { isItemAFolder, isItemARequest } from 'utils/collections';
+import { isItemAFolder, isItemARequest, transformCollectionToSaveToIdb } from 'utils/collections';
+import exportCollection from 'utils/collections/export';
 
 import RenameCollection from './RenameCollection';
 import DeleteCollection from './DeleteCollection';
@@ -60,6 +62,11 @@ const Collection = ({collection, searchText}) => {
   const requestItems = filter(collection.items, (i) => isItemARequest(i));
   const folderItems = filter(collection.items, (i) => isItemAFolder(i));
 
+  const handleExportClick = () => {
+    const collectionCopy = cloneDeep(collection);
+    exportCollection(transformCollectionToSaveToIdb(collectionCopy));
+  };
+
   return (
     <StyledWrapper className="flex flex-col">
       {showNewRequestModal && <NewRequest collection={collection} onClose={() => setShowNewRequestModal(false)}/>}
@@ -96,6 +103,12 @@ const Collection = ({collection, searchText}) => {
             }}>
               Rename
             </div>
+            <div className="dropdown-item" onClick={(e) => {
+              menuDropdownTippyRef.current.hide();
+              handleExportClick(true);
+            }}>
+              Export
+            </div>
             <div className="dropdown-item" onClick={(e) => {
               menuDropdownTippyRef.current.hide();
               setShowRemoveCollectionFromWSModal(true);

packages/bruno-app/src/utils/collections/export.js

@@ -0,0 +1,10 @@
+import * as FileSaver from 'file-saver';
+
+const exportCollection = (collection) => {
+  const fileName = `${collection.name}.json`;
+  const fileBlob = new Blob([JSON.stringify(collection, null, 2)], { type: "application/json" })
+
+  FileSaver.saveAs(fileBlob, fileName);
+};
+
+export default exportCollection;

packages/bruno-app/src/utils/collections/index.js

@@ -4,7 +4,6 @@ import isString from 'lodash/isString';
 import map from 'lodash/map';
 import filter from 'lodash/filter';
 import sortBy from 'lodash/sortBy';
-import cloneDeep from 'lodash/cloneDeep';
 
 const replaceTabsWithSpaces = (str, numSpaces = 2) => {
   if(!str || !str.length || !isString(str)) {