Dashboard navigation refinements (#4569)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Kapil Gowru <[email protected]>
Co-authored-by: Danny Sheridan <[email protected]>

Author: 3 people

packages/fern-dashboard/src/app/[orgName]/(homepage)/@header/default.tsx

@@ -1,10 +1,9 @@
 import { PopoverArrow } from "@radix-ui/react-popover";
-import { Book, RotateCcw } from "lucide-react";
+import { BookOpen, ExternalLink, RotateCcw } from "lucide-react";
 import { Suspense } from "react";
 
 import { getCurrentSession } from "@/app/services/auth0/getCurrentSession";
 import type { Auth0OrgName } from "@/app/services/auth0/types";
-import { CreateMenuItem } from "@/components/auth/CreateMenuItem";
 import { LogoutButton } from "@/components/auth/LogoutButton";
 import { OrgSwitcher } from "@/components/auth/OrgSwitcher";
 import { HeaderLinkButton } from "@/components/layout/HeaderLinkButton";
@@ -43,41 +42,61 @@ export default async function HeaderLayout({
             <div className="flex shrink-0 gap-2">
                 <div className="hidden items-center md:flex">
                     <SupportHeaderLink icon={false} />
-                    <HeaderLinkButton text="Docs" href="https://buildwithfern.com/learn" />
-                    <HeaderLinkButton
-                        text="Changelog"
-                        href="https://buildwithfern.com/learn/docs/getting-started/changelog"
-                    />
-                    <CreateMenuItem accessToken={accessToken} />
+                    <Popover>
+                        <PopoverTrigger asChild>
+                            <button
+                                type="button"
+                                className="text-gray-1100 hover:text-gray-1200 flex h-8 w-8 cursor-pointer items-center justify-center transition-colors"
+                            >
+                                <BookOpen className="h-4 w-4" />
+                            </button>
+                        </PopoverTrigger>
+                        <PopoverContent align="end" collisionPadding={8} className="w-[200px] p-1">
+                            <PopoverArrow className="fill-popover" />
+                            <div className="flex flex-col">
+                                <HeaderLinkButton
+                                    text="Docs"
+                                    className="justify-start px-2 text-left"
+                                    href="https://buildwithfern.com/learn"
+                                    rightIcon={<ExternalLink className="h-3 w-3" />}
+                                />
+                                <HeaderLinkButton
+                                    text="Changelog"
+                                    className="justify-start px-2 text-left"
+                                    href="https://buildwithfern.com/learn/docs/getting-started/changelog"
+                                    rightIcon={<ExternalLink className="h-3 w-3" />}
+                                />
+                            </div>
+                        </PopoverContent>
+                    </Popover>
                     <ThemeToggle />
                 </div>
                 <Popover>
                     <PopoverTrigger className="cursor-pointer">
                         <ProfileImage picture={picture} name={name} />
                     </PopoverTrigger>
-                    <PopoverContent collisionPadding={8}>
+                    <PopoverContent collisionPadding={8} className="w-[200px]">
                         <PopoverArrow className="fill-popover" />
                         <div className="flex flex-col gap-4">
                             <div className="flex flex-col">
                                 <div className="text-gray-1200 text-sm">{name}</div>
                                 <div className="text-xs text-gray-800">{email}</div>
                             </div>
                             <div className="flex flex-col md:hidden">
-                                <CreateMenuItem accessToken={accessToken} />
                                 <SupportHeaderLink
-                                    className="justify-start px-0 text-left hover:px-2 has-[>svg]:px-0 hover:has-[>svg]:px-2"
+                                    className="justify-start text-left !px-0"
                                     buttonProps={{ variant: "ghost" }}
                                     icon={true}
                                 />
                                 <HeaderLinkButton
                                     text="Docs"
-                                    className="justify-start px-0 text-left hover:px-2 has-[>svg]:px-0 hover:has-[>svg]:px-2"
+                                    className="justify-start text-left !px-0"
                                     href="https://buildwithfern.com/learn"
-                                    icon={<Book className="h-4 w-4" />}
+                                    icon={<BookOpen className="h-4 w-4" />}
                                 />
                                 <HeaderLinkButton
                                     text="Changelog"
-                                    className="justify-start px-0 text-left hover:px-2 has-[>svg]:px-0 hover:has-[>svg]:px-2"
+                                    className="justify-start text-left !px-0"
                                     href="https://buildwithfern.com/learn/docs/getting-started/changelog"
                                     icon={<RotateCcw className="h-4 w-4" />}
                                 />

packages/fern-dashboard/src/app/[orgName]/(homepage)/@navbar/default.tsx

@@ -36,14 +36,14 @@ export default async function Navbar({ params }: Readonly<{ params: Promise<{ or
                     <NavbarItem title="SDKs" iconType="sdks" href="/sdks" />
                 </FeatureFlaggedServerSide>
                 <NavbarSectionTitle title="Settings" />
-                <NavbarItem title="Members" iconType="members" href="/members" />
                 <FeatureFlaggedServerSide flag={PosthogFeatureFlag.ENABLE_INCIDENTS_PAGE} orgName={orgName}>
                     <NavbarItem title="Incidents" iconType="incidents" href="/incidents" />
                 </FeatureFlaggedServerSide>
+                <NavbarItem title="Members" iconType="members" href="/members" />
+                <NavbarItem title="General" iconType="settings" href="/settings" />
                 <FeatureFlaggedServerSide flag={PosthogFeatureFlag.ENABLE_API_KEYS_PAGE} orgName={orgName}>
                     <NavbarItem title="API Keys" mobileTitle="Keys" iconType="api-keys" href="/api-keys" />
                 </FeatureFlaggedServerSide>
-                <NavbarItem title="Settings" iconType="settings" href="/settings" />
                 <FeatureFlaggedServerSide flag={PosthogFeatureFlag.ENABLE_BILLING_PAGE} orgName={orgName}>
                     <NavbarItem title="Billing" iconType="billing" href="/billing" />
                 </FeatureFlaggedServerSide>

packages/fern-dashboard/src/components/auth/OrgSwitcher.tsx

@@ -27,6 +27,11 @@ export async function OrgSwitcher({ currentOrgName }: { currentOrgName?: Auth0Or
     const isFernAdmin = await isFernEmployee(session.user.sub);
 
     return (
-        <OrgSwitcherClient organizations={organizations} currentOrgName={currentOrgName} isFernAdmin={isFernAdmin} />
+        <OrgSwitcherClient
+            organizations={organizations}
+            currentOrgName={currentOrgName}
+            isFernAdmin={isFernAdmin}
+            accessToken={session.accessToken}
+        />
     );
 }

packages/fern-dashboard/src/components/auth/OrgSwitcherClient.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useRouter } from "@bprogress/next/app";
-import { ChevronDown, Clock } from "lucide-react";
+import { ChevronDown, Clock, Plus } from "lucide-react";
 import Link from "next/link";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 
 import type { Auth0Organization, Auth0OrgName } from "@/app/services/auth0/types";
-
+import { CreateOrganizationModal } from "@/components/auth/CreateOrganizationModal";
 import { Button } from "@/components/ui/button";
 import { SearchableDropdown, type SearchableDropdownRef } from "@/components/ui/SearchableDropdown";
 import { WrapWithKeyboardShortcut } from "@/components/ui/WrapWithKeyboardShortcut";
@@ -28,8 +28,9 @@ const OrgSwitcherClientInternal = forwardRef<
         organizations: Auth0Organization[];
         currentOrgName?: Auth0OrgName;
         isFernAdmin: boolean;
+        accessToken: string;
     }
->(({ organizations, currentOrgName, isFernAdmin }, ref) => {
+>(({ organizations, currentOrgName, isFernAdmin, accessToken }, ref) => {
     const dropdownRef = useRef<SearchableDropdownRef>(null);
 
     useImperativeHandle(ref, () => ({
@@ -41,6 +42,7 @@ const OrgSwitcherClientInternal = forwardRef<
     const [localOrgName, setLocalOrgName] = useState(currentOrgName);
     const [searchTerm, setSearchTerm] = useState("");
     const [recentOrgNames, setRecentOrgNames] = useState<Auth0OrgName[]>([]);
+    const [showOrgModal, setShowOrgModal] = useState(false);
 
     useEffect(() => {
         setLocalOrgName(orgName);
@@ -119,84 +121,113 @@ const OrgSwitcherClientInternal = forwardRef<
 
     const currentOrg = organizations.find((org) => org.name === localOrgName);
 
+    const shouldShowSearch = organizations.length > 10;
+
     return (
-        <SearchableDropdown
-            ref={dropdownRef}
-            items={filteredOrganizationsWithAdmin}
-            searchTerm={searchTerm}
-            onSearchChange={setSearchTerm}
-            onSelect={(org) => onSelectOrg(org.name)}
-            searchPlaceholder="Search organizations..."
-            emptyMessage="No organizations found"
-            getItemKey={(org) => org.id}
-            shouldShowSearch={organizations.length > 10}
-            renderItem={(organization, onSelectFromDropdown, isHighlighted) => {
-                // Check if this is the admin option
-                const isAdminOption = "__isAdminOption" in organization && organization.__isAdminOption;
-
-                if (isAdminOption) {
+        <>
+            <SearchableDropdown
+                ref={dropdownRef}
+                items={filteredOrganizationsWithAdmin}
+                searchTerm={searchTerm}
+                onSearchChange={setSearchTerm}
+                onSelect={(org) => onSelectOrg(org.name)}
+                searchPlaceholder="Search organizations..."
+                emptyMessage="No organizations found"
+                getItemKey={(org) => org.id}
+                shouldShowSearch={shouldShowSearch}
+                searchRightContent={
+                    <Button
+                        size="sm"
+                        variant="ghost"
+                        className="h-[38px] w-[38px] shrink-0 p-0"
+                        onClick={() => setShowOrgModal(true)}
+                    >
+                        <Plus className="h-4 w-4" />
+                        <span className="sr-only">Create organization</span>
+                    </Button>
+                }
+                headerContent={
+                    !shouldShowSearch ? (
+                        <Button
+                            size="sm"
+                            variant="ghost"
+                            className="flex w-full items-center justify-start gap-2 px-2"
+                            onClick={() => setShowOrgModal(true)}
+                        >
+                            <Plus className="h-4 w-4" />
+                            <span>Create new org</span>
+                        </Button>
+                    ) : undefined
+                }
+                renderItem={(organization, onSelectFromDropdown, isHighlighted) => {
+                    // Check if this is the admin option
+                    const isAdminOption = "__isAdminOption" in organization && organization.__isAdminOption;
+
+                    if (isAdminOption) {
+                        return (
+                            <button
+                                type="button"
+                                className={cn(
+                                    "flex w-full cursor-pointer items-center justify-between px-3 rounded py-1.5 text-left text-sm focus:outline-none flex-wrap text-muted-foreground",
+                                    isHighlighted ? "bg-gray-300" : "hover:bg-gray-300"
+                                )}
+                                onClick={() => {
+                                    onSelectOrg(organization.name);
+                                    onSelectFromDropdown();
+                                }}
+                            >
+                                <div className="flex flex-1 items-center gap-2">
+                                    Go to <code className="text-wrap max-w-[170px]">{organization.name}</code>
+                                </div>
+                                <div className="flex-shrink-0 justify-end">→</div>
+                            </button>
+                        );
+                    }
+
+                    // Regular organization
+                    const isRecent = recentOrgNames.includes(organization.name);
+                    const isCurrent = organization.name === localOrgName;
                     return (
-                        <button
-                            type="button"
+                        <Link
                             className={cn(
-                                "flex w-full cursor-pointer items-center justify-between px-3 rounded py-1.5 text-left text-sm focus:outline-none flex-wrap text-muted-foreground",
-                                isHighlighted ? "bg-gray-300" : "hover:bg-gray-300"
+                                "flex w-full cursor-pointer items-center justify-between px-3 rounded py-1.5 text-left text-sm focus:outline-none",
+                                searchTerm.length > 0 && isHighlighted ? "bg-gray-300" : "hover:bg-gray-300"
                             )}
+                            href={getPathnameForOrg(organization.name)}
+                            onMouseOver={() => {
+                                onHoverOrg(organization.name);
+                            }}
                             onClick={() => {
-                                onSelectOrg(organization.name);
+                                if (isCurrent) {
+                                    return;
+                                }
+                                onClickOrg(organization.name);
                                 onSelectFromDropdown();
                             }}
                         >
-                            <div className="flex flex-1 items-center gap-2">
-                                Go to <code className="text-wrap max-w-[170px]">{organization.name}</code>
+                            <div className="flex items-center gap-2">
+                                <OrgLogo organization={organization} />
+                                {getOrgDisplayName(organization)}
                             </div>
-                            <div className="flex-shrink-0 justify-end">→</div>
-                        </button>
+                            {isRecent && <Clock className="h-4 w-4 text-gray-600" />}
+                        </Link>
                     );
-                }
-
-                // Regular organization
-                const isRecent = recentOrgNames.includes(organization.name);
-                const isCurrent = organization.name === localOrgName;
-                return (
-                    <Link
-                        className={cn(
-                            "flex w-full cursor-pointer items-center justify-between px-3 rounded py-1.5 text-left text-sm focus:outline-none",
-                            searchTerm.length > 0 && isHighlighted ? "bg-gray-300" : "hover:bg-gray-300"
-                        )}
-                        href={getPathnameForOrg(organization.name)}
-                        onMouseOver={() => {
-                            onHoverOrg(organization.name);
-                        }}
-                        onClick={() => {
-                            if (isCurrent) {
-                                return;
-                            }
-                            onClickOrg(organization.name);
-                            onSelectFromDropdown();
-                        }}
-                    >
-                        <div className="flex items-center gap-2">
-                            <OrgLogo organization={organization} />
-                            {getOrgDisplayName(organization)}
-                        </div>
-                        {isRecent && <Clock className="h-4 w-4 text-gray-600" />}
-                    </Link>
-                );
-            }}
-        >
-            <Button
-                variant="outline"
-                className="shrink-0 justify-between !pl-2 md:min-w-[200px]"
-                disabled={organizations.length === 0}
+                }}
             >
-                <div className="flex items-center gap-2">
-                    {currentOrg && <OrgLogo organization={currentOrg} />}
-                    {currentOrg ? getOrgDisplayName(currentOrg) : "Select Organization"}
-                </div>
-                <ChevronDown className="h-4 w-4 opacity-50" />
-            </Button>
-        </SearchableDropdown>
+                <Button
+                    variant="outline"
+                    className="shrink-0 justify-between !pl-2 md:min-w-[200px]"
+                    disabled={organizations.length === 0}
+                >
+                    <div className="flex items-center gap-2">
+                        {currentOrg && <OrgLogo organization={currentOrg} />}
+                        {currentOrg ? getOrgDisplayName(currentOrg) : "Select Organization"}
+                    </div>
+                    <ChevronDown className="h-4 w-4 opacity-50" />
+                </Button>
+            </SearchableDropdown>
+            <CreateOrganizationModal accessToken={accessToken} open={showOrgModal} onOpenChange={setShowOrgModal} />
+        </>
     );
 });
 
@@ -205,11 +236,13 @@ OrgSwitcherClientInternal.displayName = "OrgSwitcherClientInternal";
 export const OrgSwitcherClient = ({
     organizations: initialOrganizations,
     currentOrgName,
-    isFernAdmin
+    isFernAdmin,
+    accessToken
 }: {
     organizations: Auth0Organization[];
     currentOrgName?: Auth0OrgName;
     isFernAdmin: boolean;
+    accessToken: string;
 }) => {
     const orgSwitcherRef = useRef<OrgSwitcherClientRef>(null);
 
@@ -228,6 +261,7 @@ export const OrgSwitcherClient = ({
                 organizations={organizations}
                 currentOrgName={currentOrgName}
                 isFernAdmin={isFernAdmin}
+                accessToken={accessToken}
             />
         </WrapWithKeyboardShortcut>
     );

packages/fern-dashboard/src/components/layout/HeaderLinkButton.tsx

@@ -7,27 +7,40 @@ export declare namespace HeaderLinkButton {
         text: string;
         href: string;
         icon?: React.ReactNode;
+        rightIcon?: React.ReactNode;
         className?: string;
         onClick?: () => void;
         buttonProps?: React.ComponentProps<typeof Button>;
+        openInNewTab?: boolean;
     }
 }
 
-export function HeaderLinkButton({ text, href, icon, className, onClick, buttonProps }: HeaderLinkButton.Props) {
+export function HeaderLinkButton({
+    text,
+    href,
+    icon,
+    rightIcon,
+    className,
+    onClick,
+    buttonProps,
+    openInNewTab = true
+}: HeaderLinkButton.Props) {
     if (onClick) {
         return (
             <Button size="sm" variant="ghost" className={className} onClick={onClick} {...buttonProps}>
                 {icon}
                 {text}
+                {rightIcon && <span className="ml-auto">{rightIcon}</span>}
             </Button>
         );
     }
 
     return (
         <Button size="sm" variant="ghost" asChild className={className} {...buttonProps}>
-            <a href={href} target="_blank">
+            <a href={href} {...(openInNewTab && { target: "_blank" })}>
                 {icon}
                 {text}
+                {rightIcon && <span className="ml-auto">{rightIcon}</span>}
             </a>
         </Button>
     );