Skip to content

Commit 0edc669

Browse files
0ubbe0ubbe
committed
refactor(frontend): debug preview stealing dev
1 parent e64d3d9 commit 0edc669

File tree

7 files changed

+95
-70
lines changed

7 files changed

+95
-70
lines changed

‎autogpt_platform/frontend/src/app/(platform)/library/page.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
"use client";
22

3+
import { environment } from "@/services/environment";
4+
import { useEffect } from "react";
35
import FavoritesSection from "./components/FavoritesSection/FavoritesSection";
46
import LibraryActionHeader from "./components/LibraryActionHeader/LibraryActionHeader";
57
import LibraryAgentList from "./components/LibraryAgentList/LibraryAgentList";
@@ -10,6 +12,11 @@ import { LibraryPageStateProvider } from "./components/state-provider";
1012
* Main component that manages the library interface including agent listing and actions
1113
*/
1214
export default function LibraryPage() {
15+
useEffect(() => {
16+
const appEnv = environment.getAppEnv();
17+
console.log("branch", process.env.NEXT_PUBLIC_PREVIEW_STEALING_DEV);
18+
console.log("appEnv", appEnv);
19+
}, []);
1320
return (
1421
<main className="pt-160 container min-h-screen space-y-4 pb-20 pt-16 sm:px-8 md:px-12">
1522
<LibraryPageStateProvider>

‎autogpt_platform/frontend/src/app/layout.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,10 @@ import "./globals.css";
66

77
import { Providers } from "@/app/providers";
88
import { CookieConsentBanner } from "@/components/molecules/CookieConsentBanner/CookieConsentBanner";
9-
import { PreviewBanner } from "@/components/molecules/PreviewBanner/PreviewBanner";
109
import TallyPopupSimple from "@/components/molecules/TallyPoup/TallyPopup";
1110
import { Toaster } from "@/components/molecules/Toast/toaster";
1211
import { SetupAnalytics } from "@/services/analytics";
1312
import { VercelAnalyticsWrapper } from "@/services/analytics/VercelAnalyticsWrapper";
14-
import { environment } from "@/services/environment";
1513
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
1614
import { headers } from "next/headers";
1715

@@ -27,7 +25,6 @@ export default async function RootLayout({
2725
}>) {
2826
const headersList = await headers();
2927
const host = headersList.get("host") || "";
30-
const previewStealingDev = environment.getPreviewStealingDev();
3128

3229
return (
3330
<html
@@ -52,9 +49,6 @@ export default async function RootLayout({
5249
disableTransitionOnChange
5350
>
5451
<div className="flex min-h-screen flex-col items-stretch justify-items-stretch">
55-
{previewStealingDev ? (
56-
<PreviewBanner branchName={previewStealingDev} />
57-
) : null}
5852
{children}
5953
<TallyPopupSimple />
6054
<VercelAnalyticsWrapper />

‎autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1+
import { environment } from "@/services/environment";
2+
13
import { NavbarView } from "./components/NavbarView";
24
import { getNavbarAccountData } from "./data";
35

46
export async function Navbar() {
57
const { isLoggedIn } = await getNavbarAccountData();
8+
const previewBranchName = environment.getPreviewStealingDev();
69

7-
return <NavbarView isLoggedIn={isLoggedIn} />;
10+
return (
11+
<NavbarView isLoggedIn={isLoggedIn} previewBranchName={previewBranchName} />
12+
);
813
}

‎autogpt_platform/frontend/src/components/layout/Navbar/components/NavbarView.tsx‎

Lines changed: 55 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import { useGetV2GetUserProfile } from "@/app/api/__generated__/endpoints/store/store";
44
import { IconAutoGPTLogo, IconType } from "@/components/__legacy__/ui/icons";
5+
import { PreviewBanner } from "@/components/layout/Navbar/components/PreviewBanner/PreviewBanner";
56
import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
67
import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
78
import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
@@ -15,9 +16,10 @@ import { NavbarLink } from "./NavbarLink";
1516
import { Wallet } from "./Wallet/Wallet";
1617
interface NavbarViewProps {
1718
isLoggedIn: boolean;
19+
previewBranchName?: string | null;
1820
}
1921

20-
export const NavbarView = ({ isLoggedIn }: NavbarViewProps) => {
22+
export function NavbarView({ isLoggedIn, previewBranchName }: NavbarViewProps) {
2123
const { user } = useSupabase();
2224
const breakpoint = useBreakpoint();
2325
const isSmallScreen = breakpoint === "sm" || breakpoint === "base";
@@ -36,56 +38,63 @@ export const NavbarView = ({ isLoggedIn }: NavbarViewProps) => {
3638
return isChatEnabled ? [...loggedInLinks, chatLink] : loggedInLinks;
3739
}, [isChatEnabled]);
3840

41+
const shouldShowPreviewBanner = Boolean(isLoggedIn && previewBranchName);
42+
3943
return (
4044
<>
41-
<nav className="sticky top-0 z-40 inline-flex h-[60px] w-full items-center border border-white/50 bg-[#f3f4f6]/20 p-3 backdrop-blur-[26px]">
42-
{/* Left section */}
43-
{!isSmallScreen ? (
44-
<div className="flex flex-1 items-center gap-5">
45-
{isLoggedIn
46-
? linksWithChat.map((link) => (
47-
<NavbarLink
48-
key={link.name}
49-
name={link.name}
50-
href={link.href}
51-
/>
52-
))
53-
: loggedOutLinks.map((link) => (
54-
<NavbarLink
55-
key={link.name}
56-
name={link.name}
57-
href={link.href}
58-
/>
59-
))}
60-
</div>
45+
<div className="sticky top-0 z-40 w-full">
46+
{shouldShowPreviewBanner && previewBranchName ? (
47+
<PreviewBanner branchName={previewBranchName} />
6148
) : null}
49+
<nav className="inline-flex h-[60px] w-full items-center border border-white/50 bg-[#f3f4f6]/20 p-3 backdrop-blur-[26px]">
50+
{/* Left section */}
51+
{!isSmallScreen ? (
52+
<div className="flex flex-1 items-center gap-5">
53+
{isLoggedIn
54+
? linksWithChat.map((link) => (
55+
<NavbarLink
56+
key={link.name}
57+
name={link.name}
58+
href={link.href}
59+
/>
60+
))
61+
: loggedOutLinks.map((link) => (
62+
<NavbarLink
63+
key={link.name}
64+
name={link.name}
65+
href={link.href}
66+
/>
67+
))}
68+
</div>
69+
) : null}
6270

63-
{/* Centered logo */}
64-
<div className="static h-auto w-[4.5rem] md:absolute md:left-1/2 md:top-1/2 md:w-[5.5rem] md:-translate-x-1/2 md:-translate-y-1/2">
65-
<IconAutoGPTLogo className="h-full w-full" />
66-
</div>
71+
{/* Centered logo */}
72+
<div className="static h-auto w-[4.5rem] md:absolute md:left-1/2 md:top-1/2 md:w-[5.5rem] md:-translate-x-1/2 md:-translate-y-1/2">
73+
<IconAutoGPTLogo className="h-full w-full" />
74+
</div>
6775

68-
{/* Right section */}
69-
{isLoggedIn && !isSmallScreen ? (
70-
<div className="flex flex-1 items-center justify-end gap-4">
71-
<div className="flex items-center gap-4">
72-
<AgentActivityDropdown />
73-
{profile && <Wallet key={profile.username} />}
74-
<AccountMenu
75-
userName={profile?.username}
76-
userEmail={profile?.name}
77-
avatarSrc={profile?.avatar_url ?? ""}
78-
menuItemGroups={dynamicMenuItems}
79-
/>
76+
{/* Right section */}
77+
{isLoggedIn && !isSmallScreen ? (
78+
<div className="flex flex-1 items-center justify-end gap-4">
79+
<div className="flex items-center gap-4">
80+
<AgentActivityDropdown />
81+
{profile && <Wallet key={profile.username} />}
82+
<AccountMenu
83+
userName={profile?.username}
84+
userEmail={profile?.name}
85+
avatarSrc={profile?.avatar_url ?? ""}
86+
menuItemGroups={dynamicMenuItems}
87+
/>
88+
</div>
8089
</div>
81-
</div>
82-
) : !isLoggedIn ? (
83-
<div className="flex w-full items-center justify-end">
84-
<LoginButton />
85-
</div>
86-
) : null}
87-
{/* <ThemeToggle /> */}
88-
</nav>
90+
) : !isLoggedIn ? (
91+
<div className="flex w-full items-center justify-end">
92+
<LoginButton />
93+
</div>
94+
) : null}
95+
{/* <ThemeToggle /> */}
96+
</nav>
97+
</div>
8998
{/* Mobile Navbar - Adjust positioning */}
9099
<>
91100
{isLoggedIn && isSmallScreen ? (
@@ -123,4 +132,4 @@ export const NavbarView = ({ isLoggedIn }: NavbarViewProps) => {
123132
</>
124133
</>
125134
);
126-
};
135+
}

‎autogpt_platform/frontend/src/components/layout/Navbar/components/PreviewBanner/PreviewBanner.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
type Props = {
2+
branchName: string;
3+
};
4+
5+
export function PreviewBanner({ branchName }: Props) {
6+
if (!branchName) return null;
7+
8+
return (
9+
<div className="w-full bg-green-500 px-4 py-2 text-center text-sm font-medium text-white">
10+
This is a Preview build for the branch:{" "}
11+
<span className="font-mono text-xs font-semibold">{branchName}</span>
12+
</div>
13+
);
14+
}

‎autogpt_platform/frontend/src/components/molecules/PreviewBanner/PreviewBanner.tsx‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎autogpt_platform/frontend/src/services/environment/index.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,19 @@ function getEnvironmentStr() {
6161
}
6262

6363
function getPreviewStealingDev() {
64-
return process.env.NEXT_PUBLIC_PREVIEW_STEALING_DEV || "";
64+
const branch = process.env.NEXT_PUBLIC_PREVIEW_STEALING_DEV || "";
65+
const appEnv = getAppEnv();
66+
67+
if (
68+
!branch ||
69+
branch === "dev" ||
70+
branch === "refs/heads/dev" ||
71+
appEnv !== AppEnv.DEV
72+
) {
73+
return null;
74+
}
75+
76+
return branch;
6577
}
6678

6779
function isProductionBuild() {

0 commit comments

Comments
 (0)