diff --git a/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js b/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js index a83850e91..efb616fdc 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js @@ -1,13 +1,20 @@ import React from "react"; import { getTotalRequestCountInCollection } from 'utils/collections/'; -import { IconFolder, IconWorld, IconApi, IconClock } from '@tabler/icons'; +import { IconFolder, IconWorld, IconApi, IconShare } from '@tabler/icons'; import { areItemsLoading, getItemsLoadStats } from "utils/collections/index"; +import { useState } from "react"; +import ShareCollection from "components/ShareCollection/index"; const Info = ({ collection }) => { const totalRequestsInCollection = getTotalRequestCountInCollection(collection); const isCollectionLoading = areItemsLoading(collection); const { loading: itemsLoadingCount, total: totalItems } = getItemsLoadStats(collection); + const [showShareCollectionModal, toggleShowShareCollectionModal] = useState(false); + + const handleToggleShowShareCollectionModal = (value) => (e) => { + toggleShowShareCollectionModal(value); + } return (
@@ -53,6 +60,19 @@ const Info = ({ collection }) => {
+ +
+
+ +
+
+
Share
+
+ Share Collection +
+
+
+ {showShareCollectionModal && } diff --git a/packages/bruno-app/src/components/Icons/OpenAPILogo/index.js b/packages/bruno-app/src/components/Icons/OpenAPILogo/index.js new file mode 100644 index 000000000..b472b3d8c --- /dev/null +++ b/packages/bruno-app/src/components/Icons/OpenAPILogo/index.js @@ -0,0 +1,104 @@ +const OpenApiLogo = () => { + return ( + + + + + + + + + + + + + + + ); +}; + +export default OpenApiLogo; \ No newline at end of file diff --git a/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js b/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js new file mode 100644 index 000000000..5e1e3be3d --- /dev/null +++ b/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js @@ -0,0 +1,30 @@ +import styled from 'styled-components'; + +const StyledWrapper = styled.div` + .tabs { + .tab { + padding: 6px 0px; + border: none; + border-bottom: solid 2px transparent; + margin-right: 1.25rem; + color: var(--color-tab-inactive); + cursor: pointer; + + &:focus, + &:active, + &:focus-within, + &:focus-visible, + &:target { + outline: none !important; + box-shadow: none !important; + } + + &.active { + color: ${(props) => props.theme.tabs.active.color} !important; + border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important; + } + } + } +`; + +export default StyledWrapper; diff --git a/packages/bruno-app/src/components/ShareCollection/index.js b/packages/bruno-app/src/components/ShareCollection/index.js new file mode 100644 index 000000000..19f5f00be --- /dev/null +++ b/packages/bruno-app/src/components/ShareCollection/index.js @@ -0,0 +1,60 @@ +import React from 'react'; +import Modal from 'components/Modal'; +import { IconDownload } 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 { cloneDeep } from 'lodash'; +import { transformCollectionToSaveToExportAsFile } from 'utils/collections/index'; + +const ShareCollection = ({ onClose, collection }) => { + const handleExportBrunoCollection = () => { + const collectionCopy = cloneDeep(collection); + exportBrunoCollection(transformCollectionToSaveToExportAsFile(collectionCopy)); + onClose(); + }; + + const handleExportPostmanCollection = () => { + const collectionCopy = cloneDeep(collection); + exportPostmanCollection(collectionCopy); + onClose(); + }; + + return ( + + +
+
+
+ +
+
+
Bruno Collection
+
Export in Bruno format
+
+
+ +
+
+ +
+
+
Postman Collection
+
Export in Postman format
+
+
+
+ + + ); +}; + +export default ShareCollection; diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js index f21f25ac3..521994afd 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js @@ -13,7 +13,6 @@ import NewRequest from 'components/Sidebar/NewRequest'; import NewFolder from 'components/Sidebar/NewFolder'; import CollectionItem from './CollectionItem'; import RemoveCollection from './RemoveCollection'; -import ExportCollection from './ExportCollection'; import { doesCollectionHaveItemsMatchingSearchText } from 'utils/collections/search'; import { isItemAFolder, isItemARequest } from 'utils/collections'; @@ -22,15 +21,15 @@ import StyledWrapper from './StyledWrapper'; import CloneCollection from './CloneCollection'; import { areItemsLoading, findItemInCollection } from 'utils/collections'; import { scrollToTheActiveTab } from 'utils/tabs'; +import ShareCollection from 'components/ShareCollection/index'; const Collection = ({ collection, searchText }) => { const [showNewFolderModal, setShowNewFolderModal] = useState(false); const [showNewRequestModal, setShowNewRequestModal] = useState(false); const [showRenameCollectionModal, setShowRenameCollectionModal] = useState(false); const [showCloneCollectionModalOpen, setShowCloneCollectionModalOpen] = useState(false); - const [showExportCollectionModal, setShowExportCollectionModal] = useState(false); + const [showShareCollectionModal, setShowShareCollectionModal] = useState(false); const [showRemoveCollectionModal, setShowRemoveCollectionModal] = useState(false); - const tabs = useSelector((state) => state.tabs.tabs); const dispatch = useDispatch(); const isLoading = areItemsLoading(collection); const collectionRef = useRef(null); @@ -193,8 +192,8 @@ const Collection = ({ collection, searchText }) => { {showRemoveCollectionModal && ( setShowRemoveCollectionModal(false)} /> )} - {showExportCollectionModal && ( - setShowExportCollectionModal(false)} /> + {showShareCollectionModal && ( + setShowShareCollectionModal(false)} /> )} {showCloneCollectionModalOpen && ( setShowCloneCollectionModalOpen(false)} /> @@ -271,10 +270,10 @@ const Collection = ({ collection, searchText }) => { className="dropdown-item" onClick={(e) => { menuDropdownTippyRef.current.hide(); - setShowExportCollectionModal(true); + setShowShareCollectionModal(true); }} > - Export + Share
{ const [options, setOptions] = useState({ @@ -55,28 +58,52 @@ const ImportCollection = ({ onClose, handleSubmit }) => { } }); }; - const CollectionButton = ({ children, className, onClick }) => { - return ( - - ); - }; + return (

Select the type of your existing collection :

-
- Bruno Collection - Postman Collection - Insomnia Collection - OpenAPI V3 Spec -
+
+
+
+ +
+
+
Bruno Collection
+
Pick a Bruno collection JSON file.
+
+
+ +
+
+ +
+
+
Insomnia Collection
+
Pick a Insomnia collection JSON file.
+
+
+ +
+
+ +
+
+
Postman Collection
+
Pick a Postman collection JSON file.
+
+
+ +
+
+ +
+
+
OpenAPI v3 Collection
+
Pick an OpenAPI v3 JSON/YAML spec file.
+
+
+
{Object.entries(options || {}).map(([key, option]) => (