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 { LinkIcon, SparklesIcon } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { Fragment, useEffect, useMemo, useState } from "react";
import IconComponent from "../../../../components/genericIconComponent";
import ShadTooltip from "../../../../components/shadTooltipComponent";
import { Input } from "../../../../components/ui/input";
@ -296,69 +296,65 @@ export default function ExtraSidebar(): JSX.Element {
.filter((x) => PRIORITY_SIDEBAR_ORDER.includes(x))
.map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<>
<DisclosureComponent
defaultOpen={
getFilterEdge.length !== 0 || search.length !== 0
? true
: false
}
isChild={false}
key={index + search + JSON.stringify(getFilterEdge)}
button={{
title: nodeNames[SBSectionName] ?? nodeNames.unknown,
Icon:
nodeIconsLucide[SBSectionName] ?? nodeIconsLucide.unknown,
}}
>
<div className="side-bar-components-gap">
{Object.keys(dataFilter[SBSectionName])
.sort((a, b) =>
sensitiveSort(
dataFilter[SBSectionName][a].display_name,
dataFilter[SBSectionName][b].display_name,
),
)
.map((SBItemName: string, index) => (
<ShadTooltip
content={
<DisclosureComponent
defaultOpen={
getFilterEdge.length !== 0 || search.length !== 0
? true
: false
}
isChild={false}
key={index + search + JSON.stringify(getFilterEdge)}
button={{
title: nodeNames[SBSectionName] ?? nodeNames.unknown,
Icon:
nodeIconsLucide[SBSectionName] ?? nodeIconsLucide.unknown,
}}
>
<div className="side-bar-components-gap">
{Object.keys(dataFilter[SBSectionName])
.sort((a, b) =>
sensitiveSort(
dataFilter[SBSectionName][a].display_name,
dataFilter[SBSectionName][b].display_name,
),
)
.map((SBItemName: string, index) => (
<ShadTooltip
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
}
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
}
official={
dataFilter[SBSectionName][SBItemName].official ===
false
? false
: true
}
/>
</ShadTooltip>
))}
</div>
</DisclosureComponent>
</>
official={
dataFilter[SBSectionName][SBItemName].official ===
false
? false
: true
}
/>
</ShadTooltip>
))}
</div>
</DisclosureComponent>
) : (
<div key={index}></div>
),
@ -377,7 +373,9 @@ export default function ExtraSidebar(): JSX.Element {
.filter((x) => !PRIORITY_SIDEBAR_ORDER.includes(x))
.map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<>
<Fragment
key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
>
<DisclosureComponent
isChild={false}
defaultOpen={
@ -385,7 +383,6 @@ export default function ExtraSidebar(): JSX.Element {
? true
: false
}
key={index + search + JSON.stringify(getFilterEdge)}
button={{
title: nodeNames[SBSectionName] ?? nodeNames.unknown,
Icon:
@ -470,7 +467,7 @@ export default function ExtraSidebar(): JSX.Element {
</a>
</>
)}
</>
</Fragment>
) : (
<div key={index}></div>
),