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

fix: fixes react key error in browser on flow page for extra sidebar disclosure components (#2295)

Browse source 
Fixes key error in browser on flow page for extra sidebar disclosure components

Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>
This commit is contained in:
596050 2024-07-04 01:42:41 +01:00 • committed by GitHub
commit be21f2f95a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 62 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import { LinkIcon, SparklesIcon } from "lucide-react"; import { LinkIcon, SparklesIcon } from "lucide-react";
import { useEffect, useMemo, useState } from "react"; import { Fragment, useEffect, useMemo, useState } from "react";
import IconComponent from "../../../../components/genericIconComponent"; import IconComponent from "../../../../components/genericIconComponent";
import ShadTooltip from "../../../../components/shadTooltipComponent"; import ShadTooltip from "../../../../components/shadTooltipComponent";
import { Input } from "../../../../components/ui/input"; import { Input } from "../../../../components/ui/input";
@ -296,69 +296,65 @@ export default function ExtraSidebar(): JSX.Element {
.filter((x) => PRIORITY_SIDEBAR_ORDER.includes(x)) .filter((x) => PRIORITY_SIDEBAR_ORDER.includes(x))
.map((SBSectionName: keyof APIObjectType, index) => .map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? ( Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<> <DisclosureComponent
<DisclosureComponent defaultOpen={
defaultOpen={ getFilterEdge.length !== 0 || search.length !== 0
getFilterEdge.length !== 0 || search.length !== 0 ? true
? true : false
: false }
} isChild={false}
isChild={false} key={index + search + JSON.stringify(getFilterEdge)}
key={index + search + JSON.stringify(getFilterEdge)} button={{
button={{ title: nodeNames[SBSectionName] ?? nodeNames.unknown,
title: nodeNames[SBSectionName] ?? nodeNames.unknown, Icon:
Icon: nodeIconsLucide[SBSectionName] ?? nodeIconsLucide.unknown,
nodeIconsLucide[SBSectionName] ?? nodeIconsLucide.unknown, }}
}} >
> <div className="side-bar-components-gap">
<div className="side-bar-components-gap"> {Object.keys(dataFilter[SBSectionName])
{Object.keys(dataFilter[SBSectionName]) .sort((a, b) =>
.sort((a, b) => sensitiveSort(
sensitiveSort( dataFilter[SBSectionName][a].display_name,
dataFilter[SBSectionName][a].display_name, dataFilter[SBSectionName][b].display_name,
dataFilter[SBSectionName][b].display_name, ),
), )
) .map((SBItemName: string, index) => (
.map((SBItemName: string, index) => ( <ShadTooltip
<ShadTooltip content={
content={ dataFilter[SBSectionName][SBItemName].display_name
}
side="right"
key={index}
>
<SidebarDraggableComponent
sectionName={SBSectionName as string}
apiClass={dataFilter[SBSectionName][SBItemName]}
key={index + SBItemName}
onDragStart={(event) =>
onDragStart(event, {
//split type to remove type in nodes saved with same name removing it's
type: removeCountFromString(SBItemName),
node: dataFilter[SBSectionName][SBItemName],
})
}
color={nodeColors[SBSectionName]}
itemName={SBItemName}
//convert error to boolean
error={!!dataFilter[SBSectionName][SBItemName].error}
display_name={
dataFilter[SBSectionName][SBItemName].display_name dataFilter[SBSectionName][SBItemName].display_name
} }
side="right" official={
key={index} dataFilter[SBSectionName][SBItemName].official ===
> false
<SidebarDraggableComponent ? false
sectionName={SBSectionName as string} : true
apiClass={dataFilter[SBSectionName][SBItemName]} }
key={index + SBItemName} />
onDragStart={(event) => </ShadTooltip>
onDragStart(event, { ))}
//split type to remove type in nodes saved with same name removing it's </div>
type: removeCountFromString(SBItemName), </DisclosureComponent>
node: dataFilter[SBSectionName][SBItemName],
})
}
color={nodeColors[SBSectionName]}
itemName={SBItemName}
//convert error to boolean
error={
!!dataFilter[SBSectionName][SBItemName].error
}
display_name={
dataFilter[SBSectionName][SBItemName].display_name
}
official={
dataFilter[SBSectionName][SBItemName].official ===
false
? false
: true
}
/>
</ShadTooltip>
))}
</div>
</DisclosureComponent>
</>
) : ( ) : (
<div key={index}></div> <div key={index}></div>
), ),
@ -377,7 +373,9 @@ export default function ExtraSidebar(): JSX.Element {
.filter((x) => !PRIORITY_SIDEBAR_ORDER.includes(x)) .filter((x) => !PRIORITY_SIDEBAR_ORDER.includes(x))
.map((SBSectionName: keyof APIObjectType, index) => .map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? ( Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<> <Fragment
key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
>
<DisclosureComponent <DisclosureComponent
isChild={false} isChild={false}
defaultOpen={ defaultOpen={
@ -385,7 +383,6 @@ export default function ExtraSidebar(): JSX.Element {
? true ? true
: false : false
} }
key={index + search + JSON.stringify(getFilterEdge)}
button={{ button={{
title: nodeNames[SBSectionName] ?? nodeNames.unknown, title: nodeNames[SBSectionName] ?? nodeNames.unknown,
Icon: Icon:
@ -470,7 +467,7 @@ export default function ExtraSidebar(): JSX.Element {
</a> </a>
</> </>
)} )}
</> </Fragment>
) : ( ) : (
<div key={index}></div> <div key={index}></div>
), ),