Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fe fixes #2658

Merged
merged 7 commits into from
Sep 19, 2024
Merged

Fe fixes #2658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6376595
fix
maamalama Sep 19, 2024
63b40c1
buttons fix and etc
maamalama Sep 19, 2024
b28b359
fix
maamalama Sep 19, 2024
943761f
fix 2
maamalama Sep 19, 2024
2fbe1d7
nav fix
maamalama Sep 19, 2024
d2c86f8
fix
maamalama Sep 19, 2024
e2e8eeb
banner
maamalama Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 42 additions & 27 deletions web/components/layout/auth/DesktopSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
} from "@heroicons/react/24/outline";
import Link from "next/link";
import { useRouter } from "next/router";
import { useMemo } from "react";
import { useMemo, useEffect, useRef, useState } from "react";
import { useOrg } from "../organizationContext";
import OrgDropdown from "../orgDropdown";
import NavItem from "./NavItem";
Expand Down Expand Up @@ -90,6 +90,35 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
});
}, [NAVIGATION, isCollapsed, expandedItems]);

const sidebarRef = useRef<HTMLDivElement>(null);
const navItemsRef = useRef<HTMLDivElement>(null);
const [canShowInfoBox, setCanShowInfoBox] = useState(false);

// Function to calculate if there's enough space to show the InfoBox
const calculateAvailableSpace = () => {
if (sidebarRef.current && navItemsRef.current) {
const sidebarHeight = sidebarRef.current.offsetHeight;
const navItemsHeight = navItemsRef.current.offsetHeight;
const fixedContentHeight = 100; // Approximate height of fixed elements (header, footer)
const infoBoxHeight = 150; // Approximate height of the InfoBox

const availableHeight =
sidebarHeight - navItemsHeight - fixedContentHeight;

setCanShowInfoBox(availableHeight >= infoBoxHeight);
}
};

useEffect(() => {
calculateAvailableSpace();

// Add event listener for window resize
window.addEventListener("resize", calculateAvailableSpace);
return () => {
window.removeEventListener("resize", calculateAvailableSpace);
};
}, [isCollapsed, expandedItems]);

return (
<>
<div
Expand All @@ -100,18 +129,21 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
)}
/>
<div
ref={sidebarRef}
className={cn(
"hidden md:flex md:flex-col z-30 bg-background dark:bg-gray-900 transition-all duration-300 h-screen bg-white pb-4",
largeWith,
"fixed top-0 left-0" // Changed from "sticky top-0" to "fixed top-0 left-0"
"fixed top-0 left-0"
)}
>
<div className="w-full flex flex-grow flex-col overflow-y-auto border-r dark:border-gray-700 justify-between">
<div className="flex items-center gap-2 h-14 border-b dark:border-gray-700">
<div className="flex items-center gap-2 w-full">
{!isCollapsed && <OrgDropdown />}
</div>
<div className={cn("mx-auto", isCollapsed ? "w-fit" : "mr-2")}>
<div
className={cn("mx-auto", isCollapsed ? "w-full mr-4" : "mr-2")}
>
<Button
variant="ghost"
size="icon"
Expand Down Expand Up @@ -152,30 +184,32 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
)}

<div
ref={navItemsRef}
data-collapsed={isCollapsed}
className="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2 "
className="group flex flex-col py-2 data-[collapsed=true]:py-2 "
>
<nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
<nav className="grid flex-grow overflow-y-auto px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
{NAVIGATION_ITEMS.map((link) => (
<NavItem
key={link.name}
link={link}
isCollapsed={isCollapsed}
expandedItems={expandedItems}
toggleExpand={toggleExpand}
deep={0}
/>
))}
</nav>
</div>
</div>
{!isCollapsed && (
{canShowInfoBox && !isCollapsed && (
<div className="p-2">
<InfoBox icon={() => <></>} className="flex flex-col">
<div>
<span className="text-[#1c4ed8] text-xs font-semibold font-['Inter'] leading-tight">
<span className="text-[#1c4ed8] text-xs font-semibold leading-tight">
Early Adopter Exclusive: $120 Credit for the year. <br />
</span>
<span className="text-[#1c4ed8] text-xs font-light font-['Inter'] leading-tight">
<span className="text-[#1c4ed8] text-xs font-light leading-tight">
Switch to Pro and get $10/mo credit for 1 year, as a thank
you for your early support!
</span>
Expand Down Expand Up @@ -275,25 +309,6 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
</>
)}
</div>
{/* {tier === "free" &&
org?.currentOrg?.organization_type !== "customer" && (
<div className={cn("p-2", isCollapsed && "hidden")}>
<Link href="/settings/billing">
<Button
variant="outline"
className="w-full justify-between dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
>
<div className="flex items-center">
<CloudArrowUpIcon className="h-5 w-5 mr-1.5" />
<span>Free Plan</span>
</div>
<span className="text-xs font-normal text-primary dark:text-gray-300">
Upgrade
</span>
</Button>
</Link>
</div>
)} */}
</div>
</div>
</>
Expand Down
7 changes: 5 additions & 2 deletions web/components/layout/auth/NavItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ interface NavItemProps {
isSubItem?: boolean;
expandedItems: string[];
toggleExpand: (name: string) => void;
deep?: number;
}

const NavItem: React.FC<NavItemProps> = ({
Expand All @@ -32,6 +33,7 @@ const NavItem: React.FC<NavItemProps> = ({
isSubItem = false,
expandedItems,
toggleExpand,
deep,
}) => {
const router = useRouter();
const hasSubItems = link.subItems && link.subItems.length > 0;
Expand Down Expand Up @@ -94,9 +96,9 @@ const NavItem: React.FC<NavItemProps> = ({
variant: link.current ? "secondary" : "ghost",
size: "xs",
}),
"h-6",
deep && deep > 1 ? "h-6" : "h-8",
"justify-start w-full",
"text-sm font-medium my-[2px] text-[12px]"
"text-sm font-medium text-[12px]"
),
""
)}
Expand Down Expand Up @@ -131,6 +133,7 @@ const NavItem: React.FC<NavItemProps> = ({
isSubItem={true}
expandedItems={expandedItems}
toggleExpand={toggleExpand}
deep={deep ? deep + 1 : 1}
/>
))}
</div>
Expand Down
27 changes: 7 additions & 20 deletions web/components/layout/auth/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
import {
ArchiveBoxIcon,
BellIcon,
BuildingLibraryIcon,
CircleStackIcon,
HomeIcon,
LockClosedIcon,
Expand Down Expand Up @@ -136,39 +135,27 @@ const Sidebar = ({ setOpen }: SidebarProps) => {
icon: BellIcon,
current: pathname.includes("/alerts"),
},
{
name: "Webhooks",
href: "/webhooks",
icon: Webhook,
current: pathname.includes("/webhooks"),
},
{
name: "Vault",
href: "/vault",
icon: LockClosedIcon,
current: pathname.includes("/vault"),
},
],
},
...(org?.currentOrg?.tier === "enterprise"
? [
{
name: "Enterprise",
href: "/enterprise",
icon: BuildingLibraryIcon,
current: pathname.includes("/enterprise"),
icon: null,
subItems: [
{
name: "Webhooks",
href: "/enterprise/webhooks",
icon: null,
current: false,
href: "/webhooks",
icon: Webhook,
current: pathname.includes("/webhooks"),
},
{
name: "Vault",
href: "/enterprise/vault",
icon: null,
current: false,
href: "/vault",
icon: LockClosedIcon,
current: pathname.includes("/vault"),
},
],
},
Expand Down
90 changes: 50 additions & 40 deletions web/pages/signin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { supabaseServer } from "../lib/supabaseServer";
import { Result, err, ok } from "../lib/result";
import PublicMetaData from "../components/layout/public/publicMetaData";
import { useEffect } from "react";
import { InfoBox } from "../components/ui/helicone/infoBox"; // Import InfoBox

export type CustomerPortalContent = {
domain: string;
Expand Down Expand Up @@ -55,50 +56,59 @@ const SignIn = ({
return (
<PublicMetaData
description={
"How developers build AI applications. Get observability, tooling, fine-tuning, and evaluations out of the box. "
"How developers build AI applications. Get observability, tooling, fine-tuning, and evaluations out of the box."
}
ogImageUrl={"https://www.helicone.ai/static/helicone-og.webp"}
>
<AuthForm
handleEmailSubmit={async (email: string, password: string) => {
const { data, error } = await supabase.auth.signInWithPassword({
email: email,
password: password,
});
<div>
<div className="p-4 bg-[#F8FEFF]">
<InfoBox icon={() => <></>} className="flex flex-col">
<span className="text-red-600 text-sm font-semibold">
We are having issues with auth right now, we&apos;ll be back soon.
</span>
</InfoBox>
</div>
<AuthForm
handleEmailSubmit={async (email: string, password: string) => {
const { data, error } = await supabase.auth.signInWithPassword({
email: email,
password: password,
});

if (error) {
setNotification("Error logging in. Please try again.", "error");
console.error(error);
return;
}
setNotification("Success. Redirecting...", "success");
router.push("/dashboard");
}}
handleGoogleSubmit={async () => {
const { error } = await supabase.auth.signInWithOAuth({
provider: "google",
});
if (error) {
setNotification("Error logging in. Please try again.", "error");
console.error(error);
return;
}
setNotification("Successfully signed in.", "success");
}}
handleGithubSubmit={async () => {
const { error } = await supabase.auth.signInWithOAuth({
provider: "github",
});
if (error) {
setNotification("Error logging in. Please try again.", "error");
console.error(error);
return;
}
setNotification("Successfully signed in.", "success");
}}
authFormType={"signin"}
customerPortalContent={customerPortalContent}
/>
if (error) {
setNotification("Error logging in. Please try again.", "error");
console.error(error);
return;
}
setNotification("Success. Redirecting...", "success");
router.push("/dashboard");
}}
handleGoogleSubmit={async () => {
const { error } = await supabase.auth.signInWithOAuth({
provider: "google",
});
if (error) {
setNotification("Error logging in. Please try again.", "error");
console.error(error);
return;
}
setNotification("Successfully signed in.", "success");
}}
handleGithubSubmit={async () => {
const { error } = await supabase.auth.signInWithOAuth({
provider: "github",
});
if (error) {
setNotification("Error logging in. Please try again.", "error");
console.error(error);
return;
}
setNotification("Successfully signed in.", "success");
}}
authFormType={"signin"}
customerPortalContent={customerPortalContent}
/>
</div>
</PublicMetaData>
);
};
Expand Down
8 changes: 8 additions & 0 deletions web/pages/signup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import PublicMetaData from "../components/layout/public/publicMetaData";
import { GetServerSidePropsContext } from "next";
import posthog from "posthog-js";
import { InfoBanner } from "../components/shared/themed/themedDemoBanner";
import { InfoBox } from "../components/ui/helicone/infoBox";

const SignUp = () => {
const supabase = useSupabaseClient();
Expand Down Expand Up @@ -39,6 +40,13 @@ const SignUp = () => {
ogImageUrl={"https://www.helicone.ai/static/helicone-og.webp"}
>
{demo === "true" && <InfoBanner />}
<div className="p-4 bg-[#F8FEFF]">
<InfoBox icon={() => <></>} className="flex flex-col">
<span className="text-red-600 text-sm font-semibold">
We are having issues with auth right now, we&apos;ll be back soon.
</span>
</InfoBox>
</div>
<AuthForm
handleEmailSubmit={async (email: string, password: string) => {
const origin = window.location.origin;
Expand Down
Loading