refactor(29444): refactor the status bar

hivemq · Jan 15, 2025 · 6263a44 · 6263a44
1 parent f7d5f69
commit 6263a44
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/hivemq-edge/src/frontend/src/extensions/datahub/components/helpers/DraftStatus.tsx b/hivemq-edge/src/frontend/src/extensions/datahub/components/helpers/DraftStatus.tsx
@@ -1,7 +1,7 @@
 import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
-import { ButtonGroup, HStack, Icon, Text } from '@chakra-ui/react'
+import { Breadcrumb, BreadcrumbItem, ButtonGroup, HStack, Icon, Text } from '@chakra-ui/react'
 import { LuTrash2 } from 'react-icons/lu'
 import { PiPencilSimpleLineFill } from 'react-icons/pi'
 
@@ -30,7 +30,19 @@ const DraftStatus: FC = () => {
     <HStack alignItems="center" sx={{ textWrap: 'nowrap' }} gap={4}>
       <HStack role="group" aria-label={t('workspace.toolbars.status.aria-label')}>
         <NodeIcon type={DataHubNodeType.DATA_POLICY} />
-        <Text>{t('workspace.toolbox.draft.status', { context: status, name: name, type })}</Text>
+        <Breadcrumb separator="|">
+          <BreadcrumbItem>
+            <Text data-testid="status-type">{t('policy.type', { context: type || PolicyType.CREATE_POLICY })}</Text>
+          </BreadcrumbItem>
+
+          <BreadcrumbItem>
+            <Text>{name || t('policy.unnamed')}</Text>
+          </BreadcrumbItem>
+
+          <BreadcrumbItem isCurrentPage>
+            <Text>{t('workspace.toolbox.draft.status', { context: status })}</Text>
+          </BreadcrumbItem>
+        </Breadcrumb>
       </HStack>
       <ButtonGroup role="group" aria-label={t('workspace.toolbars.edit.aria-label')}>
         <IconButton

diff --git a/hivemq-edge/src/frontend/src/extensions/datahub/locales/en/datahub.json b/hivemq-edge/src/frontend/src/extensions/datahub/locales/en/datahub.json
@@ -15,9 +15,10 @@
     "description": "The Data Hub on Edge provides mechanisms to define how MQTT data and MQTT client behavior are handled from the adaptors to the HiveMQ broker"
   },
   "policy": {
-    "type_CREATE_POLICY": "Unpublished Draft",
+    "type_CREATE_POLICY": "No type selected",
     "type_DATA_POLICY": "Data Policy",
-    "type_BEHAVIOR_POLICY": "Behavior Policy"
+    "type_BEHAVIOR_POLICY": "Behavior Policy",
+    "unnamed": "Unnamed policy"
   },
 
   "resource": {
@@ -161,10 +162,10 @@
         "operation": "Operation"
       },
       "draft": {
-        "status_DRAFT": "Draft Policy",
-        "status_LOADED": "{{ type }} {{ name }} - Loaded",
-        "status_MODIFIED": "{{ type }} {{ name }} - Modified",
-        "status_READ_ONLY": "{{ type }} {{ name }} - Read-only"
+        "status_DRAFT": "Draft",
+        "status_LOADED": "Locked",
+        "status_MODIFIED": "Modified",
+        "status_READ_ONLY": "Read-only"
       }
     },
     "nodes": {