feat(frontend): added banner to display user is viewing demo

Agenta-AI · Dec 5, 2024 · 14dd924 · 14dd924
1 parent ef49410
commit 14dd924
Showing 1 changed file with 91 additions and 60 deletions.
diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
@@ -75,6 +75,25 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             color: "rgba(0, 0, 0, 0.45)",
         },
     },
+    banner: {
+        position: "sticky",
+        zIndex: 10,
+        top: 0,
+        left: 0,
+        height: 38,
+        backgroundColor: "#1c2c3d",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        color: "#fff",
+        fontSize: 12,
+        lineHeight: "20px",
+        fontWeight: 500,
+        "& span": {
+            fontWeight: 600,
+        },
+    },
 }))
 
 type LayoutProps = {
@@ -86,7 +105,7 @@ const App: React.FC<LayoutProps> = ({children}) => {
     const {appTheme} = useAppTheme()
     const {currentApp} = useAppsData()
     const [footerRef, {height: footerHeight}] = useElementSize()
-    const {isProjectId} = useProjectData()
+    const {project} = useProjectData()
     const classes = useStyles({themeMode: appTheme, footerHeight} as StyleProps)
     const router = useRouter()
     const appId = router.query.app_id as string
@@ -179,69 +198,81 @@ const App: React.FC<LayoutProps> = ({children}) => {
                         </Layout>
                     ) : (
                         // !isAuthRoute && isProjectId
-                        <Layout hasSider className={classes.layout}>
-                            <Sidebar />
-                            <Layout className={classes.layout}>
-                                <div>
-                                    <div className={classes.breadcrumbContainer}>
-                                        <Breadcrumb
-                                            items={[
-                                                {
-                                                    title: (
-                                                        <div className="flex items-center gap-1">
-                                                            <Lightning size={16} />
-                                                            <Link href="/apps">Apps</Link>
-                                                        </div>
-                                                    ),
-                                                },
-                                                {title: currentApp?.app_name || ""},
-                                            ]}
-                                        />
-                                        <div className={classes.topRightBar}>
-                                            <Text>agenta v{packageJsonData.version}</Text>
+                        <div>
+                            {project?.is_demo && (
+                                <div className={classes.banner}>
+                                    You are viewing demo workspace. To go back to your workspace,{" "}
+                                    <span>Click here.</span>
+                                </div>
+                            )}
+                            <Layout hasSider className={classes.layout}>
+                                <Sidebar />
+                                <Layout className={classes.layout}>
+                                    <div>
+                                        <div className={classes.breadcrumbContainer}>
+                                            <Breadcrumb
+                                                items={[
+                                                    {
+                                                        title: (
+                                                            <div className="flex items-center gap-1">
+                                                                <Lightning size={16} />
+                                                                <Link href="/apps">Apps</Link>
+                                                            </div>
+                                                        ),
+                                                    },
+                                                    {title: currentApp?.app_name || ""},
+                                                ]}
+                                            />
+                                            <div className={classes.topRightBar}>
+                                                <Text>agenta v{packageJsonData.version}</Text>
+                                            </div>
                                         </div>
+                                        <Content className={classes.content}>
+                                            <ErrorBoundary FallbackComponent={ErrorFallback}>
+                                                <ConfigProvider
+                                                    theme={{
+                                                        algorithm:
+                                                            appTheme === "dark"
+                                                                ? theme.darkAlgorithm
+                                                                : theme.defaultAlgorithm,
+                                                    }}
+                                                >
+                                                    {children}
+                                                </ConfigProvider>
+                                                {contextHolder}
+                                            </ErrorBoundary>
+                                        </Content>
                                     </div>
-                                    <Content className={classes.content}>
-                                        <ErrorBoundary FallbackComponent={ErrorFallback}>
-                                            <ConfigProvider
-                                                theme={{
-                                                    algorithm:
-                                                        appTheme === "dark"
-                                                            ? theme.darkAlgorithm
-                                                            : theme.defaultAlgorithm,
-                                                }}
+                                    <Footer ref={footerRef} className={classes.footer}>
+                                        <Space className={classes.footerLeft} size={10}>
+                                            <Link
+                                                href={"https://github.com/Agenta-AI/agenta"}
+                                                target="_blank"
                                             >
-                                                {children}
-                                            </ConfigProvider>
-                                            {contextHolder}
-                                        </ErrorBoundary>
-                                    </Content>
-                                </div>
-                                <Footer ref={footerRef} className={classes.footer}>
-                                    <Space className={classes.footerLeft} size={10}>
-                                        <Link
-                                            href={"https://github.com/Agenta-AI/agenta"}
-                                            target="_blank"
-                                        >
-                                            <GithubFilled className={classes.footerLinkIcon} />
-                                        </Link>
-                                        <Link
-                                            href={"https://www.linkedin.com/company/agenta-ai/"}
-                                            target="_blank"
-                                        >
-                                            <LinkedinFilled className={classes.footerLinkIcon} />
-                                        </Link>
-                                        <Link
-                                            href={"https://twitter.com/agenta_ai"}
-                                            target="_blank"
-                                        >
-                                            <TwitterOutlined className={classes.footerLinkIcon} />
-                                        </Link>
-                                    </Space>
-                                    <div>Copyright © {new Date().getFullYear()} | Agenta.</div>
-                                </Footer>
+                                                <GithubFilled className={classes.footerLinkIcon} />
+                                            </Link>
+                                            <Link
+                                                href={"https://www.linkedin.com/company/agenta-ai/"}
+                                                target="_blank"
+                                            >
+                                                <LinkedinFilled
+                                                    className={classes.footerLinkIcon}
+                                                />
+                                            </Link>
+                                            <Link
+                                                href={"https://twitter.com/agenta_ai"}
+                                                target="_blank"
+                                            >
+                                                <TwitterOutlined
+                                                    className={classes.footerLinkIcon}
+                                                />
+                                            </Link>
+                                        </Space>
+                                        <div>Copyright © {new Date().getFullYear()} | Agenta.</div>
+                                    </Footer>
+                                </Layout>
                             </Layout>
-                        </Layout>
+                        </div>
                     )}
                 </ThemeProvider>
             )}