refactor(28703): Add the source of a side panel into its header

hivemq-edge/src/frontend/src/components/ExpandableDrawer/ExpandableDrawer.tsx

@@ -14,9 +14,10 @@ import DrawerExpandButton from '@/components/Chakra/DrawerExpandButton.tsx'
 
 interface ExpandableDrawerProps extends DrawerProps {
   header: string
+  subHeader?: JSX.Element
 }
 
-const ExpandableDrawer: FC<ExpandableDrawerProps> = ({ header, ...props }) => {
+const ExpandableDrawer: FC<ExpandableDrawerProps> = ({ header, subHeader, ...props }) => {
   // TODO[NVL] use  local storage
   const [isExpanded, setExpanded] = useBoolean(true)
 
@@ -28,6 +29,7 @@ const ExpandableDrawer: FC<ExpandableDrawerProps> = ({ header, ...props }) => {
         <DrawerExpandButton isExpanded={isExpanded} toggle={setExpanded.toggle} />
         <DrawerHeader>
           <Text>{header}</Text>
+          {subHeader}
         </DrawerHeader>
         <DrawerBody display="flex" flexDirection="column" gap={6}>
           {props.children}

hivemq-edge/src/frontend/src/locales/en/translation.json

@@ -765,7 +765,9 @@
     "device": {
       "type_ADAPTER_NODE": "adapter",
       "type_BRIDGE_NODE": "bridge",
-      "type_EDGE_NODE": "edge"
+      "type_EDGE_NODE": "edge",
+      "type_DEVICE_NODE": "device",
+      "type_CLUSTER_NODE": "Group"
     },
     "layout": {
       "HORIZONTAL": "Horizontal",

hivemq-edge/src/frontend/src/modules/Mappings/AdapterMappingManager.tsx

@@ -30,6 +30,8 @@ import { NodeTypes } from '@/modules/Workspace/types.ts'
 import useWorkspaceStore from '@/modules/Workspace/hooks/useWorkspaceStore.ts'
 import { useSouthboundMappingManager } from '@/modules/Mappings/hooks/useSouthboundMappingManager.ts'
 import { MappingType } from './types'
+import NodeNameCard from '@/modules/Workspace/components/parts/NodeNameCard.tsx'
+import { useGetAdapterTypes } from '@/api/hooks/useProtocolAdapters/useGetAdapterTypes.ts'
 
 interface AdapterMappingManagerProps {
   type: MappingType
@@ -48,6 +50,12 @@ const AdapterMappingManager: FC<AdapterMappingManagerProps> = ({ type }) => {
     return nodes.find((node) => node.id === nodeId && node.type === NodeTypes.ADAPTER_NODE) as Node<Adapter> | undefined
   }, [nodeId, nodes])
 
+  const { data: protocols } = useGetAdapterTypes()
+  const adapterProtocol =
+    selectedNode?.type === NodeTypes.ADAPTER_NODE
+      ? protocols?.items?.find((e) => e.id === (selectedNode as Node<Adapter>).data.type)
+      : undefined
+
   const handleClose = () => {
     onClose()
     navigate('/workspace')
@@ -70,6 +78,12 @@ const AdapterMappingManager: FC<AdapterMappingManagerProps> = ({ type }) => {
         <DrawerExpandButton isExpanded={isExpanded} toggle={setExpanded.toggle} />
         <DrawerHeader>
           <Text>{t('protocolAdapter.mapping.manager.header', { context: type })}</Text>
+          <NodeNameCard
+            name={selectedNode?.data.id}
+            type={selectedNode?.type as NodeTypes}
+            icon={adapterProtocol?.logoUrl}
+            description={adapterProtocol?.name}
+          />
         </DrawerHeader>
         <DrawerBody display="flex" flexDirection="column" gap={6}>
           {!adapterId && <ErrorMessage message={t('protocolAdapter.error.loading')} />}

hivemq-edge/src/frontend/src/modules/ProtocolAdapters/components/drawers/AdapterInstanceDrawer.tsx

@@ -14,8 +14,6 @@ import {
   DrawerHeader,
   DrawerOverlay,
   Flex,
-  HStack,
-  Image,
   Text,
 } from '@chakra-ui/react'
 
@@ -29,6 +27,8 @@ import { getRequiredUiSchema } from '@/modules/ProtocolAdapters/utils/uiSchema.u
 import { AdapterContext } from '@/modules/ProtocolAdapters/types.ts'
 
 import ChakraRJSForm from '@/components/rjsf/Form/ChakraRJSForm.tsx'
+import NodeNameCard from '@/modules/Workspace/components/parts/NodeNameCard.tsx'
+import { NodeTypes } from '@/modules/Workspace/types.ts'
 
 interface AdapterInstanceDrawerProps {
   adapterType?: string
@@ -96,12 +96,7 @@ const AdapterInstanceDrawer: FC<AdapterInstanceDrawerProps> = ({
               <Text>
                 {isNewAdapter ? t('protocolAdapter.drawer.title.create') : t('protocolAdapter.drawer.title.update')}
               </Text>
-              <HStack>
-                <Image boxSize="30px" objectFit="scale-down" src={logo} aria-label={name} />
-                <Text fontSize="md" fontWeight="500">
-                  {name}
-                </Text>
-              </HStack>
+              <NodeNameCard name={name} type={NodeTypes.ADAPTER_NODE} icon={logo} />
             </DrawerHeader>
             <DrawerBody>
               {schema && (

hivemq-edge/src/frontend/src/modules/TopicFilters/TopicFilterManager.spec.cy.tsx

@@ -22,7 +22,7 @@ describe('TopicFilterManager', () => {
 
     cy.mountWithProviders(<TopicFilterManager />)
 
-    cy.get('header').should('have.text', 'Manage topic filters')
+    cy.get('header > p').should('have.text', 'Manage topic filters')
     cy.get('table').should('be.visible')
 
     cy.get('table').as('table').should('have.attr', 'aria-label', 'List of topic filters')

hivemq-edge/src/frontend/src/modules/TopicFilters/TopicFilterManager.tsx

@@ -16,6 +16,8 @@ import PaginatedTable from '@/components/PaginatedTable/PaginatedTable.tsx'
 import ArrayItemDrawer from '@/components/rjsf/SplitArrayEditor/components/ArrayItemDrawer.tsx'
 import TopicSchemaDrawer from '@/modules/TopicFilters/components/TopicSchemaDrawer.tsx'
 import SchemaValidationMark from '@/modules/TopicFilters/components/SchemaValidationMark.tsx'
+import NodeNameCard from '@/modules/Workspace/components/parts/NodeNameCard.tsx'
+import { NodeTypes } from '@/modules/Workspace/types.ts'
 
 const TopicFilterManager: FC = () => {
   const { t } = useTranslation()
@@ -115,6 +117,7 @@ const TopicFilterManager: FC = () => {
   return (
     <ExpandableDrawer
       header={t('topicFilter.manager.header')}
+      subHeader={<NodeNameCard type={NodeTypes.EDGE_NODE} name={t('branding.appName')} />}
       isOpen={isOpen}
       onClose={handleClose}
       closeOnOverlayClick={false}

hivemq-edge/src/frontend/src/modules/Workspace/components/drawers/DevicePropertyDrawer.spec.cy.tsx

@@ -75,7 +75,6 @@ describe('DevicePropertyDrawer', () => {
     cy.get('@onClose').should('have.been.calledOnce')
 
     cy.get('header').should('contain.text', 'Device Overview')
-    cy.get('h2').eq(0).should('contain.text', 'simulation')
-    cy.get('h2').eq(1).should('contain.text', 'List of Device Tags')
+    cy.get('h2').eq(0).should('contain.text', 'List of Device Tags')
   })
 })

hivemq-edge/src/frontend/src/modules/Workspace/components/drawers/DevicePropertyDrawer.tsx

@@ -15,10 +15,10 @@ import { Adapter } from '@/api/__generated__'
 import { useGetAdapterTypes } from '@/api/hooks/useProtocolAdapters/useGetAdapterTypes.ts'
 import LoaderSpinner from '@/components/Chakra/LoaderSpinner.tsx'
 import ErrorMessage from '@/components/ErrorMessage.tsx'
-import DeviceMetadataViewer from '@/modules/Device/components/DeviceMetadataViewer.tsx'
 import DeviceTagList from '@/modules/Device/components/DeviceTagList.tsx'
 import useWorkspaceStore from '@/modules/Workspace/hooks/useWorkspaceStore.ts'
-import { DeviceMetadata } from '@/modules/Workspace/types.ts'
+import { DeviceMetadata, NodeTypes } from '@/modules/Workspace/types.ts'
+import NodeNameCard from '@/modules/Workspace/components/parts/NodeNameCard.tsx'
 
 interface DevicePropertyDrawerProps {
   nodeId: string
@@ -48,12 +48,14 @@ const DevicePropertyDrawer: FC<DevicePropertyDrawerProps> = ({ isOpen, selectedN
         <DrawerCloseButton />
         <DrawerHeader>
           <Text> {t('workspace.property.header', { context: selectedNode.type })}</Text>
+          <NodeNameCard
+            name={selectedNode.data.name}
+            type={selectedNode.type as NodeTypes}
+            description={selectedNode.data.id}
+          />
         </DrawerHeader>
         <DrawerBody display="flex" flexDirection="column" gap={6}>
-          <DrawerBody display="flex" flexDirection="column" gap={6}>
-            <DeviceMetadataViewer protocolAdapter={protocol} />
-            <DeviceTagList adapter={adapter} />
-          </DrawerBody>
+          <DeviceTagList adapter={adapter} />
         </DrawerBody>
       </DrawerContent>
     </Drawer>

hivemq-edge/src/frontend/src/modules/Workspace/components/drawers/EdgePropertyDrawer.tsx

@@ -14,6 +14,8 @@ import {
 
 import TopicExplorer from '@/modules/Workspace/components/topics/TopicExplorer.tsx'
 import MetadataExplorer from '@/modules/Workspace/components/topics/MetadataExplorer.tsx'
+import NodeNameCard from '@/modules/Workspace/components/parts/NodeNameCard.tsx'
+import { NodeTypes } from '@/modules/Workspace/types.ts'
 
 interface NodePropertyDrawerProps {
   nodeId: string
@@ -35,6 +37,7 @@ const EdgePropertyDrawer: FC<NodePropertyDrawerProps> = ({ isOpen, selectedNode,
         <DrawerCloseButton />
         <DrawerHeader>
           <Text> {t('workspace.property.header', { context: selectedNode.type })}</Text>
+          <NodeNameCard type={NodeTypes.EDGE_NODE} name={t('branding.appName')} />{' '}
         </DrawerHeader>
         <DrawerBody display="flex" flexDirection="column" gap={6}>
           <TopicExplorer onSelect={(topic) => setSelectedTopic(topic)} />

hivemq-edge/src/frontend/src/modules/Workspace/components/drawers/GroupPropertyDrawer.spec.cy.tsx

@@ -43,8 +43,6 @@ describe('GroupPropertyDrawer', () => {
     cy.wait('@getMetricForX')
 
     cy.getByTestId('group-panel-title').should('contain.text', 'Group Observability')
-    cy.getByTestId('group-panel-keys').find('p').eq(0).should('contain.text', 'adapter: bridge-id-01')
-    cy.getByTestId('group-panel-keys').find('p').eq(1).should('contain.text', 'adapter: my-adapter')
 
     cy.get('dt').eq(0).should('contain.text', 'bridge-id-01')
     cy.get('dt').eq(1).should('contain.text', 'my-adapter')

hivemq-edge/src/frontend/src/modules/Workspace/components/drawers/GroupPropertyDrawer.tsx

@@ -2,7 +2,6 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Node } from 'reactflow'
 import {
-  Box,
   Drawer,
   DrawerBody,
   DrawerCloseButton,
@@ -19,6 +18,7 @@ import useWorkspaceStore from '../../hooks/useWorkspaceStore.ts'
 import { getDefaultMetricsFor } from '../../utils/nodes-utils.ts'
 import GroupMetadataEditor from '../parts/GroupMetadataEditor.tsx'
 import { ChartType } from '@/modules/Metrics/types.ts'
+import NodeNameCard from '@/modules/Workspace/components/parts/NodeNameCard.tsx'
 
 interface GroupPropertyDrawerProps {
   nodeId: string
@@ -56,14 +56,11 @@ const GroupPropertyDrawer: FC<GroupPropertyDrawerProps> = ({
 
         <DrawerHeader>
           <Text data-testid="group-panel-title">{panelTitle}</Text>
-          <Box data-testid="group-panel-keys">
-            {selectedNode.data.childrenNodeIds.map((e) => (
-              <Text key={e}>
-                {t('workspace.device.type', { context: NodeTypes.ADAPTER_NODE })}:{' '}
-                {nodes.find((x) => x.id === e)?.data.id}
-              </Text>
-            ))}
-          </Box>
+          <NodeNameCard
+            description={t('workspace.device.type', { context: selectedNode.type })}
+            type={selectedNode.type as NodeTypes}
+            name={selectedNode.data.title}
+          />
         </DrawerHeader>
         <DrawerBody display="flex" flexDirection="column" gap={6}>
           {showConfig && (

hivemq-edge/src/frontend/src/modules/Workspace/components/drawers/LinkPropertyDrawer.tsx

@@ -1,13 +1,14 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Node } from 'reactflow'
-import { Box, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, Text } from '@chakra-ui/react'
+import { Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, Text } from '@chakra-ui/react'
 
 import { Adapter, Bridge } from '@/api/__generated__'
+import { useGetAdapterTypes } from '@/api/hooks/useProtocolAdapters/useGetAdapterTypes.ts'
 import MetricsContainer from '@/modules/Metrics/MetricsContainer.tsx'
-
-import { getDefaultMetricsFor } from '../../utils/nodes-utils.ts'
-import { NodeTypes } from '../../types.ts'
+import NodeNameCard from '@/modules/Workspace/components/parts/NodeNameCard.tsx'
+import { NodeTypes } from '@/modules/Workspace/types.ts'
+import { getDefaultMetricsFor } from '@/modules/Workspace/utils/nodes-utils.ts'
 
 interface LinkPropertyDrawerProps {
   nodeId: string
@@ -19,20 +20,25 @@ interface LinkPropertyDrawerProps {
 
 const LinkPropertyDrawer: FC<LinkPropertyDrawerProps> = ({ nodeId, isOpen, selectedNode, onClose }) => {
   const { t } = useTranslation()
+  const { data: protocols } = useGetAdapterTypes()
+  const adapterProtocol =
+    selectedNode.type === NodeTypes.ADAPTER_NODE
+      ? protocols?.items?.find((e) => e.id === (selectedNode as Node<Adapter>).data.type)
+      : undefined
 
   return (
     <Drawer isOpen={isOpen} placement="right" size="md" onClose={onClose} variant="hivemq">
-      {/*<DrawerOverlay />*/}
       <DrawerContent>
         <DrawerCloseButton />
 
         <DrawerHeader>
-          <Box>
-            <Text>{t('workspace.observability.header', { context: selectedNode.type })}</Text>
-            <Text>
-              {t('workspace.device.type', { context: selectedNode.type })}: {selectedNode.data.id}
-            </Text>
-          </Box>
+          <Text>{t('workspace.observability.header', { context: selectedNode.type })}</Text>
+          <NodeNameCard
+            name={selectedNode.data.id}
+            type={selectedNode.type as NodeTypes}
+            icon={adapterProtocol?.logoUrl}
+            description={adapterProtocol?.name}
+          />
         </DrawerHeader>
         <DrawerBody display="flex" flexDirection="column" gap={6}>
           <MetricsContainer

hivemq-edge/src/frontend/src/modules/Workspace/components/drawers/NodePropertyDrawer.tsx

@@ -30,7 +30,8 @@ import { ChartType } from '@/modules/Metrics/types.ts'
 
 import { NodeTypes } from '../../types.ts'
 import { getDefaultMetricsFor } from '../../utils/nodes-utils.ts'
-import NodeNameCard from '../parts/NodeNameCard.tsx'
+import NodeNameCard from '@/modules/Workspace/components/parts/NodeNameCard.tsx'
+import { useGetAdapterTypes } from '@/api/hooks/useProtocolAdapters/useGetAdapterTypes.ts'
 
 interface NodePropertyDrawerProps {
   nodeId: string
@@ -42,17 +43,27 @@ interface NodePropertyDrawerProps {
 
 const NodePropertyDrawer: FC<NodePropertyDrawerProps> = ({ nodeId, isOpen, selectedNode, onClose, onEditEntity }) => {
   const { t } = useTranslation()
+  const { data: protocols } = useGetAdapterTypes()
+  const adapterProtocol =
+    selectedNode.type === NodeTypes.ADAPTER_NODE
+      ? protocols?.items?.find((e) => e.id === (selectedNode as Node<Adapter>).data.type)
+      : undefined
 
   return (
     <Drawer isOpen={isOpen} placement="right" size="md" onClose={onClose} variant="hivemq">
       <DrawerOverlay />
       <DrawerContent aria-label={t('workspace.property.header', { context: selectedNode.type })}>
         <DrawerCloseButton />
         <DrawerHeader>
-          <Text> {t('workspace.property.header', { context: selectedNode.type })}</Text>
+          <Text>{t('workspace.property.header', { context: selectedNode.type })}</Text>
+          <NodeNameCard
+            name={selectedNode.data.id}
+            type={selectedNode.type as NodeTypes}
+            icon={adapterProtocol?.logoUrl}
+            description={adapterProtocol?.name}
+          />
         </DrawerHeader>
         <DrawerBody display="flex" flexDirection="column" gap={6}>
-          <NodeNameCard selectedNode={selectedNode} />
           <MetricsContainer
             nodeId={nodeId}
             type={selectedNode.type as NodeTypes}