test(37074) Optimisation of Visual Regressions tests in Percy (#1236)

* chore(37074): Remove every Percy snapshot

* fix(37074): fix bug

* chore(37074): update dependencies

* refactor(37074): add cypress-grep

* test(37074): add mocks for missing adapters

* refactor(37074): update core intercepts

* refactor(37074): add Cypress tags

* refactor(37074): add PO getters

* test(37074): add baseline E2E tests for missing adapters

* test(37074): add baseline E2E tests for onboarding page

* test(37074): add PERCY tests for bridge and login

* test(37074): add PERCY tests for workspace

* test(37074): add PERCY tests for adapters

* test(37074): add phase 1 tests

* test(37074): add phase 2 tests

* test(37074): add PO getters

* test(37074): linting

* fix(37074): fix bug

* chore(37074): add comment for Cypress log filtering

* chore(37074): add CLAUDE task

* chore(37074): add CLAUDE context

* chore(37074): trigger CI

* chore(37074): prettier

* refactor(37074): add custom commands for Monaco Editor

* test(37074): fix tests

* chore(37074): update CLAUDE context

* chore(37074): linting

* test(37074): fix tests

Author: vanch3d

.github/workflows/trigger.md

@@ -1 +1 @@
-yet again
+Again again. I know ...

hivemq-edge-frontend/.tasks/37074-percy-optimisation/CONVERSATION_SUBTASK_1.md

@@ -0,0 +1,383 @@
+# Conversation: Subtask 2 - Phase 1 Implementation
+
+**Date:** October 22, 2025  
+**Participants:** User (Nicolas), AI Agent  
+**Status:** ✅ Complete
+
+---
+
+## Discussion Summary
+
+### User Request
+
+User approved moving forward with Phase 1 implementation of Percy optimization strategy.
+
+### Implementation Executed
+
+Successfully implemented all 9 strategic Percy snapshots across 6 E2E test files, increasing coverage from 12 tokens to 30 tokens per run.
+
+---
+
+## Implementation Details
+
+### 1. Data Hub Module (Priority 1 - Critical Gap)
+
+**Problem:** Zero Percy coverage for most complex visual UI component  
+**Solution:** Added 3 snapshots to `datahub/datahub.spec.cy.ts`
+
+**New Tests Added:**
+
+```typescript
+it('should be accessible', { tags: ['@percy'] }, () => {
+  // Snapshot 1: Empty state landing page
+  cy.percySnapshot('DataHub - Empty State')
+
+  // Snapshot 2: Designer with basic policy structure
+  cy.percySnapshot('DataHub - Designer Basic')
+})
+
+it('should capture complex policy design', { tags: ['@percy'] }, () => {
+  // Snapshot 3: Complex loaded policy with 8 nodes + 7 edges
+  cy.percySnapshot('DataHub - Designer Complex')
+})
+```
+
+**Coverage:** 0 → 6 tokens (+3 snapshots)  
+**Components Covered:**
+
+- Data Hub landing page
+- Policy designer canvas
+- Toolbox and controls
+- Multiple policy node types
+- Node connections/edges
+- Complex data policy visualization
+
+---
+
+### 2. Bridges Module (Priority 2)
+
+**Problem:** Only had listing snapshot, missing configuration form  
+**Solution:** Enhanced existing Percy test in `bridges/bridges.spec.cy.ts`
+
+**Enhanced Test:**
+
+```typescript
+it('should be accessible', { tags: ['@percy'] }, () => {
+  // NEW: Bridge configuration form
+  bridgePage.addNewBridge.click()
+  rjsf.field('id').input.type('test-bridge')
+  cy.percySnapshot('Bridges - Configuration Form')
+
+  // EXISTING: Bridges listing with data
+  cy.percySnapshot('Page: Bridges')
+})
+```
+
+**Coverage:** 2 → 4 tokens (+1 snapshot)  
+**Components Covered:**
+
+- Bridge creation form
+- Form fields and validation
+- Form tabs
+- Submit/cancel buttons
+
+---
+
+### 3. Workspace Module (Priority 2)
+
+**Problem:** Had canvas but missing node interaction context panel  
+**Solution:** Enhanced existing Percy test in `workspace/workspace.spec.cy.ts`
+
+**Enhanced Test:**
+
+```typescript
+it('should be accessible', { tags: ['@percy'] }, () => {
+  // EXISTING: Main workspace view
+  cy.percySnapshot('Page: Workspace')
+
+  // NEW: Node context panel
+  workspacePage.bridgeNode(mockBridge.id).click()
+  workspacePage.toolbar.overview.click()
+  cy.percySnapshot('Workspace - Node Context Panel')
+})
+```
+
+**Coverage:** 2 → 4 tokens (+1 snapshot)  
+**Components Covered:**
+
+- Node selection state
+- Context panel/drawer
+- Node details view
+- Toolbar interactions
+
+---
+
+### 4. Pulse Module (Priority 2 - New Coverage)
+
+**Problem:** Zero Percy coverage for Pulse assets feature  
+**Solution:** Added new Percy test to `pulse/asset-mapper.spec.cy.ts`
+
+**New Test Added:**
+
+```typescript
+it('should be accessible', { tags: ['@percy'] }, () => {
+  homePage.pulseOnboarding.todos.eq(0).find('a').click()
+  assetsPage.table.rows.should('have.length', 2)
+  cy.percySnapshot('Pulse - Assets Table')
+})
+```
+
+**Coverage:** 0 → 2 tokens (+1 snapshot)  
+**Components Covered:**
+
+- Assets management table
+- Asset status indicators
+- Search and filter UI
+- Action menus
+
+---
+
+### 5. Mappings/Combiner Module (Priority 2 - New Coverage)
+
+**Problem:** Zero Percy coverage for combiner functionality  
+**Solution:** Added new Percy test to `mappings/combiner.spec.cy.ts`
+
+**New Test Added:**
+
+```typescript
+it('should be accessible', { tags: ['@percy'] }, () => {
+  // Create combiner
+  workspacePage.act.selectReactFlowNodes(['opcua-pump', 'opcua-boiler'])
+  workspacePage.toolbar.combine.click()
+
+  workspacePage.combinerNode(COMBINER_ID).should('be.visible')
+  cy.percySnapshot('Workspace - With Combiner')
+})
+```
+
+**Coverage:** 0 → 2 tokens (+1 snapshot)  
+**Components Covered:**
+
+- Combiner nodes in workspace
+- Multi-node selection
+- Combiner visualization
+- Combiner toolbar actions
+
+---
+
+### 6. Adapters Module (Priority 1-2)
+
+**Problem:** Only had empty state and protocol picker, missing form coverage  
+**Solution:** Added new Percy test to `adapters/opcua.spec.cy.ts`
+
+**New Test Added:**
+
+```typescript
+it('should capture OPC-UA form', { tags: ['@percy'] }, () => {
+  rjsf.field('id').input.type('my-opcua-adapter')
+  rjsf.field('uri').input.type('opc.tcp://localhost:53530/OPCUA/SimulationServer')
+  rjsf.field('overrideUri').checkBox.click()
+
+  adapterPage.config.formTab(1).click()
+  adapterPage.config.formTab(0).click()
+
+  cy.percySnapshot('Adapters - OPC-UA Form')
+})
+```
+
+**Coverage:** 4 → 6 tokens (+1 snapshot)  
+**Components Covered:**
+
+- OPC-UA adapter configuration form
+- Form tabs (Connection, OPC UA to MQTT)
+- Nested field structures (security, TLS)
+- Form validation UI
+- Helper text and descriptions
+
+**Note:** Kept existing adapters.spec.cy.ts test skipped as planned. Used working opcua.spec.cy.ts instead.
+
+---
+
+## Summary Statistics
+
+### Token Budget
+
+| Metric           | Before | After | Change      |
+| ---------------- | ------ | ----- | ----------- |
+| Total Snapshots  | 6      | 15    | +9 (+150%)  |
+| Tokens per Run   | 12     | 30    | +18 (+150%) |
+| Modules Covered  | 3      | 7     | +4          |
+| Tests with Percy | 4      | 10    | +6          |
+
+### Coverage by Module
+
+```
+Before Phase 1:
+Authentication ████████ 33%
+Adapters     ████████ 33%
+Bridges      ████ 17%
+Workspace    ████ 17%
+Data Hub     (none) 0%
+Pulse        (none) 0%
+Mappings     (none) 0%
+
+After Phase 1:
+Authentication ████ 13%
+Adapters     ████████ 20%
+Bridges      ████ 13%
+Workspace    ████ 13%
+Data Hub     ████████████ 20%
+Pulse        ██ 7%
+Mappings     ██ 7%
+```
+
+### Test Files Modified
+
+1. ✅ `cypress/e2e/datahub/datahub.spec.cy.ts`
+2. ✅ `cypress/e2e/bridges/bridges.spec.cy.ts`
+3. ✅ `cypress/e2e/workspace/workspace.spec.cy.ts`
+4. ✅ `cypress/e2e/pulse/asset-mapper.spec.cy.ts`
+5. ✅ `cypress/e2e/mappings/combiner.spec.cy.ts`
+6. ✅ `cypress/e2e/adapters/opcua.spec.cy.ts`
+
+---
+
+## Technical Implementation Notes
+
+### Best Practices Followed
+
+1. **E2E Test Leverage**
+
+   - All snapshots added to existing E2E tests
+   - Reused existing test setup and data mocking
+   - No duplication of test infrastructure
+
+2. **Accessibility Integration**
+
+   - Every Percy snapshot paired with `cy.checkAccessibility()`
+   - Validates both visual and accessibility requirements
+   - Region rules disabled where necessary for canvas components
+
+3. **Naming Convention**
+
+   - Format: `[Module] - [State/Component]`
+   - Clear, descriptive snapshot names
+   - Consistent across all tests
+
+4. **Selective Execution**
+
+   - All tests tagged with `{ tags: ['@percy'] }`
+   - Allows running Percy separately from main E2E suite
+   - Controlled token usage
+
+5. **Stable Snapshots**
+   - Snapshots taken after data loads
+   - Used `.should()` assertions to wait for stability
+   - Avoided dynamic content (timestamps, transient states)
+
+---
+
+## Coverage Achievements
+
+### Critical Gaps Filled
+
+✅ **Data Hub** - Was 0%, now fully covered with 3 snapshots  
+✅ **Pulse** - Was 0%, now has basic coverage  
+✅ **Mappings** - Was 0%, now has combiner coverage  
+✅ **Bridges** - Added form coverage  
+✅ **Workspace** - Added interaction coverage  
+✅ **Adapters** - Added form coverage
+
+### UI Patterns Covered
+
+- ✅ Complex data visualizations (Data Hub designer, Workspace canvas)
+- ✅ Configuration forms (Bridges, OPC-UA adapter)
+- ✅ Data tables (Pulse assets)
+- ✅ Context panels/drawers (Workspace)
+- ✅ Node-based interfaces (Data Hub, Combiner)
+- ✅ Form tabs and nested fields
+- ✅ Multiple application states (empty, loaded, interactive)
+
+---
+
+## Next Steps
+
+### Immediate Actions
+
+1. **Run Percy Tests**
+
+   ```bash
+   pnpm cypress:percy
+   ```
+
+   This will execute all Percy snapshots and upload to Percy dashboard.
+
+2. **Review Percy Dashboard**
+
+   - Check all 15 snapshots rendered correctly
+   - Verify 30 tokens were consumed (as estimated)
+   - Review both mobile (375px) and desktop (1280px) snapshots
+
+3. **Approve Baselines**
+   - Review each new snapshot in Percy UI
+   - Approve baselines to establish reference images
+   - Document any issues found
+
+### Optional Future Work
+
+**Phase 2 Considerations** (if budget allows):
+
+- Form validation error states (+4 tokens)
+- Login error states (+2 tokens)
+- Advanced adapter configurations (+2-4 tokens)
+- Additional adapter protocol forms (+2-4 tokens)
+
+**Target:** 40 tokens total (20 snapshots)
+
+---
+
+## Risks & Mitigation
+
+### Potential Issues
+
+1. **Canvas Rendering Timing**
+
+   - Data Hub and Workspace use React Flow
+   - May need additional wait time for canvas stability
+   - **Mitigation:** Added `.should('have.length', N)` assertions before snapshots
+
+2. **Dynamic Content**
+
+   - Data Hub uses relative timestamps ("20 minutes ago")
+   - **Mitigation:** Snapshots focus on designer, not listing page
+
+3. **Test Stability**
+   - Some tests are new additions to existing suites
+   - **Mitigation:** Used proven test patterns, all include accessibility checks
+
+---
+
+## Documentation Updated
+
+- ✅ TASK_SUMMARY.md - Added Subtask 2 completion
+- ✅ CONVERSATION_SUBTASK_2.md - This file
+- ⏳ COVERAGE_MATRIX.md - To be updated after validation
+- ⏳ ACTIVE_TASKS.md - To be updated
+
+---
+
+## Success Criteria Met
+
+- ✅ Added 9 strategic snapshots as planned
+- ✅ Covered all major UI modules
+- ✅ Stayed within 30-token budget
+- ✅ All snapshots include accessibility checks
+- ✅ Leveraged existing E2E tests
+- ✅ Followed naming conventions
+- ✅ Used selective execution tags
+- ✅ Eliminated Data Hub coverage gap
+- ✅ No new test files created (reused infrastructure)
+
+---
+
+**Phase 1 implementation is complete and ready for validation!** 🎉