jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: remove useSidebar to fix errors of SidebarWrapper when opening playground page (#4767)

Browse source 
* Added open to data of wrapper

* Fix PageComponent and Header to not use useSidebar anymore
This commit is contained in:
Lucas Oliveira 2024-11-21 21:43:58 -03:00 • committed by GitHub
commit 725a256285
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 7 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/frontend/src/components/ui/sidebar.tsx
View file

@ -131,6 +131,7 @@ const SidebarProvider = React.forwardRef<
"group/sidebar-wrapper flex h-full w-full text-foreground has-[[data-variant=inset]]:bg-background", "group/sidebar-wrapper flex h-full w-full text-foreground has-[[data-variant=inset]]:bg-background",
className, className,
)} )}
data-open={open}
ref={ref} ref={ref}
{...props} {...props}
> >

10
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -6,7 +6,7 @@ import CanvasControls, {
import FlowToolbar from "@/components/flowToolbarComponent"; import FlowToolbar from "@/components/flowToolbarComponent";
import ForwardedIconComponent from "@/components/genericIconComponent"; import ForwardedIconComponent from "@/components/genericIconComponent";
import LoadingComponent from "@/components/loadingComponent"; import LoadingComponent from "@/components/loadingComponent";
import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar"; import { SidebarTrigger } from "@/components/ui/sidebar";
import { import {
COLOR_OPTIONS, COLOR_OPTIONS,
NOTE_NODE_MIN_HEIGHT, NOTE_NODE_MIN_HEIGHT,
@ -504,8 +504,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
reactFlowWrapper.current?.style.setProperty("--selected", accentColor); reactFlowWrapper.current?.style.setProperty("--selected", accentColor);
}; };
const { open } = useSidebar();
useEffect(() => { useEffect(() => {
const handleGlobalMouseMove = (event) => { const handleGlobalMouseMove = (event) => {
if (isAddingNote) { if (isAddingNote) {
@ -592,9 +590,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
<Panel <Panel
className={cn( className={cn(
"react-flow__controls !m-2 flex gap-1.5 rounded-md border border-secondary-hover bg-background fill-foreground stroke-foreground p-1.5 text-primary shadow transition-all duration-300 [&>button]:border-0 [&>button]:bg-background hover:[&>button]:bg-accent", "react-flow__controls !m-2 flex gap-1.5 rounded-md border border-secondary-hover bg-background fill-foreground stroke-foreground p-1.5 text-primary shadow transition-all duration-300 [&>button]:border-0 [&>button]:bg-background hover:[&>button]:bg-accent",
open "pointer-events-auto opacity-100 group-data-[open=true]/sidebar-wrapper:pointer-events-none group-data-[open=true]/sidebar-wrapper:-translate-x-full group-data-[open=true]/sidebar-wrapper:opacity-0",
? "pointer-events-none -translate-x-full opacity-0"
: "pointer-events-auto opacity-100",
)} )}
position="top-left" position="top-left"
> >
@ -603,7 +599,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
name="PanelRightClose" name="PanelRightClose"
className="h-4 w-4" className="h-4 w-4"
/> />
Components <span className="text-foreground">Components</span>
</SidebarTrigger> </SidebarTrigger>
</Panel> </Panel>
<SelectionMenu <SelectionMenu

15
src/frontend/src/pages/MainPage/components/header/index.tsx
View file

@ -2,8 +2,7 @@ import ForwardedIconComponent from "@/components/genericIconComponent";
import ShadTooltip from "@/components/shadTooltipComponent"; import ShadTooltip from "@/components/shadTooltipComponent";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar"; import { SidebarTrigger } from "@/components/ui/sidebar";
import { cn } from "@/utils/utils";
import { debounce } from "lodash"; import { debounce } from "lodash";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
@ -29,7 +28,6 @@ const HeaderComponent = ({
isEmptyFolder, isEmptyFolder,
}: HeaderComponentProps) => { }: HeaderComponentProps) => {
const [debouncedSearch, setDebouncedSearch] = useState(""); const [debouncedSearch, setDebouncedSearch] = useState("");
const { open } = useSidebar();
// Debounce the setSearch function from the parent // Debounce the setSearch function from the parent
const debouncedSetSearch = useCallback( const debouncedSetSearch = useCallback(
@ -57,15 +55,8 @@ const HeaderComponent = ({
className="flex items-center pb-8 text-xl font-semibold" className="flex items-center pb-8 text-xl font-semibold"
data-testid="mainpage_title" data-testid="mainpage_title"
> >
<div <div className="h-7 w-10 transition-all group-data-[open=true]/sidebar-wrapper:md:w-0 lg:hidden">
className={cn("h-7 w-10 transition-all lg:hidden", open && "md:w-0")} <div className="relative left-0 opacity-100 transition-all group-data-[open=true]/sidebar-wrapper:md:opacity-0">
>
<div
className={cn(
"relative left-0 opacity-100 transition-all",
open ? "md:opacity-0" : "",
)}
>
<SidebarTrigger> <SidebarTrigger>
<ForwardedIconComponent <ForwardedIconComponent
name="PanelLeftOpen" name="PanelLeftOpen"