From c19a031b9c99f7971ee0d897017f809add7e394d Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com> Date: Tue, 13 Aug 2024 20:01:46 -0300 Subject: [PATCH] fix: dark mode and header text display issues (#3315) * Fix dark mode not starting with the browser saved variable * Added the Last saved at text on the header too * Fixed css --- src/frontend/src/App.tsx | 77 +++---------------- .../components/menuBar/index.tsx | 3 +- .../src/components/headerComponent/index.tsx | 2 +- src/frontend/src/index.tsx | 20 ++--- .../src/pages/AppWrapperPage/index.tsx | 71 +++++++++++++++++ src/frontend/src/routes.tsx | 3 +- 6 files changed, 94 insertions(+), 82 deletions(-) create mode 100644 src/frontend/src/pages/AppWrapperPage/index.tsx diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 9423ce55f237..50d9c324b731 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -1,16 +1,9 @@ -import { useContext, useEffect } from "react"; +import { Suspense, useContext, useEffect } from "react"; import { Cookies } from "react-cookie"; -import { ErrorBoundary } from "react-error-boundary"; -import { Outlet } from "react-router-dom"; +import { RouterProvider } from "react-router-dom"; import "reactflow/dist/style.css"; -import "./App.css"; -import AlertDisplayArea from "./alerts/displayArea"; -import CrashErrorComponent from "./components/crashErrorComponent"; -import FetchErrorComponent from "./components/fetchErrorComponent"; import LoadingComponent from "./components/loadingComponent"; import { - FETCH_ERROR_DESCRIPION, - FETCH_ERROR_MESSAGE, LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS, LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS_ENV, } from "./constants/constants"; @@ -19,20 +12,15 @@ import { useAutoLogin, useRefreshAccessToken, } from "./controllers/API/queries/auth"; -import { useGetHealthQuery } from "./controllers/API/queries/health"; import { useGetVersionQuery } from "./controllers/API/queries/version"; import { setupAxiosDefaults } from "./controllers/API/utils"; -import useTrackLastVisitedPath from "./hooks/use-track-last-visited-path"; +import router from "./routes"; import useAlertStore from "./stores/alertStore"; import useAuthStore from "./stores/authStore"; import { useDarkStore } from "./stores/darkStore"; import useFlowsManagerStore from "./stores/flowsManagerStore"; -import { useFolderStore } from "./stores/foldersStore"; -import { cn } from "./utils/utils"; export default function App() { - useTrackLastVisitedPath(); - const isLoading = useFlowsManagerStore((state) => state.isLoading); const { login, setUserData, getUser } = useContext(AuthContext); const setAutoLogin = useAuthStore((state) => state.setAutoLogin); const setLoading = useAlertStore((state) => state.setLoading); @@ -48,18 +36,10 @@ export default function App() { useGetVersionQuery(); - const isLoadingFolders = useFolderStore((state) => state.isLoadingFolders); const { mutate: mutateRefresh } = useRefreshAccessToken(); const isLoginPage = location.pathname.includes("login"); - const { - data: healthData, - isFetching: fetchingHealth, - isError: isErrorHealth, - refetch, - } = useGetHealthQuery(); - useEffect(() => { if (!dark) { document.getElementById("body")!.classList.remove("dark"); @@ -136,49 +116,16 @@ export default function App() { }); }; - const isLoadingApplication = isLoading || isLoadingFolders; - return ( //need parent component with width and height -
- { - // any reset function - }} - FallbackComponent={CrashErrorComponent} - > - <> - { - value !== "ok")) - } - setRetry={() => { - refetch(); - }} - isLoadingHealth={fetchingHealth} - > - } - -
- -
- - - -
-
- -
-
+ + + + } + > + + ); } diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx index 776059dcd6bb..f343511d1d2e 100644 --- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx +++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx @@ -61,7 +61,8 @@ export const MenuBar = ({}: {}): JSX.Element => { const savedText = updatedAt && changesNotSaved - ? new Date(updatedAt).toLocaleString("en-US", { + ? SAVED_HOVER + + new Date(updatedAt).toLocaleString("en-US", { hour: "numeric", minute: "numeric", }) diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index ab63a9ecb9b7..f7236a7167bc 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -89,7 +89,7 @@ export default function Header(): JSX.Element { return (
-
+
⛓️ diff --git a/src/frontend/src/index.tsx b/src/frontend/src/index.tsx index 7fa7cf724b70..95878233bc80 100644 --- a/src/frontend/src/index.tsx +++ b/src/frontend/src/index.tsx @@ -2,31 +2,23 @@ import ReactDOM from "react-dom/client"; import ContextWrapper from "./contexts"; import reportWebVitals from "./reportWebVitals"; +import "./style/classes.css"; // @ts-ignore import "./style/index.css"; // @ts-ignore +import "./App.css"; import "./style/applies.css"; + // @ts-ignore -import { Suspense } from "react"; -import { RouterProvider } from "react-router-dom"; -import LoadingComponent from "./components/loadingComponent"; -import router from "./routes"; -import "./style/classes.css"; +import App from "./App"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement, ); + root.render( - - -
- } - > - - + , ); reportWebVitals(); diff --git a/src/frontend/src/pages/AppWrapperPage/index.tsx b/src/frontend/src/pages/AppWrapperPage/index.tsx new file mode 100644 index 000000000000..91011d76f06c --- /dev/null +++ b/src/frontend/src/pages/AppWrapperPage/index.tsx @@ -0,0 +1,71 @@ +import AlertDisplayArea from "@/alerts/displayArea"; +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 { useGetHealthQuery } from "@/controllers/API/queries/health"; +import useTrackLastVisitedPath from "@/hooks/use-track-last-visited-path"; +import useFlowsManagerStore from "@/stores/flowsManagerStore"; +import { useFolderStore } from "@/stores/foldersStore"; +import { cn } from "@/utils/utils"; +import { ErrorBoundary } from "react-error-boundary"; +import { Outlet } from "react-router-dom"; + +export function AppWrapperPage() { + useTrackLastVisitedPath(); + + const isLoading = useFlowsManagerStore((state) => state.isLoading); + const isLoadingFolders = useFolderStore((state) => state.isLoadingFolders); + const { + data: healthData, + isFetching: fetchingHealth, + isError: isErrorHealth, + refetch, + } = useGetHealthQuery(); + const isLoadingApplication = isLoading || isLoadingFolders; + return ( +
+ { + // any reset function + }} + FallbackComponent={CrashErrorComponent} + > + <> + { + value !== "ok")) + } + setRetry={() => { + refetch(); + }} + isLoadingHealth={fetchingHealth} + > + } + +
+ +
+ + + +
+
+ +
+
+ ); +} diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx index 028b44e23c16..9c4489508202 100644 --- a/src/frontend/src/routes.tsx +++ b/src/frontend/src/routes.tsx @@ -12,6 +12,7 @@ import { ProtectedLoginRoute } from "./components/authLoginGuard"; import { AuthSettingsGuard } from "./components/authSettingsGuard"; import { CatchAllRoute } from "./components/catchAllRoutes"; import { StoreGuard } from "./components/storeGuard"; +import { AppWrapperPage } from "./pages/AppWrapperPage"; const MessagesPage = lazy( () => import("./pages/SettingsPage/pages/messagesPage"), ); @@ -44,7 +45,7 @@ const ViewPage = lazy(() => import("./pages/ViewPage")); const router = createBrowserRouter( createRoutesFromElements([ - }> + }>