Skip to content

Commit

Permalink
fix: console reported issues (#3660)
Browse files Browse the repository at this point in the history
* Added key to sidebar buttons

* Added key directrly to sidebar category

* Removed key definition on sidebar category

* Fix error of nested buttons on secretKeyModal

* Fix nested buttons on output modal

* Fix clip-path warning on components

* Fix components cannot be given refs on nodeOutputField

* Removed unused console.log

* Added key on profile pictures map

* Fixed hideOverlay being called when the table is destroyed

* Fixed valueFormatter error on Apply To Fields field on GlobalVariables page

* Updated headers on config page to ensure consistent design
  • Loading branch information
lucaseduoli authored Sep 2, 2024
1 parent 70af48c commit f2abb94
Show file tree
Hide file tree
Showing 14 changed files with 97 additions and 102 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,17 @@ import { useUpdateNodeInternals } from "reactflow";
import { default as IconComponent } from "../../../../components/genericIconComponent";
import ShadTooltip from "../../../../components/shadTooltipComponent";
import { Button } from "../../../../components/ui/button";
import { Case } from "../../../../shared/components/caseComponent";
import useFlowStore from "../../../../stores/flowStore";
import { useShortcutsStore } from "../../../../stores/shortcuts";
import { useTypesStore } from "../../../../stores/typesStore";
import {
NodeOutputFieldComponentType,
ParameterComponentType,
} from "../../../../types/components";
import { NodeOutputFieldComponentType } from "../../../../types/components";
import {
getGroupOutputNodeId,
scapedJSONStringfy,
} from "../../../../utils/reactflowUtils";
import {
classNames,
cn,
isThereModal,
logHasMessage,
logTypeIsError,
logTypeIsUnknown,
Expand Down Expand Up @@ -194,36 +189,38 @@ export default function NodeOutputField({
: "Please build the component first"
}
>
<OutputModal
disabled={!displayOutputPreview || unknownOutput}
nodeId={flowPoolId}
outputName={internalOutputName}
>
<Button
unstyled
<div>
<OutputModal
disabled={!displayOutputPreview || unknownOutput}
data-testid={`output-inspection-${title.toLowerCase()}`}
nodeId={flowPoolId}
outputName={internalOutputName}
>
{errorOutput ? (
<IconComponent
className={classNames(
"h-5 w-5 rounded-md text-status-red",
)}
name={"X"}
/>
) : (
<IconComponent
className={classNames(
"h-5 w-5 rounded-md",
displayOutputPreview && !unknownOutput
? "hover:text-medium-indigo"
: "cursor-not-allowed text-muted-foreground",
)}
name={"ScanEye"}
/>
)}
</Button>
</OutputModal>
<Button
unstyled
disabled={!displayOutputPreview || unknownOutput}
data-testid={`output-inspection-${title.toLowerCase()}`}
>
{errorOutput ? (
<IconComponent
className={classNames(
"h-5 w-5 rounded-md text-status-red",
)}
name={"X"}
/>
) : (
<IconComponent
className={classNames(
"h-5 w-5 rounded-md",
displayOutputPreview && !unknownOutput
? "hover:text-medium-indigo"
: "cursor-not-allowed text-muted-foreground",
)}
name={"ScanEye"}
/>
)}
</Button>
</OutputModal>
</div>
</ShadTooltip>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useState } from "react";
import { Button } from "../../../../components/ui/button";
import BaseModal from "../../../../modals/baseModal";
import SwitchOutputView from "./components/switchOutputView";

Expand Down Expand Up @@ -38,7 +37,7 @@ export default function OutputModal({
/>
</BaseModal.Content>
<BaseModal.Footer close></BaseModal.Footer>
<BaseModal.Trigger>{children}</BaseModal.Trigger>
<BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
</BaseModal>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ const SideBarButtonsComponent = ({
}: SideBarButtonsComponentProps) => {
return (
<div className="flex gap-2 overflow-auto lg:h-[70vh] lg:flex-col">
{items.map((item) => (
<CustomLink to={item.href!}>
{items.map((item, index) => (
<CustomLink key={index} to={item.href!}>
<div
key={item.title}
data-testid={`sidebar-nav-${item.title}`}
Expand Down
4 changes: 3 additions & 1 deletion src/frontend/src/components/tableComponent/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,9 @@ const TableComponent = forwardRef<
}
}, 50);
setTimeout(() => {
realRef?.current?.api?.hideOverlay();
if (!realRef?.current?.api?.isDestroyed) {
realRef?.current?.api?.hideOverlay();
}
}, 1000);
if (props.onGridReady) props.onGridReady(params);
};
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/icons/AstraDB/AstraDB.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const AstraSVG = (props) => (
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clip-path="url(#clip0_702_1449)">
<g clipPath="url(#clip0_702_1449)">
{/* <rect width="96" height="96" rx="6" fill="white"/> */}
<path
d="M38.0469 33H12V62.1892H38.0469L44.5902 57.1406V38.0485L38.0469 33ZM17.0478 38.0485H39.5424V57.1459H17.0478V38.0485Z"
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/icons/Unstructured/Unstructured.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const SvgGoogleGenerativeAI = (props) => (
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clip-path="url(#clip0_6067_405)">
<g clipPath="url(#clip0_6067_405)">
<rect width="24" height="24" fill="#0ADDF8" />
<path
d="M14.2453 4.39688C13.9172 4.57031 13.7672 4.83281 13.7953 5.19375C13.8281 5.61563 14.0625 5.83125 14.6953 6.02344C15.2156 6.18281 15.3516 6.35156 15.1406 6.5625C14.9578 6.74531 14.5312 6.67031 14.2922 6.41719L14.1609 6.27656L13.9219 6.40781C13.7953 6.47813 13.6875 6.55313 13.6875 6.56719C13.6875 6.58125 13.7484 6.67969 13.8234 6.78281C14.0297 7.06875 14.3672 7.21875 14.7984 7.21875C15.4781 7.21875 15.8578 6.90469 15.8578 6.34688C15.8578 5.88281 15.6234 5.65313 14.9391 5.44688C14.4516 5.30156 14.3297 5.18906 14.4516 4.99688C14.4937 4.93594 14.5828 4.875 14.6484 4.85625C14.7984 4.81875 15.0937 4.89375 15.2437 5.01094L15.3562 5.10469L15.5766 4.95469C15.6937 4.87031 15.7969 4.78125 15.7969 4.75313C15.7969 4.72969 15.7406 4.65 15.6703 4.57969C15.3141 4.24219 14.6953 4.1625 14.2453 4.39688Z"
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/modals/secretKeyModal/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export default function SecretKeyModal({
open={open}
setOpen={setOpen}
>
<BaseModal.Trigger>{children}</BaseModal.Trigger>
<BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
<BaseModal.Header
description={
renderKey ? (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,68 +1,62 @@
import ShadTooltip from "@/components/shadTooltipComponent";
import { nodeColors, nodeIconsLucide, nodeNames } from "@/utils/styleUtils";
import { removeCountFromString } from "@/utils/utils";
import { Fragment } from "react/jsx-runtime";
import DisclosureComponent from "../../DisclosureComponent";
import SidebarDraggableComponent from "../sideBarDraggableComponent";
import sensitiveSort from "../utils/sensitive-sort";

export function SidebarCategoryComponent({
index,
search,
getFilterEdge,
category,
name,
onDragStart,
}) {
return (
<Fragment
key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
<DisclosureComponent
isChild={false}
defaultOpen={
getFilterEdge.length !== 0 || search.length !== 0 ? true : false
}
button={{
title: nodeNames[name] ?? nodeNames.unknown,
Icon: nodeIconsLucide[name] ?? nodeIconsLucide.unknown,
}}
>
<DisclosureComponent
isChild={false}
defaultOpen={
getFilterEdge.length !== 0 || search.length !== 0 ? true : false
}
button={{
title: nodeNames[name] ?? nodeNames.unknown,
Icon: nodeIconsLucide[name] ?? nodeIconsLucide.unknown,
}}
>
<div className="side-bar-components-gap">
{Object.keys(category)
.sort((a, b) =>
sensitiveSort(category[a].display_name, category[b].display_name),
)
.map((SBItemName: string, index) => (
<ShadTooltip
content={category[SBItemName].display_name}
side="right"
key={index}
>
<SidebarDraggableComponent
sectionName={name as string}
apiClass={category[SBItemName]}
key={index}
onDragStart={(event) =>
onDragStart(event, {
//split type to remove type in nodes saved with same name removing it's
type: removeCountFromString(SBItemName),
node: category[SBItemName],
})
}
color={nodeColors[name]}
itemName={SBItemName}
//convert error to boolean
error={!!category[SBItemName].error}
display_name={category[SBItemName].display_name}
official={
category[SBItemName].official === false ? false : true
}
/>
</ShadTooltip>
))}
</div>
</DisclosureComponent>
</Fragment>
<div className="side-bar-components-gap">
{Object.keys(category)
.sort((a, b) =>
sensitiveSort(category[a].display_name, category[b].display_name),
)
.map((SBItemName: string, idx) => (
<ShadTooltip
content={category[SBItemName].display_name}
side="right"
key={idx}
>
<SidebarDraggableComponent
sectionName={name as string}
apiClass={category[SBItemName]}
key={idx}
onDragStart={(event) =>
onDragStart(event, {
//split type to remove type in nodes saved with same name removing it's
type: removeCountFromString(SBItemName),
node: category[SBItemName],
})
}
color={nodeColors[name]}
itemName={SBItemName}
//convert error to boolean
error={!!category[SBItemName].error}
display_name={category[SBItemName].display_name}
official={
category[SBItemName].official === false ? false : true
}
/>
</ShadTooltip>
))}
</div>
</DisclosureComponent>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ export default function ExtraSidebar(): JSX.Element {
.map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<SidebarCategoryComponent
index={index}
key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
search={search}
getFilterEdge={getFilterEdge}
category={dataFilter[SBSectionName]}
Expand Down Expand Up @@ -264,7 +264,7 @@ export default function ExtraSidebar(): JSX.Element {
.map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<SidebarCategoryComponent
index={index}
key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
search={search}
getFilterEdge={getFilterEdge}
category={dataFilter[SBSectionName]}
Expand Down Expand Up @@ -324,7 +324,7 @@ export default function ExtraSidebar(): JSX.Element {
.map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<SidebarCategoryComponent
index={index}
key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
search={search}
getFilterEdge={getFilterEdge}
category={dataFilter[SBSectionName]}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ const TabsSearchComponent = ({
newLocation = location.replace(/.*\/(?:flows|components)/, "/all");
break;
}
console.log(newLocation);
navigate(newLocation);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const ApiKeyHeaderComponent = ({
}: ApiKeyHeaderComponentProps) => {
return (
<>
<div className="flex w-full items-center justify-between gap-4 space-y-0.5">
<div className="flex w-full items-start justify-between gap-6">
<div className="flex w-full flex-col">
<h2 className="flex items-center text-lg font-semibold tracking-tight">
Langflow API
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,16 @@ export default function ProfilePictureChooserComponent({
{loading || !imagesLoaded ? (
<Loading />
) : (
Object.keys(profilePictures!).map((folder, idx) => (
<div className="flex flex-col gap-2">
Object.keys(profilePictures!).map((folder, index) => (
<div className="flex flex-col gap-2" key={index}>
<div className="edit-flow-arrangement">
<span className="font-normal">{folder}</span>
</div>
<div className="block overflow-hidden">
<div className="flex items-center gap-1 overflow-x-auto rounded-lg bg-muted px-1 custom-scroll">
{profilePictures![folder].map((path, idx) => (
<Button
key={idx}
ref={value === folder + "/" + path ? ref : undefined}
unstyled
onClick={() => onChange(folder + "/" + path)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,9 @@ export default function GlobalVariablesPage() {
{
headerName: "Apply To Fields",
field: "default_fields",
valueFormatter: (params) => {
return params.value.join(", ");
},
flex: 1,
editable: false,
resizable: false,
Expand Down Expand Up @@ -92,7 +95,7 @@ export default function GlobalVariablesPage() {

return (
<div className="flex h-full w-full flex-col justify-between gap-6">
<div className="flex w-full items-center justify-between gap-4 space-y-0.5">
<div className="flex w-full items-start justify-between gap-6">
<div className="flex w-full flex-col">
<h2 className="flex items-center text-lg font-semibold tracking-tight">
Global Variables
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export default function ShortcutsPage() {

return (
<div className="flex h-full w-full flex-col gap-6">
<div className="flex w-full items-center justify-between gap-4 space-y-0.5">
<div className="flex w-full items-start justify-between gap-6">
<div className="flex w-full flex-col">
<h2 className="flex items-center text-lg font-semibold tracking-tight">
Shortcuts
Expand All @@ -71,7 +71,7 @@ export default function ShortcutsPage() {
</p>
</div>
<div>
<div className="align-end mb-4 flex w-full justify-end">
<div className="align-end flex w-full justify-end">
<div className="justify center flex items-center">
{open && (
<EditShortcutButton
Expand Down

0 comments on commit f2abb94

Please sign in to comment.