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

Apply Prettier formatting

Browse source
This commit is contained in:
anovazzi1 2024-06-21 21:17:28 +00:00 • committed by Gabriel Luiz Freitas Almeida
commit 8e0b6cdf68
10 changed files with 142 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/frontend/src/App.tsx
View file

@ -3,6 +3,7 @@ import { ErrorBoundary } from "react-error-boundary";
import { useNavigate } from "react-router-dom";
import "reactflow/dist/style.css";
import "./App.css";
import AlertDisplayArea from "./alerts/displayArea";
import ErrorAlert from "./alerts/error";
import NoticeAlert from "./alerts/notice";
import SuccessAlert from "./alerts/success";
@ -25,14 +26,12 @@ import useFlowsManagerStore from "./stores/flowsManagerStore";
import { useFolderStore } from "./stores/foldersStore";
import { useGlobalVariablesStore } from "./stores/globalVariablesStore/globalVariables";
import { useStoreStore } from "./stores/storeStore";
import AlertDisplayArea from "./alerts/displayArea";
export default function App() {
useTrackLastVisitedPath();
const [fetchError, setFetchError] = useState(false);
const isLoading = useFlowsManagerStore((state) => state.isLoading);
const { isAuthenticated, login, setUserData, setAutoLogin, getUser } =
useContext(AuthContext);
const setLoading = useAlertStore((state) => state.setLoading);
@ -200,7 +199,7 @@ export default function App() {
</ErrorBoundary>
<div></div>
<div className="app-div">
<AlertDisplayArea/>
<AlertDisplayArea />
</div>
</div>
);

82
src/frontend/src/alerts/displayArea/index.tsx
View file

@ -3,51 +3,49 @@ import ErrorAlert from "../error";
import NoticeAlert from "../notice";
import SuccessAlert from "../success";
export default function AlertDisplayArea(){
export default function AlertDisplayArea() {
const removeFromTempNotificationList = useAlertStore(
(state) => state.removeFromTempNotificationList,
);
const tempNotificationList = useAlertStore(
(state) => state.tempNotificationList,
);
const removeAlert = (id: string) => {
removeFromTempNotificationList(id);
};
const removeFromTempNotificationList = useAlertStore(
(state) => state.removeFromTempNotificationList,
);
const tempNotificationList = useAlertStore(
(state) => state.tempNotificationList,
);
const removeAlert = (id: string) => {
removeFromTempNotificationList(id);
};
return (
<div className="flex flex-col-reverse" style={{ zIndex: 999 }}>
{tempNotificationList.map((alert) => (
<div key={alert.id}>
{alert.type === "error" ? (
<ErrorAlert
return (
<div className="flex flex-col-reverse" style={{ zIndex: 999 }}>
{tempNotificationList.map((alert) => (
<div key={alert.id}>
{alert.type === "error" ? (
<ErrorAlert
key={alert.id}
title={alert.title}
list={alert.list}
id={alert.id}
removeAlert={removeAlert}
/>
) : alert.type === "notice" ? (
<NoticeAlert
key={alert.id}
title={alert.title}
link={alert.link}
id={alert.id}
removeAlert={removeAlert}
/>
) : (
alert.type === "success" && (
<SuccessAlert
key={alert.id}
title={alert.title}
list={alert.list}
id={alert.id}
removeAlert={removeAlert}
/>
) : alert.type === "notice" ? (
<NoticeAlert
key={alert.id}
title={alert.title}
link={alert.link}
id={alert.id}
removeAlert={removeAlert}
/>
) : (
alert.type === "success" && (
<SuccessAlert
key={alert.id}
title={alert.title}
id={alert.id}
removeAlert={removeAlert}
/>
)
)}
</div>
))}
</div>
)
}
)
)}
</div>
))}
</div>
);
}

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

@ -4,7 +4,7 @@ import TextModal from "../../modals/textModal";
export default function StringReader({
string,
setValue,
editable=false,
editable = false,
}: {
string: string;
setValue: (value: string) => void;

8
src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
View file

@ -51,7 +51,13 @@ export default function TableAutoCellRender({
</Badge>
);
} else {
return <StringReader editable={!!colDef?.onCellValueChanged} setValue={setValue!} string={value} />;
return (
<StringReader
editable={!!colDef?.onCellValueChanged}
setValue={setValue!}
string={value}
/>
);
}
case "number":
return <NumberReader number={value} />;

33
src/frontend/src/components/tableComponent/index.tsx
View file

@ -3,6 +3,7 @@ import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied
import { AgGridReact, AgGridReactProps } from "ag-grid-react";
import cloneDeep from "lodash";
import { ElementRef, forwardRef, useRef, useState } from "react";
import { boolean } from "zod";
import {
DEFAULT_TABLE_ALERT_MSG,
DEFAULT_TABLE_ALERT_TITLE,
@ -14,14 +15,20 @@ import ForwardedIconComponent from "../genericIconComponent";
import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
import TableOptions from "./components/TableOptions";
import resetGrid from "./utils/reset-grid-columns";
import { boolean } from "zod";
interface TableComponentProps extends AgGridReactProps {
columnDefs: NonNullable<AgGridReactProps["columnDefs"]>;
rowData: NonNullable<AgGridReactProps["rowData"]>;
alertTitle?: string;
alertDescription?: string;
editable?: boolean | string[] | {field: string, onUpdate: (value:any)=>void,editableCell:boolean}[];
editable?:
| boolean
| string[]
| {
field: string;
onUpdate: (value: any) => void;
editableCell: boolean;
}[];
pagination?: boolean;
onDelete?: () => void;
onDuplicate?: () => void;
@ -53,7 +60,8 @@ const TableComponent = forwardRef<
}
if (
(typeof props.editable === "boolean" && props.editable) ||
(Array.isArray(props.editable) && props.editable.every(field=>typeof field ==="string") &&
(Array.isArray(props.editable) &&
props.editable.every((field) => typeof field === "string") &&
(props.editable as Array<string>).includes(newCol.headerName ?? ""))
) {
newCol = {
@ -61,14 +69,23 @@ const TableComponent = forwardRef<
editable: true,
};
}
if(Array.isArray(props.editable) && props.editable.every(field=>typeof field ==="object")){
const field = (props.editable as Array<{field:string, onUpdate:(value:any)=>void,editableCell:boolean}>).find(field=>field.field===newCol.headerName);
if(field){
if (
Array.isArray(props.editable) &&
props.editable.every((field) => typeof field === "object")
) {
const field = (
props.editable as Array<{
field: string;
onUpdate: (value: any) => void;
editableCell: boolean;
}>
).find((field) => field.field === newCol.headerName);
if (field) {
newCol = {
...newCol,
editable: field.editableCell,
onCellValueChanged: (e)=>field.onUpdate(e)
}
onCellValueChanged: (e) => field.onUpdate(e),
};
}
}
return newCol;

12
src/frontend/src/modals/IOModal/components/SessionView/index.tsx
View file

@ -1,4 +1,9 @@
import { CellEditRequestEvent, NewValueParams, SelectionChangedEvent } from "ag-grid-community";
import {
CellEditRequestEvent,
NewValueParams,
SelectionChangedEvent,
} from "ag-grid-community";
import cloneDeep from "lodash/cloneDeep";
import { useState } from "react";
import TableComponent from "../../../../components/tableComponent";
import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
@ -6,7 +11,6 @@ import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/
import useAlertStore from "../../../../stores/alertStore";
import { useMessagesStore } from "../../../../stores/messagesStore";
import { messagesSorter } from "../../../../utils/utils";
import cloneDeep from "lodash/cloneDeep";
export default function SessionView({ rows }: { rows: Array<any> }) {
const columns = useMessagesStore((state) => state.columns);
@ -43,7 +47,9 @@ export default function SessionView({ rows }: { rows: Array<any> }) {
key={"sessionView"}
onDelete={handleRemoveMessages}
readOnlyEdit
editable={[{field:"text",onUpdate:handleUpdateMessage, editableCell:false}]}
editable={[
{ field: "text", onUpdate: handleUpdateMessage, editableCell: false },
]}
overlayNoRowsTemplate="No data available"
onSelectionChanged={(event: SelectionChangedEvent) => {
setSelectedRows(event.api.getSelectedRows().map((row) => row.index));

40
src/frontend/src/modals/textModal/components/textEditorArea/index.tsx
View file

@ -1,19 +1,31 @@
import { Textarea } from "../../../../components/ui/textarea";
const TextEditorArea = ({ left, value, onChange,readonly }: { left: boolean | undefined, value: any, onChange?: (string) => void; readonly:boolean}) => {
if (typeof value === "object" && Object.keys(value).includes("text")) {
value = value.text;
}
return (
<Textarea
readOnly={readonly}
className={`w-full custom-scroll ${left ? "min-h-32" : "h-full"}`}
placeholder={"Empty"}
// update to real value on flowPool
value={value}
onChange={(e) => { if (onChange) onChange(e.target.value) }}
/>
);
const TextEditorArea = ({
left,
value,
onChange,
readonly,
}: {
left: boolean | undefined;
value: any;
onChange?: (string) => void;
readonly: boolean;
}) => {
if (typeof value === "object" && Object.keys(value).includes("text")) {
value = value.text;
}
return (
<Textarea
readOnly={readonly}
className={`w-full custom-scroll ${left ? "min-h-32" : "h-full"}`}
placeholder={"Empty"}
// update to real value on flowPool
value={value}
onChange={(e) => {
if (onChange) onChange(e.target.value);
}}
/>
);
};
export default TextEditorArea;

26
src/frontend/src/modals/textModal/index.tsx
View file

@ -24,7 +24,7 @@ export default function TextModal({
children,
value,
setValue,
editable = false
editable = false,
}: {
children: JSX.Element;
value: string;
@ -48,18 +48,28 @@ export default function TextModal({
<BaseModal.Content>
<div className="flex h-full w-full flex-col transition-all">
<div className="h-[370px]">
<TextEditorArea readonly={!editable} onChange={(text) => setInternalValue(text)} value={internalValue} left={false} />
<TextEditorArea
readonly={!editable}
onChange={(text) => setInternalValue(text)}
value={internalValue}
left={false}
/>
</div>
</div>
</BaseModal.Content>
<BaseModal.Footer>
<div className="flex w-full justify-end gap-2 pt-2">
{editable && <Button className="flex gap-2 px-3" onClick={() => {
setValue(internalValue);
setOpen(false);
}}>
Save
</Button>}
{editable && (
<Button
className="flex gap-2 px-3"
onClick={() => {
setValue(internalValue);
setOpen(false);
}}
>
Save
</Button>
)}
<Button className="flex gap-2 px-3" onClick={() => setOpen(false)}>
Close
</Button>

8
src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
View file

@ -57,7 +57,13 @@ export default function MessagesPage() {
onCellEditRequest={(event) => {
handleUpdateMessage(event);
}}
editable={[{field:"text",onUpdate:handleUpdateMessage, editableCell:false}]}
editable={[
{
field: "text",
onUpdate: handleUpdateMessage,
editableCell: false,
},
]}
overlayNoRowsTemplate="No data available"
onSelectionChanged={(event: SelectionChangedEvent) => {
setSelectedRows(

8
src/frontend/src/shared/components/textOutputView/index.tsx
View file

@ -1,6 +1,12 @@
import { Textarea } from "../../../components/ui/textarea";
const TextOutputView = ({ left, value }:{left:boolean|undefined,value:any}) => {
const TextOutputView = ({
left,
value,
}: {
left: boolean | undefined;
value: any;
}) => {
if (typeof value === "object" && Object.keys(value).includes("text")) {
value = value.text;
}