From 1b8e4eeb88d32eb47b029d87ecaa7d5562797925 Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Wed, 4 Dec 2024 13:26:33 +0100 Subject: [PATCH 1/8] enhance(frontend): resize observer hook to observe a passed element when ref is not used --- agenta-web/src/hooks/useResizeObserver.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/agenta-web/src/hooks/useResizeObserver.ts b/agenta-web/src/hooks/useResizeObserver.ts index 7d87861dc9..f303a26cc7 100644 --- a/agenta-web/src/hooks/useResizeObserver.ts +++ b/agenta-web/src/hooks/useResizeObserver.ts @@ -1,26 +1,27 @@ import {useLayoutEffect, useRef} from "react" -function useResizeObserver( - callback: (entry: ResizeObserverEntry["contentRect"]) => void, -) { +const useResizeObserver = ( + callback?: (entry: ResizeObserverEntry["contentRect"]) => void, + element?: HTMLElement, + ) => { const ref = useRef(null) useLayoutEffect(() => { - const element = ref?.current + const _element = ref?.current || element - if (!element) { + if (!_element) { return } const observer = new ResizeObserver((entries) => { - callback(entries[0].contentRect) + callback?.(entries[0].contentRect) }) - observer.observe(element) + observer.observe(_element) return () => { observer.disconnect() } - }, [callback, ref]) + }, [callback, element, ref]) return ref } From a788d2915d2962f9ef3e051f12a7c57a0100064b Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Wed, 4 Dec 2024 15:17:49 +0100 Subject: [PATCH 2/8] feat(frontend): warning component for mobile screens --- .../NoMobilePageWrapper.tsx | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx diff --git a/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx b/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx new file mode 100644 index 0000000000..c8bbbf14d2 --- /dev/null +++ b/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx @@ -0,0 +1,75 @@ +import {type PropsWithChildren, useState, useCallback} from "react" +import {Typography, Button} from "antd" +import clsx from "clsx" +import useResizeObserver from "@/hooks/useResizeObserver" +import {createUseStyles} from "react-jss" +import {JSSTheme} from "@/lib/Types" +import {Transition} from "@headlessui/react" +import {useRouter} from "next/router" + +const useStyles = createUseStyles((theme: JSSTheme) => ({ + overlay: { + background: `${theme.colorBgContainer}`, + }, +})) + +// List of routes where the component should be displayed +const APP_ROUTES = [ + "/apps", + "/observability", + "/settings", + "/testsets" +] + +const NoMobilePageWrapper: React.FC = ({children}) => { + const [dismissed, setDismissed] = useState(false) + const [shouldDisplay, setShouldDisplay] = useState(false) + const {overlay} = useStyles() + const {pathname} = useRouter() + + const observerCallback = useCallback((bounds: DOMRectReadOnly) => { + setShouldDisplay((prevShouldDisplay) => { + if (dismissed) return false // keep hidden if already dismissed by the user + if (!APP_ROUTES.some((route) => pathname.startsWith(route))) return false + + return bounds.width < 768 + }) + }, [dismissed, pathname]) + + useResizeObserver( + observerCallback, + typeof window !== "undefined" ? document.body : undefined, + ) + + const handleDismiss = () => { + setDismissed(true) + } + + return ( + + + Agenta works better in larger laptop or desktop screens. + + + + ) +} + +export default NoMobilePageWrapper From a9e45c87a09ea8b7323c5bf9afc4ca6c31041dcb Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Wed, 4 Dec 2024 15:18:25 +0100 Subject: [PATCH 3/8] update(frontend): use mobile screen warning component at app root --- agenta-web/src/pages/_app.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/agenta-web/src/pages/_app.tsx b/agenta-web/src/pages/_app.tsx index 72e6f5da46..f30098280d 100644 --- a/agenta-web/src/pages/_app.tsx +++ b/agenta-web/src/pages/_app.tsx @@ -2,6 +2,7 @@ import {useEffect} from "react" import type {AppProps} from "next/app" import {useRouter} from "next/router" import Head from "next/head" +import dynamic from "next/dynamic" import posthog from "posthog-js" import {PostHogProvider} from "posthog-js/react" @@ -16,6 +17,10 @@ import "ag-grid-community/styles/ag-grid.css" import "ag-grid-community/styles/ag-theme-alpine.css" import {Inter} from "next/font/google" +const NoMobilePageWrapper = dynamic(() => import("@/components/NoMobilePageWrapper/NoMobilePageWrapper"), { + ssr: false +}) + const inter = Inter({ subsets: ["latin"], variable: "--font-inter", @@ -60,6 +65,7 @@ export default function App({Component, pageProps}: AppProps) { + From 7df375a21ef3713fc40ea0be22b534fddb63eca2 Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Thu, 5 Dec 2024 11:14:06 +0100 Subject: [PATCH 4/8] chore(frontend): move constant export to a different file --- .../NoMobilePageWrapper/NoMobilePageWrapper.tsx | 13 +++---------- .../NoMobilePageWrapper/assets/constants.ts | 2 ++ 2 files changed, 5 insertions(+), 10 deletions(-) create mode 100644 agenta-web/src/components/NoMobilePageWrapper/assets/constants.ts diff --git a/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx b/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx index c8bbbf14d2..cddce9f5f0 100644 --- a/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx +++ b/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx @@ -6,6 +6,7 @@ import {createUseStyles} from "react-jss" import {JSSTheme} from "@/lib/Types" import {Transition} from "@headlessui/react" import {useRouter} from "next/router" +import { MOBILE_UNOPTIMIZED_APP_ROUTES } from "./assets/constants" const useStyles = createUseStyles((theme: JSSTheme) => ({ overlay: { @@ -13,14 +14,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({ }, })) -// List of routes where the component should be displayed -const APP_ROUTES = [ - "/apps", - "/observability", - "/settings", - "/testsets" -] - const NoMobilePageWrapper: React.FC = ({children}) => { const [dismissed, setDismissed] = useState(false) const [shouldDisplay, setShouldDisplay] = useState(false) @@ -28,9 +21,9 @@ const NoMobilePageWrapper: React.FC = ({children}) => { const {pathname} = useRouter() const observerCallback = useCallback((bounds: DOMRectReadOnly) => { - setShouldDisplay((prevShouldDisplay) => { + setShouldDisplay(() => { if (dismissed) return false // keep hidden if already dismissed by the user - if (!APP_ROUTES.some((route) => pathname.startsWith(route))) return false + if (!MOBILE_UNOPTIMIZED_APP_ROUTES.some((route) => pathname.startsWith(route))) return false return bounds.width < 768 }) diff --git a/agenta-web/src/components/NoMobilePageWrapper/assets/constants.ts b/agenta-web/src/components/NoMobilePageWrapper/assets/constants.ts new file mode 100644 index 0000000000..e3299df819 --- /dev/null +++ b/agenta-web/src/components/NoMobilePageWrapper/assets/constants.ts @@ -0,0 +1,2 @@ +// List of routes where the component should be displayed +export const MOBILE_UNOPTIMIZED_APP_ROUTES = ["/apps", "/observability", "/settings", "/testsets"] From df59d14665e7d80cbf88c2d014c37490831c2e01 Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Thu, 5 Dec 2024 11:15:01 +0100 Subject: [PATCH 5/8] enhance(frontend): use screen size token instead of using a hardcoded value --- .../NoMobilePageWrapper/NoMobilePageWrapper.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx b/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx index cddce9f5f0..bbd7c0c591 100644 --- a/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx +++ b/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx @@ -1,5 +1,5 @@ import {type PropsWithChildren, useState, useCallback} from "react" -import {Typography, Button} from "antd" +import {Typography, Button, theme} from "antd" import clsx from "clsx" import useResizeObserver from "@/hooks/useResizeObserver" import {createUseStyles} from "react-jss" @@ -14,20 +14,23 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({ }, })) +const {useToken} = theme + const NoMobilePageWrapper: React.FC = ({children}) => { const [dismissed, setDismissed] = useState(false) const [shouldDisplay, setShouldDisplay] = useState(false) const {overlay} = useStyles() const {pathname} = useRouter() + const {token} = useToken() const observerCallback = useCallback((bounds: DOMRectReadOnly) => { setShouldDisplay(() => { if (dismissed) return false // keep hidden if already dismissed by the user if (!MOBILE_UNOPTIMIZED_APP_ROUTES.some((route) => pathname.startsWith(route))) return false - return bounds.width < 768 + return bounds.width < token.screenMD }) - }, [dismissed, pathname]) + }, [dismissed, pathname, token.screenMD]) useResizeObserver( observerCallback, From 55dc7b3a7d4d513e27deb900b4da9ecc0c8c7ece Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Thu, 5 Dec 2024 11:30:20 +0100 Subject: [PATCH 6/8] chore(frontend): lints new files --- .../NoMobilePageWrapper.tsx | 27 ++++++++++--------- agenta-web/src/hooks/useResizeObserver.ts | 2 +- agenta-web/src/pages/_app.tsx | 9 ++++--- 3 files changed, 21 insertions(+), 17 deletions(-) diff --git a/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx b/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx index bbd7c0c591..2e39bfcba1 100644 --- a/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx +++ b/agenta-web/src/components/NoMobilePageWrapper/NoMobilePageWrapper.tsx @@ -6,7 +6,7 @@ import {createUseStyles} from "react-jss" import {JSSTheme} from "@/lib/Types" import {Transition} from "@headlessui/react" import {useRouter} from "next/router" -import { MOBILE_UNOPTIMIZED_APP_ROUTES } from "./assets/constants" +import {MOBILE_UNOPTIMIZED_APP_ROUTES} from "./assets/constants" const useStyles = createUseStyles((theme: JSSTheme) => ({ overlay: { @@ -23,20 +23,21 @@ const NoMobilePageWrapper: React.FC = ({children}) => { const {pathname} = useRouter() const {token} = useToken() - const observerCallback = useCallback((bounds: DOMRectReadOnly) => { - setShouldDisplay(() => { - if (dismissed) return false // keep hidden if already dismissed by the user - if (!MOBILE_UNOPTIMIZED_APP_ROUTES.some((route) => pathname.startsWith(route))) return false - - return bounds.width < token.screenMD - }) - }, [dismissed, pathname, token.screenMD]) - - useResizeObserver( - observerCallback, - typeof window !== "undefined" ? document.body : undefined, + const observerCallback = useCallback( + (bounds: DOMRectReadOnly) => { + setShouldDisplay(() => { + if (dismissed) return false // keep hidden if already dismissed by the user + if (!MOBILE_UNOPTIMIZED_APP_ROUTES.some((route) => pathname.startsWith(route))) + return false + + return bounds.width < token.screenMD + }) + }, + [dismissed, pathname, token.screenMD], ) + useResizeObserver(observerCallback, typeof window !== "undefined" ? document.body : undefined) + const handleDismiss = () => { setDismissed(true) } diff --git a/agenta-web/src/hooks/useResizeObserver.ts b/agenta-web/src/hooks/useResizeObserver.ts index f303a26cc7..476dd227d8 100644 --- a/agenta-web/src/hooks/useResizeObserver.ts +++ b/agenta-web/src/hooks/useResizeObserver.ts @@ -3,7 +3,7 @@ import {useLayoutEffect, useRef} from "react" const useResizeObserver = ( callback?: (entry: ResizeObserverEntry["contentRect"]) => void, element?: HTMLElement, - ) => { +) => { const ref = useRef(null) useLayoutEffect(() => { diff --git a/agenta-web/src/pages/_app.tsx b/agenta-web/src/pages/_app.tsx index f30098280d..823891aded 100644 --- a/agenta-web/src/pages/_app.tsx +++ b/agenta-web/src/pages/_app.tsx @@ -17,9 +17,12 @@ import "ag-grid-community/styles/ag-grid.css" import "ag-grid-community/styles/ag-theme-alpine.css" import {Inter} from "next/font/google" -const NoMobilePageWrapper = dynamic(() => import("@/components/NoMobilePageWrapper/NoMobilePageWrapper"), { - ssr: false -}) +const NoMobilePageWrapper = dynamic( + () => import("@/components/NoMobilePageWrapper/NoMobilePageWrapper"), + { + ssr: false, + }, +) const inter = Inter({ subsets: ["latin"], From df2cf73b83e17f1ecd69a00513007294a0f6c0da Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Thu, 5 Dec 2024 15:21:46 +0100 Subject: [PATCH 7/8] fix(frontend): include missing endpoints to the list of routes to display the new warning screen --- .../components/NoMobilePageWrapper/assets/constants.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/agenta-web/src/components/NoMobilePageWrapper/assets/constants.ts b/agenta-web/src/components/NoMobilePageWrapper/assets/constants.ts index e3299df819..058d997c1f 100644 --- a/agenta-web/src/components/NoMobilePageWrapper/assets/constants.ts +++ b/agenta-web/src/components/NoMobilePageWrapper/assets/constants.ts @@ -1,2 +1,9 @@ // List of routes where the component should be displayed -export const MOBILE_UNOPTIMIZED_APP_ROUTES = ["/apps", "/observability", "/settings", "/testsets"] +export const MOBILE_UNOPTIMIZED_APP_ROUTES = [ + "/apps", + "/observability", + "/settings", + "/testsets", + "/evaluations", + "/workspaces", +] From 76e931e4840623b001d96391c7f5a17f466a6696 Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Thu, 5 Dec 2024 16:26:55 +0100 Subject: [PATCH 8/8] chore(frontend): use dynamicComponent helper function --- agenta-web/src/pages/_app.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/agenta-web/src/pages/_app.tsx b/agenta-web/src/pages/_app.tsx index 823891aded..c84846caf9 100644 --- a/agenta-web/src/pages/_app.tsx +++ b/agenta-web/src/pages/_app.tsx @@ -9,6 +9,7 @@ import {PostHogProvider} from "posthog-js/react" import "@/styles/globals.css" import Layout from "@/components/Layout/Layout" +import {dynamicComponent} from "@/lib/helpers/dynamic" import ThemeContextProvider from "@/components/Layout/ThemeContextProvider" import AppContextProvider from "@/contexts/app.context" import ProfileContextProvider from "@/contexts/profile.context" @@ -17,12 +18,7 @@ import "ag-grid-community/styles/ag-grid.css" import "ag-grid-community/styles/ag-theme-alpine.css" import {Inter} from "next/font/google" -const NoMobilePageWrapper = dynamic( - () => import("@/components/NoMobilePageWrapper/NoMobilePageWrapper"), - { - ssr: false, - }, -) +const NoMobilePageWrapper = dynamicComponent("NoMobilePageWrapper/NoMobilePageWrapper") const inter = Inter({ subsets: ["latin"],