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

format code

Browse source
This commit is contained in:
anovazzi1 2023-08-14 12:53:08 -03:00
commit 1f528072b9
14 changed files with 138 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,11 +11,11 @@ import SuccessAlert from "./alerts/success";
import CrashErrorComponent from "./components/CrashErrorComponent"; import CrashErrorComponent from "./components/CrashErrorComponent";
import Header from "./components/headerComponent"; import Header from "./components/headerComponent";
import { alertContext } from "./contexts/alertContext"; import { alertContext } from "./contexts/alertContext";
import { AuthContext } from "./contexts/authContext";
import { locationContext } from "./contexts/locationContext"; import { locationContext } from "./contexts/locationContext";
import { TabsContext } from "./contexts/tabsContext"; import { TabsContext } from "./contexts/tabsContext";
import Router from "./routes";
import { AuthContext } from "./contexts/authContext";
import { getLoggedUser } from "./controllers/API"; import { getLoggedUser } from "./controllers/API";
import Router from "./routes";
export default function App() { export default function App() {
let { setCurrent, setShowSideBar, setIsStackedOpen } = let { setCurrent, setShowSideBar, setIsStackedOpen } =
@ -130,15 +130,16 @@ export default function App() {
//this function is to get the user logged in when the page is refreshed //this function is to get the user logged in when the page is refreshed
const { setUserData, getAuthentication } = useContext(AuthContext); const { setUserData, getAuthentication } = useContext(AuthContext);
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
if(getAuthentication && !isLoginPage){ if (getAuthentication && !isLoginPage) {
getLoggedUser().then((user) => { getLoggedUser()
.then((user) => {
setUserData(user); setUserData(user);
}).catch((error) => {}); })
} .catch((error) => {});
}, 1000); }
},[]); }, 1000);
}, []);
return ( return (
//need parent component with width and height //need parent component with width and height

13
src/frontend/src/components/PaginatorComponent/index.tsx
View file

@ -17,12 +17,9 @@ export default function PaginatorComponent({
totalRowsCount = 0, totalRowsCount = 0,
paginate, paginate,
}: PaginatorComponentType) { }: PaginatorComponentType) {
const [size, setPageSize] = useState(pageSize); const [size, setPageSize] = useState(pageSize);
const [index, setPageIndex] = useState(pageIndex); const [index, setPageIndex] = useState(pageIndex);
const [maxIndex, setMaxPageIndex] = useState( const [maxIndex, setMaxPageIndex] = useState(100);
100
);
return ( return (
<> <>
@ -51,11 +48,11 @@ export default function PaginatorComponent({
</Select> </Select>
</div> </div>
<div className="flex w-[100px] items-center justify-center text-sm font-medium"> <div className="flex w-[100px] items-center justify-center text-sm font-medium">
Page {index+1} of {maxIndex} Page {index + 1} of {maxIndex}
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Button <Button
disabled={index <= 0} disabled={index <= 0}
variant="outline" variant="outline"
className="hidden h-8 w-8 p-0 lg:flex" className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => { onClick={() => {
@ -81,7 +78,7 @@ export default function PaginatorComponent({
<IconComponent name="ChevronLeft" className="h-4 w-4" /> <IconComponent name="ChevronLeft" className="h-4 w-4" />
</Button> </Button>
<Button <Button
disabled={maxIndex === index} disabled={maxIndex === index}
onClick={() => { onClick={() => {
setPageIndex(index + 1); setPageIndex(index + 1);
paginate(size, index + 1); paginate(size, index + 1);
@ -93,7 +90,7 @@ export default function PaginatorComponent({
<IconComponent name="ChevronRight" className="h-4 w-4" /> <IconComponent name="ChevronRight" className="h-4 w-4" />
</Button> </Button>
<Button <Button
disabled={maxIndex === index} disabled={maxIndex === index}
variant="outline" variant="outline"
className="hidden h-8 w-8 p-0 lg:flex" className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => { onClick={() => {

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

@ -6,7 +6,7 @@ export const ProtectedLoginRoute = ({ children }) => {
const { getAuthentication } = useContext(AuthContext); const { getAuthentication } = useContext(AuthContext);
if (getAuthentication()) { if (getAuthentication()) {
window.location.replace('/'); window.location.replace("/");
return <Navigate to="/" replace />; return <Navigate to="/" replace />;
} }

30
src/frontend/src/components/genericIconComponent/index.tsx
View file

@ -1,21 +1,19 @@
import React, { forwardRef } from 'react'; import { forwardRef } from "react";
import { IconComponentProps } from "../../types/components"; import { IconComponentProps } from "../../types/components";
import { nodeIconsLucide } from "../../utils/styleUtils"; import { nodeIconsLucide } from "../../utils/styleUtils";
const ForwardedIconComponent = forwardRef(({ const ForwardedIconComponent = forwardRef(
name, ({ name, className, iconColor }: IconComponentProps, ref) => {
className, const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
iconColor, return (
}: IconComponentProps, ref) => { <TargetIcon
const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"]; strokeWidth={1.5}
return ( className={className}
<TargetIcon style={{ color: iconColor }}
strokeWidth={1.5} ref={ref}
className={className} />
style={{ color: iconColor }} );
ref={ref} }
/> );
);
});
export default ForwardedIconComponent; export default ForwardedIconComponent;

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

@ -4,6 +4,7 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
import AlertDropdown from "../../alerts/alertDropDown"; import AlertDropdown from "../../alerts/alertDropDown";
import { USER_PROJECTS_HEADER } from "../../constants/constants"; import { USER_PROJECTS_HEADER } from "../../constants/constants";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { AuthContext } from "../../contexts/authContext";
import { darkContext } from "../../contexts/darkContext"; import { darkContext } from "../../contexts/darkContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import { getRepoStars } from "../../controllers/API"; import { getRepoStars } from "../../controllers/API";
@ -11,7 +12,6 @@ import IconComponent from "../genericIconComponent";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { Separator } from "../ui/separator"; import { Separator } from "../ui/separator";
import MenuBar from "./components/menuBar"; import MenuBar from "./components/menuBar";
import { AuthContext } from "../../contexts/authContext";
export default function Header() { export default function Header() {
const { flows, tabId } = useContext(TabsContext); const { flows, tabId } = useContext(TabsContext);
@ -37,13 +37,14 @@ export default function Header() {
<Link to="/"> <Link to="/">
<span className="ml-4 text-2xl">⛓️</span> <span className="ml-4 text-2xl">⛓️</span>
</Link> </Link>
<Button <Button
onClick={() => { onClick={() => {
logout(); logout();
navigate("/login"); navigate("/login");
}}
}} variant="outline"
variant="outline" className=""> className=""
>
Sign out Sign out
</Button> </Button>
{flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && ( {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (

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

@ -507,7 +507,7 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [
"/api/v1/validate/code", "/api/v1/validate/code",
"/api/v1/custom_component", "/api/v1/custom_component",
"/api/v1/validate/prompt", "/api/v1/validate/prompt",
"http://localhost:7860/login" "http://localhost:7860/login",
]; ];
export const CONTROL_INPUT_STATE = { export const CONTROL_INPUT_STATE = {
@ -609,4 +609,4 @@ export function tabsArray(codes: string[], method: number) {
]; ];
} }
export const BASE_URL_API = "http://localhost:7860/"; export const BASE_URL_API = "http://localhost:7860/";

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

@ -3,38 +3,36 @@ import { ReactFlowProvider } from "reactflow";
import { TooltipProvider } from "../components/ui/tooltip"; import { TooltipProvider } from "../components/ui/tooltip";
import { SSEProvider } from "./SSEContext"; import { SSEProvider } from "./SSEContext";
import { AlertProvider } from "./alertContext"; import { AlertProvider } from "./alertContext";
import { AuthProvider } from "./authContext";
import { DarkProvider } from "./darkContext"; import { DarkProvider } from "./darkContext";
import { LocationProvider } from "./locationContext"; import { LocationProvider } from "./locationContext";
import { TabsProvider } from "./tabsContext"; import { TabsProvider } from "./tabsContext";
import { TypesProvider } from "./typesContext"; import { TypesProvider } from "./typesContext";
import { UndoRedoProvider } from "./undoRedoContext"; import { UndoRedoProvider } from "./undoRedoContext";
import { AuthProvider } from "./authContext";
export default function ContextWrapper({ children }: { children: ReactNode }) { export default function ContextWrapper({ children }: { children: ReactNode }) {
//element to wrap all context //element to wrap all context
return ( return (
<> <>
<AuthProvider> <AuthProvider>
<TooltipProvider>
<TooltipProvider> <ReactFlowProvider>
<ReactFlowProvider> <DarkProvider>
<DarkProvider> <TypesProvider>
<TypesProvider> <LocationProvider>
<LocationProvider> <AlertProvider>
<AlertProvider> <SSEProvider>
<SSEProvider> <TabsProvider>
<TabsProvider> <UndoRedoProvider>{children}</UndoRedoProvider>
<UndoRedoProvider>{children}</UndoRedoProvider> </TabsProvider>
</TabsProvider> </SSEProvider>
</SSEProvider> </AlertProvider>
</AlertProvider> </LocationProvider>
</LocationProvider> </TypesProvider>
</TypesProvider> </DarkProvider>
</DarkProvider> </ReactFlowProvider>
</ReactFlowProvider> </TooltipProvider>
</TooltipProvider>
</AuthProvider> </AuthProvider>
</> </>
); );
} }

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

@ -1,11 +1,10 @@
import axios, { AxiosError, AxiosInstance } from "axios"; import axios, { AxiosError, AxiosInstance } from "axios";
import { useContext, useEffect } from "react"; import { useContext, useEffect } from "react";
import { Cookies } from "react-cookie";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { renewAccessToken } from "."; import { renewAccessToken } from ".";
import { URL_EXCLUDED_FROM_ERROR_RETRIES } from "../../constants/constants";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { AuthContext } from "../../contexts/authContext"; import { AuthContext } from "../../contexts/authContext";
import { Cookies } from "react-cookie";
// Create a new Axios instance // Create a new Axios instance
const api: AxiosInstance = axios.create({ const api: AxiosInstance = axios.create({
@ -14,23 +13,23 @@ const api: AxiosInstance = axios.create({
function ApiInterceptor() { function ApiInterceptor() {
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);
let { accessToken, login, logout, authenticationErrorCount } = useContext(AuthContext); let { accessToken, login, logout, authenticationErrorCount } =
useContext(AuthContext);
const navigate = useNavigate(); const navigate = useNavigate();
const cookies = new Cookies(); const cookies = new Cookies();
console.log(accessToken); console.log(accessToken);
useEffect(() => { useEffect(() => {
const interceptor = api.interceptors.response.use( const interceptor = api.interceptors.response.use(
(response) => response, (response) => response,
async (error: AxiosError) => { async (error: AxiosError) => {
if (error.response?.status === 401) { if (error.response?.status === 401) {
const refreshToken = cookies.get('refresh_token'); const refreshToken = cookies.get("refresh_token");
if (refreshToken) { if (refreshToken) {
authenticationErrorCount = authenticationErrorCount + 1; authenticationErrorCount = authenticationErrorCount + 1;
if(authenticationErrorCount > 3){ if (authenticationErrorCount > 3) {
authenticationErrorCount = 0; authenticationErrorCount = 0;
logout(); logout();
navigate("/login"); navigate("/login");
@ -39,7 +38,7 @@ function ApiInterceptor() {
const res = await renewAccessToken(refreshToken); const res = await renewAccessToken(refreshToken);
login(res.data.access_token, res.data.refresh_token); login(res.data.access_token, res.data.refresh_token);
try { try {
const accessToken = cookies.get('access_token'); const accessToken = cookies.get("access_token");
delete error.config.headers["Authorization"]; delete error.config.headers["Authorization"];
error.config.headers["Authorization"] = `Bearer ${accessToken}`; error.config.headers["Authorization"] = `Bearer ${accessToken}`;
const response = await axios.request(error.config); const response = await axios.request(error.config);
@ -50,15 +49,13 @@ function ApiInterceptor() {
navigate("/login"); navigate("/login");
} }
} }
} } else {
else{
logout(); logout();
navigate("/login"); navigate("/login");
} }
} } else {
else{
// if (URL_EXCLUDED_FROM_ERROR_RETRIES.includes(error.config?.url)) { // if (URL_EXCLUDED_FROM_ERROR_RETRIES.includes(error.config?.url)) {
return Promise.reject(error); return Promise.reject(error);
// } // }
} }
// else { // else {

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

@ -1,5 +1,6 @@
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
import { ReactFlowJsonObject } from "reactflow"; import { ReactFlowJsonObject } from "reactflow";
import { BASE_URL_API } from "../../constants/constants";
import { api } from "../../controllers/API/api"; import { api } from "../../controllers/API/api";
import { import {
APIObjectType, APIObjectType,
@ -17,8 +18,6 @@ import {
UploadFileTypeAPI, UploadFileTypeAPI,
errorsTypeAPI, errorsTypeAPI,
} from "./../../types/api/index"; } from "./../../types/api/index";
import { BASE_URL_API } from "../../constants/constants";
/** /**
* Fetches all objects from the API endpoint. * Fetches all objects from the API endpoint.
@ -390,7 +389,6 @@ export async function renewAccessToken(token: string) {
export async function getLoggedUser(): Promise<Users> { export async function getLoggedUser(): Promise<Users> {
try { try {
const res = await api.get(`${BASE_URL_API}user`); const res = await api.get(`${BASE_URL_API}user`);
if (res.status === 200) { if (res.status === 200) {

94
src/frontend/src/modals/UserManagementModal/index.tsx
View file

@ -4,6 +4,7 @@ import { useContext, useEffect, useState } from "react";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox"; import { Checkbox } from "../../components/ui/checkbox";
import { CONTROL_NEW_USER } from "../../constants/constants"; import { CONTROL_NEW_USER } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext";
import { import {
UserInputType, UserInputType,
UserManagementType, UserManagementType,
@ -11,7 +12,6 @@ import {
} from "../../types/components"; } from "../../types/components";
import { nodeIconsLucide } from "../../utils/styleUtils"; import { nodeIconsLucide } from "../../utils/styleUtils";
import BaseModal from "../baseModal"; import BaseModal from "../baseModal";
import { AuthContext } from "../../contexts/authContext";
export default function UserManagementModal({ export default function UserManagementModal({
title, title,
@ -24,7 +24,6 @@ export default function UserManagementModal({
index, index,
onConfirm, onConfirm,
}: UserManagementType) { }: UserManagementType) {
const Icon: any = nodeIconsLucide[icon]; const Icon: any = nodeIconsLucide[icon];
const [pwdVisible, setPwdVisible] = useState(false); const [pwdVisible, setPwdVisible] = useState(false);
const [confirmPwdVisible, setConfirmPwdVisible] = useState(false); const [confirmPwdVisible, setConfirmPwdVisible] = useState(false);
@ -35,11 +34,9 @@ export default function UserManagementModal({
const [isDisabled, setIsDisabled] = useState(data?.is_disabled ?? false); const [isDisabled, setIsDisabled] = useState(data?.is_disabled ?? false);
const [isSuperUser, setIsSuperUser] = useState(data?.is_superuser ?? false); const [isSuperUser, setIsSuperUser] = useState(data?.is_superuser ?? false);
const [inputState, setInputState] = useState<UserInputType>(CONTROL_NEW_USER); const [inputState, setInputState] = useState<UserInputType>(CONTROL_NEW_USER);
const { userData} = useContext(AuthContext); const { userData } = useContext(AuthContext);
console.log(userData);
console.log(userData);
function handleInput({ function handleInput({
target: { name, value }, target: { name, value },
@ -50,8 +47,7 @@ export default function UserManagementModal({
useEffect(() => { useEffect(() => {
if (!data) { if (!data) {
resetForm(); resetForm();
} } else {
else{
handleInput({ target: { name: "username", value: username } }); handleInput({ target: { name: "username", value: username } });
handleInput({ target: { name: "is_disabled", value: isDisabled } }); handleInput({ target: { name: "is_disabled", value: isDisabled } });
handleInput({ target: { name: "is_superuser", value: isSuperUser } }); handleInput({ target: { name: "is_superuser", value: isSuperUser } });
@ -138,16 +134,18 @@ export default function UserManagementModal({
</span> </span>
{pwdVisible && ( {pwdVisible && (
<Eye <Eye
onClick={() => setPwdVisible(!pwdVisible)} onClick={() => setPwdVisible(!pwdVisible)}
className="h-5 cursor-pointer" strokeWidth={1.5} /> className="h-5 cursor-pointer"
strokeWidth={1.5}
/>
)} )}
{!pwdVisible && (
{!pwdVisible && (
<EyeOff <EyeOff
onClick={() => setPwdVisible(!pwdVisible)} onClick={() => setPwdVisible(!pwdVisible)}
className="h-5 cursor-pointer" strokeWidth={1.5} /> className="h-5 cursor-pointer"
strokeWidth={1.5}
/>
)} )}
</Form.Label> </Form.Label>
</div> </div>
<Form.Control asChild> <Form.Control asChild>
@ -194,14 +192,21 @@ export default function UserManagementModal({
</span> </span>
{confirmPwdVisible && ( {confirmPwdVisible && (
<Eye <Eye
onClick={() => setConfirmPwdVisible(!confirmPwdVisible)} onClick={() =>
className="h-5 cursor-pointer" strokeWidth={1.5} /> setConfirmPwdVisible(!confirmPwdVisible)
}
className="h-5 cursor-pointer"
strokeWidth={1.5}
/>
)} )}
{!confirmPwdVisible && (
{!confirmPwdVisible && (
<EyeOff <EyeOff
onClick={() => setConfirmPwdVisible(!confirmPwdVisible)} onClick={() =>
className="h-5 cursor-pointer" strokeWidth={1.5} /> setConfirmPwdVisible(!confirmPwdVisible)
}
className="h-5 cursor-pointer"
strokeWidth={1.5}
/>
)} )}
</Form.Label> </Form.Label>
</div> </div>
@ -242,30 +247,29 @@ export default function UserManagementModal({
</Form.Control> </Form.Control>
</div> </div>
</Form.Field> </Form.Field>
{userData?.is_superuser && ( {userData?.is_superuser && (
<Form.Field name="is_superuser"> <Form.Field name="is_superuser">
<div> <div>
<Form.Label className="data-[invalid]:label-invalid mr-3"> <Form.Label className="data-[invalid]:label-invalid mr-3">
Superuser Superuser
</Form.Label> </Form.Label>
<Form.Control asChild> <Form.Control asChild>
<Checkbox <Checkbox
checked={isSuperUser} checked={isSuperUser}
value={isSuperUser} value={isSuperUser}
id="is_superuser" id="is_superuser"
className="relative top-0.5" className="relative top-0.5"
onCheckedChange={(value) => { onCheckedChange={(value) => {
handleInput({ handleInput({
target: { name: "is_superuser", value }, target: { name: "is_superuser", value },
}); });
setIsSuperUser(value); setIsSuperUser(value);
}} }}
/> />
</Form.Control> </Form.Control>
</div> </div>
</Form.Field> </Form.Field>
)} )}
</div> </div>
</div> </div>

14
src/frontend/src/pages/AdminPage/LoginPage/index.tsx
View file

@ -47,15 +47,17 @@ export default function LoginAdminPage() {
}); });
} }
function getUser(){ function getUser() {
if(getAuthentication){ if (getAuthentication) {
setTimeout(() => { setTimeout(() => {
getLoggedUser().then((user) => { getLoggedUser()
setUserData(user); .then((user) => {
}).catch((error) => {}); setUserData(user);
})
.catch((error) => {});
}, 1000); }, 1000);
}
} }
}
return ( return (
<div className="flex h-full w-full flex-col items-center justify-center bg-muted"> <div className="flex h-full w-full flex-col items-center justify-center bg-muted">

19
src/frontend/src/pages/loginPage/index.tsx
View file

@ -1,7 +1,6 @@
import * as Form from "@radix-ui/react-form"; import * as Form from "@radix-ui/react-form";
import { useContext, useState } from "react"; import { useContext, useState } from "react";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import IconComponent from "../../components/genericIconComponent";
import InputComponent from "../../components/inputComponent"; import InputComponent from "../../components/inputComponent";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input"; import { Input } from "../../components/ui/input";
@ -49,15 +48,17 @@ export default function LoginPage(): JSX.Element {
}); });
} }
function getUser(){ function getUser() {
if(getAuthentication){ if (getAuthentication) {
setTimeout(() => { setTimeout(() => {
getLoggedUser().then((user) => { getLoggedUser()
setUserData(user); .then((user) => {
}).catch((error) => {}); setUserData(user);
})
.catch((error) => {});
}, 1000); }, 1000);
}
} }
}
return ( return (
<Form.Root <Form.Root
@ -126,9 +127,7 @@ export default function LoginPage(): JSX.Element {
</div> </div>
<div className="w-full"> <div className="w-full">
<Form.Submit asChild> <Form.Submit asChild>
<Button className="mr-3 mt-6 w-full"> <Button className="mr-3 mt-6 w-full">Sign in</Button>
Sign in
</Button>
</Form.Submit> </Form.Submit>
</div> </div>
<div className="w-full"> <div className="w-full">

1
src/frontend/src/pages/signUpPage/index.tsx
View file

@ -1,7 +1,6 @@
import * as Form from "@radix-ui/react-form"; import * as Form from "@radix-ui/react-form";
import { FormEvent, useState } from "react"; import { FormEvent, useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import IconComponent from "../../components/genericIconComponent";
import InputComponent from "../../components/inputComponent"; import InputComponent from "../../components/inputComponent";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input"; import { Input } from "../../components/ui/input";

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

@ -230,6 +230,6 @@ export type loginInputStateType = {
export type UserInputType = { export type UserInputType = {
username: string; username: string;
password: string; password: string;
is_disabled:boolean; is_disabled: boolean;
is_superuser: boolean; is_superuser: boolean;
}; };