fix: Toolbar better auth issue

frontend/src/toolbar/bar/Toolbar.scss

@@ -144,8 +144,4 @@
             transform: var(--toolbar-translate) scale(0);
         }
     }
-
-    &--unauthenticated {
-        width: calc(5rem + 1px); // Account for border
-    }
 }

frontend/src/toolbar/bar/Toolbar.tsx

@@ -77,15 +77,18 @@ function MoreMenu(): JSX.Element {
             }
             maxContentWidth={true}
         >
-            <ToolbarButton icon={<IconMenu />} title="More options" />
+            <ToolbarButton title="More options">
+                <IconMenu />
+            </ToolbarButton>
         </LemonMenu>
     )
 }
 
-export function ToolbarInfoMenu(): JSX.Element {
+export function ToolbarInfoMenu(): JSX.Element | null {
     const ref = useRef<HTMLDivElement | null>(null)
     const { visibleMenu, isDragging, menuProperties, minimized, isBlurred } = useValues(toolbarLogic)
     const { setMenu } = useActions(toolbarLogic)
+    const { isAuthenticated } = useValues(toolbarConfigLogic)
 
     const content = minimized ? null : visibleMenu === 'flags' ? (
         <FlagsToolbarMenu />
@@ -102,6 +105,10 @@ export function ToolbarInfoMenu(): JSX.Element {
         return () => setMenu(null)
     }, [ref.current])
 
+    if (!isAuthenticated) {
+        return null
+    }
+
     return (
         <div
             className={clsx(
@@ -163,7 +170,6 @@ export function Toolbar(): JSX.Element {
                 className={clsx(
                     'Toolbar',
                     minimized && 'Toolbar--minimized',
-                    !isAuthenticated && 'Toolbar--unauthenticated',
                     hedgehogMode && 'Toolbar--hedgehog-mode',
                     isDragging && 'Toolbar--dragging'
                 )}
@@ -178,19 +184,32 @@ export function Toolbar(): JSX.Element {
                 }
             >
                 <ToolbarButton
-                    icon={<IconLogomark />}
                     onClick={isAuthenticated ? toggleMinimized : authenticate}
                     title={isAuthenticated ? 'Minimize' : 'Authenticate the PostHog Toolbar'}
                     titleMinimized={isAuthenticated ? 'Expand the toolbar' : 'Authenticate the PostHog Toolbar'}
-                />
+                >
+                    <IconLogomark />
+                </ToolbarButton>
                 {isAuthenticated ? (
                     <>
-                        <ToolbarButton icon={<IconSearch />} menuId="inspect" />
-                        <ToolbarButton icon={<IconCursorClick />} menuId="heatmap" />
-                        <ToolbarButton icon={<IconBolt />} menuId="actions" />
-                        <ToolbarButton icon={<IconToggle />} menuId="flags" title="Feature flags" />
+                        <ToolbarButton menuId="inspect">
+                            <IconSearch />
+                        </ToolbarButton>
+                        <ToolbarButton menuId="heatmap">
+                            <IconCursorClick />
+                        </ToolbarButton>
+                        <ToolbarButton menuId="actions">
+                            <IconBolt />
+                        </ToolbarButton>
+                        <ToolbarButton menuId="flags" title="Feature flags">
+                            <IconToggle />
+                        </ToolbarButton>
                     </>
-                ) : null}
+                ) : (
+                    <ToolbarButton flex onClick={authenticate}>
+                        Authenticate
+                    </ToolbarButton>
+                )}
 
                 <MoreMenu />
             </div>

frontend/src/toolbar/bar/ToolbarButton.scss

@@ -14,6 +14,7 @@
         justify-content: center;
         width: 2rem;
         height: 2rem;
+        margin: 0.25rem;
         min-height: var(--lemon-button-height);
         color: var(--muted-alt);
         appearance: none !important; // Important as this gets overridden by Ant styles...
@@ -23,6 +24,7 @@
         border: none;
         border-radius: var(--radius);
         transition: transform 100ms ease;
+        font-weight: 600;
 
         > svg {
             font-size: 1.5rem;
@@ -43,4 +45,12 @@
             }
         }
     }
+
+    &--flex {
+        flex-grow: 1;
+        width: auto;
+        button {
+            width: 100%;
+        }
+    }
 }

frontend/src/toolbar/bar/ToolbarButton.tsx

@@ -10,17 +10,18 @@ import React from 'react'
 import { MenuState, toolbarLogic } from './toolbarLogic'
 
 export type ToolbarButtonProps = {
-    icon: React.ReactElement | null
+    children: React.ReactNode
     onClick?: () => void
     title?: string
     titleMinimized?: JSX.Element | string
     menuId?: MenuState
+    flex?: boolean
 }
 
 export const ToolbarButton: FunctionComponent<ToolbarButtonProps> = React.forwardRef<
     HTMLDivElement,
     ToolbarButtonProps
->(({ icon, title, onClick, titleMinimized, menuId, ...props }, ref): JSX.Element => {
+>(({ children, title, onClick, titleMinimized, menuId, flex, ...props }, ref): JSX.Element => {
     const { visibleMenu, minimized, isDragging } = useValues(toolbarLogic)
     const { setVisibleMenu } = useActions(toolbarLogic)
 
@@ -54,9 +55,13 @@ export const ToolbarButton: FunctionComponent<ToolbarButtonProps> = React.forwar
     }
 
     const theButton = (
-        <div className={clsx('ToolbarButton', active && 'ToolbarButton--active')} aria-label={theTitle} ref={ref}>
+        <div
+            className={clsx('ToolbarButton', active && 'ToolbarButton--active', flex && 'ToolbarButton--flex')}
+            aria-label={theTitle}
+            ref={ref}
+        >
             <button className="ToolbarButton__button" {...props} onClick={_onClick}>
-                {icon}
+                {children}
             </button>
         </div>
     )

frontend/src/toolbar/flags/flagsToolbarLogic.ts

@@ -40,11 +40,6 @@ export const flagsToolbarLogic = kea<flagsToolbarLogicType>([
                         `/api/projects/@current/feature_flags/my_flags${encodeParams(params, '?')}`
                     )
 
-                    if (response.status >= 400) {
-                        toolbarConfigLogic.actions.tokenExpired()
-                        return []
-                    }
-
                     breakpoint()
                     if (!response.ok) {
                         return []

frontend/src/toolbar/toolbarConfigLogic.ts

@@ -120,9 +120,12 @@ export async function toolbarFetch(
     if (response.status === 403) {
         const responseData = await response.json()
         // Do not try to authenticate if the user has no project access altogether
-        if (responseData.detail !== "You don't have access to the project.") {
+        if (responseData.detail === "You don't have access to the project.") {
             toolbarConfigLogic.actions.authenticate()
         }
     }
+    if (response.status == 401) {
+        toolbarConfigLogic.actions.tokenExpired()
+    }
     return response
 }