feat: confirm before signing out

Sign out fired on the menu item itself, so a stray click on a small entry
ended the session with no way back other than signing in again.

Adds a confirmation dialog built from the same pieces as the
session-expired panel, matching what v1 shows (flyteorg/flyteconsole#937).

Signed-off-by: Kevin Su <pingsutw@apache.org>

Author: pingsutw

src/components/Header/Header.test.tsx

@@ -19,15 +19,21 @@ describe('Header', () => {
     expect(screen.queryByLabelText('User menu')).not.toBeInTheDocument()
   })
 
-  it('shows the user name and a Sign out link', async () => {
-    identity.data = { givenName: 'Kevin', familyName: 'Su', email: '', subject: 'k' }
+  it('shows the user name and confirms before signing out', async () => {
+    identity.data = {
+      givenName: 'Kevin',
+      familyName: 'Su',
+      email: '',
+      subject: 'k',
+    }
     render(<Header />)
     expect(screen.getByText('Kevin Su')).toBeInTheDocument()
 
+    // The menu item opens the confirmation rather than signing out directly.
     await userEvent.click(screen.getByLabelText('User menu'))
-    expect(screen.getByRole('link', { name: 'Sign out' })).toHaveAttribute(
-      'href',
-      expect.stringContaining('/logout'),
-    )
+    expect(screen.queryByText('Sign out of Flyte?')).not.toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Sign out' }))
+    expect(screen.getByText('Sign out of Flyte?')).toBeInTheDocument()
   })
 })

src/components/Header/Header.tsx

@@ -7,9 +7,9 @@
 import React, { useMemo, useState } from 'react'
 
 import { type MenuItem, PopoverMenu } from '@/components/Popovers'
+import { SignOutPanel } from '@/components/SignOutPanel'
 import { UserIcon } from '@/components/UserIdentityInfo'
 import { useIdentity } from '@/hooks/useIdentity'
-import { getLogoutUrl } from '@/lib/apiUtils'
 import { resolveUserNameFields } from '@/lib/userIdentityUtils'
 
 interface HeaderProps {
@@ -20,20 +20,24 @@ interface HeaderProps {
 export function Header({ logoComponent }: HeaderProps) {
   const { data: identity } = useIdentity()
   const [menuOpen, setMenuOpen] = useState(false)
+  const [signOutOpen, setSignOutOpen] = useState(false)
 
   const menuItems: MenuItem[] = useMemo(
     () => [
       {
         id: 'logout',
         type: 'custom',
         component: (
-          <a
-            href={getLogoutUrl()}
-            className="flex w-full cursor-pointer items-center px-4.5 py-2 text-[13px] text-(--system-gray-6)"
-            onClick={() => setMenuOpen(false)}
+          <button
+            type="button"
+            className="flex w-full cursor-pointer items-center px-4.5 py-2 text-left text-[13px] text-(--system-gray-6)"
+            onClick={() => {
+              setMenuOpen(false)
+              setSignOutOpen(true)
+            }}
           >
             Sign out
-          </a>
+          </button>
         ),
       },
     ],
@@ -77,6 +81,8 @@ export function Header({ logoComponent }: HeaderProps) {
           </button>
         </PopoverMenu>
       )}
+      {/* Outside the menu so closing the popover doesn't unmount the dialog. */}
+      <SignOutPanel open={signOutOpen} onCancel={() => setSignOutOpen(false)} />
     </div>
   )
 }

src/components/SignOutPanel.test.tsx

@@ -0,0 +1,33 @@
+/**
+ * © Copyright Union Systems Inc 2026. All rights reserved.
+ */
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { SignOutPanel } from './SignOutPanel'
+
+const location = vi.hoisted(() => ({ href: '' }))
+vi.mock('@/lib/windowUtils', () => ({ getWindow: () => ({ location }) }))
+
+describe('SignOutPanel', () => {
+  it('renders nothing while closed', () => {
+    render(<SignOutPanel open={false} onCancel={vi.fn()} />)
+    expect(screen.queryByText('Sign out of Flyte?')).not.toBeInTheDocument()
+  })
+
+  it('confirms to the logout url and cancels without leaving', async () => {
+    const onCancel = vi.fn()
+    render(<SignOutPanel open onCancel={onCancel} />)
+    expect(screen.getByText('Sign out of Flyte?')).toBeInTheDocument()
+
+    await userEvent.click(screen.getByTestId('signout-cancel'))
+    expect(onCancel).toHaveBeenCalled()
+    expect(location.href).toBe('')
+
+    await userEvent.click(screen.getByTestId('signout-confirm'))
+    expect(location.href).toBe('/v2/logout?redirect_url=%2Fv2%2Fprojects')
+  })
+})

src/components/SignOutPanel.tsx

@@ -0,0 +1,75 @@
+/**
+ * © Copyright Union Systems Inc 2026. All rights reserved.
+ */
+'use client'
+
+import { Button } from '@/components/Button'
+import {
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogTitle,
+} from '@/components/Dialog'
+import { Logo } from '@/components/Logo'
+import { getLogoutUrl } from '@/lib/apiUtils'
+import { getWindow } from '@/lib/windowUtils'
+
+export interface SignOutPanelProps {
+  open: boolean
+  onCancel: () => void
+}
+
+/**
+ * Confirmation shown before signing out — matches the session-expired panel.
+ * Signing out ends the proxy session, so it is worth a deliberate click rather
+ * than firing on the menu item itself.
+ */
+export function SignOutPanel({ open, onCancel }: SignOutPanelProps) {
+  return (
+    <Dialog
+      open={open}
+      onClose={onCancel}
+      size="lg"
+      aria-labelledby="signout-dialog-title"
+      className="border-1 p-10 dark:border-(--system-gray-3)"
+    >
+      <div className="flex w-full flex-col items-center gap-1">
+        <Logo width={55} height={44} className="shrink-0" />
+        <DialogTitle
+          id="signout-dialog-title"
+          className="text-center !text-2xl font-semibold"
+        >
+          Sign out of Flyte?
+        </DialogTitle>
+        <DialogBody className="!mt-2 w-full !p-0">
+          <p className="text-center text-sm font-semibold text-zinc-500 dark:text-zinc-400">
+            You will need to sign in again to continue.
+          </p>
+        </DialogBody>
+        <DialogActions className="flex sm:flex-col">
+          <Button
+            color="union"
+            size="lg"
+            className="!w-[311px] justify-center"
+            data-testid="signout-confirm"
+            onClick={() => {
+              const w = getWindow()
+              if (w) w.location.href = getLogoutUrl()
+            }}
+          >
+            Sign out
+          </Button>
+          <Button
+            outline
+            size="lg"
+            className="!w-[311px] justify-center"
+            data-testid="signout-cancel"
+            onClick={onCancel}
+          >
+            Cancel
+          </Button>
+        </DialogActions>
+      </div>
+    </Dialog>
+  )
+}