refactor: Small improvements to sidebar, customParams, and flowToolbar for easier DSLF merges (#4487)

* DSLF refactor

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx

@@ -129,6 +129,7 @@ export default function NodeInputField({
                   <span>
                     {getCustomParameterTitle({
                       title,
+                      nodeId: data.id,
                       isFlexView,
                     })}
                   </span>
@@ -141,6 +142,7 @@ export default function NodeInputField({
                     <span className="text-sm font-medium">
                       {getCustomParameterTitle({
                         title,
+                        nodeId: data.id,
                         isFlexView,
                       })}
                     </span>

src/frontend/src/components/flowToolbarComponent/index.tsx

@@ -1,5 +1,8 @@
 import ShadTooltip from "@/components/shadTooltipComponent";
-import { ENABLE_API } from "@/customization/feature-flags";
+import {
+  ENABLE_API,
+  ENABLE_LANGFLOW_STORE,
+} from "@/customization/feature-flags";
 import { track } from "@/customization/utils/analytics";
 import IOModal from "@/modals/IOModal/newModal";
 import { useEffect, useMemo, useState } from "react";
@@ -180,17 +183,19 @@ export default function FlowToolbar(): JSX.Element {
                 </div>
               </>
             )}
-            <div className="flex items-center gap-2">
+            {ENABLE_LANGFLOW_STORE && (
-              <div
+              <div className="flex items-center gap-2">
-                className={`side-bar-button ${
+                <div
-                  !hasApiKey || !validApiKey || !hasStore
+                  className={`side-bar-button ${
-                    ? "cursor-not-allowed"
+                    !hasApiKey || !validApiKey || !hasStore
-                    : "cursor-pointer"
+                      ? "cursor-not-allowed"
-                }`}
+                      : "cursor-pointer"
-              >
+                  }`}
-                {ModalMemo}
+                >
+                  {ModalMemo}
+                </div>
               </div>
-            </div>
+            )}
           </div>
         </div>
       </Panel>

src/frontend/src/components/ui/popover.tsx

@@ -6,6 +6,8 @@ import { cn } from "../../utils/utils";
 
 const Popover = PopoverPrimitive.Root;
 
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
@@ -44,4 +46,10 @@ const PopoverContentWithoutPortal = React.forwardRef<
 ));
 PopoverContentWithoutPortal.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverContent, PopoverContentWithoutPortal, PopoverTrigger };
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverContentWithoutPortal,
+  PopoverTrigger,
+};

src/frontend/src/components/ui/sidebar.tsx

@@ -213,7 +213,7 @@ const Sidebar = React.forwardRef<
         />
         <div
           className={cn(
-            "absolute inset-y-0 z-50 flex h-full transition-[left,right,width] duration-200 ease-linear",
+            "z-45 absolute inset-y-0 flex h-full transition-[left,right,width] duration-200 ease-linear",
             // Adjust width based on state and device
             "w-[--sidebar-width]",
             "max-sm:group-data-[state=collapsed]:w-[--sidebar-width-icon]",

src/frontend/src/customization/components/custom-parameter.tsx

@@ -47,9 +47,11 @@ export function CustomParameterComponent({
 
 export function getCustomParameterTitle({
   title,
+  nodeId,
   isFlexView,
 }: {
   title: string;
+  nodeId: string;
   isFlexView: boolean;
 }) {
   return (