feat: clone request, resolves #3

renderer/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js

@@ -0,0 +1,66 @@
+import React, { useRef, useEffect } from 'react';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import Modal from 'components/Modal';
+import { useDispatch } from 'react-redux';
+import { isItemAFolder } from 'utils/tabs';
+import { cloneItem } from 'providers/ReduxStore/slices/collections';
+
+const CloneCollectionItem = ({collection, item, onClose}) => {
+  const dispatch = useDispatch();
+  const isFolder = isItemAFolder(item);
+  const inputRef = useRef();
+  const formik = useFormik({
+		enableReinitialize: true,
+    initialValues: {
+      name: item.name
+    },
+    validationSchema: Yup.object({
+      name: Yup.string()
+        .min(1, 'must be atleast 1 characters')
+        .max(50, 'must be 50 characters or less')
+        .required('name is required')
+    }),
+    onSubmit: (values) => {
+      dispatch(cloneItem(values.name, item.uid, collection.uid));
+      onClose();
+    }
+  });
+
+  useEffect(() => {
+    if(inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
+
+  const onSubmit = () => formik.handleSubmit();
+
+  return (
+    <Modal
+      size="sm"
+      title={`Clone ${isFolder ? 'Folder' : 'Request'}`}
+      confirmText='Clone'
+      handleConfirm={onSubmit}
+      handleCancel={onClose}
+    >
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+        <div>
+          <label htmlFor="name" className="block font-semibold">{isFolder ? 'Folder' : 'Request'} Name</label>
+          <input
+            id="collection-item-name" type="text" name="name"
+            ref={inputRef}
+            className="block textbox mt-2 w-full"
+            autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false"
+            onChange={formik.handleChange}
+            value={formik.values.name || ''}
+          />
+          {formik.touched.name && formik.errors.name ? (
+            <div className="text-red-500">{formik.errors.name}</div>
+          ) : null}
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+export default CloneCollectionItem;

renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js

@@ -10,6 +10,7 @@ import NewRequest from 'components/Sidebar/NewRequest';
 import NewFolder from 'components/Sidebar/NewFolder';
 import RequestMethod from './RequestMethod';
 import RenameCollectionItem from './RenameCollectionItem';
+import CloneCollectionItem from './CloneCollectionItem';
 import DeleteCollectionItem from './DeleteCollectionItem';
 import { isItemARequest, isItemAFolder, itemIsOpenedInTabs } from 'utils/tabs';
 
@@ -22,6 +23,7 @@ const CollectionItem = ({item, collection}) => {
   const dispatch = useDispatch();
 
   const [renameItemModalOpen, setRenameItemModalOpen] = useState(false);
+  const [cloneItemModalOpen, setCloneItemModalOpen] = useState(false);
   const [deleteItemModalOpen, setDeleteItemModalOpen] = useState(false);
   const [newRequestModalOpen, setNewRequestModalOpen] = useState(false);
   const [newFolderModalOpen, setNewFolderModalOpen] = useState(false);
@@ -74,6 +76,7 @@ const CollectionItem = ({item, collection}) => {
   return (
     <StyledWrapper className={className}>
       {renameItemModalOpen && <RenameCollectionItem item={item} collection={collection} onClose={() => setRenameItemModalOpen(false)}/>}
+      {cloneItemModalOpen && <CloneCollectionItem item={item} collection={collection} onClose={() => setCloneItemModalOpen(false)}/>}
       {deleteItemModalOpen && <DeleteCollectionItem item={item} collection={collection} onClose={() => setDeleteItemModalOpen(false)}/>}
       {newRequestModalOpen && <NewRequest item={item} collection={collection} onClose={() => setNewRequestModalOpen(false)}/>}
       {newFolderModalOpen && <NewFolder item={item} collection={collection} onClose={() => setNewFolderModalOpen(false)}/>}
@@ -137,6 +140,14 @@ const CollectionItem = ({item, collection}) => {
               }}>
                 Rename
               </div>
+              {!isFolder && (
+                <div className="dropdown-item" onClick={(e) => {
+                  dropdownTippyRef.current.hide();
+                  setCloneItemModalOpen(true);
+                }}>
+                  Clone
+                </div>
+              )}
               <div className="dropdown-item delete-item" onClick={(e) => {
                 dropdownTippyRef.current.hide();
                 setDeleteItemModalOpen(true);

renderer/components/Sidebar/Collections/index.js

@@ -4,6 +4,7 @@ import Collection from './Collection';
 
 const Collections = () => {
   const collections = useSelector((state) => state.collections.collections);
+  console.log(collections);
 
   return (
     <div className="mt-4 flex flex-col">

renderer/globalStyles.js

@@ -6,7 +6,7 @@ const GlobalStyle = createGlobalStyle`
     border-right: solid 1px var(--color-codemirror-border);
   }
 
-  .grafnode-form {
+  .bruno-form {
     .textbox {
       line-height: 1.42857143;
       background-color: #fff;

renderer/providers/ReduxStore/slices/collections.js

@@ -1,9 +1,9 @@
 import path from 'path';
 import { uuid } from 'utils/common';
-import trim from 'lodash/trim';
 import find from 'lodash/find';
 import concat from 'lodash/concat';
 import filter from 'lodash/filter';
+import each from 'lodash/each';
 import cloneDeep from 'lodash/cloneDeep';
 import { createSlice } from '@reduxjs/toolkit'
 import splitOnFirst from 'split-on-first';
@@ -11,15 +11,15 @@ import { sendNetworkRequest } from 'utils/network';
 import {
   findCollectionByUid,
   findItemInCollection,
-  cloneItem,
+  findParentItemInCollection,
   transformCollectionToSaveToIdb,
   addDepth,
   deleteItemInCollection,
   isItemARequest,
+  isItemAFolder
 } from 'utils/collections';
 import { parseQueryParams, stringifyQueryParams } from 'utils/url';
 import { getCollectionsFromIdb, saveCollectionToIdb } from 'utils/idb';
-import { each } from 'lodash';
 
 // todo: errors should be tracked in each slice and displayed as toasts
 
@@ -75,6 +75,21 @@ export const collectionsSlice = createSlice({
         }
       }
     },
+    _cloneItem: (state, action) => {
+      const collectionUid = action.payload.collectionUid;
+      const clonedItem = action.payload.clonedItem;
+      const parentItemUid = action.payload.parentItemUid;
+      const collection = findCollectionByUid(state.collections, collectionUid);
+
+      if(collection) {
+        if(parentItemUid) {
+          const parentItem = findItemInCollection(collection, parentItemUid);
+          parentItem.items.push(clonedItem);
+        } else {
+          collection.items.push(clonedItem);
+        }
+      }
+    },
     _requestSent: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
 
@@ -128,7 +143,7 @@ export const collectionsSlice = createSlice({
           },
           draft: null
         };
-        item.draft = cloneItem(item);
+        item.draft = cloneDeep(item);
         collection.items.push(item);
       }
     },
@@ -158,7 +173,7 @@ export const collectionsSlice = createSlice({
         
         if(item && isItemARequest(item)) {
           if(!item.draft) {
-            item.draft = cloneItem(item);
+            item.draft = cloneDeep(item);
           }
           item.draft.request.url = action.payload.url;
 
@@ -194,7 +209,7 @@ export const collectionsSlice = createSlice({
         
         if(item && isItemARequest(item)) {
           if(!item.draft) {
-            item.draft = cloneItem(item);
+            item.draft = cloneDeep(item);
           }
           item.draft.request.params = item.draft.request.params || [];
           item.draft.request.params.push({
@@ -215,7 +230,7 @@ export const collectionsSlice = createSlice({
         
         if(item && isItemARequest(item)) {
           if(!item.draft) {
-            item.draft = cloneItem(item);
+            item.draft = cloneDeep(item);
           }
           const param = find(item.draft.request.params, (h) => h.uid === action.payload.param.uid);
           if(param) {
@@ -256,7 +271,7 @@ export const collectionsSlice = createSlice({
         
         if(item && isItemARequest(item)) {
           if(!item.draft) {
-            item.draft = cloneItem(item);
+            item.draft = cloneDeep(item);
           }
           item.draft.request.params = filter(item.draft.request.params, (p) => p.uid !== action.payload.paramUid);
 
@@ -279,7 +294,7 @@ export const collectionsSlice = createSlice({
         
         if(item && isItemARequest(item)) {
           if(!item.draft) {
-            item.draft = cloneItem(item);
+            item.draft = cloneDeep(item);
           }
           item.draft.request.headers = item.draft.request.headers || [];
           item.draft.request.headers.push({
@@ -300,7 +315,7 @@ export const collectionsSlice = createSlice({
         
         if(item && isItemARequest(item)) {
           if(!item.draft) {
-            item.draft = cloneItem(item);
+            item.draft = cloneDeep(item);
           }
           const header = find(item.draft.request.headers, (h) => h.uid === action.payload.header.uid);
           if(header) {
@@ -320,7 +335,7 @@ export const collectionsSlice = createSlice({
         
         if(item && isItemARequest(item)) {
           if(!item.draft) {
-            item.draft = cloneItem(item);
+            item.draft = cloneDeep(item);
           }
           item.draft.request.headers = filter(item.draft.request.headers, (h) => h.uid !== action.payload.headerUid);
         }
@@ -334,7 +349,7 @@ export const collectionsSlice = createSlice({
         
         if(item && isItemARequest(item)) {
           if(!item.draft) {
-            item.draft = cloneItem(item);
+            item.draft = cloneDeep(item);
           }
           item.draft.request.body = {
             mode: action.payload.mode,
@@ -351,7 +366,7 @@ export const collectionsSlice = createSlice({
         
         if(item && isItemARequest(item)) {
           if(!item.draft) {
-            item.draft = cloneItem(item);
+            item.draft = cloneDeep(item);
           }
           item.draft.request.method = action.payload.method;
         }
@@ -366,6 +381,7 @@ export const {
   _newItem,
   _deleteItem,
   _renameItem,
+  _cloneItem,
   _requestSent,
   _responseReceived,
   _saveRequest,
@@ -584,6 +600,49 @@ export const renameItem = (newName, itemUid, collectionUid) => (dispatch, getSta
   }
 };
 
+export const cloneItem = (newName, itemUid, collectionUid) => (dispatch, getState) => {
+  const state = getState();
+  const collection = findCollectionByUid(state.collections.collections, collectionUid);
+
+  if(collection) {
+    const collectionCopy = cloneDeep(collection);
+    const item = findItemInCollection(collectionCopy, itemUid);
+    if(!item) {
+      return;
+    }
+
+    if(isItemAFolder(item)) {
+      throw new Error('Cloning folders is not supported yet');
+    }
+
+    // todo: clone query params
+    const clonedItem = cloneDeep(item);
+    clonedItem.name = newName;
+    clonedItem.uid = uuid();
+    each(clonedItem.headers, h => h.uid = uuid());
+
+    const parentItem = findParentItemInCollection(collectionCopy, itemUid);
+
+    if(!parentItem) {
+      collectionCopy.items.push(clonedItem);
+    } else {
+      parentItem.items.push(clonedItem);
+    }
+
+    const collectionToSave = transformCollectionToSaveToIdb(collectionCopy);
+
+    saveCollectionToIdb(window.__idb, collectionToSave)
+      .then(() => {
+        dispatch(_cloneItem({
+          parentItemUid: parentItem ? parentItem.uid : null,
+          clonedItem: clonedItem,
+          collectionUid: collectionUid
+        }));
+      })
+      .catch((err) => console.log(err));
+  }
+};
+
 export const removeCollection = (collectionPath) => () => {
   console.log('removeCollection');
 };

renderer/utils/collections/index.js

@@ -73,16 +73,20 @@ export const findItemInCollection = (collection, itemUid) => {
   return findItem(flattenedItems, itemUid);
 }
 
+export const findParentItemInCollection = (collection, itemUid) => {
+  let flattenedItems = flattenItems(collection.items);
+
+  return find(flattenedItems, (item) => {
+    return item.items && find(item.items, i => i.uid === itemUid);
+  });
+}
+
 export const recursivelyGetAllItemUids = (items = []) => {
   let flattenedItems = flattenItems(items);
 
   return map(flattenedItems, (i) => i.uid);
 };
 
-export const cloneItem = (item) => {
-  return cloneDeep(item);
-};
-
 export const transformCollectionToSaveToIdb = (collection, options = {}) => {
   const copyHeaders = (headers) => {
     return map(headers, (header) => {
@@ -172,7 +176,9 @@ export const deleteItemInCollection = (itemUid, collection) => {
 };
 
 export const isItemARequest = (item) => {
-  return item.hasOwnProperty('request') && ['http-request', 'graphql-request'].includes(item.type);
+  return item.hasOwnProperty('request')
+            && ['http-request', 'graphql-request'].includes(item.type)
+            && !item.items;
 };
 
 export const isItemAFolder = (item) => {