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

fix: dark mode and header text display issues (#3315)

Browse source 
* Fix dark mode not starting with the browser saved variable

* Added the Last saved at text on the header too

* Fixed css
This commit is contained in:
Lucas Oliveira 2024-08-13 20:01:46 -03:00 • committed by GitHub
commit c19a031b9c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 94 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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
<div className="flex h-full flex-col">
<ErrorBoundary
onReset={() => {
// any reset function
}}
FallbackComponent={CrashErrorComponent}
>
<>
{
<FetchErrorComponent
description={FETCH_ERROR_DESCRIPION}
message={FETCH_ERROR_MESSAGE}
openModal={
isErrorHealth ||
(healthData &&
Object.values(healthData).some((value) => value !== "ok"))
}
setRetry={() => {
refetch();
}}
isLoadingHealth={fetchingHealth}
></FetchErrorComponent>
}
<div
className={cn(
"loading-page-panel absolute left-0 top-0 z-[999]",
isLoadingApplication ? "" : "hidden",
)}
>
<LoadingComponent remSize={50} />
</div>
<Outlet />
</>
</ErrorBoundary>
<div></div>
<div className="app-div">
<AlertDisplayArea />
</div>
</div>
<Suspense
fallback={
<div className="loading-page-panel">
<LoadingComponent remSize={50} />
</div>
}
>
<RouterProvider router={router} />
</Suspense>
);
}

3
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -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",
})

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

@ -89,7 +89,7 @@ export default function Header(): JSX.Element {
return (
<div className="header-arrangement">
<div className="header-start-display lg:w-[407px]">
<div className="header-start-display lg:w-[450px]">
<Link to="/all" className="cursor-pointer">
<span className="ml-4 text-2xl">⛓️</span>
</Link>

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

@ -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(
<ContextWrapper>
<Suspense
fallback={
<div className="loading-page-panel">
<LoadingComponent remSize={50} />
</div>
}
>
<RouterProvider router={router} />
</Suspense>
<App />
</ContextWrapper>,
);
reportWebVitals();

71
src/frontend/src/pages/AppWrapperPage/index.tsx Normal file
View file

@ -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 (
<div className="flex h-full flex-col">
<ErrorBoundary
onReset={() => {
// any reset function
}}
FallbackComponent={CrashErrorComponent}
>
<>
{
<FetchErrorComponent
description={FETCH_ERROR_DESCRIPION}
message={FETCH_ERROR_MESSAGE}
openModal={
isErrorHealth ||
(healthData &&
Object.values(healthData).some((value) => value !== "ok"))
}
setRetry={() => {
refetch();
}}
isLoadingHealth={fetchingHealth}
></FetchErrorComponent>
}
<div
className={cn(
"loading-page-panel absolute left-0 top-0 z-[999]",
isLoadingApplication ? "" : "hidden",
)}
>
<LoadingComponent remSize={50} />
</div>
<Outlet />
</>
</ErrorBoundary>
<div></div>
<div className="app-div">
<AlertDisplayArea />
</div>
</div>
);
}

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

@ -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([
<Route path="" element={<App />}>
<Route path="" element={<AppWrapperPage />}>
<Route
path="/"
element={