Add link to connectors page

web/src/app/auth/google/callback/route.ts

@@ -1,7 +1,6 @@
 import { buildUrl } from "@/lib/userSS";
 import { NextRequest, NextResponse } from "next/server";
 
-
 const getDomain = (request: NextRequest) => {
   // use env variable if set
   if (process.env.BASE_URL) {
@@ -9,9 +8,9 @@ const getDomain = (request: NextRequest) => {
   }
 
   // next, try and build domain from headers
-  const requestedHost = request.headers.get('X-Forwarded-Host');
+  const requestedHost = request.headers.get("X-Forwarded-Host");
-  const requestedPort = request.headers.get('X-Forwarded-Port');
+  const requestedPort = request.headers.get("X-Forwarded-Port");
-  const requestedProto = request.headers.get('X-Forwarded-Proto');
+  const requestedProto = request.headers.get("X-Forwarded-Proto");
   if (requestedHost) {
     const url = request.nextUrl.clone();
     url.host = requestedHost;
@@ -21,9 +20,8 @@ const getDomain = (request: NextRequest) => {
   }
 
   // finally just use whatever is in the request
-  return request.nextUrl.origin
+  return request.nextUrl.origin;
-}
+};
-
 
 export const GET = async (request: NextRequest) => {
   // Wrapper around the FastAPI endpoint /auth/google/callback,
@@ -35,9 +33,7 @@ export const GET = async (request: NextRequest) => {
   const setCookieHeader = response.headers.get("set-cookie");
 
   if (!setCookieHeader) {
-    return NextResponse.redirect(
+    return NextResponse.redirect(new URL("/auth/error", getDomain(request)));
-      new URL("/auth/error", getDomain(request))
-    );
   }
 
   const redirectResponse = NextResponse.redirect(

web/src/components/Header.tsx

@@ -2,34 +2,83 @@
 
 import { logout } from "@/lib/user";
 import { UserCircle } from "@phosphor-icons/react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import "tailwindcss/tailwind.css";
 
 export const Header: React.FC = () => {
   const router = useRouter();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
-  return (
+  const handleLogout = () => {
-    <header className="bg-gray-800 text-gray-200 py-4">
-      <div className="mx-8 flex">
-        <h1 className="text-2xl font-bold">danswer 💃</h1>
-
-        <div
-          className="ml-auto flex items-center cursor-pointer hover:text-red-500"
-          onClick={() =>
     logout().then((isSuccess) => {
       if (!isSuccess) {
         alert("Failed to logout");
       }
       router.push("/auth/login");
-            })
+    });
+  };
+
+  // When dropdownOpen state changes, it attaches/removes the click listener
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
+        setDropdownOpen(false);
+      }
+    };
+
+    if (dropdownOpen) {
+      document.addEventListener("click", handleClickOutside);
+    } else {
+      document.removeEventListener("click", handleClickOutside);
+    }
+
+    // Clean up function to remove listener when component unmounts
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [dropdownOpen]);
+
+  return (
+    <header className="bg-gray-800 text-gray-200 py-4">
+      <div className="mx-8 flex">
+        <Link href="/">
+          <h1 className="text-2xl font-bold">danswer 💃</h1>
+        </Link>
+
+        <div
+          className="ml-auto flex items-center cursor-pointer relative"
+          onClick={() => setDropdownOpen(!dropdownOpen)}
+          ref={dropdownRef}
+        >
+          <UserCircle size={24} className="mr-1 hover:text-red-500" />
+          {dropdownOpen && (
+            <div
+              className={
+                "absolute top-10 right-0 mt-2 bg-gray-600 rounded-sm " +
+                "w-36 overflow-hidden shadow-xl z-10 text-sm text-gray-300"
               }
             >
-          {/* TODO: make this a dropdown with more options */}
+              <Link href="/admin/connectors/slack">
-          <UserCircle size={24} className="mr-1" />
+                <div className="flex py-2 px-3 cursor-pointer hover:bg-gray-500 border-b border-gray-500">
+                  Connectors
+                </div>
+              </Link>
+              <div
+                className="flex py-2 px-3 cursor-pointer hover:bg-gray-500"
+                onClick={handleLogout}
+              >
                 Logout
               </div>
             </div>
+          )}
+        </div>
+      </div>
     </header>
   );
 };