Added deletion modal in account page

Co-authored-by: Alessandro Cannarella <cannarella.dev@gmail.com>
netgroup-polito · Mar 4, 2022 · ac46e24 · ac46e24
1 parent 3ce142f
commit ac46e24
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 11 deletions.
diff --git a/frontend/src/components/accountPage/SSHKeysTable/SSHKeysTable.tsx b/frontend/src/components/accountPage/SSHKeysTable/SSHKeysTable.tsx
@@ -1,15 +1,21 @@
 import { DeleteOutlined } from '@ant-design/icons';
-import { Popconfirm, Table } from 'antd';
+import { Table } from 'antd';
+import Button from 'antd-button-color';
 import Column from 'antd/lib/table/Column';
-import { FC } from 'react';
+import { FC, useState } from 'react';
+import { ModalAlert } from '../../common/ModalAlert';
 
 export interface ISSHKeysTableProps {
   sshKeys?: { name: string; key: string }[];
-  onDeleteKey?: (key: { name: string; key: string }) => void;
+  onDeleteKey?: (key: {
+    name: string;
+    key: string;
+  }) => Promise<Boolean | undefined>;
 }
 
 const SSHKeysTable: FC<ISSHKeysTableProps> = props => {
   const { sshKeys } = props;
+  const [showDeleteModalConfirm, setShowDeleteModalConfirm] = useState(false);
   return (
     <Table
       dataSource={sshKeys}
@@ -42,13 +48,46 @@ const SSHKeysTable: FC<ISSHKeysTableProps> = props => {
         width={60}
         render={(_: any, record: { name: string; key: string }) =>
           sshKeys?.length && (
-            <Popconfirm
-              className="flex justify-center"
-              title="Confirm deletion?"
-              onConfirm={() => props.onDeleteKey?.(record)}
-            >
-              <DeleteOutlined style={{ color: 'red' }} />
-            </Popconfirm>
+            <>
+              <ModalAlert
+                headTitle={record.name}
+                message="Delete ssh key"
+                description="Do you really want to delete this key?"
+                type="warning"
+                buttons={[
+                  <Button
+                    key={0}
+                    shape="round"
+                    className="mr-2 w-24"
+                    type="primary"
+                    onClick={() => setShowDeleteModalConfirm(false)}
+                  >
+                    Close
+                  </Button>,
+                  <Button
+                    key={1}
+                    shape="round"
+                    className="ml-2 w-24"
+                    type="danger"
+                    onClick={() =>
+                      props
+                        .onDeleteKey?.(record)
+                        .then(() => setShowDeleteModalConfirm(false))
+                        .catch(err => null)
+                    }
+                  >
+                    Delete
+                  </Button>,
+                ]}
+                show={showDeleteModalConfirm}
+                setShow={setShowDeleteModalConfirm}
+              />
+
+              <DeleteOutlined
+                onClick={() => setShowDeleteModalConfirm(true)}
+                style={{ color: 'red' }}
+              />
+            </>
           )
         }
       />

diff --git a/frontend/src/components/accountPage/UserPanel/UserPanel.tsx b/frontend/src/components/accountPage/UserPanel/UserPanel.tsx
@@ -28,7 +28,7 @@ const UserPanel: FC<IUserPanelProps> = props => {
   const closeModal = () => setShowSSHModal(false);
 
   const deleteKey = async (targetKey: { name: string; key: string }) => {
-    await props.onDeleteKey?.(targetKey);
+    return props.onDeleteKey?.(targetKey);
   };
   const addKey = async (newKey: { name: string; key: string }) => {
     if (await props.onAddKey?.(newKey)) {