Feature/transient request (#6878)

* feat: add functionality to retrieve collection path from transient file requests in IPC module * feat: implement transient directory handling in collection mounting process * add action to store transient directory paths in Redux state * update IPC handler to create and return a temporary directory for collections * modify collection mount action to dispatch transient directory addition * feat: add CreateTransientRequest component for managing transient requests * implement CreateTransientRequest component to facilitate the creation of HTTP, GraphQL, gRPC, and WebSocket transient requests * integrate the component into RequestTabs for user interaction * update collection and request handling to differentiate between transient and non-transient requests * enhance Redux actions to support transient request creation and management * feat: enhance transient request handling and add temp directory watcher * refactor Redux actions for HTTP, gRPC, and WebSocket requests to utilize a unified task queue for transient requests * implement a new helper function to retrieve collection paths from temporary directory metadata * add functionality to watch transient directories for file changes, excluding metadata.json * integrate transient directory watcher into the collection mounting process * feat: enhance transient request management with temp directory integration * update generateTransientRequestName function to accept tempDirectory parameter for improved request naming * modify CreateTransientRequest component to utilize tempDirectory for transient request creation * adjust middleware to check for transient status based on tempDirectory * implement transient file and directory identification in collections slice for better state management * feat: add SaveTransientRequest component for managing transient requests * implement SaveTransientRequest component to facilitate saving transient requests to selected folders * create StyledWrapper for component styling * introduce useCollectionFolderTree hook for managing folder navigation and state * update Redux actions to handle saving requests from transient state * feat: implement SaveTransientRequestContainer and enhance modal management * add SaveTransientRequestContainer to manage multiple transient request modals * refactor SaveTransientRequest component to utilize Redux for modal state management * implement open and close actions for transient request modals in Redux slice * update Bruno page to include SaveTransientRequestContainer for improved UI integration * feat: enhance SaveTransientRequest component with new folder creation functionality * add input for creating new folders within the SaveTransientRequest component * implement validation for new folder names and filesystem names * integrate folder creation logic with Redux actions for better state management * update styling for new folder input elements in StyledWrapper * improve modal behavior to reset state when opened * feat: update CreateTransientRequest to utilize collection presets for request URLs * Refactored CreateTransientRequest component to retrieve request URLs from collection presets. * Enhanced request handling by dynamically setting request URLs based on the selected collection's configuration. * refactor: clean up unused imports and adjust request handling in collections actions * Removed unused imports from actions.js to streamline the code. * Updated the saveRequest function to reject the modal instead of resolving it when handling transient requests. * Cleaned up comments in index.js for better clarity. * refactor: streamline transient request handling and improve save functionality * Removed success toast notifications from CreateTransientRequest component to simplify user feedback. * Enhanced SaveTransientRequest component to handle transient requests more effectively, including improved filename resolution and validation. * Added IPC handler for saving transient requests, ensuring proper file management and error handling. * Updated Redux actions to check for duplicate transient request names within the temporary directory. * feat: enhance request handling in ConfirmCollectionCloseDrafts component * Added logic to differentiate between transient and non-transient drafts, ensuring transient requests are saved individually before closing the collection. * Improved user feedback by displaying unsaved changes for both regular and transient requests. * Updated save and discard functionality to handle all drafts appropriately, enhancing overall user experience. * fix:fixed useCallback dependency array * fix:added request name checks before save * fix: added isTransient to files * fix: added watcher cleanup for temp directory * refactor: enhance transient request handling and optimize component logic * Updated CreateTransientRequest to utilize useMemo for improved performance and prevent unnecessary re-renders. * Refactored generateTransientRequestName to focus solely on transient requests, removing tempDirectory dependency. * Streamlined SaveTransientRequest by consolidating form reset logic and removing unused state variables. * Improved ConfirmCollectionCloseDrafts to differentiate between transient and non-transient drafts more effectively. * Cleaned up imports and optimized Redux actions for better maintainability. * feat: implement transient request file deletion on tab close * Added middleware to handle the deletion of transient request files when tabs are closed. * Enhanced collection-watcher to unlink temporary files, ensuring metadata.json is skipped and only request files are processed. * Improved error handling for file deletion operations. * feat: enhance autosave middleware to skip transient requests * Updated autosave middleware to check for transient requests and skip auto-save operations accordingly. * fix: update ConfirmCollectionCloseDrafts to display all transient drafts * Modified the ConfirmCollectionCloseDrafts component to show all transient drafts without limiting the display to a maximum number. * Removed the conditional message for additional drafts not shown, enhancing the user experience by providing complete visibility of transient requests. * feat: enhance SaveTransientRequest component for better modal management * Refactored SaveTransientRequest and its container to improve modal handling for unsaved transient requests. * Introduced state management for opening specific modals and added functionality to discard all unsaved requests. * Updated Redux actions to manage transient request modals more effectively, ensuring no duplicates are added. * Enhanced user interface to display a list of unsaved requests with options to save or discard them. * feat: improve modal management in SaveTransientRequestContainer * Added useEffect to reset openItemUid when the corresponding modal is no longer present. * Implemented functionality to close all tabs associated with transient requests and show a success message upon discarding them. * Removed unnecessary modal close handler and streamlined modal opening logic for better clarity and performance. * refactor: streamline code formatting and improve readability in collection actions * Consolidated multiple lines of code into single lines for better readability in ConfirmCollectionCloseDrafts and actions.js. * Enhanced consistency in the formatting of function parameters and return statements across the collections slice. * Removed unnecessary line breaks and improved the structure of the code for easier maintenance. * refactor: improve code readability and structure in middleware and actions * Consolidated multiple lines of code into single lines for better readability in middleware.js and actions.js. * Enhanced consistency in formatting function parameters and return statements across the collections slice. * Removed unnecessary line breaks and improved the structure of the code for easier maintenance. * Streamlined dispatch calls for better clarity and performance. * refactor: enhance code readability and consistency in middleware and actions * Improved formatting and structure in middleware.js for dispatch calls. * Streamlined comments and indentation in actions.js for better clarity. * Consolidated multiple lines into single lines where appropriate to enhance readability. * refactor: enhance transient request handling and modal interactions * Improved the modal handling logic for removing collections to differentiate between regular and drafts confirmation modals. * Added new tests for creating and saving transient requests (HTTP, GraphQL, gRPC, WebSocket) ensuring they do not appear in the sidebar until saved. * Introduced utility functions for creating transient requests and filling request URLs, improving code reusability and clarity. * refactor: simplify transient request modal rendering and improve collection watcher logic * Introduced a new TransientRequestModalsRenderer component to streamline modal rendering based on the number of transient requests. * Refactored the collection watcher logic to enhance readability by removing unnecessary setTimeout and consolidating file handling functions. * Improved error handling and logging for the temp directory watcher. * fix: correct spelling of 'WebSocket' in transient request components and tests * Updated the spelling of 'Websocket' to 'WebSocket' in CreateTransientRequest component, transient requests test, and action type definitions for consistency and accuracy.
2026-07-02 08:58:32 +00:00 · 2026-01-29 18:38:42 +05:30
parent 4b724ebd85
commit ca4d0dd40b
22 changed files with 2252 additions and 146 deletions
--- a/packages/bruno-app/src/hooks/useCollectionFolderTree/index.js
+++ b/packages/bruno-app/src/hooks/useCollectionFolderTree/index.js
@@ -0,0 +1,162 @@
+import { useState, useMemo, useCallback } from 'react';
+import { isItemAFolder } from 'utils/collections';
+import { sortByNameThenSequence } from 'utils/common/index';
+import filter from 'lodash/filter';
+import { useSelector } from 'react-redux';
+import { findCollectionByUid } from 'utils/collections';
+
+const buildTree = (items) => {
+  const tree = {};
+
+  if (!items || items.length === 0) {
+    return tree;
+  }
+
+  const folders = filter(items, (i) => isItemAFolder(i) && !i.isTransient);
+  const sortedFolders = sortByNameThenSequence(folders);
+
+  for (const folder of sortedFolders) {
+    tree[folder.name] = {
+      uid: folder.uid,
+      name: folder.name,
+      item: folder,
+      children: folder.items && folder.items.length > 0 ? buildTree(folder.items) : {}
+    };
+  }
+
+  return tree;
+};
+
+const findFolderByUidInTree = (tree, uid) => {
+  for (const folderName in tree) {
+    const folder = tree[folderName];
+    if (folder.uid === uid) {
+      return folder;
+    }
+    if (folder.children && Object.keys(folder.children).length > 0) {
+      const found = findFolderByUidInTree(folder.children, uid);
+      if (found) return found;
+    }
+  }
+  return null;
+};
+
+const getFoldersAtPath = (tree, path) => {
+  if (path.length === 0) {
+    return Object.values(tree).map((folder) => folder.item);
+  }
+
+  let currentTree = tree;
+  for (const folderUid of path) {
+    const folder = findFolderByUidInTree(currentTree, folderUid);
+    if (folder && folder.children) {
+      currentTree = folder.children;
+    } else {
+      return [];
+    }
+  }
+
+  return Object.values(currentTree).map((folder) => folder.item);
+};
+
+const useCollectionFolderTree = (collectionUid) => {
+  const collection = useSelector((state) => findCollectionByUid(state.collections.collections, collectionUid));
+  const [currentFolderPath, setCurrentFolderPath] = useState([]);
+  const [selectedFolderUid, setSelectedFolderUid] = useState(null);
+  const tree = useMemo(() => {
+    if (!collection || !collection.items) {
+      return {};
+    }
+    return buildTree(collection.items);
+  }, [collection]);
+
+  const currentFolders = useMemo(() => {
+    return getFoldersAtPath(tree, currentFolderPath);
+  }, [tree, currentFolderPath]);
+
+  const breadcrumbs = useMemo(() => {
+    if (currentFolderPath.length === 0) {
+      return [];
+    }
+
+    const breadcrumbParts = [];
+    let currentTree = tree;
+
+    for (const folderUid of currentFolderPath) {
+      const folder = findFolderByUidInTree(currentTree, folderUid);
+      if (folder) {
+        breadcrumbParts.push({
+          uid: folder.uid,
+          name: folder.name
+        });
+        currentTree = folder.children;
+      }
+    }
+
+    return breadcrumbParts;
+  }, [tree, currentFolderPath]);
+
+  const navigateIntoFolder = useCallback((folderUid) => {
+    setCurrentFolderPath((prev) => [...prev, folderUid]);
+    setSelectedFolderUid(folderUid);
+  }, []);
+
+  const goBack = useCallback(() => {
+    setCurrentFolderPath((prev) => {
+      if (prev.length > 0) {
+        return prev.slice(0, -1);
+      }
+      return prev;
+    });
+    setSelectedFolderUid(null);
+  }, []);
+
+  const navigateToRoot = useCallback(() => {
+    setCurrentFolderPath([]);
+    setSelectedFolderUid(null);
+  }, []);
+
+  const navigateToBreadcrumb = useCallback((index) => {
+    setCurrentFolderPath((prev) => prev.slice(0, index + 1));
+    setSelectedFolderUid(null);
+  }, []);
+
+  const getCurrentParentFolder = useCallback(() => {
+    if (currentFolderPath.length === 0) {
+      return null;
+    }
+    const lastFolderUid = currentFolderPath[currentFolderPath.length - 1];
+    const folder = findFolderByUidInTree(tree, lastFolderUid);
+    return folder ? folder.item : null;
+  }, [tree, currentFolderPath]);
+
+  const getCurrentSelectedFolder = useCallback(() => {
+    if (selectedFolderUid) {
+      const folder = findFolderByUidInTree(tree, selectedFolderUid);
+      return folder ? folder.item : null;
+    }
+    return null;
+  }, [tree, selectedFolderUid]);
+
+  const reset = useCallback(() => {
+    setCurrentFolderPath([]);
+    setSelectedFolderUid(null);
+  }, []);
+
+  return {
+    currentFolders,
+    breadcrumbs,
+    selectedFolderUid,
+    setSelectedFolderUid,
+    navigateIntoFolder,
+    goBack,
+    navigateToRoot,
+    navigateToBreadcrumb,
+    getCurrentParentFolder,
+    getCurrentSelectedFolder,
+    reset,
+    isAtRoot: currentFolderPath.length === 0
+  };
+};
+
+export default useCollectionFolderTree;