Merge pull request #973

* refactor(32892): add a prompt to the props

* refactor(32892): redesign the delete modal

* refactor(32892): update translations

* test(32892): add tests

* test(32892): fix tests

Author: vanch3d

hivemq-edge-frontend/src/components/Modal/ConfirmationDialog.spec.cy.tsx

@@ -0,0 +1,61 @@
+import ConfirmationDialog from './ConfirmationDialog'
+
+describe('ConfirmationDialog', () => {
+  beforeEach(() => {
+    cy.viewport(800, 600)
+  })
+
+  it.only('should render properly', () => {
+    const onClose = cy.stub().as('onClose')
+    const onSubmit = cy.stub().as('onSubmit')
+    cy.mountWithProviders(
+      <ConfirmationDialog
+        isOpen={true}
+        onClose={onClose}
+        onSubmit={onSubmit}
+        header="Hello"
+        message="The nice long message"
+        prompt="Are you sure?"
+      />
+    )
+
+    cy.get('header').should('have.text', 'Hello')
+    cy.getByTestId('confirmation-message').should('have.text', 'The nice long message')
+    cy.getByTestId('confirmation-prompt').should('have.text', 'Are you sure?')
+    cy.getByTestId('confirmation-submit').should('have.text', 'Delete')
+    cy.getByTestId('confirmation-cancel').should('have.text', 'Cancel')
+
+    cy.get('@onClose').should('have.not.been.called')
+    cy.getByTestId('confirmation-cancel').click()
+    cy.get('@onClose').should('have.been.called')
+
+    cy.get('@onSubmit').should('have.not.been.called')
+    cy.getByTestId('confirmation-submit').click()
+    cy.get('@onSubmit').should('have.been.called')
+  })
+
+  it.only('should render alternative submit', () => {
+    cy.mountWithProviders(
+      <ConfirmationDialog
+        isOpen={true}
+        onClose={cy.stub}
+        header="Hello"
+        message="The nice long message"
+        action="Alternative Text"
+      />
+    )
+
+    cy.get('header').should('have.text', 'Hello')
+    cy.getByTestId('confirmation-submit').should('have.text', 'Alternative Text')
+  })
+
+  it('should be accessible ', () => {
+    cy.injectAxe()
+    cy.mountWithProviders(
+      <ConfirmationDialog isOpen={true} onClose={cy.stub} header="Hello" message="sssss" prompt="sss" />
+    )
+    cy.get('header').should('be.visible')
+
+    cy.checkAccessibility()
+  })
+})

hivemq-edge-frontend/src/components/Modal/ConfirmationDialog.tsx

@@ -8,6 +8,7 @@ import {
   AlertDialogHeader,
   AlertDialogOverlay,
   Button,
+  Text,
 } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
 import type { FocusableElement } from '@chakra-ui/utils'
@@ -17,11 +18,20 @@ interface ConfirmationDialogProps {
   onClose: () => void
   header: string
   message: string
+  prompt?: string
   action?: string | null
   onSubmit?: () => void
 }
 
-const ConfirmationDialog: FC<ConfirmationDialogProps> = ({ isOpen, onClose, header, message, action, onSubmit }) => {
+const ConfirmationDialog: FC<ConfirmationDialogProps> = ({
+  isOpen,
+  onClose,
+  header,
+  message,
+  prompt,
+  action,
+  onSubmit,
+}) => {
   const { t } = useTranslation()
   const cancelRef = useRef<HTMLButtonElement>()
 
@@ -33,7 +43,10 @@ const ConfirmationDialog: FC<ConfirmationDialogProps> = ({ isOpen, onClose, head
             {header}
           </AlertDialogHeader>
 
-          <AlertDialogBody>{message}</AlertDialogBody>
+          <AlertDialogBody>
+            <Text data-testid="confirmation-message">{message}</Text>
+            {prompt && <Text data-testid="confirmation-prompt">{prompt}</Text>}
+          </AlertDialogBody>
 
           <AlertDialogFooter>
             <Button ref={cancelRef as LegacyRef<HTMLButtonElement>} onClick={onClose} data-testid="confirmation-cancel">

hivemq-edge-frontend/src/extensions/datahub/components/pages/DataHubListings.spec.cy.tsx

@@ -53,8 +53,7 @@ describe('DataHubListings', () => {
     cy.getByTestId('list-action-delete').click()
 
     cy.get("[role='alertdialog']").as('modal').should('be.visible')
-    cy.get('@modal').find('header').should('have.text', 'Delete Item')
-    cy.get('@modal').find('header').should('have.text', 'Delete Item')
+    cy.get('@modal').find('header').should('have.text', 'Delete Schema')
     cy.get('@modal').find('footer').find('button').as('actions')
     cy.get('@actions').eq(0).click()
     cy.get("[role='alertdialog']").should('not.exist')

hivemq-edge-frontend/src/extensions/datahub/components/pages/DataHubListings.tsx

@@ -94,8 +94,9 @@ const DataHubListings: FC = () => {
         isOpen={isConfirmDeleteOpen}
         onClose={handleConfirmOnClose}
         onSubmit={handleConfirmOnSubmit}
-        message={t('Listings.modal.delete.message')}
-        header={t('Listings.modal.delete.header')}
+        header={t('Listings.modal.delete.header', { context: deleteItem?.type })}
+        message={t('Listings.modal.delete.message', { context: deleteItem?.type })}
+        prompt={t('Listings.modal.delete.prompt')}
       />
     </Tabs>
   )

hivemq-edge-frontend/src/extensions/datahub/locales/en/datahub.json

@@ -56,8 +56,14 @@
     },
     "modal": {
       "delete": {
-        "header": "Delete Item",
-        "message": "Are you sure? You can't undo this action afterward."
+        "header_SCHEMA": "Delete Schema",
+        "header_FUNCTION": "Delete Script",
+        "header_DATA_POLICY": "Delete Data Policy",
+        "header_BEHAVIOR_POLICY": "Delete Behaviour Policy",
+        "message": "The policy will be deleted.",
+        "message_SCHEMA": "Schemas are internally stored as a bundle; every version of the schema will be deleted.",
+        "message_FUNCTION": "Scripts are internally stored as a bundle; every version of the script will be deleted.",
+        "prompt": "You can't undo this action afterward. Are you sure?"
       }
     },
     "policy": {