imprv: Show modal when you delete plugin

apps/app/public/static/locales/en_US/admin.json

@@ -866,7 +866,8 @@
     "plugin_card": "Plugin Card",
     "plugin_is_not_installed": "Plugin is not installed",
     "install": "Install",
-    "delete": "Delete"
+    "delete": "Delete",
+    "confirm": "Delete plugin?"
   },
   "cloud_setting_management": {
     "to_cloud_settings": "Open GROWI.cloud Settings"

apps/app/public/static/locales/ja_JP/admin.json

@@ -874,7 +874,8 @@
     "plugin_card": "プラグインカード",
     "plugin_is_not_installed": "プラグインがインストールされていません",
     "install": "インストール",
-    "delete": "削除"
+    "delete": "削除",
+    "confirm": "プラグインを削除しますか？"
   },
   "cloud_setting_management": {
     "to_cloud_settings": "GROWI.cloud の管理画面へ"

apps/app/public/static/locales/zh_CN/admin.json

@@ -874,7 +874,8 @@
     "plugin_card": "Plugin Card",
     "plugin_is_not_installed": "Plugin is not installed",
     "install": "Install",
-    "delete": "Delete"
+    "delete": "Delete",
+    "confirm": "Delete plugin?"
   },
   "cloud_setting_management": {
     "to_cloud_settings": "進入 GROWI.cloud 的管理界面"

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginCard.tsx

@@ -6,6 +6,8 @@ import Link from 'next/link';
 import { apiv3Delete, apiv3Put } from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';
 
+import { PluginDeleteModal } from './PluginDeleteModal';
+
 import styles from './PluginCard.module.scss';
 
 type Props = {
@@ -69,6 +71,15 @@ export const PluginCard = (props: Props): JSX.Element => {
   };
 
   const PluginDeleteButton = (): JSX.Element => {
+    const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState<boolean>(false);
+
+    const onClickPluginDeleteButton = () => {
+      setIsDeleteConfirmModalShown(true);
+    };
+
+    const onCancelDeletePlugin = () => {
+      setIsDeleteConfirmModalShown(false);
+    };
 
     const onClickPluginDeleteBtnHandler = async() => {
       const reqUrl = `/plugins/${id}/remove`;
@@ -83,6 +94,7 @@ export const PluginCard = (props: Props): JSX.Element => {
       }
       finally {
         mutate();
+        setIsDeleteConfirmModalShown(false);
       }
     };
 
@@ -91,10 +103,19 @@ export const PluginCard = (props: Props): JSX.Element => {
         <button
           type="submit"
           className="btn btn-primary"
-          onClick={() => onClickPluginDeleteBtnHandler()}
+          onClick={() => onClickPluginDeleteButton()}
         >
           {t('plugins.delete')}
         </button>
+        {isDeleteConfirmModalShown && (
+          <PluginDeleteModal
+            isShown={isDeleteConfirmModalShown}
+            name={name}
+            url={url}
+            cancelToDelete={onCancelDeletePlugin}
+            confirmToDelete={onClickPluginDeleteBtnHandler}
+          />
+        )}
       </div>
     );
   };

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginDeleteModal.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
+import {
+  Button, Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
+
+
+export type PluginDeleteModalProps = {
+  isShown: boolean,
+  name: string,
+  url: string,
+  cancelToDelete: () => void,
+  confirmToDelete: () => void,
+}
+
+export const PluginDeleteModal = (props: PluginDeleteModalProps): JSX.Element => {
+  const {
+    isShown, name, url, cancelToDelete, confirmToDelete,
+  } = props;
+
+  const { t } = useTranslation('admin');
+
+  const headerContent = () => {
+    return (
+      <span>
+        {t('plugins.confirm')}
+      </span>
+    );
+  };
+
+  const bodyContent = () => {
+
+    return (
+      <div className="card well mt-2 p-2">
+        <Link href={`${url}`} legacyBehavior>{name}</Link>
+      </div>
+    );
+  };
+
+  const footerContent = () => {
+    return (
+      <>
+        <Button color="danger" onClick={confirmToDelete}>
+          {t('plugins.delete')}
+        </Button>
+      </>
+    );
+  };
+
+  return (
+    <Modal isOpen={isShown} toggle={cancelToDelete}>
+      <ModalHeader tag="h4" toggle={cancelToDelete} className="bg-danger text-light">
+        {headerContent()}
+      </ModalHeader>
+      <ModalBody>
+        {bodyContent()}
+      </ModalBody>
+      <ModalFooter>
+        {footerContent()}
+      </ModalFooter>
+    </Modal>
+  );
+};