# Requirements: QSP-39797 — Custom App Icon

## Status

📝 Draft — awaiting approval

---

## Summary

The app currently displays a generated placeholder icon in both the Strato header navigation and the Dynatrace tenant sidebar (app launcher). This ticket replaces that icon with the custom `logo.png` provided in the ticket folder. Two integration points are involved: the `AppHeader.Logo` component (in-app header) and the `icon` field in `app.config.cts` (tenant sidebar / app launcher).

---

## Acceptance Criteria

- [ ] AC-1: The custom `logo.png` appears as the icon in `AppHeader.Logo` in the in-app header navigation.
- [ ] AC-2: The custom `logo.png` is used as the app icon in the Dynatrace tenant sidebar and app launcher.
- [ ] AC-3: Clicking the logo in the header still navigates to `/overview`.
- [ ] AC-4: The logo asset is correctly bundled and served from the app's `assets/` directory.

---

## Key Decisions

| # | Decision | Rationale |
|---|---|---|
| D-1 | Place `logo.png` at `src/assets/logo.png` | Matches the existing asset copy rule in `app.config.cts` (`src/assets` → `assets/`). No new folder needed. |
| D-2 | Reference the icon as `'assets/logo.png'` string in `AppHeader.Logo.appIcon` | No Vite image-module type declaration is needed. The asset is always served at this predictable path since assets are copied without fingerprinting. |
| D-3 | Set `app.icon: 'src/assets/logo.png'` in `app.config.cts` | The `dt-app` CLI `AppOptions.icon` field accepts a path relative to the project root. This informs both the tenant sidebar icon and the app launcher. |
| D-4 | Do not change `appName` or the logo's navigation target | Out of scope — only the visual icon is changing. |

---

## Data Model

Not applicable — this feature involves no data model, TypeScript interface, or DQL query changes.

---

## UX / UI Specification

### In-App Header

`AppHeader.Logo` (inside `src/app/components/Header.tsx`) renders the app icon and name in the top-left of the header navigation bar. Adding `appIcon="assets/logo.png"` tells Strato to display the custom image instead of falling back to the app registry.

### Tenant Sidebar / App Launcher

The `icon` field in `app.config.cts` → `app:` section tells the `dt-app` build to include the provided PNG as the app's icon in the manifest. The tenant then uses this icon in the sidebar navigation and the app launcher overlay.

### States

No loading, empty, or error states — the icon is a static asset that is either present or absent.

---

## API Contracts

Not applicable — no backend app functions are involved.

---

## DQL Queries

Not applicable.

---

## Implementation Plan

### Consumer Impact Analysis

No TypeScript interface is changed. Only two files are modified plus one asset is added.

| File | Change |
|---|---|
| `src/assets/logo.png` | New file — copy from `.github/tickets/QSP-39797/logo.png` |
| `src/app/components/Header.tsx` | Add `appIcon` prop to `AppHeader.Logo` |
| `app.config.cts` | Add `icon` field to the `app:` section |

### Step 1: Copy the asset

- **File**: `src/assets/logo.png`
- **Change**: Copy `.github/tickets/QSP-39797/logo.png` to `src/assets/logo.png`. Create the `src/assets/` directory if it does not exist.
- **Verification**: File exists at `src/assets/logo.png`.

### Step 2: Register the icon in `app.config.cts`

- **File**: `app.config.cts`
- **Change**: Add `icon: 'src/assets/logo.png'` to the `app:` object inside the `config` declaration.
- **Verification**: `npm run typecheck` exits 0.

### Step 3: Pass the icon to `AppHeader.Logo`

- **File**: `src/app/components/Header.tsx`
- **Change**: Add `appIcon="assets/logo.png"` to the existing `<AppHeader.Logo as={Link} to='/overview' data-testid='nav-item-home' />` element.
- **Verification**: `npm run typecheck` exits 0. Running the dev server shows the custom icon in the header.

---

## Unit Test Plan

No pure logic functions are added or changed. The `Header.tsx` change is a prop addition on a Strato component — covered by the existing component test infrastructure.

### Existing test to verify (no new spec needed)

The existing E2E test `app-header-navigation.spec.ts` already checks that the header renders. No new unit test is needed since there is no extractable pure logic function.

If a component test for `Header.tsx` is desired in the future it would verify `appIcon` renders an `<img>` with the correct `src` — but this is out of scope for this ticket.

---

## Edge Cases & Error Handling

| Case | Handling |
|---|---|
| `src/assets/logo.png` missing at build time | `dt-app` build will log a warning and fall back to the auto-generated icon. The `icon` path in `app.config.cts` must be valid before building. |
| `appIcon` path incorrect at runtime | Strato renders a broken image or falls back to the app registry icon. Verified by running the dev server. |

---

## Out of Scope

- Changing the app name displayed next to the logo.
- SVG conversion of the logo — using the PNG as provided.
- Updating E2E or component tests — no logic change warrants new tests.

