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

Merge branch 'dev' into refactor/utils

Browse source
This commit is contained in:
cristhianzl 2024-05-23 11:02:04 -03:00
commit 1dccd33f48
26 changed files with 586 additions and 332 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/components/inputGlobalComponent/index.tsx
View file

@ -34,6 +34,7 @@ export default function InputGlobalComponent({
useEffect(() => {
if (data.node?.template[name])
if (
globalVariablesEntries &&
!globalVariablesEntries.includes(data.node?.template[name].value) &&
data.node?.template[name].load_from_db
) {
@ -138,6 +139,7 @@ export default function InputGlobalComponent({
)}
selectedOption={
data?.node?.template[name].load_from_db &&
globalVariablesEntries &&
globalVariablesEntries.includes(data?.node?.template[name].value ?? "")
? data?.node?.template[name].value
: ""

17
src/frontend/src/icons/Couchbase/Couchbase.jsx Normal file
View file

@ -0,0 +1,17 @@
const SvgCouchbaseIcon = (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
preserveAspectRatio="xMidYMid"
viewBox="0 0 256 256"
{...props}
>
<path
fill="#ED2226"
d="M128 0C57.426 0 0 57.233 0 128c0 70.574 57.233 128 128 128 70.574 0 128-57.233 128-128S198.574 0 128 0zm86.429 150.429c0 7.734-4.447 14.502-13.148 16.048-15.082 2.707-46.792 4.254-73.281 4.254-26.49 0-58.2-1.547-73.281-4.254-8.7-1.546-13.148-8.314-13.148-16.048v-49.885c0-7.734 5.994-14.888 13.148-16.049 4.447-.773 14.888-1.546 23.01-1.546 3.093 0 5.606 2.32 5.606 5.994v34.997l44.858-.967 44.858.967V88.943c0-3.674 2.514-5.994 5.608-5.994 8.12 0 18.562.773 23.009 1.546 7.347 1.16 13.148 8.315 13.148 16.049-.387 16.435-.387 33.257-.387 49.885z"
/>
</svg>
);
export default SvgCouchbaseIcon;

1
src/frontend/src/icons/Couchbase/couchbase.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" id="couchbase"><path fill="#ED2226" d="M128 0C57.426 0 0 57.233 0 128c0 70.574 57.233 128 128 128 70.574 0 128-57.233 128-128S198.574 0 128 0zm86.429 150.429c0 7.734-4.447 14.502-13.148 16.048-15.082 2.707-46.792 4.254-73.281 4.254-26.49 0-58.2-1.547-73.281-4.254-8.7-1.546-13.148-8.314-13.148-16.048v-49.885c0-7.734 5.994-14.888 13.148-16.049 4.447-.773 14.888-1.546 23.01-1.546 3.093 0 5.606 2.32 5.606 5.994v34.997l44.858-.967 44.858.967V88.943c0-3.674 2.514-5.994 5.608-5.994 8.12 0 18.562.773 23.009 1.546 7.347 1.16 13.148 8.315 13.148 16.049-.387 16.435-.387 33.257-.387 49.885z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 720 B

9
src/frontend/src/icons/Couchbase/index.tsx Normal file
View file

@ -0,0 +1,9 @@
import React, { forwardRef } from "react";
import SvgCouchbaseIcon from "./Couchbase";
export const CouchbaseIcon = forwardRef<
SVGSVGElement,
React.PropsWithChildren<{}>
>((props, ref) => {
return <SvgCouchbaseIcon ref={ref} {...props} />;
});

20
src/frontend/src/pages/MainPage/components/myCollectionComponent/components/headerTabsSearchComponent/index.tsx
View file

@ -19,6 +19,11 @@ const HeaderTabsSearchComponent = ({}: HeaderTabsSearchComponentProps) => {
const [tabActive, setTabActive] = useState("Flows");
const setErrorData = useAlertStore((state) => state.setErrorData);
const allFlows = useFlowsManagerStore((state) => state.allFlows);
const [inputValue, setInputValue] = useState("");
const setSearchFlowsComponents = useFlowsManagerStore(
(state) => state.setSearchFlowsComponents,
);
const handleDownloadFolder = () => {
if (allFlows.length === 0) {
@ -34,8 +39,19 @@ const HeaderTabsSearchComponent = ({}: HeaderTabsSearchComponentProps) => {
return (
<>
<div className="relative flex items-end gap-4">
<InputSearchComponent loading={isLoading} />
<InputSearchComponent
loading={isLoading}
value={inputValue}
onChange={(e) => {
setSearchFlowsComponents(e.target.value);
setInputValue(e.target.value);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
setSearchFlowsComponents(inputValue);
}
}}
/>
<TabsSearchComponent
tabsOptions={["All", "Flows", "Components"]}
setActiveTab={setTabActive}

39
src/frontend/src/pages/MainPage/components/myCollectionComponent/components/inputSearchComponent/index.tsx
View file

@ -1,22 +1,27 @@
import { useState } from "react";
import { ChangeEvent, KeyboardEvent } from "react";
import { Input } from "../../../../../../components/ui/input";
import useFlowsManagerStore from "../../../../../../stores/flowsManagerStore";
import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
type InputSearchComponentProps = {
loading: boolean;
divClasses?: string;
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
onClick?: () => void;
value: string;
onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
};
const InputSearchComponent = ({ loading }: InputSearchComponentProps) => {
const InputSearchComponent = ({
loading,
divClasses,
onChange,
onClick,
value,
onKeyDown,
}: InputSearchComponentProps) => {
const pagePath = window.location.pathname;
const [inputValue, setInputValue] = useState("");
const allFlows = useFlowsManagerStore((state) => state.allFlows);
const setSearchFlowsComponents = useFlowsManagerStore(
(state) => state.setSearchFlowsComponents,
);
const searchFlowsComponents = useFlowsManagerStore(
(state) => state.searchFlowsComponents,
);
@ -38,24 +43,18 @@ const InputSearchComponent = ({ loading }: InputSearchComponentProps) => {
return (
<>
<div className="relative h-12 w-[60%]">
<div className={`${divClasses ? divClasses : "relative h-12 w-[60%]"}`}>
<Input
data-testid="search-store-input"
disabled={disableInputSearch}
placeholder={getSearchPlaceholder()}
className="absolute h-12 pl-5 pr-12"
onChange={(e) => {
setSearchFlowsComponents(e.target.value);
setInputValue(e.target.value);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
setSearchFlowsComponents(inputValue);
}
}}
value={inputValue}
onChange={onChange}
onKeyDown={onKeyDown}
value={value}
/>
<button
onClick={onClick}
disabled={loading}
className="absolute bottom-0 right-4 top-0 my-auto h-6 cursor-pointer stroke-1 text-muted-foreground"
data-testid="search-store-button"

1
src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
View file

@ -55,6 +55,7 @@ export default function GlobalVariablesPage() {
name: string;
default_fields: string | undefined;
}> = [];
if (globalVariablesEntries === undefined) return;
globalVariablesEntries.forEach((entrie) => {
const globalVariableObj = globalVariables[entrie];
rows.push({

49
src/frontend/src/pages/StorePage/index.tsx
View file

@ -35,6 +35,7 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { useStoreStore } from "../../stores/storeStore";
import { storeComponent } from "../../types/store";
import { cn } from "../../utils/utils";
import InputSearchComponent from "../MainPage/components/myCollectionComponent/components/inputSearchComponent";
export default function StorePage(): JSX.Element {
const hasApiKey = useStoreStore((state) => state.hasApiKey);
@ -47,7 +48,7 @@ export default function StorePage(): JSX.Element {
const setErrorData = useAlertStore((state) => state.setErrorData);
const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId
(state) => state.setCurrentFlowId,
);
const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
const [loading, setLoading] = useState(true);
@ -144,7 +145,7 @@ export default function StorePage(): JSX.Element {
setTotalRowsCount(
filteredCategories?.length === 0
? Number(res?.count ?? 0)
: res?.results?.length ?? 0
: res?.results?.length ?? 0,
);
}
})
@ -187,7 +188,7 @@ export default function StorePage(): JSX.Element {
disabled={loading}
className={cn(
`${!validApiKey ? "animate-pulse border-error" : ""}`,
loading ? "cursor-not-allowed" : ""
loading ? "cursor-not-allowed" : "",
)}
variant="primary"
>
@ -202,36 +203,20 @@ export default function StorePage(): JSX.Element {
<div className="flex h-full w-full flex-col justify-between">
<div className="flex w-full flex-col gap-4 p-0">
<div className="flex items-end gap-4">
<div className="relative h-12 w-[40%]">
<Input
data-testid="search-store-input"
disabled={loading}
placeholder="Search Flows and Components"
className="absolute h-12 pl-5 pr-12"
onChange={(e) => {
setInputText(e.target.value);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
setSearchNow(uniqueId());
}
}}
value={inputText}
/>
<button
disabled={loading}
className="absolute bottom-0 right-4 top-0 my-auto h-6 cursor-pointer stroke-1 text-muted-foreground"
onClick={() => {
<InputSearchComponent
loading={loading}
divClasses="relative h-12 w-[40%]"
value={inputText}
onChange={(e) => setInputText(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") {
setSearchNow(uniqueId());
}}
data-testid="search-store-button"
>
<IconComponent
name={loading ? "Loader2" : "Search"}
className={loading ? " animate-spin cursor-not-allowed" : ""}
/>
</button>
</div>
}
}}
onClick={() => {
setSearchNow(uniqueId());
}}
/>
<div className="ml-4 flex w-full gap-2 border-b border-border">
<button
data-testid="all-button-store"

2
src/frontend/src/stores/globalVariablesStore/globalVariables.ts
View file

@ -13,7 +13,7 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
delete newFields[field];
set({ unavaliableFields: newFields });
},
globalVariablesEntries: [],
globalVariablesEntries: undefined,
globalVariables: {},
setGlobalVariables: (variables) => {
set({

2
src/frontend/src/types/zustand/globalVariables/index.ts
View file

@ -1,5 +1,5 @@
export type GlobalVariablesStore = {
globalVariablesEntries: Array<string>;
globalVariablesEntries: Array<string> | undefined;
globalVariables: {
[name: string]: {
id: string;

2
src/frontend/src/utils/styleUtils.ts
View file

@ -153,6 +153,7 @@ import { AzureIcon } from "../icons/Azure";
import { BingIcon } from "../icons/Bing";
import { BotMessageSquareIcon } from "../icons/BotMessageSquare";
import { ChromaIcon } from "../icons/ChromaIcon";
import { CouchbaseIcon } from "../icons/Couchbase";
import { CohereIcon } from "../icons/Cohere";
import { ElasticsearchIcon } from "../icons/ElasticsearchStore";
import { EvernoteIcon } from "../icons/Evernote";
@ -324,6 +325,7 @@ export const nodeIconsLucide: iconsType = {
Vectara: VectaraIcon,
ArrowUpToLine: ArrowUpToLine,
Chroma: ChromaIcon,
Couchbase: CouchbaseIcon,
AirbyteJSONLoader: AirbyteIcon,
AmazonBedrockEmbeddings: AWSIcon,
Amazon: AWSIcon,