# Secret Detection UI (Settings, Findings, Exceptions, Alerts) ## Module Web ## Status IMPLEMENTED ## Description Angular UI for secret detection management: settings page with enable/disable toggle and revelation policy selector, findings list with masked value display, exception manager with validation forms, and alert destination configuration with channel test functionality. ## Implementation Details - **Feature directory**: `src/Web/StellaOps.Web/src/app/features/secret-detection/` - **Routes**: `secret-detection.routes.ts` - **Components**: - `alert-destination-config` (`src/Web/StellaOps.Web/src/app/features/secret-detection/alert-destination-config.component.ts`) - `channel-test` (`src/Web/StellaOps.Web/src/app/features/secret-detection/channel-test.component.ts`) - `alert-destination-config` (`src/Web/StellaOps.Web/src/app/features/secret-detection/components/alerts/alert-destination-config.component.ts`) - `exception-manager` (`src/Web/StellaOps.Web/src/app/features/secret-detection/components/exceptions/exception-manager.component.ts`) - `masked-value-display` (`src/Web/StellaOps.Web/src/app/features/secret-detection/components/findings/masked-value-display.component.ts`) - `secret-findings-list` (`src/Web/StellaOps.Web/src/app/features/secret-detection/components/findings/secret-findings-list.component.ts`) - `revelation-policy-selector` (`src/Web/StellaOps.Web/src/app/features/secret-detection/components/settings/revelation-policy-selector.component.ts`) - `rule-category-toggles` (`src/Web/StellaOps.Web/src/app/features/secret-detection/components/settings/rule-category-toggles.component.ts`) - `secret-detection-settings` (`src/Web/StellaOps.Web/src/app/features/secret-detection/components/settings/secret-detection-settings.component.ts`) - `exception-form` (`src/Web/StellaOps.Web/src/app/features/secret-detection/exception-form.component.ts`) - `exception-manager` (`src/Web/StellaOps.Web/src/app/features/secret-detection/exception-manager.component.ts`) - `finding-detail-drawer` (`src/Web/StellaOps.Web/src/app/features/secret-detection/finding-detail-drawer.component.ts`) - `masked-value-display` (`src/Web/StellaOps.Web/src/app/features/secret-detection/masked-value-display.component.ts`) - `revelation-policy-config` (`src/Web/StellaOps.Web/src/app/features/secret-detection/revelation-policy-config.component.ts`) - `rule-category-selector` (`src/Web/StellaOps.Web/src/app/features/secret-detection/rule-category-selector.component.ts`) - ... and 2 more components - **Services**: - `secret-detection-settings` (`src/Web/StellaOps.Web/src/app/features/secret-detection/services/secret-detection-settings.service.ts`) - `secret-exception` (`src/Web/StellaOps.Web/src/app/features/secret-detection/services/secret-exception.service.ts`) - `secret-findings` (`src/Web/StellaOps.Web/src/app/features/secret-detection/services/secret-findings.service.ts`) - **Models**: - `src/Web/StellaOps.Web/src/app/features/secret-detection/models/alert-destination.models.ts` - `src/Web/StellaOps.Web/src/app/features/secret-detection/models/revelation-policy.models.ts` - `src/Web/StellaOps.Web/src/app/features/secret-detection/models/secret-detection.models.ts` - `src/Web/StellaOps.Web/src/app/features/secret-detection/models/secret-finding.models.ts` - **Source**: SPRINT_20260104_008_FE_secret_detection_ui.md ## E2E Test Plan - **Setup**: - [ ] Log in with a user that has appropriate permissions - [ ] Navigate to `/security` - [ ] Ensure test data exists (scanned artifacts, SBOM data, or seed data as needed) - **Core verification**: - [ ] Verify the component renders correctly with sample data - [ ] Verify interactive elements respond to user input - [ ] Verify data is fetched and displayed from the correct API endpoints - **Edge cases**: - [ ] Verify graceful handling when backend API is unavailable (error state) - [ ] Verify responsive layout at different viewport sizes - [ ] Verify accessibility (keyboard navigation, screen reader labels, ARIA attributes)