Merge pull request #1056

* fix(35003): add bridger status container

* fix(35003): add bridger status container

* test(35003): add tests

* test(35003): fix tests

* test(35003): fix typo

Author: vanch3d

hivemq-edge-frontend/src/modules/Bridges/components/BridgeEditorDrawer.spec.cy.tsx

@@ -105,7 +105,7 @@ describe('BridgeEditorDrawer', () => {
     cy.get('[role="dialog"]#chakra-modal-bridge-editor').within(() => {
       cy.get('header').should('have.text', 'Create a new bridge configuration')
 
-      cy_bridgeShouldBeDefinedProperly
+      cy_bridgeShouldBeDefinedProperly()
     })
   })
 })

hivemq-edge-frontend/src/modules/Bridges/components/BridgeStatusContainer.spec.cy.tsx

@@ -0,0 +1,32 @@
+import { MOCK_BRIDGE_ID } from '@/__test-utils__/mocks.ts'
+import { mockBridgeConnectionStatus } from '@/api/hooks/useConnection/__handlers__'
+import { BridgeStatusContainer } from '@/modules/Bridges/components/BridgeStatusContainer.tsx'
+
+describe('BridgeStatusContainer', () => {
+  beforeEach(() => {
+    cy.viewport(800, 900)
+    cy.intercept('api/v1/management/bridges/status', { items: [mockBridgeConnectionStatus] }).as('getStatus')
+  })
+
+  it('should render properly an existing bridge', () => {
+    cy.mountWithProviders(<BridgeStatusContainer id={MOCK_BRIDGE_ID} />)
+
+    cy.wait('@getStatus')
+    cy.getByTestId('connection-status').should('have.text', 'Connected')
+  })
+
+  it('should render even with fetch error', () => {
+    cy.intercept('/api/v1/management/bridges/status', { statusCode: 404 }).as('getStatus')
+    cy.mountWithProviders(<BridgeStatusContainer id={MOCK_BRIDGE_ID} />)
+
+    cy.wait('@getStatus')
+    cy.getByTestId('connection-status').should('have.text', 'Unknown')
+  })
+
+  it('should render unknown if not a bridge', () => {
+    cy.mountWithProviders(<BridgeStatusContainer id="not-a-bridge" />)
+
+    cy.wait('@getStatus')
+    cy.getByTestId('connection-status').should('have.text', 'Unknown')
+  })
+})

hivemq-edge-frontend/src/modules/Bridges/components/BridgeStatusContainer.tsx

@@ -0,0 +1,11 @@
+import type { FC } from 'react'
+import { ConnectionStatusBadge } from '@/components/ConnectionStatusBadge'
+import { useGetBridgesStatus } from '@/api/hooks/useConnection/useGetBridgesStatus.ts'
+
+export const BridgeStatusContainer: FC<{ id: string }> = ({ id }) => {
+  const { data: connections } = useGetBridgesStatus()
+
+  const connection = connections?.items?.find((status) => status.id === id)
+
+  return <ConnectionStatusBadge status={connection} />
+}

hivemq-edge-frontend/src/modules/Bridges/components/BridgeTable.tsx

@@ -5,7 +5,7 @@ import type { ColumnDef } from '@tanstack/react-table'
 import { Badge, Box, Skeleton, useDisclosure } from '@chakra-ui/react'
 import { useNavigate } from 'react-router-dom'
 
-import type { ApiError, Bridge, BridgeSubscription, LocalBridgeSubscription, Status } from '@/api/__generated__'
+import type { ApiError, Bridge, BridgeSubscription, LocalBridgeSubscription } from '@/api/__generated__'
 import { useListBridges } from '@/api/hooks/useGetBridges/useListBridges.ts'
 import { mockBridge } from '@/api/hooks/useGetBridges/__handlers__'
 import { useDeleteBridge } from '@/api/hooks/useGetBridges/useDeleteBridge.ts'
@@ -14,13 +14,13 @@ import type { ProblemDetails } from '@/api/types/http-problem-details.ts'
 import { useEdgeToast } from '@/hooks/useEdgeToast/useEdgeToast.tsx'
 
 import DateTimeRenderer from '@/components/DateTime/DateTimeRenderer.tsx'
-import { ConnectionStatusBadge } from '@/components/ConnectionStatusBadge'
 import ErrorMessage from '@/components/ErrorMessage.tsx'
 import PaginatedTable from '@/components/PaginatedTable/PaginatedTable.tsx'
 import ConfirmationDialog from '@/components/Modal/ConfirmationDialog.tsx'
 import { BridgeActionMenu } from '@/modules/Bridges/components/BridgeActionMenu.tsx'
 import useWorkspaceStore from '@/modules/Workspace/hooks/useWorkspaceStore.ts'
 import { NodeTypes } from '@/modules/Workspace/types.ts'
+import { BridgeStatusContainer } from '@/modules/Bridges/components/BridgeStatusContainer.tsx'
 
 export const BridgeTable: FC = () => {
   const { t } = useTranslation()
@@ -84,10 +84,9 @@ export const BridgeTable: FC = () => {
         accessorKey: 'status',
         header: t('bridge.listing.column.status'),
         cell: (info) => {
-          const val = info.getValue<Status>()
           return (
             <Skeleton isLoaded={!isLoading}>
-              <ConnectionStatusBadge status={val} />
+              <BridgeStatusContainer id={info.row.original.id} />
             </Skeleton>
           )
         },