refactor(29358): refactor toolbar

hivemq · Jan 16, 2025 · f6a7950 · f6a7950
1 parent 91718cf
commit f6a7950
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/...dge/src/frontend/src/extensions/datahub/components/toolbar/NodeDatahubToolbar.spec.cy.tsx b/...dge/src/frontend/src/extensions/datahub/components/toolbar/NodeDatahubToolbar.spec.cy.tsx
@@ -20,8 +20,8 @@ describe('NodeDatahubToolbar', () => {
     cy.get('@deleteNode').should('not.have.been.called')
     cy.get('@copyNode').should('not.have.been.called')
 
-    cy.getByTestId('node-toolbar-edit').should('have.attr', 'aria-label', 'Edit')
-    cy.getByTestId('node-toolbar-edit').click()
+    cy.getByTestId('node-toolbar-config').should('have.attr', 'aria-label', 'Configure')
+    cy.getByTestId('node-toolbar-config').click()
     cy.get('@editNode').should('have.been.called')
 
     cy.getByTestId('node-toolbar-copy').should('have.attr', 'aria-label', 'Copy')

diff --git a/hivemq-edge/src/frontend/src/extensions/datahub/components/toolbar/NodeDatahubToolbar.tsx b/hivemq-edge/src/frontend/src/extensions/datahub/components/toolbar/NodeDatahubToolbar.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ButtonGroupProps, Divider } from '@chakra-ui/react'
-import { LuCopy, LuDelete, LuFileEdit } from 'react-icons/lu'
+import { ButtonGroupProps, Divider, Icon } from '@chakra-ui/react'
+import { LuCopy, LuDelete, LuFileCog } from 'react-icons/lu'
 
 import IconButton from '@/components/Chakra/IconButton.tsx'
 import ToolbarButtonGroup from '@/components/react-flow/ToolbarButtonGroup.tsx'
@@ -29,13 +29,13 @@ const NodeDatahubToolbar: FC<NodeToolbarProps> = ({ onCopy, onEdit, onDelete, ch
       )}
       <ToolbarButtonGroup orientation="horizontal" isAttached {...props}>
         <IconButton
-          icon={<LuFileEdit />}
+          icon={<Icon as={LuFileCog} boxSize="20px" />}
           data-testid="node-toolbar-edit"
-          aria-label={t('Listings.action.edit')}
+          aria-label={t('Listings.action.config')}
           onClick={onEdit}
         />
         <IconButton
-          icon={<LuCopy />}
+          icon={<Icon as={LuCopy} boxSize="20px" />}
           data-testid="node-toolbar-copy"
           aria-label={t('Listings.action.copy')}
           onClick={onCopy}
@@ -44,7 +44,7 @@ const NodeDatahubToolbar: FC<NodeToolbarProps> = ({ onCopy, onEdit, onDelete, ch
       </ToolbarButtonGroup>
       <ToolbarButtonGroup orientation="horizontal" isAttached variant="outline" {...props}>
         <IconButton
-          icon={<LuDelete />}
+          icon={<Icon as={LuDelete} boxSize="20px" />}
           data-testid="node-toolbar-delete"
           aria-label={t('Listings.action.delete')}
           colorScheme="red"

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
@@ -34,6 +34,7 @@
     "action": {
       "edit": "Edit",
       "view": "View",
+      "config": "Configure",
       "download": "Download",
       "delete": "Delete",
       "copy": "Copy"