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

refactor: Advanced Disclosure now opens when there's a search

Browse source
This commit is contained in:
ogabrielluiz 2024-06-04 17:24:09 -03:00
commit 84d6de5e74
4 changed files with 27 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
View file

@ -6,7 +6,7 @@ export default function DisclosureComponent({
button: { title, Icon, buttons = [] },
isChild = true,
children,
openDisc,
defaultOpen: openDisc,
}: DisclosureComponentType): JSX.Element {
return (
<Disclosure as="div" defaultOpen={openDisc} key={title}>

6
src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx
View file

@ -5,11 +5,11 @@ import { DisclosureComponentType } from "../../../../types/components";
export default function ParentDisclosureComponent({
button: { title, Icon, buttons = [] },
children,
openDisc,
defaultOpen,
testId,
}: DisclosureComponentType): JSX.Element {
return (
<Disclosure as="div" defaultOpen={openDisc} key={title}>
<Disclosure as="div" defaultOpen={defaultOpen} key={title}>
{({ open }) => (
<>
<div>
@ -30,7 +30,7 @@ export default function ParentDisclosureComponent({
<IconComponent
name="ChevronsUpDownIcon"
className={`${
open || openDisc ? "" : ""
open || defaultOpen ? "" : ""
} h-4 w-4 text-foreground`}
/>
</div>

36
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -42,7 +42,7 @@ export default function ExtraSidebar(): JSX.Element {
const [search, setSearch] = useState("");
function onDragStart(
event: React.DragEvent<any>,
data: { type: string; node?: APIClassType },
data: { type: string; node?: APIClassType }
): void {
//start drag event
var crt = event.currentTarget.cloneNode(true);
@ -68,7 +68,7 @@ export default function ExtraSidebar(): JSX.Element {
let keys = Object.keys(data[d]).filter(
(nd) =>
nd.toLowerCase().includes(e.toLowerCase()) ||
data[d][nd].display_name?.toLowerCase().includes(e.toLowerCase()),
data[d][nd].display_name?.toLowerCase().includes(e.toLowerCase())
);
keys.forEach((element) => {
ret[d][element] = data[d][element];
@ -135,7 +135,7 @@ export default function ExtraSidebar(): JSX.Element {
if (filtered.some((x) => x !== "")) {
let keys = Object.keys(dataClone[d]).filter((nd) =>
filtered.includes(nd),
filtered.includes(nd)
);
Object.keys(dataClone[d]).forEach((element) => {
if (!keys.includes(element)) {
@ -172,7 +172,7 @@ export default function ExtraSidebar(): JSX.Element {
if (filtered.some((x) => x !== "")) {
let keys = Object.keys(dataClone[d]).filter((nd) =>
filtered.includes(nd),
filtered.includes(nd)
);
Object.keys(dataClone[d]).forEach((element) => {
if (!keys.includes(element)) {
@ -201,7 +201,7 @@ export default function ExtraSidebar(): JSX.Element {
"extra-side-bar-buttons gap-[4px] text-sm font-semibold",
!hasApiKey || !validApiKey || !hasStore
? "button-disable cursor-default text-muted-foreground"
: "",
: ""
)}
>
<IconComponent
@ -210,14 +210,14 @@ export default function ExtraSidebar(): JSX.Element {
"-m-0.5 -ml-1 h-6 w-6",
!hasApiKey || !validApiKey || !hasStore
? "extra-side-bar-save-disable"
: "",
: ""
)}
/>
Share
</button>
</ShareModal>
),
[hasApiKey, validApiKey, currentFlow, hasStore],
[hasApiKey, validApiKey, currentFlow, hasStore]
);
const ExportMemo = useMemo(
@ -228,7 +228,7 @@ export default function ExtraSidebar(): JSX.Element {
</button>
</ExportModal>
),
[],
[]
);
const getIcon = useMemo(() => {
@ -294,7 +294,7 @@ export default function ExtraSidebar(): JSX.Element {
Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<>
<DisclosureComponent
openDisc={
defaultOpen={
getFilterEdge.length !== 0 || search.length !== 0
? true
: false
@ -312,8 +312,8 @@ export default function ExtraSidebar(): JSX.Element {
.sort((a, b) =>
sensitiveSort(
dataFilter[SBSectionName][a].display_name,
dataFilter[SBSectionName][b].display_name,
),
dataFilter[SBSectionName][b].display_name
)
)
.map((SBItemName: string, index) => (
<ShadTooltip
@ -357,11 +357,11 @@ export default function ExtraSidebar(): JSX.Element {
</>
) : (
<div key={index}></div>
),
)
)}{" "}
<ParentDisclosureComponent
openDisc={false}
key={"Advanced"}
defaultOpen={search.length !== 0}
key={`${search.length !== 0}-Advanced`}
button={{
title: "Advanced",
Icon: nodeIconsLucide.unknown,
@ -376,7 +376,7 @@ export default function ExtraSidebar(): JSX.Element {
<>
<DisclosureComponent
isChild={false}
openDisc={
defaultOpen={
getFilterEdge.length !== 0 || search.length !== 0
? true
: false
@ -394,8 +394,8 @@ export default function ExtraSidebar(): JSX.Element {
.sort((a, b) =>
sensitiveSort(
dataFilter[SBSectionName][a].display_name,
dataFilter[SBSectionName][b].display_name,
),
dataFilter[SBSectionName][b].display_name
)
)
.map((SBItemName: string, index) => (
<ShadTooltip
@ -469,7 +469,7 @@ export default function ExtraSidebar(): JSX.Element {
</>
) : (
<div key={index}></div>
),
)
)}
</ParentDisclosureComponent>
</div>

10
src/frontend/src/types/components/index.ts
View file

@ -161,7 +161,7 @@ export type FileComponentType = {
export type DisclosureComponentType = {
children: ReactNode;
openDisc: boolean;
defaultOpen: boolean;
isChild?: boolean;
button: {
title: string;
@ -530,7 +530,7 @@ export type nodeToolbarPropsType = {
updateNodeCode?: (
newNodeClass: APIClassType,
code: string,
name: string,
name: string
) => void;
setShowState: (show: boolean | SetStateAction<boolean>) => void;
isOutdated?: boolean;
@ -580,7 +580,7 @@ export type chatMessagePropsType = {
updateChat: (
chat: ChatMessageType,
message: string,
stream_url?: string,
stream_url?: string
) => void;
};
@ -672,12 +672,12 @@ export type codeTabsPropsType = {
value: string,
node: NodeType,
template: InputFieldType,
tweak: tweakType,
tweak: tweakType
) => string;
buildTweakObject?: (
tw: string,
changes: string | string[] | boolean | number | Object[] | Object,
template: InputFieldType,
template: InputFieldType
) => Promise<string | void>;
};
activeTweaks?: boolean;