# Requirements: QSP-39314 — App Header Logo Click Navigates to Overview

## Status

✅ Approved

## Summary

Make the app header (logo + name) clickable so it navigates the user to `/overview` using client-side routing. This is a standard UX convention and aligns with the Dynatrace AppHeader experience standard. The implementation uses the Strato `AppHeader.Logo` polymorphic `as` prop with React Router's `Link` component.

## Acceptance Criteria

- [ ] AC-1: Clicking the app header (logo/name) from any page navigates to `/overview`.
- [ ] AC-2: Navigation uses client-side routing — no full page reload occurs.
- [ ] AC-3: The app header shows a pointer cursor on hover, indicating it is clickable.

## Key Decisions

| # | Decision | Rationale |
|---|---|---|
| D-1 | If the user is already on `/overview`, clicking the logo is a no-op. | User preference — avoids unnecessary re-renders when already on the home page. |
| D-2 | Use `Link` (from `react-router-dom`), not `NavLink`. | The logo is not a navigation tab — it should not show active-state styling (underline). `Link` provides client-side routing without active matching. |
| D-3 | Remove `<AppHeader.AppIcon />` child and use self-closing `<AppHeader.Logo />`. | Strato automatically includes the app icon and name when no children are provided. The routing examples from Strato all use the self-closing pattern. Cleaner and follows Strato convention. |

## Data Model

_Not applicable — no data model changes._

## UX / UI Specification

### Page Layout

The change is scoped entirely to the `<AppHeader.Logo>` element inside the app header. No layout changes. The logo + app name area becomes a clickable link to `/overview`.

### Component Breakdown

Only one component is modified:

| Component | File | Change |
|---|---|---|
| `Header` | `src/app/components/Header.tsx` | Add `as={Link}` and `to="/overview"` to `<AppHeader.Logo>`, remove `<AppHeader.AppIcon />` child |

### States

- **Default**: Logo + name displayed as a clickable link with pointer cursor.
- **On `/overview`**: No-op on click (natural `Link` behavior — React Router does not re-render when navigating to the current location).
- **Hover**: Pointer cursor (provided automatically by `Link` rendering as an `<a>` tag).

## API Contracts

_Not applicable — no API changes._

## DQL Queries

_Not applicable — no DQL queries._

## Implementation Plan

### Consumer Impact Analysis

| Interface / Element | Consumer file | Required change |
|---|---|---|
| `<AppHeader.Logo>` in `Header.tsx` | `src/app/components/Header.tsx` | Add `as={Link}`, `to="/overview"`, remove `<AppHeader.AppIcon />` child |
| `Header` component | `src/app/App.tsx` | No change — imports and usage remain identical |
| `nav-item-home` test ID | `e2e/src/page-objects/app-landing-page/app-header.po.ts` | No change — test ID is preserved on `<AppHeader.Logo>` |

### Step 1: Update `Header.tsx`

- **File**: `src/app/components/Header.tsx`
- **Changes**:
  1. Add `import { Link } from 'react-router-dom'`.
  2. Change `<AppHeader.Logo data-testid='nav-item-home'>` to `<AppHeader.Logo as={Link} to='/overview' data-testid='nav-item-home' />` (self-closing, no `<AppHeader.AppIcon />` child).
- **Verification**: `npm run typecheck`, `npm run lint`, manual check in browser — click logo from `/components` and `/components/scorecard` pages, verify navigation to `/overview` without full page reload.

## Unit Test Plan

No utils extraction is needed — the change is purely declarative (JSX prop changes). No new logic to unit test.

Existing E2E tests (`basic-platform-test.spec.ts`) verify the app opens and the header is visible via the `nav-item-home` test ID. The test ID is preserved, so existing tests remain valid.

## Edge Cases & Error Handling

| Edge case | Handling |
|---|---|
| User is already on `/overview` | No-op — React Router `Link` does not trigger re-render when target matches current location. |
| User is on `/overview/aggregation` with query params | Navigates to clean `/overview` (no query params). |
| User is on `/components/scorecard` (deep page) | Navigates to `/overview` via client-side routing. |

## Out of Scope

- Keyboard accessibility beyond what `Link` provides natively (Tab + Enter already works with `<a>` tags).
- Visual changes to the logo (no new styling, hover effects beyond pointer cursor).
- Adding an `aria-label` to the logo — Strato's `AppHeader.Logo` already handles accessibility.

