Merge pull request #1048

* refactor(34332): add a paginated list of bridges

* refactor(34332): add bridge action menu

* fix(34332): fix icons

* refactor(34332): add support for edit and delete

* fix(34332): fix translations

* fix(34332): fix translations

* fix(34332): fix the no data message

* refactor(34332): add JSON/UI schemas for the bridge editor

* refactor(34332): add the bridge editor

* refactor(34332): add conditional schemas for the toggled features

* refactor(34332): fix defaults and required

* refactor(34332): update title, description and widget for all properties

* fix(34332): update props

* fix(34332): add identifier to the recognised formats

* refactor(34332): add a Toggle widget

* fix(34332): fix wrap in tablist

* refactor(34332): add support for create/edit bridge and persistence

* fix(34332): fix widget definition

* fix(34332): fix translations

* refactor(34332): add custom validation (unique id)

* fix(34332): fix layout

* refactor(34332): add request manager for the bridge

* refactor(34332): replace the old editor

* refactor(34332): replace the old list of bridges

* fix(34332): fix CTAs and header

* refactor(34332): add initial form data, request handling and errors

* refactor(34332): change the default state of new bridges

* refactor(34332): fix translations

* test(34332): fix mocks

* test(34332): fix test

* test(34332): fix test

* fix(34332): fix lazy loading

* fix(34332): fix no-break space

* test(34332): add tests

* test(34332): add tests

* test(34332): add tests

* test(34332): fix tests

* fix(34332): redesign error message and rename file

* fix(34332): fix error message

* test(34332): add test

* fix(34332): fix translations

* fix(34332): fix initialisation of editor

* test(34332): fix tests

* refactor(34332): add collapsable to the list of subscriptions

* fix(34332): fix tag/topic/fitler widgets in RJSF forms

* fix(34332): add tag/topic/fitler widgets to the schema

* test(34332): add tests

* test(34332): fix tests

* test(34332): add tests

* Update hivemq-edge-frontend/src/modules/Bridges/components/BridgeEdit…

* Update hivemq-edge-frontend/src/modules/Bridges/utils/validation-util…

* Update hivemq-edge-frontend/src/modules/Bridges/utils/validation-util…

* fix(34332): fix copilot stupid review

* fix(34332): linting

* fix(34332): fix id suffix

* test(34332): add tests

* fix(34332): fix definition of maxQoS

* test(34332): fix tests

* test(34332): refactor page object

* test(34332): add page object for Bridges

* test(34332): add E2E tests for Bridges

* fix(34332): linting

* fix(34332): fix translations

* test(34332): fix exclusion

* test(34332): fix translations

* test(34332): fix translations

* test(34332): fix hook dependencies

* test(34332): linting

Author: vanch3d

hivemq-edge-frontend/cypress/e2e/bridges/bridges.spec.cy.ts

@@ -0,0 +1,220 @@
+import { drop, factory, primaryKey } from '@mswjs/data'
+
+import type { Bridge } from '@/api/__generated__'
+import { cy_interceptCoreE2E } from 'cypress/utils/intercept.utils.ts'
+import { bridgePage, loginPage, rjsf } from 'cypress/pages'
+
+describe('Bridges', () => {
+  // Creating a mock storage for the Bridges
+  const mswDB = factory({
+    bridge: {
+      id: primaryKey(String),
+      json: String,
+    },
+  })
+
+  beforeEach(() => {
+    drop(mswDB)
+
+    cy_interceptCoreE2E()
+
+    // TODO[NVL] Add support for the Event Log
+    cy.intercept('GET', '/api/v1/management/bridges', (req) => {
+      const allBridgeData = mswDB.bridge.getAll()
+      const allBridges = allBridgeData.map<Bridge>((data) => ({ ...JSON.parse(data.json) }))
+      req.reply(200, { items: allBridges })
+    })
+
+    cy.intercept<Bridge>('POST', '/api/v1/management/bridges', (req) => {
+      const bridge = req.body
+      const newBridgeData = mswDB.bridge.create({
+        id: bridge.id,
+        json: JSON.stringify(bridge),
+      })
+      req.reply(200, newBridgeData)
+    })
+
+    cy.intercept<Bridge>('PUT', '/api/v1/management/bridges/**', (req) => {
+      const bridge = req.body
+
+      mswDB.bridge.update({
+        where: {
+          id: {
+            equals: bridge.id,
+          },
+        },
+
+        data: { json: JSON.stringify(bridge) },
+      })
+
+      req.reply(200, '')
+    })
+
+    cy.intercept<Bridge>('DELETE', '/api/v1/management/bridges/**', (req) => {
+      const urlParts = req.url.split('/')
+      const bridgeId = urlParts[urlParts.length - 1]
+
+      mswDB.bridge.delete({
+        where: {
+          id: {
+            equals: bridgeId,
+          },
+        },
+      })
+      req.reply(200, '')
+    }).as('deleteBridge')
+
+    loginPage.visit('/app/mqtt-bridges')
+    loginPage.loginButton.click()
+    bridgePage.navLink.click()
+  })
+
+  context('Bridge configuration', () => {
+    // TODO[NVL] Add support for the toasts
+
+    it('should render the landing page', () => {
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/app/mqtt-bridges')
+      })
+
+      bridgePage.pageHeader.should('have.text', 'MQTT bridges')
+      bridgePage.pageHeaderSubTitle.should(
+        'have.text',
+        'MQTT bridges let you connect multiple MQTT brokers to enable seamless data sharing between different networks or systems.'
+      )
+      bridgePage.addNewBridge.should('have.text', 'Add bridge connection')
+
+      bridgePage.table.container.should('be.visible')
+      bridgePage.table.status
+        .should('have.attr', 'data-status', 'info')
+        .should('have.text', 'No bridges currently created')
+    })
+
+    it('should create a new bridge', () => {
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/app/mqtt-bridges')
+      })
+
+      bridgePage.table.status
+        .should('have.attr', 'data-status', 'info')
+        .should('have.text', 'No bridges currently created')
+
+      bridgePage.addNewBridge.click()
+
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/app/mqtt-bridges/new')
+      })
+
+      bridgePage.config.panel.should('be.visible')
+      bridgePage.config.title.should('have.text', 'Create a new bridge configuration')
+      bridgePage.config.submitButton.should('have.text', 'Create the bridge')
+
+      bridgePage.config.errorSummary.should('have.length', 3)
+      bridgePage.config.errorSummaryFocus(0).should('exist')
+
+      rjsf.field('id').input.should('not.have.value')
+      rjsf.field('id').input.type('my-bridge')
+      rjsf.field('host').input.type('my-host')
+      rjsf.field('clientId').input.type('my-client-id')
+      bridgePage.config.errorSummary.should('have.length', 0)
+
+      bridgePage.config.submitButton.click()
+
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/app/mqtt-bridges')
+      })
+
+      bridgePage.table.rows.should('have.length', 1)
+      bridgePage.table.cell(0, 'id').should('have.text', 'my-bridge')
+
+      bridgePage.table.action(0, 'edit').click()
+
+      rjsf.field('id').input.should('be.disabled')
+      rjsf.field('port').input.clear().type('2999')
+
+      bridgePage.config.submitButton.click()
+
+      //TODO[NVL] Better create a subscription
+    })
+
+    it('should create a new bridge and delete it', () => {
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/app/mqtt-bridges')
+      })
+
+      bridgePage.table.status
+        .should('have.attr', 'data-status', 'info')
+        .should('have.text', 'No bridges currently created')
+
+      bridgePage.addNewBridge.click()
+
+      bridgePage.config.panel.should('be.visible')
+      bridgePage.config.submitButton.should('have.text', 'Create the bridge')
+
+      rjsf.field('id').input.type('my-bridge')
+      rjsf.field('host').input.type('my-host')
+      rjsf.field('clientId').input.type('my-client-id')
+
+      bridgePage.config.submitButton.click()
+
+      bridgePage.table.action(0, 'delete').click()
+      bridgePage.modal.dialog.should('be.visible')
+      bridgePage.modal.title.should('have.text', 'Delete Bridge')
+      bridgePage.modal.prompt.should('have.text', "Are you sure? You can't undo this action afterward.")
+      bridgePage.modal.confirm.should('have.text', 'Delete')
+      bridgePage.modal.confirm.click()
+
+      cy.wait('@deleteBridge')
+      bridgePage.table.status
+        .should('have.attr', 'data-status', 'info')
+        .should('have.text', 'No bridges currently created')
+    })
+  })
+
+  context('Bridge in Workspace', () => {
+    it('should create a bridge also in the Workspace', () => {
+      bridgePage.table.status.should('have.text', 'No bridges currently created')
+
+      bridgePage.addNewBridge.click()
+
+      bridgePage.config.panel.should('be.visible')
+      bridgePage.config.title.should('have.text', 'Create a new bridge configuration')
+      bridgePage.config.submitButton.should('have.text', 'Create the bridge')
+
+      rjsf.field('id').input.type('my-bridge')
+      rjsf.field('host').input.type('my-host')
+      rjsf.field('clientId').input.type('my-client-id')
+
+      bridgePage.config.submitButton.click()
+
+      //TODO[NVL] Better create a subscription
+    })
+  })
+
+  context('Bridge in Event Log', () => {})
+
+  it('should be accessible', () => {
+    cy.injectAxe()
+    bridgePage.table.status.should('have.text', 'No bridges currently created')
+
+    bridgePage.addNewBridge.click()
+
+    bridgePage.config.panel.should('be.visible')
+    bridgePage.config.title.should('have.text', 'Create a new bridge configuration')
+    bridgePage.config.submitButton.should('have.text', 'Create the bridge')
+
+    rjsf.field('id').input.type('my-bridge')
+    rjsf.field('host').input.type('my-host')
+    rjsf.field('clientId').input.type('my-client-id')
+
+    bridgePage.config.submitButton.click()
+
+    bridgePage.toast.close()
+
+    bridgePage.table.action(0, 'edit').click()
+
+    bridgePage.config.formTab(4).click() // Click on the "Subscriptions" tab
+
+    cy.checkAccessibility()
+  })
+})

hivemq-edge-frontend/cypress/pages/Bridges/BridgePage.ts

@@ -0,0 +1,118 @@
+import { Page } from '../Page.ts'
+
+export class BridgePage extends Page {
+  get navLink() {
+    return cy.get('nav [role="list"]').eq(0).find('li').eq(2)
+  }
+
+  get addNewBridge() {
+    return cy.getByTestId('page-container-cta').find('button')
+  }
+
+  table = {
+    get container() {
+      return cy.get('table[aria-label="List of bridges"]')
+    },
+
+    get status() {
+      return cy.get('table[aria-label="List of bridges"] tbody tr td[colspan="6"] div[role="alert"]')
+    },
+
+    get rows() {
+      return cy.get('table[aria-label="List of bridges"] tbody tr')
+    },
+
+    row(index: number) {
+      return this.rows.eq(index)
+    },
+
+    cell(
+      row: number,
+      column: number | 'id' | 'localSubscriptions' | 'remoteSubscriptions' | 'status' | 'lastStarted' | 'actions'
+    ) {
+      const map = ['id', 'localSubscriptions', 'remoteSubscriptions', 'status', 'lastStarted', 'actions']
+      if (typeof column === 'string') return this.rows.eq(row).get('td').eq(map.indexOf(column))
+      else return this.rows.eq(row).get('td').eq(column)
+    },
+
+    action(row: number, action: 'stop' | 'start' | 'restart' | 'edit' | 'delete') {
+      const map = {
+        stop: 'device-action-stop',
+        start: 'device-action-start',
+        restart: 'device-action-restart',
+        edit: 'bridge-action-edit',
+        delete: 'bridge-action-delete',
+      }
+      this.cell(row, 5).within(() => {
+        cy.get('button').click()
+      })
+      return cy.get(`[role="menu"] button[data-testid=${map[action]}]`)
+    },
+  }
+
+  modal = {
+    get dialog() {
+      return cy.get('[role="alertdialog"]')
+    },
+
+    get title() {
+      return this.dialog.find('header')
+    },
+
+    get prompt() {
+      return this.dialog.find('p[data-testid="confirmation-message"]')
+    },
+
+    get confirm() {
+      return this.dialog.find('button[data-testid="confirmation-submit"]')
+    },
+  }
+
+  config = {
+    get panel() {
+      return cy.get('[role="dialog"][aria-label="Edit bridge configuration"]')
+    },
+
+    get title() {
+      return cy.get('[role="dialog"] header')
+    },
+
+    get submitButton() {
+      return cy.get('[role="dialog"] footer  button[type="submit"]')
+    },
+
+    get errorSummary() {
+      return cy.get('[role="dialog"] form div[role="alert"] ul li')
+    },
+
+    errorSummaryFocus(index: number) {
+      return cy
+        .get('[role="dialog"] form div[role="alert"] ul li')
+        .eq(index)
+        .within(() => {
+          return cy.getByAriaLabel('Jump to error')
+        })
+    },
+
+    get formTabs() {
+      return cy.get('[role="dialog"] form [role="tablist"]')
+    },
+
+    formTab(index: number) {
+      return this.formTabs.within(() => {
+        return cy.get('button').eq(index)
+      })
+    },
+
+    get formTabPanel() {
+      return cy.get('[role="dialog"] form [role="tabpanel"]')
+    },
+
+    // This is experimental and should only be used within the form
+    get formField() {
+      return cy.get('div > div.field > [role="group"]')
+    },
+  }
+}
+
+export const bridgePage = new BridgePage()

hivemq-edge-frontend/cypress/pages/Page.ts

@@ -12,4 +12,20 @@ export abstract class Page {
       },
     })
   }
+
+  get pageHeader() {
+    return cy.get('main header > h1')
+  }
+
+  get pageHeaderSubTitle() {
+    return cy.get('main header > p')
+  }
+
+  toast = {
+    close() {
+      cy.get('[role="status"]').within(() => {
+        cy.getByAriaLabel('Close').click()
+      })
+    },
+  }
 }

hivemq-edge-frontend/cypress/pages/index.ts

@@ -2,5 +2,6 @@ import { loginPage } from './Login/LoginPage.ts'
 import { adapterPage } from './Protocols/AdapterPage.ts'
 import { rjsf } from './RJSF/RJSFomField.ts'
 import { workspacePage } from './Workspace/WorkspacePage'
+import { bridgePage } from './Bridges/BridgePage.ts'
 
-export { loginPage, workspacePage, adapterPage, rjsf }
+export { loginPage, workspacePage, adapterPage, rjsf, bridgePage }

hivemq-edge-frontend/src/api/hooks/useGetBridges/__handlers__/index.ts

@@ -24,6 +24,7 @@ export const mockBridge: Bridge = {
   clientId: 'my-client-id',
   status: {
     connection: Status.connection.CONNECTED,
+    startedAt: '2023-08-21T11:51:24.234+01',
   },
   localSubscriptions: [
     {

hivemq-edge-frontend/src/api/hooks/useGetBridges/useGetBridge.spec.ts

@@ -28,6 +28,7 @@ describe('useGetBridge', () => {
         id: 'bridge-id-01',
         status: {
           connection: 'CONNECTED',
+          startedAt: '2023-08-21T11:51:24.234+01',
         },
       })
     )