Merge pull request #1202 from akshat-khosya/feature/clone-collection

clone functionality in collection

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

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

@@ -70,7 +70,52 @@ const registerRendererEventHandlers = (mainWindow, watcher, lastOpenedCollection
       }
     }
   );
+  // clone collection
+  ipcMain.handle(
+    'renderer:clone-collection',
+    async (event, collectionName, collectionFolderName, collectionLocation, previousPath) => {
+      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}`);
+      }
+
+      // create dir
+      await createDirectory(dirPath);
+      const uid = generateUidBasedOnHash(dirPath);
+
+      // open the bruno.json of previousPath
+      const brunoJsonFilePath = path.join(previousPath, 'bruno.json');
+      const content = fs.readFileSync(brunoJsonFilePath, 'utf8');
+
+      //Change new name of collection
+      let json = JSON.parse(content);
+      json.name = collectionName;
+      const cont = await stringifyJson(json);
+
+      // write the bruno.json to new dir
+      await writeFile(path.join(dirPath, 'bruno.json'), cont);
+
+      // Now copy all the files with extension name .bru along with there dir
+      const files = searchForBruFiles(previousPath);
+
+      for (const sourceFilePath of files) {
+        const relativePath = path.relative(previousPath, sourceFilePath);
+        const newFilePath = path.join(dirPath, relativePath);
+
+        // handle dir of files
+        fs.mkdirSync(path.dirname(newFilePath), { recursive: true });
+        // copy each files
+        fs.copyFileSync(sourceFilePath, newFilePath);
+      }
+
+      mainWindow.webContents.send('main:collection-opened', dirPath, uid, json);
+      ipcMain.emit('main:collection-opened', mainWindow, dirPath, uid);
+    }
+  );
   // rename collection
   ipcMain.handle('renderer:rename-collection', async (event, newName, collectionPathname) => {
     try {