feat: replace native confirmation popups with antd popconfirms (appiu…

…m#1611)
laib3 · Aug 16, 2024 · d70ab45 · d70ab45
1 parent 53ff4b8
commit d70ab45
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 22 deletions.
diff --git a/app/common/renderer/components/Inspector/SavedGestures.jsx b/app/common/renderer/components/Inspector/SavedGestures.jsx
@@ -1,5 +1,5 @@
 import {DeleteOutlined, EditOutlined, PlayCircleOutlined, PlusOutlined} from '@ant-design/icons';
-import {Button, Space, Table, Tooltip} from 'antd';
+import {Button, Popconfirm, Space, Table, Tooltip} from 'antd';
 import _ from 'lodash';
 import moment from 'moment';
 import React, {useEffect, useRef} from 'react';
@@ -31,7 +31,7 @@ const getGestureByID = (savedGestures, id, t) => {
 };
 
 const SavedGestures = (props) => {
-  const {savedGestures, showGestureEditor, removeGestureDisplay, t} = props;
+  const {savedGestures, deleteSavedGesture, showGestureEditor, removeGestureDisplay, t} = props;
 
   const drawnGestureRef = useRef(null);
 
@@ -53,13 +53,6 @@ const SavedGestures = (props) => {
     showGestureEditor();
   };
 
-  const handleDelete = (id) => {
-    const {deleteSavedGesture} = props;
-    if (window.confirm(t('confirmDeletion'))) {
-      deleteSavedGesture(id);
-    }
-  };
-
   const onDraw = (gesture) => {
     const {displayGesture} = props;
     const pointers = convertCoordinates(gesture.actions);
@@ -113,7 +106,15 @@ const SavedGestures = (props) => {
                 />
               </Tooltip>
               <Button icon={<EditOutlined />} onClick={() => loadSavedGesture(gesture)} />
-              <Button icon={<DeleteOutlined />} onClick={() => handleDelete(gesture.id)} />
+              <Popconfirm
+                title={t('confirmDeletion')}
+                placement="topRight"
+                okText={t('OK')}
+                cancelText={t('Cancel')}
+                onConfirm={() => deleteSavedGesture(gesture.id)}
+              >
+                <Button icon={<DeleteOutlined />} />
+              </Popconfirm>
             </Button.Group>
           );
         },

diff --git a/app/common/renderer/components/Session/SavedSessions.jsx b/app/common/renderer/components/Session/SavedSessions.jsx
@@ -1,5 +1,5 @@
 import {DeleteOutlined, EditOutlined} from '@ant-design/icons';
-import {Button, Col, Row, Table, Tooltip} from 'antd';
+import {Button, Col, Popconfirm, Row, Table, Tooltip} from 'antd';
 import moment from 'moment';
 import React from 'react';
 
@@ -28,7 +28,7 @@ const getSessionById = (savedSessions, id, t) => {
 };
 
 const SavedSessions = (props) => {
-  const {savedSessions, capsUUID, switchTabs, t} = props;
+  const {savedSessions, deleteSavedSession, capsUUID, switchTabs, t} = props;
 
   const handleCapsAndServer = (uuid) => {
     const {
@@ -61,13 +61,6 @@ const SavedSessions = (props) => {
     );
   };
 
-  const handleDelete = (uuid) => {
-    const {deleteSavedSession} = props;
-    if (window.confirm(t('confirmDeletion'))) {
-      deleteSavedSession(uuid);
-    }
-  };
-
   const columns = [
     {
       title: t('Name'),
@@ -86,7 +79,7 @@ const SavedSessions = (props) => {
       width: SAVED_SESSIONS_TABLE_VALUES.ACTIONS_COLUMN_WIDTH,
       render: (_, record) => (
         <Button.Group>
-          <Tooltip title={t('Edit')}>
+          <Tooltip zIndex={2} title={t('Edit')}>
             <Button
               icon={<EditOutlined />}
               onClick={() => {
@@ -95,8 +88,16 @@ const SavedSessions = (props) => {
               }}
             />
           </Tooltip>
-          <Tooltip title={t('Delete')}>
-            <Button icon={<DeleteOutlined />} onClick={() => handleDelete(record.key)} />
+          <Tooltip zIndex={2} title={t('Delete')}>
+            <Popconfirm
+              zIndex={3}
+              title={t('confirmDeletion')}
+              okText={t('OK')}
+              cancelText={t('Cancel')}
+              onConfirm={() => deleteSavedSession(record.key)}
+            >
+              <Button icon={<DeleteOutlined />} />
+            </Popconfirm>
           </Tooltip>
         </Button.Group>
       ),