Merge branch 'dev' into cz/mergeAll

Makefile

@@ -168,6 +168,7 @@ build_and_install:
 
 build_frontend:
 	cd src/frontend && CI='' npm run build
+	rm -rf src/backend/base/langflow/frontend
 	cp -r src/frontend/build src/backend/base/langflow/frontend
 
 build:

src/frontend/package-lock.json

@@ -41,7 +41,6 @@
         "class-variance-authority": "^0.6.1",
         "clsx": "^1.2.1",
         "cmdk": "^1.0.0",
-        "debounce-promise": "^3.1.2",
         "dompurify": "^3.0.5",
         "dotenv": "^16.4.5",
         "emoji-regex": "^10.3.0",
@@ -53,6 +52,7 @@
         "million": "^3.0.6",
         "moment": "^2.29.4",
         "openseadragon": "^4.1.1",
+        "p-debounce": "^4.0.0",
         "playwright": "^1.42.0",
         "react": "^18.2.21",
         "react-ace": "^10.1.0",
@@ -5698,11 +5698,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/debounce-promise": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/debounce-promise/-/debounce-promise-3.1.2.tgz",
-      "integrity": "sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg=="
-    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -10051,6 +10046,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/p-debounce": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-debounce/-/p-debounce-4.0.0.tgz",
+      "integrity": "sha512-4Ispi9I9qYGO4lueiLDhe4q4iK5ERK8reLsuzH6BPaXn53EGaua8H66PXIFGrW897hwjXp+pVLrm/DLxN0RF0A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",

src/frontend/package.json

@@ -36,7 +36,6 @@
     "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
     "cmdk": "^1.0.0",
-    "debounce-promise": "^3.1.2",
     "dompurify": "^3.0.5",
     "dotenv": "^16.4.5",
     "emoji-regex": "^10.3.0",
@@ -48,6 +47,7 @@
     "million": "^3.0.6",
     "moment": "^2.29.4",
     "openseadragon": "^4.1.1",
+    "p-debounce": "^4.0.0",
     "playwright": "^1.42.0",
     "react": "^18.2.21",
     "react-ace": "^10.1.0",

src/frontend/src/components/headerComponent/index.tsx

@@ -81,14 +81,16 @@ export default function Header(): JSX.Element {
           <span className="ml-4 text-2xl">⛓️</span>
         </Link>
         {showArrowReturnIcon && (
-          <button
+          <Button
+            variant="none"
+            size="none"
             onClick={() => {
               checkForChanges();
               redirectToLastLocation();
             }}
           >
             <IconComponent name="ChevronLeft" className="w-4" />
-          </button>
+          </Button>
         )}
 
         <MenuBar />
@@ -186,7 +188,9 @@ export default function Header(): JSX.Element {
             <Separator orientation="vertical" />
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <button
+                <Button
+                  variant="none"
+                  size="none"
                   data-testid="user-profile-settings"
                   className={
                     "h-7 w-7 rounded-full focus-visible:outline-0 " +

src/frontend/src/components/sidebarComponent/index.tsx

@@ -12,7 +12,6 @@ type SidebarNavProps = {
     title: string;
     icon: React.ReactNode;
   }[];
-  handleOpenNewFolderModal?: () => void;
   handleChangeFolder?: (id: string) => void;
   handleEditFolder?: (item: FolderType) => void;
   handleDeleteFolder?: (item: FolderType) => void;

src/frontend/src/icons/BotMessageSquare/BotMessageSquare.jsx

@@ -6,9 +6,9 @@ const SvgBotMessageSquare = (props) => (
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
-    stroke-width="2"
+    strokeWidth="2"
-    stroke-linecap="round"
+    strokeLinecap="round"
-    stroke-linejoin="round"
+    strokeLinejoin="round"
     className="lucide lucide-bot-message-square"
     {...props}
   >

src/frontend/src/pages/MainPage/components/headerComponent/index.tsx

@@ -34,19 +34,14 @@ const HeaderComponent = ({
     <>
       <div className="flex w-full items-center justify-between gap-4">
         <div className="flex items-center justify-self-start">
-          <Button
+          <a onClick={handleClick} className="cursor-pointer text-sm">
-            variant="none"
-            size="none"
-            onClick={handleClick}
-            className="text-sm"
-          >
             <div className="flex items-center space-x-2">
               <Checkbox checked={!shouldSelectAll} id="terms" />
               <span className="label text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                 {shouldSelectAll ? "Select All" : "Unselect All"}
               </span>
             </div>
-          </Button>
+          </a>
         </div>
         <div className="flex items-center gap-2">
           <div>

src/frontend/src/pages/MainPage/components/myCollectionComponent/index.tsx

@@ -2,16 +2,15 @@ import ComponentsComponent from "../componentsComponent";
 import HeaderTabsSearchComponent from "./components/headerTabsSearchComponent";
 
 type MyCollectionComponentProps = {
-  key: string;
   type: string;
 };
 
-const MyCollectionComponent = ({ key, type }: MyCollectionComponentProps) => {
+const MyCollectionComponent = ({ type }: MyCollectionComponentProps) => {
   return (
     <>
       <HeaderTabsSearchComponent />
       <div className="mt-5 flex h-full flex-col">
-        <ComponentsComponent key={key} type={type} />
+        <ComponentsComponent key={type} type={type} />
       </div>
     </>
   );

src/frontend/src/pages/MainPage/pages/mainPage/index.tsx

@@ -16,7 +16,7 @@ import useDropdownOptions from "../../hooks/use-dropdown-options";
 export default function HomePage(): JSX.Element {
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId
+    (state) => state.setCurrentFlowId,
   );
 
   const location = useLocation();
@@ -67,10 +67,6 @@ export default function HomePage(): JSX.Element {
         <div className="flex h-full w-full space-y-8 md:flex-col lg:flex-row lg:space-x-8 lg:space-y-0">
           <aside className="flex h-fit w-fit flex-col space-y-6">
             <SidebarNav
-              handleOpenNewFolderModal={() => {
-                setFolderToEdit(null);
-                setOpenFolderModal(true);
-              }}
               items={[]}
               handleChangeFolder={(id: string) => {
                 navigate(`all/folder/${id}`, { state: { folderId: id } });

src/frontend/src/stores/flowsManagerStore.ts

@@ -1,5 +1,5 @@
-import * as debounce from "debounce-promise";
 import { cloneDeep } from "lodash";
+import pDebounce from "p-debounce";
 import { Edge, Node, Viewport, XYPosition } from "reactflow";
 import { create } from "zustand";
 import { SAVE_DEBOUNCE_TIME } from "../constants/constants";
@@ -128,7 +128,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     set({ saveLoading: true }); // set saveLoading true immediately
     return get().saveFlowDebounce(flow, silent); // call the debounced function directly
   },
-  saveFlowDebounce: debounce((flow: FlowType, silent?: boolean) => {
+  saveFlowDebounce: pDebounce((flow: FlowType, silent?: boolean) => {
     set({ saveLoading: true });
     return new Promise<void>((resolve, reject) => {
       updateFlowInDatabase(flow)

src/frontend/src/stores/foldersStore.tsx

@@ -42,10 +42,10 @@ export const useFolderStore = create<FoldersStoreType>((set, get) => ({
             get().setLoading(false);
             resolve();
           },
-          () => {
+          (error) => {
             set({ folders: [] });
             get().setLoading(false);
-            reject();
+            reject(error);
           },
         );
       }