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

fix: apply variables to fields automatically, remove password truncation from variable fields (#5031)

Browse source 
* Change default type to be Credential on Global Variabel Modal

* Removed clipping on input password

* Updated StrRenderComponent to receive display_name

* Updated InputGlobal and StrRender to receive display_name

* Update InputGlobalComponent to handle fields already applied

* Passed display name from strRender to inputglobal

* Update updateGroupRecursion to not need updateGlobalVariables since it's already dealt with by the InputGlobalComponent
This commit is contained in:
Lucas Oliveira 2024-12-05 17:46:49 -03:00 • committed by GitHub
commit 74a8ff5bea
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 32 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx
View file

@ -44,7 +44,7 @@ export default function GlobalVariableModal({
}): JSX.Element {
const [key, setKey] = useState(initialData?.name ?? "");
const [value, setValue] = useState(initialData?.value ?? "");
const [type, setType] = useState(initialData?.type ?? "Generic");
const [type, setType] = useState(initialData?.type ?? "Credential");
const [fields, setFields] = useState<string[]>(
initialData?.default_fields ?? [],
);

2
src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
View file

@ -134,7 +134,7 @@ const CustomInputPopover = ({
editNode && disabled && "h-fit w-fit",
disabled &&
"disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground",
password && "max-w-64 text-clip pr-14",
password && "text-clip pr-14",
)}
placeholder={
selectedOptions?.length > 0 || selectedOption ? "" : placeholder

21
src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx
View file

@ -2,6 +2,7 @@ import {
useDeleteGlobalVariables,
useGetGlobalVariables,
} from "@/controllers/API/queries/variables";
import { useGlobalVariablesStore } from "@/stores/globalVariablesStore/globalVariables";
import { useEffect } from "react";
import DeleteConfirmationModal from "../../../../../modals/deleteConfirmationModal";
import useAlertStore from "../../../../../stores/alertStore";
@ -14,6 +15,7 @@ import { InputGlobalComponentType, InputProps } from "../../types";
import InputComponent from "../inputComponent";
export default function InputGlobalComponent({
display_name,
disabled,
handleOnNewValue,
value,
@ -28,9 +30,12 @@ export default function InputGlobalComponent({
const { data: globalVariables } = useGetGlobalVariables();
const { mutate: mutateDeleteGlobalVariable } = useDeleteGlobalVariables();
const unavailableFields = useGlobalVariablesStore(
(state) => state.unavailableFields,
);
useEffect(() => {
if (globalVariables)
if (globalVariables) {
if (
load_from_db &&
!globalVariables.find((variable) => variable.name === value)
@ -40,7 +45,19 @@ export default function InputGlobalComponent({
{ skipSnapshot: true },
);
}
}, [globalVariables]);
if (
!load_from_db &&
value === "" &&
unavailableFields &&
Object.keys(unavailableFields).includes(display_name ?? "")
) {
handleOnNewValue(
{ value: unavailableFields[display_name ?? ""], load_from_db: true },
{ skipSnapshot: true },
);
}
}
}, [globalVariables, unavailableFields]);
async function handleDelete(key: string) {
if (!globalVariables) return;

7
src/frontend/src/components/core/parameterRenderComponent/components/strRenderComponent/index.tsx
View file

@ -6,11 +6,11 @@ import TextAreaComponent from "../textAreaComponent";
export function StrRenderComponent({
templateData,
name,
display_name,
placeholder,
...baseInputProps
}: InputProps<string, StrRenderComponentType>) {
const { handleOnNewValue, id, disabled, editNode, value, isToolMode } =
baseInputProps;
const { handleOnNewValue, id, isToolMode } = baseInputProps;
if (!templateData.options) {
return templateData.multiline ? (
@ -34,7 +34,8 @@ export function StrRenderComponent({
password={templateData.password}
load_from_db={templateData.load_from_db}
placeholder={placeholder}
id={"input-" + name}
display_name={display_name}
id={`input-${name}`}
isToolMode={isToolMode}
/>
);

1
src/frontend/src/components/core/parameterRenderComponent/index.tsx
View file

@ -96,6 +96,7 @@ export function ParameterRenderComponent({
{...baseInputProps}
templateData={templateData}
name={name}
display_name={templateData.display_name ?? ""}
editNode={editNode}
/>
);

2
src/frontend/src/components/core/parameterRenderComponent/types.ts
View file

@ -63,6 +63,7 @@ export type KeyPairListComponentType = {
export type StrRenderComponentType = {
templateData: Partial<InputFieldType>;
name: string;
display_name: string;
};
export type InputListComponentType = {
@ -84,6 +85,7 @@ export type TextAreaComponentType = {
export type InputGlobalComponentType = {
load_from_db: boolean | undefined;
password: boolean | undefined;
display_name: string;
};
export type MultiselectComponentType = {
options: string[];

14
src/frontend/src/hooks/flows/use-add-flow.ts
View file

@ -3,7 +3,6 @@ import { usePostAddFlow } from "@/controllers/API/queries/flows/use-post-add-flo
import useAlertStore from "@/stores/alertStore";
import useFlowsManagerStore from "@/stores/flowsManagerStore";
import { useFolderStore } from "@/stores/foldersStore";
import { useGlobalVariablesStore } from "@/stores/globalVariablesStore/globalVariables";
import { useTypesStore } from "@/stores/typesStore";
import { FlowType } from "@/types/flow";
import {
@ -19,12 +18,6 @@ import { useParams } from "react-router-dom";
import useDeleteFlow from "./use-delete-flow";
const useAddFlow = () => {
const unavaliableFields = useGlobalVariablesStore(
(state) => state.unavailableFields,
);
const globalVariablesEntries = useGlobalVariablesStore(
(state) => state.globalVariablesEntries,
);
const flows = useFlowsManagerStore((state) => state.flows);
const setFlows = useFlowsManagerStore((state) => state.setFlows);
const { deleteFlow } = useDeleteFlow();
@ -48,12 +41,7 @@ const useAddFlow = () => {
? await processDataFromFlow(flow)
: { nodes: [], edges: [], viewport: { zoom: 1, x: 0, y: 0 } };
flowData?.nodes.forEach((node) => {
updateGroupRecursion(
node,
flowData?.edges,
unavaliableFields,
globalVariablesEntries,
);
updateGroupRecursion(node, flowData?.edges);
});
// Create a new flow with a default name if no flow is provided.
if (params?.override && flow) {

8
src/frontend/src/stores/flowStore.ts
View file

@ -46,7 +46,6 @@ import { getInputsAndOutputs } from "../utils/storeUtils";
import useAlertStore from "./alertStore";
import { useDarkStore } from "./darkStore";
import useFlowsManagerStore from "./flowsManagerStore";
import { useGlobalVariablesStore } from "./globalVariablesStore/globalVariables";
import { useTypesStore } from "./typesStore";
// this is our useStore hook that we can use in our components to get parts of the store and call actions
@ -396,12 +395,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
id: newId,
},
};
updateGroupRecursion(
newNode,
selection.edges,
useGlobalVariablesStore.getState().unavailableFields,
useGlobalVariablesStore.getState().globalVariablesEntries,
);
updateGroupRecursion(newNode, selection.edges);
// Add the new node to the list of nodes in state
newNodes = newNodes

58
src/frontend/src/utils/reactflowUtils.ts
View file

@ -1625,30 +1625,11 @@ export function isOutputType(type: string): boolean {
return OUTPUT_TYPES.has(type);
}
export function updateGroupRecursion(
groupNode: NodeType,
edges: Edge[],
unavailableFields:
| {
[name: string]: string;
}
| undefined,
globalVariablesEntries: string[] | undefined,
) {
updateGlobalVariables(
groupNode.data.node,
unavailableFields,
globalVariablesEntries,
);
export function updateGroupRecursion(groupNode: NodeType, edges: Edge[]) {
if (groupNode.data.node?.flow) {
groupNode.data.node.flow.data!.nodes.forEach((node) => {
if (node.data.node?.flow) {
updateGroupRecursion(
node,
node.data.node.flow.data!.edges,
unavailableFields,
globalVariablesEntries,
);
updateGroupRecursion(node, node.data.node.flow.data!.edges);
}
});
let newFlow = groupNode.data.node!.flow;
@ -1660,41 +1641,6 @@ export function updateGroupRecursion(
}
}
export function updateGlobalVariables(
node: APIClassType | undefined,
unavailableFields:
| {
[name: string]: string;
}
| undefined,
globalVariablesEntries: string[] | undefined,
) {
if (node && node.template) {
Object.keys(node.template).forEach((field) => {
if (
globalVariablesEntries &&
node!.template[field].load_from_db &&
!globalVariablesEntries.includes(node!.template[field].value)
) {
node!.template[field].value = "";
node!.template[field].load_from_db = false;
}
if (
!node!.template[field].load_from_db &&
node!.template[field].value === "" &&
unavailableFields &&
Object.keys(unavailableFields).includes(
node!.template[field].display_name ?? "",
)
) {
node!.template[field].value =
unavailableFields[node!.template[field].display_name ?? ""];
node!.template[field].load_from_db = true;
}
});
}
}
export function getGroupOutputNodeId(
flow: FlowType,
p_name: string,