Add warning icon and i18n to delete host modal (#2411)

openshift-assisted · Oct 16, 2023 · 6dce68d · 6dce68d
1 parent c9bc7ce
commit 6dce68d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 23 deletions.
diff --git a/libs/locales/lib/en/translation.json b/libs/locales/lib/en/translation.json
@@ -332,6 +332,7 @@
   "ai:Go to cluster list": "Go to cluster list",
   "ai:Hardware": "Hardware",
   "ai:Hardware information": "Hardware information",
+  "ai:Host {{hostname}} will be removed": "Host {{hostname}} will be removed",
   "ai:Host address": "Host address",
   "ai:Host cannot be deleted while host is either installed or being installed.": "Host cannot be deleted while host is either installed or being installed.",
   "ai:Host Count": "Host Count",
@@ -611,6 +612,7 @@
   "ai:Remove": "Remove",
   "ai:Remove from the cluster": "Remove from the cluster",
   "ai:Remove host": "Remove host",
+  "ai:Remove host?": "Remove host?",
   "ai:Remove hosts": "Remove hosts",
   "ai:Remove hosts dialog": "Remove hosts dialog",
   "ai:Remove hosts?": "Remove hosts?",

diff --git a/libs/ui-lib/lib/ocm/components/hosts/DeleteHostModal.tsx b/libs/ui-lib/lib/ocm/components/hosts/DeleteHostModal.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Modal, ModalVariant, Button, ButtonVariant } from '@patternfly/react-core';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 type DeleteHostModalProps = {
   hostname?: string;
@@ -8,28 +9,32 @@ type DeleteHostModalProps = {
   onDelete: () => void;
 };
 
-const DeleteHostModal = ({ isOpen, hostname, onClose, onDelete }: DeleteHostModalProps) => (
-  <Modal
-    title="Remove host?"
-    isOpen={isOpen}
-    onClose={onClose}
-    variant={ModalVariant.small}
-    actions={[
-      <Button
-        data-testid="delete-host-submit"
-        key="confirm"
-        variant={ButtonVariant.danger}
-        onClick={onDelete}
-      >
-        Remove host
-      </Button>,
-      <Button key="cancel" variant={ButtonVariant.link} onClick={onClose}>
-        Cancel
-      </Button>,
-    ]}
-  >
-    Host {hostname || ''} will be removed.
-  </Modal>
-);
+const DeleteHostModal = ({ isOpen, hostname, onClose, onDelete }: DeleteHostModalProps) => {
+  const { t } = useTranslation();
+  return (
+    <Modal
+      title={t('ai:Remove host?')}
+      isOpen={isOpen}
+      onClose={onClose}
+      variant={ModalVariant.small}
+      titleIconVariant="warning"
+      actions={[
+        <Button
+          data-testid="delete-host-submit"
+          key="confirm"
+          variant={ButtonVariant.danger}
+          onClick={onDelete}
+        >
+          {t('ai:Remove host')}
+        </Button>,
+        <Button key="cancel" variant={ButtonVariant.link} onClick={onClose}>
+          {t('ai:Cancel')}
+        </Button>,
+      ]}
+    >
+      {t('ai:Host {{hostname}} will be removed', { hostname: hostname || '' })}
+    </Modal>
+  );
+};
 
 export default DeleteHostModal;