feat: request/folder names should be independent of the actual file/directory name

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

@@ -25,7 +25,8 @@ const ModalFooter = ({
   handleCancel,
   confirmDisabled,
   hideCancel,
-  hideFooter
+  hideFooter,
+  customFooter
 }) => {
   confirmText = confirmText || 'Save';
   cancelText = cancelText || 'Cancel';
@@ -35,22 +36,27 @@ const ModalFooter = ({
   }
 
   return (
-    <div className="flex justify-end p-4 bruno-modal-footer">
-      <span className={hideCancel ? 'hidden' : 'mr-2'}>
-        <button type="button" onClick={handleCancel} className="btn btn-md btn-close">
-          {cancelText}
-        </button>
-      </span>
-      <span>
-        <button
-          type="submit"
-          className="submit btn btn-md btn-secondary"
-          disabled={confirmDisabled}
-          onClick={handleSubmit}
-        >
-          {confirmText}
-        </button>
-      </span>
+    <div className={`flex p-4 bruno-modal-footer ${customFooter ? 'justify-between' : 'justify-end'}`}>
+      <div>
+        {customFooter}
+      </div>
+      <div className='flex w-fit'>
+        <span className={hideCancel ? 'hidden' : 'mr-2'}>
+          <button type="button" onClick={handleCancel} className="btn btn-md btn-close">
+            {cancelText}
+          </button>
+        </span>
+        <span>
+          <button
+            type="submit"
+            className="submit btn btn-md btn-secondary"
+            disabled={confirmDisabled}
+            onClick={handleSubmit}
+          >
+            {confirmText}
+          </button>
+        </span>
+      </div>
     </div>
   );
 };
@@ -71,7 +77,8 @@ const Modal = ({
   disableCloseOnOutsideClick,
   disableEscapeKey,
   onClick,
-  closeModalFadeTimeout = 500
+  closeModalFadeTimeout = 500,
+  customFooter
 }) => {
   const modalRef = useRef(null);
   const [isClosing, setIsClosing] = useState(false);
@@ -136,6 +143,7 @@ const Modal = ({
           confirmDisabled={confirmDisabled}
           hideCancel={hideCancel}
           hideFooter={hideFooter}
+          customFooter={customFooter}
         />
       </div>
 
@@ -146,8 +154,8 @@ const Modal = ({
           disableCloseOnOutsideClick
             ? null
             : () => {
-                closeModal({ type: 'backdrop' });
-              }
+              closeModal({ type: 'backdrop' });
+            }
         }
       />
     </StyledWrapper>

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/StyledWrapper.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .highlight {
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
+`;
+
+export default Wrapper;

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

@@ -1,29 +1,47 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import toast from 'react-hot-toast';
 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/actions';
+import { IconEdit, IconFile } from '@tabler/icons';
+import * as path from 'path';
+import { sanitizeName, validateName } from 'utils/common/regex';
+import StyledWrapper from './StyledWrapper';
 
 const CloneCollectionItem = ({ collection, item, onClose }) => {
   const dispatch = useDispatch();
   const isFolder = isItemAFolder(item);
   const inputRef = useRef();
+  const [isEditingFilename, toggleEditingFilename] = useState(false);
+  const itemName = item?.name;
+  const itemType = item?.type;
+  const itemFilename = item?.filename ? path.parse(item?.filename).name : '';
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
-      name: item.name
+      name: itemName,
+      filename: sanitizeName(itemFilename)
     },
     validationSchema: Yup.object({
       name: Yup.string()
+        .min(1, 'must be at least 1 character')
+        .max(50, 'must be 50 characters or less')
+        .required('name is required'),
+      filename: Yup.string()
         .min(1, 'must be at least 1 character')
         .max(50, 'must be 50 characters or less')
         .required('name is required')
+        .test('is-valid-filename', function(value) {
+          const isValid = validateName(value);
+          return isValid ? true : this.createError({ message: validateNameError(value) });
+        })
+        .test('not-reserved', `The file names "collection" and "folder" are reserved in bruno`, value => !['collection', 'folder'].includes(value))
     }),
     onSubmit: (values) => {
-      dispatch(cloneItem(values.name, item.uid, collection.uid))
+      dispatch(cloneItem(values.name, values.filename, item.uid, collection.uid))
         .then(() => {
           toast.success('Request cloned!');
           onClose();
@@ -42,13 +60,29 @@ const CloneCollectionItem = ({ collection, item, onClose }) => {
 
   const onSubmit = () => formik.handleSubmit();
 
+  const filename = formik.values.filename;
+  const name = formik.values.name;
+  const doNamesDiffer = filename !== name;
+
+  console.log("clone item", filename, itemFilename);
+
+  const filenameFooter = !isEditingFilename && filename ?
+    <div className={`flex flex-row gap-2 items-center w-full h-full`}>
+      <p className={`cursor-default whitespace-nowrap overflow-hidden text-ellipsis max-w-64 ${doNamesDiffer? 'highlight': 'opacity-50'}`} title={filename}>{filename}{itemType !== 'folder' ? '.bru' : ''}</p>
+      <IconEdit className="cursor-pointer opacity-50 hover:opacity-80" size={20} strokeWidth={1.5} onClick={() => toggleEditingFilename(v => !v)} />
+    </div>
+    :
+    <></>
+
   return (
+    <StyledWrapper>
     <Modal
-      size="sm"
+      size="md"
       title={`Clone ${isFolder ? 'Folder' : 'Request'}`}
       confirmText="Clone"
       handleConfirm={onSubmit}
       handleCancel={onClose}
+      customFooter={filenameFooter}
     >
       <form className="bruno-form" onSubmit={e => e.preventDefault()}>
         <div>
@@ -66,13 +100,47 @@ const CloneCollectionItem = ({ collection, item, onClose }) => {
             autoCorrect="off"
             autoCapitalize="off"
             spellCheck="false"
-            onChange={formik.handleChange}
+            onChange={e => {
+              formik.setFieldValue('name', e.target.value);
+              !isEditingFilename && formik.setFieldValue('filename', sanitizeName(e.target.value));
+            }}
             value={formik.values.name || ''}
           />
           {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
         </div>
+        {formik.touched.filename && formik.errors.filename ? <div className="text-red-500">{formik.errors.filename}</div> : null}
+        {
+          isEditingFilename ?
+            <div className="mt-4">
+              <label htmlFor="filename" className="block font-semibold">
+                {isFolder ? 'Directory' : 'File'} Name
+              </label>
+              <div className='relative flex flex-row gap-1 items-center justify-between'>
+                <input
+                  id="file-name"
+                  type="text"
+                  name="filename"
+                  placeholder="File Name"
+                  className={`!pr-10 block textbox mt-2 w-full`}
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck="false"
+                  onChange={formik.handleChange}
+                  value={formik.values.filename || ''}
+                />
+                {itemType !== 'folder' && <span className='absolute right-2 top-4 flex justify-center items-center file-extension'>.bru</span>}
+              </div>
+              {formik.touched.filename && formik.errors.filename ? (
+                <div className="text-red-500">{formik.errors.filename}</div>
+              ) : null}
+            </div>
+            :
+            <></>
+        }
       </form>
     </Modal>
+    </StyledWrapper>
   );
 };
 

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import Modal from 'components/Modal';
+import * as path from 'path';
+
+const CollectionItemInfo = ({ collection, item, onClose }) => {
+  const { pathname: collectionPathname } = collection;
+  const { name, filename, pathname, type } = item;
+  return (
+    <Modal
+      size="md"
+      title={`Info`}
+      handleCancel={onClose}
+      hideCancel={true}
+      hideFooter={true}
+    >
+        <div className="w-fit flex flex-col h-full">
+            <table className="w-full border-collapse">
+                <tbody>
+                <tr className="">
+                    <td className="py-2 px-2 text-right opacity-50">Name&nbsp;:</td>
+                    <td className="py-2 px-2">{name}</td>
+                </tr>
+                <tr className="">
+                    <td className="py-2 px-2 text-right opacity-50">{type=='folder' ? 'Directory Name' : 'Filename'}&nbsp;:</td>
+                    <td className="py-2 px-2 break-all">{filename}</td>
+                </tr>
+                <tr className="">
+                    <td className="py-2 px-2 text-right opacity-50">Pathname&nbsp;:</td>
+                    <td className="py-2 px-2 break-all">{path.relative(collectionPathname, pathname)}</td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </Modal>
+  );
+};
+
+export default CollectionItemInfo;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/StyledWrapper.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .highlight {
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
+`;
+
+export default Wrapper;