clone functionality in collection

package-lock.json

@@ -14297,6 +14297,7 @@
     },
     "node_modules/react-is": {
       "version": "18.2.0",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/react-pdf": {
@@ -17670,7 +17671,7 @@
     },
     "packages/bruno-electron": {
       "name": "bruno",
-      "version": "v1.3.0",
+      "version": "v1.4.0",
       "dependencies": {
         "@aws-sdk/credential-providers": "^3.425.0",
         "@usebruno/js": "0.9.3",
@@ -21404,8 +21405,7 @@
       }
     },
     "@tabler/icons": {
-      "version": "1.119.0",
+      "version": "1.119.0"
-      "requires": {}
     },
     "@tippyjs/react": {
       "version": "4.2.6",
@@ -21957,8 +21957,7 @@
       }
     },
     "@usebruno/schema": {
-      "version": "file:packages/bruno-schema",
+      "version": "file:packages/bruno-schema"
-      "requires": {}
     },
     "@usebruno/testbench": {
       "version": "file:packages/bruno-testbench",
@@ -22102,8 +22101,7 @@
     },
     "@webpack-cli/configtest": {
       "version": "1.2.0",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "@webpack-cli/info": {
       "version": "1.5.0",
@@ -22114,8 +22112,7 @@
     },
     "@webpack-cli/serve": {
       "version": "1.7.0",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "@xtuc/ieee754": {
       "version": "1.2.0",
@@ -22197,8 +22194,7 @@
     },
     "ajv-keywords": {
       "version": "3.5.2",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "amdefine": {
       "version": "0.0.8"
@@ -23147,8 +23143,7 @@
     "chai-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/chai-string/-/chai-string-1.5.0.tgz",
-      "integrity": "sha512-sydDC3S3pNAQMYwJrs6dQX0oBQ6KfIPuOZ78n7rocW0eJJlsHPh2t3kwW7xfwYA/1Bf6/arGtSUo16rxR2JFlw==",
+      "integrity": "sha512-sydDC3S3pNAQMYwJrs6dQX0oBQ6KfIPuOZ78n7rocW0eJJlsHPh2t3kwW7xfwYA/1Bf6/arGtSUo16rxR2JFlw=="
-      "requires": {}
     },
     "chalk": {
       "version": "4.1.2",
@@ -23583,8 +23578,7 @@
     },
     "css-declaration-sorter": {
       "version": "6.3.1",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "css-loader": {
       "version": "6.7.3",
@@ -23703,8 +23697,7 @@
     },
     "cssnano-utils": {
       "version": "3.1.0",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -24931,8 +24924,7 @@
       }
     },
     "goober": {
-      "version": "2.1.11",
+      "version": "2.1.11"
-      "requires": {}
     },
     "gopd": {
       "version": "1.0.1",
@@ -25326,8 +25318,7 @@
     },
     "icss-utils": {
       "version": "5.1.0",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "idb": {
       "version": "7.1.1"
@@ -25927,8 +25918,7 @@
     },
     "jest-pnp-resolver": {
       "version": "1.2.3",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "jest-regex-util": {
       "version": "29.2.0",
@@ -26647,8 +26637,7 @@
     "merge-refs": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.2.2.tgz",
-      "integrity": "sha512-RwcT7GsQR3KbuLw1rRuodq4Nt547BKEBkliZ0qqsrpyNne9bGTFtsFIsIpx82huWhcl3kOlOlH4H0xkPk/DqVw==",
+      "integrity": "sha512-RwcT7GsQR3KbuLw1rRuodq4Nt547BKEBkliZ0qqsrpyNne9bGTFtsFIsIpx82huWhcl3kOlOlH4H0xkPk/DqVw=="
-      "requires": {}
     },
     "merge-stream": {
       "version": "2.0.0",
@@ -26658,8 +26647,7 @@
       "version": "1.4.1"
     },
     "meros": {
-      "version": "1.2.1",
+      "version": "1.2.1"
-      "requires": {}
     },
     "methods": {
       "version": "1.1.2"
@@ -27536,23 +27524,19 @@
     },
     "postcss-discard-comments": {
       "version": "5.1.2",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-js": {
       "version": "3.0.3",
@@ -27634,8 +27618,7 @@
     },
     "postcss-modules-extract-imports": {
       "version": "3.0.0",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -27668,8 +27651,7 @@
     },
     "postcss-normalize-charset": {
       "version": "5.1.0",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -28145,11 +28127,11 @@
       }
     },
     "react-inspector": {
-      "version": "6.0.2",
+      "version": "6.0.2"
-      "requires": {}
     },
     "react-is": {
-      "version": "18.2.0"
+      "version": "18.2.0",
+      "dev": true
     },
     "react-pdf": {
       "version": "7.5.1",
@@ -28311,8 +28293,7 @@
       }
     },
     "redux-thunk": {
-      "version": "2.4.2",
+      "version": "2.4.2"
-      "requires": {}
     },
     "regenerate": {
       "version": "1.4.2",
@@ -28549,8 +28530,7 @@
     },
     "rollup-plugin-peer-deps-external": {
       "version": "2.2.4",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "rollup-plugin-postcss": {
       "version": "4.0.2",
@@ -29108,8 +29088,7 @@
     },
     "style-loader": {
       "version": "3.3.1",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "styled-components": {
       "version": "5.3.6",
@@ -29138,8 +29117,7 @@
       }
     },
     "styled-jsx": {
-      "version": "5.0.7",
+      "version": "5.0.7"
-      "requires": {}
     },
     "stylehacks": {
       "version": "5.1.1",
@@ -29812,8 +29790,7 @@
       }
     },
     "use-sync-external-store": {
-      "version": "1.2.0",
+      "version": "1.2.0"
-      "requires": {}
     },
     "utf8-byte-length": {
       "version": "1.0.4",
@@ -29974,8 +29951,7 @@
         },
         "acorn-import-assertions": {
           "version": "1.8.0",
-          "dev": true,
+          "dev": true
-          "requires": {}
         },
         "schema-utils": {
           "version": "3.1.1",

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

@@ -0,0 +1,155 @@
+import React, { useRef, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { browseDirectory } from 'providers/ReduxStore/slices/collections/actions';
+import { cloneCollection } from 'providers/ReduxStore/slices/collections/actions';
+import toast from 'react-hot-toast';
+import Tooltip from 'components/Tooltip';
+import Modal from 'components/Modal';
+
+const CloneCollection = ({ onClose, collection }) => {
+  const inputRef = useRef();
+  const dispatch = useDispatch();
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      collectionName: '',
+      collectionFolderName: '',
+      collectionLocation: ''
+    },
+    validationSchema: Yup.object({
+      collectionName: Yup.string()
+        .min(1, 'must be at least 1 character')
+        .max(50, 'must be 50 characters or less')
+        .required('collection name is required'),
+      collectionFolderName: Yup.string()
+        .min(1, 'must be at least 1 character')
+        .max(50, 'must be 50 characters or less')
+        .matches(/^[\w\-. ]+$/, 'Folder name contains invalid characters')
+        .required('folder name is required'),
+      collectionLocation: Yup.string().min(1, 'location is required').required('location is required')
+    }),
+    onSubmit: (values) => {
+      dispatch(
+        cloneCollection(
+          values.collectionName,
+          values.collectionFolderName,
+          values.collectionLocation,
+          collection.pathname
+        )
+      )
+        .then(() => {
+          toast.success('Collection created');
+          onClose();
+        })
+        .catch(() => toast.error('An error occurred while creating the collection'));
+    }
+  });
+
+  const browse = () => {
+    dispatch(browseDirectory())
+      .then((dirPath) => {
+        // When the user closes the diolog without selecting anything dirPath will be false
+        if (typeof dirPath === 'string') {
+          formik.setFieldValue('collectionLocation', dirPath);
+        }
+      })
+      .catch((error) => {
+        formik.setFieldValue('collectionLocation', '');
+        console.error(error);
+      });
+  };
+
+  useEffect(() => {
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
+
+  const onSubmit = () => formik.handleSubmit();
+
+  return (
+    <Modal size="sm" title="Clone Collection" confirmText="Create" handleConfirm={onSubmit} handleCancel={onClose}>
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+        <div>
+          <label htmlFor="collection-name" className="flex items-center font-semibold">
+            Name
+          </label>
+          <input
+            id="collection-name"
+            type="text"
+            name="collectionName"
+            ref={inputRef}
+            className="block textbox mt-2 w-full"
+            onChange={(e) => {
+              formik.handleChange(e);
+              if (formik.values.collectionName === formik.values.collectionFolderName) {
+                formik.setFieldValue('collectionFolderName', e.target.value);
+              }
+            }}
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            value={formik.values.collectionName || ''}
+          />
+          {formik.touched.collectionName && formik.errors.collectionName ? (
+            <div className="text-red-500">{formik.errors.collectionName}</div>
+          ) : null}
+
+          <label htmlFor="collection-location" className="block font-semibold mt-3">
+            Location
+          </label>
+          <input
+            id="collection-location"
+            type="text"
+            name="collectionLocation"
+            readOnly={true}
+            className="block textbox mt-2 w-full cursor-pointer"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            value={formik.values.collectionLocation || ''}
+            onClick={browse}
+          />
+          {formik.touched.collectionLocation && formik.errors.collectionLocation ? (
+            <div className="text-red-500">{formik.errors.collectionLocation}</div>
+          ) : null}
+          <div className="mt-1">
+            <span className="text-link cursor-pointer hover:underline" onClick={browse}>
+              Browse
+            </span>
+          </div>
+
+          <label htmlFor="collection-folder-name" className="flex items-center mt-3">
+            <span className="font-semibold">Folder Name</span>
+            <Tooltip
+              text="This folder will be created under the selected location"
+              tooltipId="collection-folder-name-tooltip"
+            />
+          </label>
+          <input
+            id="collection-folder-name"
+            type="text"
+            name="collectionFolderName"
+            className="block textbox mt-2 w-full"
+            onChange={formik.handleChange}
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            value={formik.values.collectionFolderName || ''}
+          />
+          {formik.touched.collectionFolderName && formik.errors.collectionFolderName ? (
+            <div className="text-red-500">{formik.errors.collectionFolderName}</div>
+          ) : null}
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+export default CloneCollection;

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

@@ -20,11 +20,13 @@ import exportCollection from 'utils/collections/export';
 
 import RenameCollection from './RenameCollection';
 import StyledWrapper from './StyledWrapper';
+import CloneCollection from './CloneCollection/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 [showRemoveCollectionModal, setShowRemoveCollectionModal] = useState(false);
   const [collectionIsCollapsed, setCollectionIsCollapsed] = useState(collection.collapsed);
@@ -133,6 +135,9 @@ const Collection = ({ collection, searchText }) => {
       {showExportCollectionModal && (
         <ExportCollection collection={collection} onClose={() => setShowExportCollectionModal(false)} />
       )}
+      {showCloneCollectionModalOpen && (
+        <CloneCollection collection={collection} onClose={() => setShowCloneCollectionModalOpen(false)} />
+      )}
       <div className="flex py-1 collection-name items-center" ref={drop}>
         <div
           className="flex flex-grow items-center overflow-hidden"
@@ -169,6 +174,15 @@ const Collection = ({ collection, searchText }) => {
             >
               New Folder
             </div>
+            <div
+              className="dropdown-item"
+              onClick={(e) => {
+                menuDropdownTippyRef.current.hide();
+                setShowCloneCollectionModalOpen(true);
+              }}
+            >
+              Clone
+            </div>
             <div
               className="dropdown-item"
               onClick={(e) => {

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

@@ -939,7 +939,16 @@ export const createCollection = (collectionName, collectionFolderName, collectio
       .catch(reject);
   });
 };
+export const cloneCollection = (collectionName, collectionFolderName, collectionLocation, perviousPath) => () => {
+  const { ipcRenderer } = window;
 
+  return new Promise((resolve, reject) => {
+    ipcRenderer
+      .invoke('renderer:clone-collection', collectionName, collectionFolderName, collectionLocation, perviousPath)
+      .then(resolve)
+      .catch(reject);
+  });
+};
 export const openCollection = () => () => {
   return new Promise((resolve, reject) => {
     const { ipcRenderer } = window;

packages/bruno-electron/src/ipc/collection.js

@@ -70,7 +70,43 @@ const registerRendererEventHandlers = (mainWindow, watcher, lastOpenedCollection
       }
     }
   );
+  // clone collection
+  ipcMain.handle(
+    'renderer:clone-collection',
+    async (event, collectionName, collectionFolderName, collectionLocation, perviousPath) => {
+      try {
+        const dirPath = path.join(collectionLocation, collectionFolderName);
+        if (fs.existsSync(dirPath)) {
+          throw new Error(`collection: ${dirPath} already exists`);
+        }
 
+        if (!isValidPathname(dirPath)) {
+          throw new Error(`collection: invalid pathname - ${dir}`);
+        }
+
+        await createDirectory(dirPath);
+        const uid = generateUidBasedOnHash(dirPath);
+        const brunoJsonFilePath = path.join(perviousPath, 'bruno.json');
+        const content = fs.readFileSync(brunoJsonFilePath, 'utf8');
+        let json = JSON.parse(content);
+        json.name = collectionName;
+        const cont = await stringifyJson(json);
+        await writeFile(path.join(dirPath, 'bruno.json'), cont);
+        const files = searchForBruFiles(perviousPath);
+        console.log(files);
+        for (const sourceFilePath of files) {
+          const fileName = path.basename(sourceFilePath);
+          const destinationFilePath = path.join(dirPath, fileName);
+          console.log(destinationFilePath);
+          fs.copyFileSync(sourceFilePath, destinationFilePath);
+        }
+        mainWindow.webContents.send('main:collection-opened', dirPath, uid, json);
+        ipcMain.emit('main:collection-opened', mainWindow, dirPath, uid);
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    }
+  );
   // rename collection
   ipcMain.handle('renderer:rename-collection', async (event, newName, collectionPathname) => {
     try {