fix: detect unsaved changes in FlowPage Component to enable save button when auto-save is off (nightly fix) (#7668)

src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx

@@ -21,7 +21,7 @@ import { UPLOAD_ERROR_ALERT } from "@/constants/alerts_constants";
 import { SAVED_HOVER } from "@/constants/constants";
 import { useGetRefreshFlowsQuery } from "@/controllers/API/queries/flows/use-get-refresh-flows-query";
 import { useGetFoldersQuery } from "@/controllers/API/queries/folders/use-get-folders";
-import { useUnsavedChanges } from "@/hooks/useUnsavedChanges";
+import { useUnsavedChanges } from "@/hooks/use-unsaved-changes";
 import ExportModal from "@/modals/exportModal";
 import FlowLogsModal from "@/modals/flowLogsModal";
 import FlowSettingsModal from "@/modals/flowSettingsModal";
@@ -535,7 +535,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
                 <p className="text-muted-foreground">
                   <a
                     href="https://docs.langflow.org/configuration-auto-save"
-                    className="text-primary underline"
+                    className="text-secondary underline"
                   >
                     Enable auto-saving
                   </a>{" "}

src/frontend/src/components/core/dropdownComponent/index.tsx

@@ -54,6 +54,7 @@ export default function Dropdown({
   dialogInputs,
   handleOnNewValue,
   toggle,
+  hasRefreshButton,
   ...baseInputProps
 }: BaseInputProps & DropDownComponent): JSX.Element {
   const validOptions = useMemo(
@@ -236,7 +237,10 @@ export default function Dropdown({
           )}
         >
           <span
-            className="flex w-full items-center gap-2 overflow-hidden"
+            className={cn(
+              "flex w-full items-center gap-2 overflow-hidden",
+              hasRefreshButton && "max-w-[11rem]",
+            )}
             data-testid={`value-dropdown-${id}`}
           >
             {optionsMetaData?.[

src/frontend/src/components/core/parameterRenderComponent/components/dropdownComponent/index.tsx

@@ -19,6 +19,7 @@ export default function DropdownComponent({
   toggle,
   toggleValue,
   toggleDisable,
+  hasRefreshButton,
   ...baseInputProps
 }: InputProps<string, DropDownComponentType>) {
   const onChange = (value: any, dbValue?: boolean, skipSnapshot?: boolean) => {
@@ -43,6 +44,7 @@ export default function DropdownComponent({
         name={name}
         dialogInputs={dialogInputs}
         handleOnNewValue={handleOnNewValue}
+        hasRefreshButton={hasRefreshButton}
         {...baseInputProps}
       />
       {toggle && toggleDisable !== true ? (

src/frontend/src/components/core/parameterRenderComponent/components/strRenderComponent/index.tsx

@@ -79,6 +79,7 @@ export function StrRenderComponent({
         toggle={templateData.toggle}
         toggleValue={templateData.toggle_value}
         toggleDisable={templateData.toggle_disable}
+        hasRefreshButton={templateData.refresh_button}
       />
     );
   }

src/frontend/src/hooks/use-unsaved-changes.ts

@@ -10,9 +10,5 @@ export function useUnsavedChanges() {
     return false;
   }
 
-  if ((currentFlow?.data?.nodes?.length ?? 0) > 0) {
-    return false;
-  }
-
   return customStringify(currentFlow) !== customStringify(savedFlow);
 }

src/frontend/src/modals/saveChangesModal/index.tsx

@@ -58,7 +58,7 @@ export function SaveChangesModal({
             Unsaved changes will be permanently lost.{" "}
             <a
               target="_blank"
-              className="underline"
+              className="text-secondary underline"
               href="https://docs.langflow.org/configuration-auto-save"
             >
               Enable auto-saving

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -17,7 +17,7 @@ import CustomLoader from "@/customization/components/custom-loader";
 import { track } from "@/customization/utils/analytics";
 import useAutoSaveFlow from "@/hooks/flows/use-autosave-flow";
 import useUploadFlow from "@/hooks/flows/use-upload-flow";
-import { useAddComponent } from "@/hooks/useAddComponent";
+import { useAddComponent } from "@/hooks/use-add-component";
 import { nodeColorsName } from "@/utils/styleUtils";
 import { cn, isSupportedNodeTypes } from "@/utils/utils";
 import {

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarDraggableComponent/index.tsx

@@ -2,7 +2,7 @@ import { convertTestName } from "@/components/common/storeCardComponent/utils/co
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import useDeleteFlow from "@/hooks/flows/use-delete-flow";
-import { useAddComponent } from "@/hooks/useAddComponent";
+import { useAddComponent } from "@/hooks/use-add-component";
 import { DragEventHandler, forwardRef, useRef, useState } from "react";
 import IconComponent, {
   ForwardedIconComponent,

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx

@@ -5,7 +5,7 @@ import {
   useSidebar,
 } from "@/components/ui/sidebar";
 import SkeletonGroup from "@/components/ui/skeletonGroup";
-import { useAddComponent } from "@/hooks/useAddComponent";
+import { useAddComponent } from "@/hooks/use-add-component";
 import { useShortcutsStore } from "@/stores/shortcuts";
 import { useStoreStore } from "@/stores/storeStore";
 import { checkChatInput, checkWebhookInput } from "@/utils/reactflowUtils";
@@ -43,8 +43,8 @@ const BUNDLES = SIDEBAR_BUNDLES;
 
 interface FlowSidebarComponentProps {
   isLoading?: boolean;
-  showLegacy: boolean;
-  setShowLegacy: (value: boolean) => void;
+  showLegacy?: boolean;
+  setShowLegacy?: (value: boolean) => void;
 }
 
 export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {