From 5b75d44c3ecfc56d2c83bb814598f24d79039371 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 28 Aug 2023 20:41:54 -0300 Subject: [PATCH] Fix: remove admin page and signout on flow page --- .../components/PaginatorComponent/index.tsx | 2 +- .../src/components/authAdminGuard/index.tsx | 12 ++++++--- .../src/components/headerComponent/index.tsx | 25 +++++++++++-------- src/frontend/src/constants/constants.ts | 15 ++++++----- src/frontend/src/contexts/authContext.tsx | 1 - src/frontend/src/contexts/darkContext.tsx | 2 +- src/frontend/src/contexts/tabsContext.tsx | 20 +++++++-------- src/frontend/src/controllers/API/api.tsx | 1 - src/frontend/src/controllers/API/index.ts | 6 ++--- src/frontend/src/index.tsx | 4 +-- .../src/modals/SecretKeyModal/index.tsx | 5 ++-- .../src/modals/UserManagementModal/index.tsx | 3 +-- .../src/modals/flowSettingsModal/index.tsx | 1 - src/frontend/src/modals/formModal/index.tsx | 6 ++--- src/frontend/src/pages/AdminPage/index.tsx | 6 +++-- src/frontend/src/pages/ApiKeysPage/index.tsx | 20 +++++++++------ src/frontend/src/types/components/index.ts | 1 - 17 files changed, 69 insertions(+), 61 deletions(-) diff --git a/src/frontend/src/components/PaginatorComponent/index.tsx b/src/frontend/src/components/PaginatorComponent/index.tsx index 543daa6f6..5b285e031 100644 --- a/src/frontend/src/components/PaginatorComponent/index.tsx +++ b/src/frontend/src/components/PaginatorComponent/index.tsx @@ -27,7 +27,7 @@ export default function PaginatorComponent({ useEffect(() => { setMaxPageIndex(Math.ceil(totalRowsCount / size)); }, [totalRowsCount]); - + return ( <>
diff --git a/src/frontend/src/components/authAdminGuard/index.tsx b/src/frontend/src/components/authAdminGuard/index.tsx index 6a17c37e8..724d39f5a 100644 --- a/src/frontend/src/components/authAdminGuard/index.tsx +++ b/src/frontend/src/components/authAdminGuard/index.tsx @@ -3,8 +3,14 @@ import { Navigate } from "react-router-dom"; import { AuthContext } from "../../contexts/authContext"; export const ProtectedAdminRoute = ({ children }) => { - const { isAdmin, isAuthenticated, logout, getAuthentication, userData, autoLogin } = - useContext(AuthContext); + const { + isAdmin, + isAuthenticated, + logout, + getAuthentication, + userData, + autoLogin, + } = useContext(AuthContext); useEffect(() => { if (!isAuthenticated && !getAuthentication()) { window.location.replace("/login"); @@ -16,7 +22,7 @@ export const ProtectedAdminRoute = ({ children }) => { return ; } - if (userData && !isAdmin || autoLogin) { + if ((userData && !isAdmin) || autoLogin) { return ; } diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index a7856f133..b112cc743 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -31,28 +31,31 @@ export default function Header(): JSX.Element { {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && ( )} - {autoLogin === false && ( + {!autoLogin && location.pathname !== `/flow/${tabId}` && ( )} - {isAdmin && !autoLogin && location.pathname !== "/admin" && ( - - )} + {isAdmin && + !autoLogin && + location.pathname !== "/admin" && + location.pathname !== `/flow/${tabId}` && ( + + )}
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index 006a030b5..8488ca890 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -621,15 +621,18 @@ export const FETCH_ERROR_DESCRIPION = export const BASE_URL_API = "/api/v1/"; -export const SIGN_UP_SUCCESS = - "Account created! Await admin activation. "; +export const SIGN_UP_SUCCESS = "Account created! Await admin activation. "; -export const API_PAGE_PARAGRAPH_1 = "Your secret API keys are listed below. Please note that we do not display your secret API keys again after you generate them."; +export const API_PAGE_PARAGRAPH_1 = + "Your secret API keys are listed below. Please note that we do not display your secret API keys again after you generate them."; -export const API_PAGE_PARAGRAPH_2 = "Do not share your API key with others, or expose it in the browser or other client-side code."; +export const API_PAGE_PARAGRAPH_2 = + "Do not share your API key with others, or expose it in the browser or other client-side code."; -export const API_PAGE_USER_KEYS = "This user does not have any keys assigned at the moment." +export const API_PAGE_USER_KEYS = + "This user does not have any keys assigned at the moment."; export const LAST_USED_SPAN_1 = "The last time this key was used."; -export const LAST_USED_SPAN_2 = "Accurate to within the hour from the most recent usage."; \ No newline at end of file +export const LAST_USED_SPAN_2 = + "Accurate to within the hour from the most recent usage."; diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index e34230cf6..e6cd84363 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -98,7 +98,6 @@ export function AuthProvider({ children }): React.ReactElement { setIsAuthenticated(false); } - return ( // !! to convert string to boolean { - if (DbData && Object.keys(templates).length > 0) { - try { - processDBData(DbData); - updateStateWithDbData(DbData); - } catch (e) { - } - } - }); + getTabsDataFromDB().then((DbData) => { + if (DbData && Object.keys(templates).length > 0) { + try { + processDBData(DbData); + updateStateWithDbData(DbData); + } catch (e) {} + } + }); } useEffect(() => { @@ -150,8 +149,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { } processFlowEdges(flow); processFlowNodes(flow); - } catch (e) { - } + } catch (e) {} }); } diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx index 6b11d24ee..d1a8ffa2c 100644 --- a/src/frontend/src/controllers/API/api.tsx +++ b/src/frontend/src/controllers/API/api.tsx @@ -102,5 +102,4 @@ function ApiInterceptor() { return null; } - export { ApiInterceptor, api }; diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 0d72bca55..3e6c78801 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -478,9 +478,9 @@ export async function getApiKey() { } } -export async function createApiKey(name:string) { +export async function createApiKey(name: string) { try { - const res = await api.post(`${BASE_URL_API}api_key`,{name}); + const res = await api.post(`${BASE_URL_API}api_key`, { name }); if (res.status === 200) { return res.data; } @@ -490,7 +490,6 @@ export async function createApiKey(name:string) { } } - export async function deleteApiKey(api_key: string) { try { const res = await api.delete(`${BASE_URL_API}api_key/${api_key}`); @@ -502,4 +501,3 @@ export async function deleteApiKey(api_key: string) { throw error; } } - diff --git a/src/frontend/src/index.tsx b/src/frontend/src/index.tsx index 3a7cbd9f5..78a57298f 100644 --- a/src/frontend/src/index.tsx +++ b/src/frontend/src/index.tsx @@ -1,10 +1,8 @@ import ReactDOM from "react-dom/client"; -import { BrowserRouter } from "react-router-dom"; import App from "./App"; import ContextWrapper from "./contexts"; import reportWebVitals from "./reportWebVitals"; -import { ApiInterceptor } from "./controllers/API/api"; // @ts-ignore import "./style/index.css"; // @ts-ignore @@ -17,7 +15,7 @@ const root = ReactDOM.createRoot( ); root.render( - + ); reportWebVitals(); diff --git a/src/frontend/src/modals/SecretKeyModal/index.tsx b/src/frontend/src/modals/SecretKeyModal/index.tsx index 02d33244e..0487d28b8 100644 --- a/src/frontend/src/modals/SecretKeyModal/index.tsx +++ b/src/frontend/src/modals/SecretKeyModal/index.tsx @@ -21,7 +21,7 @@ export default function SecretKeyModal({ children, icon, data, - onCloseModal + onCloseModal, }: ApiKeyType) { const Icon: any = nodeIconsLucide[icon]; const [open, setOpen] = useState(false); @@ -44,8 +44,7 @@ export default function SecretKeyModal({ if (open) { setRenderKey(false); resetForm(); - } - else{ + } else { onCloseModal(); } }, [open]); diff --git a/src/frontend/src/modals/UserManagementModal/index.tsx b/src/frontend/src/modals/UserManagementModal/index.tsx index 5372b6354..7f6204d66 100644 --- a/src/frontend/src/modals/UserManagementModal/index.tsx +++ b/src/frontend/src/modals/UserManagementModal/index.tsx @@ -273,7 +273,7 @@ export default function UserManagementModal({
- -
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx index 7729f78fe..48eb9225c 100644 --- a/src/frontend/src/modals/flowSettingsModal/index.tsx +++ b/src/frontend/src/modals/flowSettingsModal/index.tsx @@ -3,7 +3,6 @@ import EditFlowSettings from "../../components/EditFlowSettingsComponent"; import IconComponent from "../../components/genericIconComponent"; import { Button } from "../../components/ui/button"; import { SETTINGS_DIALOG_SUBTITLE } from "../../constants/constants"; -import { alertContext } from "../../contexts/alertContext"; import { TabsContext } from "../../contexts/tabsContext"; import { FlowSettingsPropsType } from "../../types/components"; import BaseModal from "../baseModal"; diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx index 8f56d1f49..01d6a0954 100644 --- a/src/frontend/src/modals/formModal/index.tsx +++ b/src/frontend/src/modals/formModal/index.tsx @@ -23,10 +23,10 @@ import { } from "../../components/ui/dialog"; import { Textarea } from "../../components/ui/textarea"; import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants"; +import { AuthContext } from "../../contexts/authContext"; import { TabsContext } from "../../contexts/tabsContext"; import { TabsState } from "../../types/tabs"; import { validateNodes } from "../../utils/reactflowUtils"; -import { AuthContext } from "../../contexts/authContext"; export default function FormModal({ flow, @@ -61,7 +61,7 @@ export default function FormModal({ const [chatHistory, setChatHistory] = useState([]); const { reactFlowInstance } = useContext(typesContext); - const {accessToken} = useContext(AuthContext); + const { accessToken } = useContext(AuthContext); const { setErrorData } = useContext(alertContext); const ws = useRef(null); const [lockChat, setLockChat] = useState(false); @@ -162,7 +162,7 @@ export default function FormModal({ }, 1000); } } - //TODO improve check of user authentication + //TODO improve check of user authentication function getWebSocketUrl( chatId: string, isDevelopment: boolean = false diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx index e52cb863d..7a1c10a28 100644 --- a/src/frontend/src/pages/AdminPage/index.tsx +++ b/src/frontend/src/pages/AdminPage/index.tsx @@ -4,6 +4,7 @@ import { useContext, useEffect, useRef, useState } from "react"; import PaginatorComponent from "../../components/PaginatorComponent"; import ShadTooltip from "../../components/ShadTooltipComponent"; import IconComponent from "../../components/genericIconComponent"; +import Header from "../../components/headerComponent"; import { Button } from "../../components/ui/button"; import { Checkbox } from "../../components/ui/checkbox"; import { Input } from "../../components/ui/input"; @@ -26,7 +27,6 @@ import { import ConfirmationModal from "../../modals/ConfirmationModal"; import UserManagementModal from "../../modals/UserManagementModal"; import { UserInputType } from "../../types/components"; -import Header from "../../components/headerComponent"; export default function AdminPage() { const [inputValue, setInputValue] = useState(""); @@ -194,7 +194,9 @@ export default function AdminPage() { Welcome back!

- Navigate through this section to efficiently oversee all application users. From here, you can seamlessly manage user accounts. + Navigate through this section to efficiently oversee all + application users. From here, you can seamlessly manage + user accounts.

diff --git a/src/frontend/src/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/ApiKeysPage/index.tsx index 5fb63c4c4..48e8574c8 100644 --- a/src/frontend/src/pages/ApiKeysPage/index.tsx +++ b/src/frontend/src/pages/ApiKeysPage/index.tsx @@ -18,8 +18,14 @@ import SecretKeyModal from "../../modals/SecretKeyModal"; import moment from "moment"; import Header from "../../components/headerComponent"; +import { + API_PAGE_PARAGRAPH_1, + API_PAGE_PARAGRAPH_2, + API_PAGE_USER_KEYS, + LAST_USED_SPAN_1, + LAST_USED_SPAN_2, +} from "../../constants/constants"; import { ApiKey } from "../../types/components"; -import { API_PAGE_PARAGRAPH_1, API_PAGE_PARAGRAPH_2, API_PAGE_USER_KEYS, LAST_USED_SPAN_1, LAST_USED_SPAN_2 } from "../../constants/constants"; export default function ApiKeysPage() { const [loadingKeys, setLoadingKeys] = useState(true); @@ -29,7 +35,7 @@ export default function ApiKeysPage() { const keysList = useRef([]); useEffect(() => { - getKeys(); + getKeys(); }, [userData]); function getKeys() { @@ -71,7 +77,8 @@ export default function ApiKeysPage() { return (
- {LAST_USED_SPAN_1}

{LAST_USED_SPAN_2} + {LAST_USED_SPAN_1} +

{LAST_USED_SPAN_2}
); @@ -91,7 +98,8 @@ export default function ApiKeysPage() { API keys

- {API_PAGE_PARAGRAPH_1}
+ {API_PAGE_PARAGRAPH_1} +
{API_PAGE_PARAGRAPH_2}

@@ -103,9 +111,7 @@ export default function ApiKeysPage() { !loadingKeys && ( <>
-

- {API_PAGE_USER_KEYS} -

+

{API_PAGE_USER_KEYS}

)} diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index aec1f373f..b9f537637 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -276,7 +276,6 @@ export type ApiKeyType = { icon: string; data?: any; onCloseModal: () => void; - }; export type ApiKeyInputType = {