feat: ask foldername when creating collection

packages/bruno-app/package.json

@@ -46,6 +46,7 @@
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.0",
     "react-redux": "^7.2.6",
+    "react-tooltip": "^5.5.2",
     "reckonjs": "^0.1.2",
     "sass": "^1.46.0",
     "split-on-first": "^3.0.0",

packages/bruno-app/src/components/Sidebar/CreateCollection/index.js

@@ -5,6 +5,7 @@ import * as Yup from 'yup';
 import { browseDirectory } from 'providers/ReduxStore/slices/collections/actions';
 import { createCollection } from 'providers/ReduxStore/slices/collections/actions';
 import toast from 'react-hot-toast';
+import Tooltip from 'components/Tooltip';
 import Modal from 'components/Modal';
 
 const CreateCollection = ({ onClose }) => {
@@ -15,13 +16,16 @@ const CreateCollection = ({ onClose }) => {
     enableReinitialize: true,
     initialValues: {
       collectionName: '',
+      collectionFolderName: '',
       collectionLocation: ''
     },
     validationSchema: Yup.object({
-      collectionName: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
+      collectionName: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('collection name is required'),
+      collectionFolderName: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('folder name is required'),
+      collectionLocation: Yup.string().required('location is required')
     }),
     onSubmit: (values) => {
-      dispatch(createCollection(values.collectionName, values.collectionLocation))
+      dispatch(createCollection(values.collectionName, values.collectionFolderName, values.collectionLocation))
         .then(() => {
           toast.success('Collection created');
           onClose();
@@ -53,8 +57,9 @@ const CreateCollection = ({ onClose }) => {
     <Modal size="sm" title="Create Collection" confirmText="Create" handleConfirm={onSubmit} handleCancel={onClose}>
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div>
-          <label htmlFor="collectionName" className="block font-semibold">
-            Name
+          <label htmlFor="collectionName" className="flex items-center">
+            <span className='font-semibold'>Name</span>
+            <Tooltip text="Name of the collection" tooltipId="collection-name"/>
           </label>
           <input
             id="collection-name"
@@ -71,6 +76,25 @@ const CreateCollection = ({ onClose }) => {
           />
           {formik.touched.collectionName && formik.errors.collectionName ? <div className="text-red-500">{formik.errors.collectionName}</div> : null}
 
+          <label htmlFor="collectionFolderName" className="flex items-center mt-3">
+            <span className='font-semibold'>Folder Name</span>
+            <Tooltip text="Name of the folder where your collection is stored" tooltipId="collection-folder-name"/>
+          </label>
+          <input
+            id="collection-folder-name"
+            type="text"
+            name="collectionFolderName"
+            ref={inputRef}
+            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}
+
           <>
             <label htmlFor="collectionLocation" className="block font-semibold mt-3">
               Location

packages/bruno-app/src/components/Tooltip/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
+
+const Tooltip = ({ text, tooltipId }) => {
+  return (
+    <>
+      <svg tabindex="-1" id={tooltipId} xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" className="inline-block ml-2 cursor-pointer" viewBox="0 0 16 16" style={{marginTop: 1}}>
+        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+        <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
+      </svg>
+      <ReactTooltip anchorId={tooltipId} content={text} />
+    </>
+  );
+};
+
+export default Tooltip;

packages/bruno-app/src/pages/_app.js

@@ -12,6 +12,7 @@ import '../styles/globals.css';
 import 'tailwindcss/dist/tailwind.min.css';
 import 'codemirror/lib/codemirror.css';
 import 'graphiql/graphiql.min.css';
+import 'react-tooltip/dist/react-tooltip.css';
 
 function SafeHydrate({ children }) {
   return <div suppressHydrationWarning>{typeof window === 'undefined' ? null : children}</div>;

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

@@ -713,11 +713,14 @@ export const openCollectionEvent = (uid, pathname, name) => (dispatch, getState)
   });
 };
 
-export const createCollection = (collectionName, collectionLocation) => () => {
+export const createCollection = (collectionName, collectionFolderName, collectionLocation) => () => {
   const { ipcRenderer } = window;
 
   return new Promise((resolve, reject) => {
-    ipcRenderer.invoke('renderer:create-collection', collectionName, collectionLocation).then(resolve).catch(reject);
+    ipcRenderer
+      .invoke('renderer:create-collection', collectionName, collectionFolderName, collectionLocation)
+      .then(resolve)
+      .catch(reject);
   });
 };
 

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

@@ -34,9 +34,9 @@ const registerRendererEventHandlers = (mainWindow, watcher, lastOpenedCollection
   });
 
   // create collection
-  ipcMain.handle('renderer:create-collection', async (event, collectionName, collectionLocation) => {
+  ipcMain.handle('renderer:create-collection', async (event, collectionName, collectionFolderName, collectionLocation) => {
     try {
-      const dirPath = path.join(collectionLocation, collectionName);
+      const dirPath = path.join(collectionLocation, collectionFolderName);
       if (fs.existsSync(dirPath)){
         throw new Error(`collection: ${dirPath} already exists`);
       }