125483 add onCancelDeletePlugin

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

@@ -7,14 +7,13 @@ import {
 
 export type DeletePluginModalProps = {
   isShown: boolean,
-  errorMessage: string,
   cancelToDelete: () => void,
   confirmToDelete: () => void,
 }
 
 export const DeletePluginModal = (props: DeletePluginModalProps): JSX.Element => {
   const {
-    isShown, errorMessage, cancelToDelete, confirmToDelete,
+    isShown, cancelToDelete, confirmToDelete,
   } = props;
 
   const headerContent = () => {
@@ -23,7 +22,6 @@ export const DeletePluginModal = (props: DeletePluginModalProps): JSX.Element =>
     }
     return (
       <span>
-        <i className="icon-fw icon-fire"></i>
         Delete plugin?
       </span>
     );
@@ -36,7 +34,7 @@ export const DeletePluginModal = (props: DeletePluginModalProps): JSX.Element =>
 
     return (
       <>
-        <p className="card well comment-body mt-2 p-2">本当に削除しますか？</p>
+        <p className="card well mt-2 p-2">本当に削除しますか？</p>
       </>
     );
   };
@@ -47,10 +45,8 @@ export const DeletePluginModal = (props: DeletePluginModalProps): JSX.Element =>
     }
     return (
       <>
-        <span className="text-danger">{errorMessage}</span>&nbsp;
         <Button onClick={cancelToDelete}>Cancel</Button>
         <Button color="danger" onClick={confirmToDelete}>
-          <i className="icon icon-fire"></i>
           Delete
         </Button>
       </>

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

@@ -71,13 +71,17 @@ export const PluginCard = (props: Props): JSX.Element => {
   };
 
   const PluginDeleteButton = (): JSX.Element => {
-    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState<boolean>(false);
 
-    const onClickPluginDeleteBtnHandler = () => {
-      setShowDeleteModal(true);
+    const onClickPluginDeleteButton = () => {
+      setIsDeleteConfirmModalShown(true);
     };
 
-    const confirmToDelete = async() => {
+    const onCancelDeletePlugin = () => {
+      setIsDeleteConfirmModalShown(false);
+    };
+
+    const onDeletePlugin = async() => {
       const reqUrl = `/plugins/${id}/remove`;
 
       try {
@@ -90,7 +94,7 @@ export const PluginCard = (props: Props): JSX.Element => {
       }
       finally {
         mutate();
-        setShowDeleteModal(false);
+        setIsDeleteConfirmModalShown(false);
       }
     };
 
@@ -99,16 +103,15 @@ export const PluginCard = (props: Props): JSX.Element => {
         <button
           type="submit"
           className="btn btn-primary"
-          onClick={() => onClickPluginDeleteBtnHandler()}
+          onClick={() => onClickPluginDeleteButton()}
         >
           {t('plugins.delete')}
         </button>
-        {showDeleteModal && (
+        {isDeleteConfirmModalShown && (
           <DeletePluginModal
-            isShown={showDeleteModal}
-            errorMessage=""
-            cancelToDelete={() => setShowDeleteModal(false)}
-            confirmToDelete={confirmToDelete}
+            isShown={isDeleteConfirmModalShown}
+            cancelToDelete={onCancelDeletePlugin}
+            confirmToDelete={onDeletePlugin}
           />
         )}
       </div>