changed browser dependent confirm box

app/javascript/components/settings-company-tags/index.jsx

@@ -7,6 +7,7 @@ import MiqStructuredList from '../miq-structured-list';
 import SettingsCompanyTagsEntryForm from '../settings-company-tags-entry-form';
 import { rowData, CellAction } from '../miq-data-table/helper';
 import NoRecordsFound from '../no-records-found';
+import MiqConfirmActionModal, { modalCallbackTypes } from '../miq-confirm-action-modal';
 import { http } from '../../http_api';
 import { categoryOptions, pageData } from './helper';
 
@@ -26,6 +27,7 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => {
     list: undefined,
     isLoading: true,
     listLoading: true,
+    confirm: false,
   });
 
   /** Function to fetch the information needed for summary and list when the select box is changed. */
@@ -35,6 +37,7 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => {
       const { summary, list, selectedCategory } = pageData(response, data.options);
       setData({
         ...data,
+        confirm: false,
         summary,
         list,
         selectedCategory,
@@ -101,20 +104,7 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => {
   /** Function to handle the delete button click event from the list. */
   const onButtonCallback = (item) => {
     if (item && item.callbackAction && item.callbackAction === 'deleteEntryCallback') {
-      // confirm box will be changed after other tab contents are changed.
-      // eslint-disable-next-line no-alert
-      if (window.confirm(__('Are you sure you want to delete this entry?'))) {
-        miqSparkleOn();
-        http.post(`/ops/ce_delete/${data.selectedCategory.id}?entry_id=${item.id}`).then((response) => {
-          setData({
-            ...data,
-            notification: { visible: true, type: 'danger', message: response.message },
-          });
-          miqSparkleOff();
-          add_flash(__('Category entry was successfully deleted'), response.type);
-          return categoryInformation(response.category_id);
-        });
-      }
+      setData({ ...data, selectedEntryId: item.id, confirm: true });
     }
   };
 
@@ -129,6 +119,24 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => {
     }
   };
 
+  const deleteEntry = (actionType) => {
+    if (actionType === modalCallbackTypes.OK) {
+      miqSparkleOn();
+      http.post(`/ops/ce_delete/${data.selectedCategory.id}?entry_id=${data.selectedEntryId}`).then((response) => {
+        setData({
+          ...data,
+          confirm: false,
+          notification: { visible: true, type: 'danger', message: response.message },
+        });
+        miqSparkleOff();
+        add_flash(__('Category entry was successfully deleted'), response.type);
+        return categoryInformation(response.category_id);
+      });
+    } else {
+      setData({ ...data, confirm: false });
+    }
+  };
+
   /** Function to render the add new button */
   const renderActionButton = () => (
     <div className="custom-accordion-buttons">
@@ -157,6 +165,16 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => {
     );
   };
 
+  /** Function to render a confirmation-modal-box. */
+  const renderConfirmModal = () => {
+    const modalData = {
+      open: data.confirm,
+      confirm: __('Are you sure you want to delete this entry?'),
+      callback: (actionType) => deleteEntry(actionType),
+    };
+    return <MiqConfirmActionModal modalData={modalData} />;
+  };
+
   /** Function to render the entries list with a header and button. */
   const renderList = () => {
     if (!data.list) {
@@ -175,6 +193,9 @@ const SettingsCompanyTags = ({ pageTitle, categoryId }) => {
           showPagination={false}
           mode="settings-company-tags-list"
         />
+        {
+          data.confirm && renderConfirmModal()
+        }
         {miqRows.rowItems.length === 0 && <NoRecordsFound />}
       </>
     );