Add link to connectors page

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

@@ -1,17 +1,16 @@
 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) {
     return process.env.BASE_URL;
-  } 
+  }
 
   // next, try and build domain from headers
-  const requestedHost = request.headers.get('X-Forwarded-Host');
-  const requestedPort = request.headers.get('X-Forwarded-Port');
-  const requestedProto = request.headers.get('X-Forwarded-Proto');
+  const requestedHost = request.headers.get("X-Forwarded-Host");
+  const requestedPort = request.headers.get("X-Forwarded-Port");
+  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(
-      new URL("/auth/error", getDomain(request))
-    );
+    return NextResponse.redirect(new URL("/auth/error", getDomain(request)));
   }
 
   const redirectResponse = NextResponse.redirect(

web/src/components/Header.tsx

@@ -2,32 +2,81 @@
 
 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);
+
+  const handleLogout = () => {
+    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">
-        <h1 className="text-2xl font-bold">danswer 💃</h1>
+        <Link href="/">
+          <h1 className="text-2xl font-bold">danswer 💃</h1>
+        </Link>
 
         <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");
-            })
-          }
+          className="ml-auto flex items-center cursor-pointer relative"
+          onClick={() => setDropdownOpen(!dropdownOpen)}
+          ref={dropdownRef}
         >
-          {/* TODO: make this a dropdown with more options */}
-          <UserCircle size={24} className="mr-1" />
-          Logout
+          <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"
+              }
+            >
+              <Link href="/admin/connectors/slack">
+                <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>