From 08f886f50704ac92fa350edbd0989e481d124686 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 10 Mar 2025 09:44:44 -0300 Subject: [PATCH] fix: React Console Warnings and Accessibility Issues in Langflow Frontend (#6950) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix errors on console jsx * ✨ (NodeOutputfield/index.tsx): Refactor InspectButton component to use forwardRef for better performance and maintainability ♻️ (NodeOutputfield/index.tsx): Refactor AlertDropdown component to use forwardRef for better performance and maintainability * 📝 (dialog.tsx): Add VisuallyHidden component for accessibility and improve semantics in DialogContent component 🔧 (dialog.tsx): Update DialogContent component to conditionally include VisuallyHidden component for DialogTitle 🔧 (dialog.tsx): Export VisuallyHidden component from dialog.tsx ♻️ (textAnimation.tsx): Refactor TextEffectPerChar component to use TextEffect component with per="char" and as="span" properties for consistency * ✨ (CustomEdges/index.tsx): Destructure props to extract specific properties and pass the rest as domSafeProps for cleaner code ♻️ (singleAlertComponent/index.tsx): Remove unnecessary aria-hidden attribute from IconComponent to improve accessibility and reduce redundancy * ✨ (index.tsx): introduce ShortUniqueId library to generate unique keys for alert items in the dropdown list * ✨ (frontend): add support for displaying a list of items in the NoticeAlert component 📝 (frontend): update NoticeAlertType interface to include a list property for displaying multiple items in the alert * ✨ (styleUtils.ts): introduce new icon PencilRuler to the list of nodeIconsLucide for use in the frontend styling utilities. --- src/frontend/src/CustomEdges/index.tsx | 17 +- .../components/NodeOutputfield/index.tsx | 98 ++++++----- .../components/singleAlertComponent/index.tsx | 26 +-- .../src/alerts/alertDropDown/index.tsx | 162 +++++++++--------- src/frontend/src/alerts/notice/index.tsx | 26 +-- src/frontend/src/components/ui/dialog.tsx | 83 ++++++--- .../src/components/ui/textAnimation.tsx | 11 +- .../src/icons/OpenRouter/OpenRouterIcon.jsx | 4 +- .../src/icons/ScrapeGraphAI/ScrapeGraphAI.jsx | 10 +- src/frontend/src/types/alerts/index.ts | 1 + src/frontend/src/utils/styleUtils.ts | 2 + 11 files changed, 243 insertions(+), 197 deletions(-) diff --git a/src/frontend/src/CustomEdges/index.tsx b/src/frontend/src/CustomEdges/index.tsx index 59db2d38b..32866d8bd 100644 --- a/src/frontend/src/CustomEdges/index.tsx +++ b/src/frontend/src/CustomEdges/index.tsx @@ -56,11 +56,26 @@ export function DefaultEdge({ targetY: targetYNew, }); + const { + animated, + selectable, + deletable, + sourcePosition, + targetPosition, + pathOptions, + selected, + ...domSafeProps + } = props; + return ( ); } diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx index ae4d86c88..d7945ad45 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx @@ -3,7 +3,14 @@ import { ICON_STROKE_WIDTH } from "@/constants/constants"; import { targetHandleType } from "@/types/flow"; import { useUpdateNodeInternals } from "@xyflow/react"; import { cloneDeep } from "lodash"; -import { memo, useCallback, useEffect, useMemo, useRef } from "react"; +import { + forwardRef, + memo, + useCallback, + useEffect, + useMemo, + useRef, +} from "react"; import ForwardedIconComponent, { default as IconComponent, } from "../../../../components/common/genericIconComponent"; @@ -96,49 +103,56 @@ const HideShowButton = memo( ); const InspectButton = memo( - ({ - disabled, - displayOutputPreview, - unknownOutput, - errorOutput, - isToolMode, - title, - onClick, - id, - }: { - disabled: boolean | undefined; - displayOutputPreview: boolean; - unknownOutput: boolean | undefined; - errorOutput: boolean; - isToolMode: boolean; - title: string; - onClick: () => void; - id: string; - }) => ( - + forwardRef( + ( + { + disabled, + displayOutputPreview, + unknownOutput, + errorOutput, + isToolMode, + title, + onClick, + id, + }: { + disabled: boolean | undefined; + displayOutputPreview: boolean; + unknownOutput: boolean | undefined; + errorOutput: boolean; + isToolMode: boolean; + title: string; + onClick: () => void; + id: string; + }, + ref: React.ForwardedRef, + ) => ( + + ), ), ); +InspectButton.displayName = "InspectButton"; const MemoizedOutputComponent = memo(OutputComponent); diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx index 32ebd57ea..7d9ca1c7a 100644 --- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx +++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx @@ -18,11 +18,7 @@ export default function SingleAlert({ key={dropItem.id} >
-

@@ -80,11 +76,7 @@ export default function SingleAlert({ className="inline-flex rounded-md p-1.5 text-status-red" > Dismiss -

@@ -95,11 +87,7 @@ export default function SingleAlert({ key={dropItem.id} >
-

@@ -131,11 +119,7 @@ export default function SingleAlert({ className="inline-flex rounded-md p-1.5 text-info-foreground" > Dismiss -

@@ -149,7 +133,6 @@ export default function SingleAlert({