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

Merge branch 'login' of github.com:logspace-ai/langflow into login

Browse source
This commit is contained in:
igorrCarvalho 2023-08-25 17:49:08 -03:00
commit 928d696751
117 changed files with 2629 additions and 1059 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,12 +9,18 @@ import ErrorAlert from "./alerts/error";
import NoticeAlert from "./alerts/notice";
import SuccessAlert from "./alerts/success";
import CrashErrorComponent from "./components/CrashErrorComponent";
import FetchErrorComponent from "./components/fetchErrorComponent";
import LoadingComponent from "./components/loadingComponent";
import {
FETCH_ERROR_DESCRIPION,
FETCH_ERROR_MESSAGE,
} from "./constants/constants";
import { alertContext } from "./contexts/alertContext";
import { AuthContext } from "./contexts/authContext";
import { locationContext } from "./contexts/locationContext";
import { TabsContext } from "./contexts/tabsContext";
import { autoLogin, getLoggedUser } from "./controllers/API";
import { typesContext } from "./contexts/typesContext";
import Router from "./routes";
export default function App() {
@ -43,6 +49,7 @@ export default function App() {
setLoading
} = useContext(alertContext);
const navigate = useNavigate();
const { fetchError } = useContext(typesContext);
// Initialize state variable for the list of alerts
const [alertsList, setAlertsList] = useState<
@ -134,7 +141,7 @@ export default function App() {
};
//this function is to get the user logged in when the page is refreshed
const { setUserData, getAuthentication, login, setAutoLogin, logout } =
const { setUserData, getAuthentication, login, setAutoLogin, logout, setIsAdmin } =
useContext(AuthContext);
useEffect(() => {
@ -154,6 +161,8 @@ export default function App() {
.then((user) => {
setUserData(user);
setLoading(false);
const isSuperUser = user.is_superuser;
setIsAdmin(isSuperUser);
})
.catch((error) => {});
}
@ -178,7 +187,14 @@ export default function App() {
>
{loading ? (
<div className="loading-page-panel">
<LoadingComponent remSize={50} />
{fetchError ? (
<FetchErrorComponent
description={FETCH_ERROR_DESCRIPION}
message={FETCH_ERROR_MESSAGE}
></FetchErrorComponent>
) : (
<LoadingComponent remSize={50} />
)}
</div>
) : (
<>

8
src/frontend/src/components/AccordionComponent/index.tsx
View file

@ -32,13 +32,6 @@ export default function AccordionComponent({
value === "" ? setValue(keyValue!) : setValue("");
}
const handleKeyDown = (event) => {
if (event.key === "Backspace") {
event.preventDefault();
event.stopPropagation();
}
};
return (
<>
<Accordion
@ -46,7 +39,6 @@ export default function AccordionComponent({
className="w-full"
value={value}
onValueChange={setValue}
onKeyDown={handleKeyDown}
>
<AccordionItem value={keyValue!} className="border-b">
<AccordionTrigger

5
src/frontend/src/components/chatComponent/buildTrigger/index.tsx
View file

@ -60,6 +60,11 @@ export default function BuildTrigger({
],
});
}
if (errors.length === 0 && allNodesValid) {
setSuccessData({
title: "Flow is ready to run",
});
}
} catch (error) {
console.error("Error:", error);
} finally {

127
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -28,8 +28,11 @@ import {
TabsList,
TabsTrigger,
} from "../../components/ui/tabs";
import { alertContext } from "../../contexts/alertContext";
import { darkContext } from "../../contexts/darkContext";
import { typesContext } from "../../contexts/typesContext";
import { codeTabsPropsType } from "../../types/components";
import { unselectAllNodes } from "../../utils/reactflowUtils";
import { classNames } from "../../utils/utils";
import IconComponent from "../genericIconComponent";
@ -45,6 +48,8 @@ export default function CodeTabsComponent({
const [data, setData] = useState(flow ? flow["data"]!["nodes"] : null);
const [openAccordion, setOpenAccordion] = useState<string[]>([]);
const { dark } = useContext(darkContext);
const { reactFlowInstance } = useContext(typesContext);
const { isTweakPage, setIsTweakPage } = useContext(alertContext);
useEffect(() => {
if (flow && flow["data"]!["nodes"]) {
@ -52,6 +57,19 @@ export default function CodeTabsComponent({
}
}, [flow]);
useEffect(() => {
unselectAllNodes({
data,
updateNodes: (nodes) => {
reactFlowInstance?.setNodes(nodes);
},
});
return () => {
if (isTweakPage) setIsTweakPage(false);
};
}, []);
const copyToClipboard = () => {
if (!navigator.clipboard || !navigator.clipboard.writeText) {
return;
@ -159,13 +177,13 @@ export default function CodeTabsComponent({
)}
</div>
{tabs.map((tab, index) => (
{tabs.map((tab, idx) => (
<TabsContent
value={index.toString()}
value={idx.toString()}
className="api-modal-tabs-content"
key={index} // Remember to add a unique key prop
key={idx} // Remember to add a unique key prop
>
{index < 4 ? (
{idx < 4 ? (
<>
{tab.description && (
<div
@ -181,7 +199,7 @@ export default function CodeTabsComponent({
{tab.code}
</SyntaxHighlighter>
</>
) : index === 4 ? (
) : idx === 4 ? (
<>
<div className="api-modal-according-display">
<div
@ -192,8 +210,8 @@ export default function CodeTabsComponent({
: "overflow-hidden"
)}
>
{data?.map((node: any, index) => (
<div className="px-3" key={index}>
{data?.map((node: any, i) => (
<div className="px-3" key={i}>
{tweaks?.tweaksList!.current.includes(
node["data"]["id"]
) && (
@ -236,10 +254,10 @@ export default function CodeTabsComponent({
node.data.node.template[templateField]
.type === "int")
)
.map((templateField, index) => {
.map((templateField, indx) => {
return (
<TableRow
key={index}
key={indx}
className="h-10 dark:border-b-muted"
>
<TableCell className="p-0 text-center text-sm text-foreground">
@ -277,13 +295,9 @@ export default function CodeTabsComponent({
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList!.find(
(obj) =>
obj.data.node
.template[
templateField
]
)!.data.node.template[
newInputList![
i
].data.node.template[
templateField
].value = target;
return newInputList;
@ -330,13 +344,9 @@ export default function CodeTabsComponent({
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList!.find(
(obj) =>
obj.data.node
.template[
templateField
]
)!.data.node.template[
newInputList![
i
].data.node.template[
templateField
].value = target;
return newInputList;
@ -379,13 +389,9 @@ export default function CodeTabsComponent({
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList!.find(
(obj) =>
obj.data.node
.template[
templateField
]
)!.data.node.template[
newInputList![
i
].data.node.template[
templateField
].value = target;
return newInputList;
@ -416,13 +422,9 @@ export default function CodeTabsComponent({
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList!.find(
(obj) =>
obj.data.node
.template[
templateField
]
)!.data.node.template[
newInputList![
i
].data.node.template[
templateField
].value = e;
return newInputList;
@ -511,13 +513,9 @@ export default function CodeTabsComponent({
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList!.find(
(obj) =>
obj.data.node
.template[
templateField
]
)!.data.node.template[
newInputList![
i
].data.node.template[
templateField
].value = target;
return newInputList;
@ -551,13 +549,9 @@ export default function CodeTabsComponent({
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList!.find(
(obj) =>
obj.data.node
.template[
templateField
]
)!.data.node.template[
newInputList![
i
].data.node.template[
templateField
].value = target;
return newInputList;
@ -607,14 +601,9 @@ export default function CodeTabsComponent({
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList!.find(
(obj) =>
obj.data.node
.template[
templateField
]
)!.data.node.template[
newInputList![
i
].data.node.template[
templateField
].value = target;
return newInputList;
@ -667,13 +656,9 @@ export default function CodeTabsComponent({
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList!.find(
(obj) =>
obj.data.node
.template[
templateField
]
)!.data.node.template[
newInputList![
i
].data.node.template[
templateField
].value = target;
return newInputList;
@ -726,13 +711,9 @@ export default function CodeTabsComponent({
setData((old) => {
let newInputList =
cloneDeep(old);
newInputList!.find(
(obj) =>
obj.data.node
.template[
templateField
]
)!.data.node.template[
newInputList![
i
].data.node.template[
templateField
].value = target;
return newInputList;

16
src/frontend/src/components/fetchErrorComponent/index.tsx Normal file
View file

@ -0,0 +1,16 @@
import { fetchErrorComponentType } from "../../types/components";
import IconComponent from "../genericIconComponent";
export default function FetchErrorComponent({
message,
description,
}: fetchErrorComponentType) {
return (
<div role="status" className="m-auto flex flex-col items-center">
<IconComponent className={`h-16 w-16`} name="Unplug"></IconComponent>
<br></br>
<span className="text-lg text-almost-medium-blue">{message}</span>
<span className="text-lg text-almost-medium-blue">{description}</span>
</div>
);
}

28
src/frontend/src/components/headerComponent/index.tsx
View file

@ -1,4 +1,4 @@
import { useContext, useEffect, useState } from "react";
import { useContext } from "react";
import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
import { Link, useLocation, useNavigate } from "react-router-dom";
import AlertDropdown from "../../alerts/alertDropDown";
@ -7,7 +7,6 @@ import { alertContext } from "../../contexts/alertContext";
import { AuthContext } from "../../contexts/authContext";
import { darkContext } from "../../contexts/darkContext";
import { TabsContext } from "../../contexts/tabsContext";
import { getRepoStars } from "../../controllers/API";
import IconComponent from "../genericIconComponent";
import { Button } from "../ui/button";
import { Separator } from "../ui/separator";
@ -44,22 +43,35 @@ export default function Header(): JSX.Element {
</Button>
)}
{autoLogin === false && (
<Button
<a
onClick={() => {
logout();
navigate("/login");
}}
variant="outline"
className=""
className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer mx-5"
>
Sign out
</Button>
</a>
)}
{location.pathname === "/admin" && (
<a
onClick={() => {
navigate("/");
}}
className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer"
>
Home
</a>
)}
{isAdmin && !autoLogin && location.pathname !== "/admin" && (
<Button variant="outline" onClick={() => navigate("/admin")}>
<a
className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer"
onClick={() => navigate("/admin")}
>
Admin page
</Button>
</a>
)}
</div>
<div className="round-button-div">

5
src/frontend/src/constants/constants.ts
View file

@ -615,8 +615,11 @@ export function tabsArray(codes: string[], method: number) {
},
];
}
export const FETCH_ERROR_MESSAGE = "Couldn't establish a connection.";
export const FETCH_ERROR_DESCRIPION =
"Check if everything is working properly and try again.";
export const BASE_URL_API = "http://localhost:7860/";
export const BASE_URL_API = "/api/v1/";
export const SIGN_UP_SUCCESS =
"Account created! Await admin activation. ";

5
src/frontend/src/contexts/alertContext.tsx
View file

@ -26,6 +26,8 @@ const initialValue: alertContextType = {
pushNotificationList: () => {},
clearNotificationList: () => {},
removeFromNotificationList: () => {},
isTweakPage: false,
setIsTweakPage: () => {},
};
export const alertContext = createContext<alertContextType>(initialValue);
@ -48,6 +50,7 @@ export function AlertProvider({ children }: { children: ReactNode }) {
const [successOpen, setSuccessOpen] = useState(false);
const [notificationCenter, setNotificationCenter] = useState(false);
const [notificationList, setNotificationList] = useState<AlertItemType[]>([]);
const [isTweakPage, setIsTweakPage] = useState<boolean>(false);
const pushNotificationList = (notification: AlertItemType) => {
setNotificationList((old) => {
let newNotificationList = _.cloneDeep(old);
@ -120,6 +123,8 @@ export function AlertProvider({ children }: { children: ReactNode }) {
return (
<alertContext.Provider
value={{
isTweakPage,
setIsTweakPage,
removeFromNotificationList,
clearNotificationList,
notificationList,

8
src/frontend/src/contexts/authContext.tsx
View file

@ -39,14 +39,6 @@ export function AuthProvider({ children }): React.ReactElement {
}
}, []);
useEffect(() => {
if (accessToken) {
getLoggedUser().then((user) => {
const isSuperUser = user.is_superuser;
setIsAdmin(isSuperUser);
});
}
}, [accessToken, isAdmin]);
function getAuthentication() {
const storedRefreshToken = cookies.get("refresh_token");

5
src/frontend/src/contexts/index.tsx
View file

@ -9,11 +9,14 @@ import { LocationProvider } from "./locationContext";
import { TabsProvider } from "./tabsContext";
import { TypesProvider } from "./typesContext";
import { UndoRedoProvider } from "./undoRedoContext";
import { BrowserRouter } from "react-router-dom";
import { ApiInterceptor } from "../controllers/API/api";
export default function ContextWrapper({ children }: { children: ReactNode }) {
//element to wrap all context
return (
<>
<BrowserRouter>
<AuthProvider>
<TooltipProvider>
<ReactFlowProvider>
@ -21,6 +24,7 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
<TypesProvider>
<LocationProvider>
<AlertProvider>
<ApiInterceptor />
<SSEProvider>
<TabsProvider>
<UndoRedoProvider>{children}</UndoRedoProvider>
@ -33,6 +37,7 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
</ReactFlowProvider>
</TooltipProvider>
</AuthProvider>
</BrowserRouter>
</>
);
}

6
src/frontend/src/contexts/tabsContext.tsx
View file

@ -30,6 +30,7 @@ import {
import { getRandomDescription, getRandomName } from "../utils/utils";
import { alertContext } from "./alertContext";
import { typesContext } from "./typesContext";
import { AxiosError } from "axios";
const uid = new ShortUniqueId({ length: 5 });
@ -68,7 +69,7 @@ export const TabsContext = createContext<TabsContextType>(
);
export function TabsProvider({ children }: { children: ReactNode }) {
const { setErrorData, setNoticeData } = useContext(alertContext);
const { setErrorData, setNoticeData, setSuccessData } = useContext(alertContext);
const [tabId, setTabId] = useState("");
@ -579,6 +580,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
const updatedFlow = await updateFlowInDatabase(newFlow);
if (updatedFlow) {
// updates flow in state
setSuccessData({ title: "Changes saved successfully" });
setFlows((prevState) => {
const newFlows = [...prevState];
const index = newFlows.findIndex((flow) => flow.id === newFlow.id);
@ -601,7 +603,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
});
}
} catch (err) {
setErrorData(err as errorsVarType);
setErrorData({title: "Error while saving changes",list:[(err as AxiosError).message]});
}
}

28
src/frontend/src/contexts/typesContext.tsx
View file

@ -6,7 +6,7 @@ import {
useState,
} from "react";
import { Node, ReactFlowInstance } from "reactflow";
import { getAll } from "../controllers/API";
import { getAll, getHealth } from "../controllers/API";
import { APIKindType } from "../types/api";
import { typesContextType } from "../types/typesContext";
import { alertContext } from "./alertContext";
@ -23,6 +23,8 @@ const initialValue: typesContextType = {
setTemplates: () => {},
data: {},
setData: () => {},
setFetchError: () => {},
fetchError: false,
};
export const typesContext = createContext<typesContextType>(initialValue);
@ -33,14 +35,10 @@ export function TypesProvider({ children }: { children: ReactNode }) {
useState<ReactFlowInstance | null>(null);
const [templates, setTemplates] = useState({});
const [data, setData] = useState({});
const [fetchError, setFetchError] = useState(false);
const { setLoading } = useContext(alertContext);
useEffect(() => {
let delay = 1000; // Start delay of 1 second
let intervalId: NodeJS.Timer;
let retryCount = 0; // Count of retry attempts
const maxRetryCount = 5; // Max retry attempts
// We will keep a flag to handle the case where the component is unmounted before the API call resolves.
let isMounted = true;
@ -48,7 +46,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
try {
const result = await getAll();
// Make sure to only update the state if the component is still mounted.
if (isMounted) {
if (isMounted && result?.status === 200) {
setLoading(false);
setData(result.data);
setTemplates(
@ -78,21 +76,15 @@ export function TypesProvider({ children }: { children: ReactNode }) {
}, {})
);
}
// Clear the interval if successful.
clearInterval(intervalId!);
} catch (error) {
console.error("An error has occurred while fetching types.");
await getHealth().catch((e) => {
setFetchError(true);
});
}
}
// Start the initial interval.
intervalId = setInterval(getTypes, delay);
return () => {
// This will clear the interval when the component unmounts, or when the dependencies of the useEffect hook change.
clearInterval(intervalId!);
// Indicate that the component has been unmounted.
isMounted = false;
};
getTypes();
}, []);
function deleteNode(idx: string) {
@ -117,6 +109,8 @@ export function TypesProvider({ children }: { children: ReactNode }) {
templates,
data,
setData,
fetchError,
setFetchError,
}}
>
{children}

5
src/frontend/src/controllers/API/api.tsx
View file

@ -24,7 +24,6 @@ function ApiInterceptor() {
async (error: AxiosError) => {
if (error.response?.status === 401) {
const refreshToken = cookies.get("refresh_token");
if (refreshToken) {
authenticationErrorCount = authenticationErrorCount + 1;
if (authenticationErrorCount > 3) {
@ -103,9 +102,5 @@ function ApiInterceptor() {
return null;
}
// Function to sleep for a given duration in milliseconds
function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
export { ApiInterceptor, api };

36
src/frontend/src/controllers/API/index.ts
View file

@ -25,7 +25,7 @@ import {
* @returns {Promise<AxiosResponse<APIObjectType>>} A promise that resolves to an AxiosResponse containing all the objects.
*/
export async function getAll(): Promise<AxiosResponse<APIObjectType>> {
return await api.get(`/api/v1/all`);
return await api.get(`${BASE_URL_API}all`);
}
const GITHUB_API_URL = "https://api.github.com";
@ -47,13 +47,13 @@ export async function getRepoStars(owner: string, repo: string) {
* @returns {AxiosResponse<any>} The API response.
*/
export async function sendAll(data: sendAllProps) {
return await api.post(`/api/v1/predict`, data);
return await api.post(`${BASE_URL_API}predict`, data);
}
export async function postValidateCode(
code: string
): Promise<AxiosResponse<errorsTypeAPI>> {
return await api.post("/api/v1/validate/code", { code });
return await api.post(`${BASE_URL_API}validate/code`, { code });
}
/**
@ -68,7 +68,7 @@ export async function postValidatePrompt(
template: string,
frontend_node: APIClassType
): Promise<AxiosResponse<PromptTypeAPI>> {
return await api.post("/api/v1/validate/prompt", {
return await api.post(`${BASE_URL_API}validate/prompt`, {
name: name,
template: template,
frontend_node: frontend_node,
@ -112,7 +112,7 @@ export async function saveFlowToDatabase(newFlow: {
style?: FlowStyleType;
}): Promise<FlowType> {
try {
const response = await api.post("/api/v1/flows/", {
const response = await api.post(`${BASE_URL_API}flows/`, {
name: newFlow.name,
data: newFlow.data,
description: newFlow.description,
@ -138,7 +138,7 @@ export async function updateFlowInDatabase(
updatedFlow: FlowType
): Promise<FlowType> {
try {
const response = await api.patch(`/api/v1/flows/${updatedFlow.id}`, {
const response = await api.patch(`${BASE_URL_API}flows/${updatedFlow.id}`, {
name: updatedFlow.name,
data: updatedFlow.data,
description: updatedFlow.description,
@ -162,7 +162,7 @@ export async function updateFlowInDatabase(
*/
export async function readFlowsFromDatabase() {
try {
const response = await api.get("/api/v1/flows/");
const response = await api.get(`${BASE_URL_API}flows/`);
if (response.status !== 200) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@ -175,7 +175,7 @@ export async function readFlowsFromDatabase() {
export async function downloadFlowsFromDatabase() {
try {
const response = await api.get("/api/v1/flows/download/");
const response = await api.get(`${BASE_URL_API}flows/download/`);
if (response.status !== 200) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@ -188,7 +188,7 @@ export async function downloadFlowsFromDatabase() {
export async function uploadFlowsToDatabase(flows: FormData) {
try {
const response = await api.post(`/api/v1/flows/upload/`, flows);
const response = await api.post(`${BASE_URL_API}flows/upload/`, flows);
if (response.status !== 201) {
throw new Error(`HTTP error! status: ${response.status}`);
@ -209,7 +209,7 @@ export async function uploadFlowsToDatabase(flows: FormData) {
*/
export async function deleteFlowFromDatabase(flowId: string) {
try {
const response = await api.delete(`/api/v1/flows/${flowId}`);
const response = await api.delete(`${BASE_URL_API}flows/${flowId}`);
if (response.status !== 200) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@ -229,7 +229,7 @@ export async function deleteFlowFromDatabase(flowId: string) {
*/
export async function getFlowFromDatabase(flowId: number) {
try {
const response = await api.get(`/api/v1/flows/${flowId}`);
const response = await api.get(`${BASE_URL_API}flows/${flowId}`);
if (response.status !== 200) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@ -248,7 +248,7 @@ export async function getFlowFromDatabase(flowId: number) {
*/
export async function getFlowStylesFromDatabase() {
try {
const response = await api.get("/api/v1/flow_styles/");
const response = await api.get(`${BASE_URL_API}flow_styles/`);
if (response.status !== 200) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@ -268,7 +268,7 @@ export async function getFlowStylesFromDatabase() {
*/
export async function saveFlowStyleToDatabase(flowStyle: FlowStyleType) {
try {
const response = await api.post("/api/v1/flow_styles/", flowStyle, {
const response = await api.post(`${BASE_URL_API}flow_styles/`, flowStyle, {
headers: {
accept: "application/json",
"Content-Type": "application/json",
@ -291,7 +291,7 @@ export async function saveFlowStyleToDatabase(flowStyle: FlowStyleType) {
* @returns {Promise<AxiosResponse<any>>} A promise that resolves to an AxiosResponse containing the version information.
*/
export async function getVersion() {
const respnose = await api.get("/api/v1/version");
const respnose = await api.get(`${BASE_URL_API}version`);
return respnose.data;
}
@ -313,7 +313,7 @@ export async function getHealth() {
export async function getBuildStatus(
flowId: string
): Promise<BuildStatusTypeAPI> {
return await api.get(`/api/v1/build/${flowId}/status`);
return await api.get(`${BASE_URL_API}build/${flowId}/status`);
}
//docs for postbuildinit
@ -326,7 +326,7 @@ export async function getBuildStatus(
export async function postBuildInit(
flow: FlowType
): Promise<AxiosResponse<InitTypeAPI>> {
return await api.post(`/api/v1/build/init/${flow.id}`, flow);
return await api.post(`${BASE_URL_API}build/init/${flow.id}`, flow);
}
// fetch(`/upload/${id}`, {
@ -344,14 +344,14 @@ export async function uploadFile(
): Promise<AxiosResponse<UploadFileTypeAPI>> {
const formData = new FormData();
formData.append("file", file);
return await api.post(`/api/v1/upload/${id}`, formData);
return await api.post(`${BASE_URL_API}upload/${id}`, formData);
}
export async function postCustomComponent(
code: string,
apiClass: APIClassType
): Promise<AxiosResponse<APIClassType>> {
return await api.post(`/api/v1/custom_component`, { code });
return await api.post(`${BASE_URL_API}custom_component`, { code });
}
export async function onLogin(user: LoginType) {

3
src/frontend/src/index.tsx
View file

@ -17,10 +17,7 @@ const root = ReactDOM.createRoot(
);
root.render(
<ContextWrapper>
<BrowserRouter>
<App />
<ApiInterceptor />
</BrowserRouter>
</ContextWrapper>
);
reportWebVitals();

5
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -28,7 +28,8 @@ export default function CodeAreaModal({
const { dark } = useContext(darkContext);
const { reactFlowInstance } = useContext(typesContext);
const [height, setHeight] = useState<string | null>(null);
const { setErrorData, setSuccessData } = useContext(alertContext);
const { setErrorData, setSuccessData, isTweakPage } =
useContext(alertContext);
const [error, setError] = useState<{
detail: { error: string | undefined; traceback: string | undefined };
} | null>(null);
@ -39,7 +40,7 @@ export default function CodeAreaModal({
if (dynamic && Object.keys(nodeClass!.template).length > 2) {
return;
}
processCode();
if (!isTweakPage) processCode();
}, []);
function processNonDynamicField() {

12
src/frontend/src/modals/flowSettingsModal/index.tsx
View file

@ -12,15 +12,14 @@ export default function FlowSettingsModal({
open,
setOpen,
}: FlowSettingsPropsType): JSX.Element {
const { setSuccessData } = useContext(alertContext);
const { flows, tabId, updateFlow, saveFlow } = useContext(TabsContext);
const flow = flows.find((f) => f.id === tabId);
useEffect(() => {
setName(flow.name);
setDescription(flow.description);
}, [flow.name, flow.description]);
const [name, setName] = useState(flow.name);
const [description, setDescription] = useState(flow.description);
setName(flow!.name);
setDescription(flow!.description);
}, [flow!.name, flow!.description]);
const [name, setName] = useState(flow!.name);
const [description, setDescription] = useState(flow!.description);
const [invalidName, setInvalidName] = useState(false);
function handleClick(): void {
@ -28,7 +27,6 @@ export default function FlowSettingsModal({
savedFlow!.name = name;
savedFlow!.description = description;
saveFlow(savedFlow!);
setSuccessData({ title: "Changes saved successfully" });
setOpen(false);
}
return (

4
src/frontend/src/pages/AdminPage/index.tsx
View file

@ -133,8 +133,6 @@ export default function AdminPage() {
updateUser(userId, userEdit)
.then((res) => {
console.log(res);
resetFilter();
setSuccessData({
title: "Success! User edited!",
@ -196,7 +194,7 @@ export default function AdminPage() {
Welcome back!
</h2>
<p className="text-muted-foreground">
Here&apos;s a list of all users!
Navigate through this section to efficiently oversee all application users. From here, you can seamlessly manage user accounts.
</p>
</div>
<div className="flex items-center space-x-2"></div>

9
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -21,7 +21,8 @@ export default function ExtraSidebar(): JSX.Element {
const { data, templates } = useContext(typesContext);
const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt } =
useContext(TabsContext);
const { setSuccessData, setErrorData } = useContext(alertContext);
const { setSuccessData, setErrorData, setIsTweakPage } =
useContext(alertContext);
const [dataFilter, setFilterData] = useState(data);
const [search, setSearch] = useState("");
const isPending = tabsState[tabId]?.isPending;
@ -100,7 +101,10 @@ export default function ExtraSidebar(): JSX.Element {
<div className="side-bar-button">
{flow && flow.data && (
<ApiModal flow={flow} disable={!isBuilt}>
<div className={classNames("extra-side-bar-buttons")}>
<div
className={classNames("extra-side-bar-buttons")}
onClick={() => setIsTweakPage(true)}
>
<IconComponent
name="Code2"
className={
@ -121,7 +125,6 @@ export default function ExtraSidebar(): JSX.Element {
}
onClick={(event) => {
saveFlow(flow!);
setSuccessData({ title: "Changes saved successfully" });
}}
>
<IconComponent

8
src/frontend/src/routes.tsx
View file

@ -88,9 +88,9 @@ const Router = () => {
<Route
path="/admin"
element={
<ProtectedAdminRoute>
<AdminPage />
</ProtectedAdminRoute>
}
/>
@ -106,9 +106,9 @@ const Router = () => {
<Route
path="api-keys"
element={
<ProtectedRoute>
<ProtectedAdminRoute>
<ApiKeysPage />
</ProtectedRoute>
</ProtectedAdminRoute>
}
></Route>
</Route>

6
src/frontend/src/types/components/index.ts
View file

@ -536,4 +536,8 @@ export type ApiKey = {
name: string;
created_at: string;
last_used_at: string;
};
};
export type fetchErrorComponentType = {
message: string;
description: string;
};

4
src/frontend/src/types/typesContext/index.ts
View file

@ -16,6 +16,8 @@ export type typesContextType = {
setTemplates: (newState: {}) => void;
data: APIDataType;
setData: (newState: {}) => void;
fetchError: boolean;
setFetchError: (newState: boolean) => void;
};
export type alertContextType = {
@ -39,6 +41,8 @@ export type alertContextType = {
removeFromNotificationList: (index: string) => void;
loading: boolean;
setLoading: (newState: boolean) => void;
isTweakPage: boolean;
setIsTweakPage: (newState: boolean) => void;
};
export type darkContextType = {

7
src/frontend/src/types/utils/reactflowUtils.ts
View file

@ -1,4 +1,4 @@
import { Edge } from "reactflow";
import { Edge, Node } from "reactflow";
import { NodeType } from "../flow";
export type cleanEdgesType = {
@ -8,3 +8,8 @@ export type cleanEdgesType = {
};
updateEdge: (edge: Edge[]) => void;
};
export type unselectAllNodesType = {
updateNodes: (nodes: Node[]) => void;
data: Node[] | null;
};

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

@ -2,13 +2,17 @@ import _ from "lodash";
import {
Connection,
Edge,
Node,
ReactFlowInstance,
ReactFlowJsonObject,
} from "reactflow";
import { specialCharsRegex } from "../constants/constants";
import { APITemplateType } from "../types/api";
import { FlowType, NodeType } from "../types/flow";
import { cleanEdgesType } from "../types/utils/reactflowUtils";
import {
cleanEdgesType,
unselectAllNodesType,
} from "../types/utils/reactflowUtils";
import { toNormalCase } from "./utils";
export function cleanEdges({
@ -55,6 +59,14 @@ export function cleanEdges({
updateEdge(newEdges);
}
export function unselectAllNodes({ updateNodes, data }: unselectAllNodesType) {
let newNodes = _.cloneDeep(data);
newNodes!.forEach((node: Node) => {
node.selected = false;
});
updateNodes(newNodes!);
}
export function isValidConnection(
{ source, target, sourceHandle, targetHandle }: Connection,
reactFlowInstance: ReactFlowInstance
@ -247,7 +259,6 @@ export function handleKeyDown(
inputValue: string | string[] | null,
block: string
) {
console.log(e, inputValue, block);
//condition to fix bug control+backspace on Windows/Linux
if (
(typeof inputValue === "string" &&

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

@ -62,6 +62,7 @@ import {
TerminalSquare,
Trash2,
Undo,
Unplug,
Upload,
UserCog2,
UserMinus2,
@ -297,5 +298,6 @@ export const nodeIconsLucide: iconsType = {
EyeOff,
Eye,
UserCog2,
Key
Key,
Unplug,
};