Add confirm dialog popup for cache delete page

Commonjava · Dec 20, 2023 · d8b5db3 · d8b5db3
1 parent 799be72
commit d8b5db3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/src/main/webui/src/app/components/content/addons/Cache.jsx b/src/main/webui/src/app/components/content/addons/Cache.jsx
@@ -16,6 +16,7 @@
 
 import React, {useState} from 'react';
 import {useForm} from 'react-hook-form';
+import {ConfirmDialog} from '../common/PopupDialogs.jsx';
 
 import {IndyRest} from '#utils/RestClient.js';
 
@@ -37,13 +38,21 @@ export default function Cache() {
   const {
     register,
     handleSubmit,
+    trigger,
     formState: {errors}
   } = useForm();
-  const submit = e => {
-    e.preventDefault();
+  const [showConfirmBox, setShowConfirm] = useState(false);
+  const showConfirmLog = () =>{
+    trigger().then(valid => valid && setShowConfirm(true));
+  };
+  const cancelConfirmLog = ()=>{
+    setShowConfirm(false);
+  };
+  const submit = () => {
     handleSubmit(data=>{
       deleteCache(data.path);
     })();
+    setShowConfirm(false);
   };
   return <form onSubmit={e => e.preventDefault()}>
     <div className="control-panel">
@@ -57,7 +66,10 @@ export default function Cache() {
         {errors.path?.type === "required" && <span className="alert">Metadata url is required</span>}
       </div>
       <div className="cp-row">
-        <button onClick={submit}>Delete</button>
+        <button onClick={showConfirmLog}>Delete</button>
+        <ConfirmDialog showBox={showConfirmBox}
+         title={`Do you really want to delete this file?`}
+         handleCancel={cancelConfirmLog} handleConfirm={submit} />
       </div>
     </div>
     <div className="content-panel">

diff --git a/src/main/webui/src/app/components/content/common/PopupDialogs.jsx b/src/main/webui/src/app/components/content/common/PopupDialogs.jsx
@@ -43,9 +43,9 @@ ChangeLogDialog.propTypes={
   changelog: PropTypes.object
 };
 
-const ConfirmDialog = ({showBox, handleConfirm, handleCancel}) => <Modal show={showBox} onHide={handleCancel}>
+const ConfirmDialog = ({showBox, title, handleConfirm, handleCancel}) => <Modal show={showBox} onHide={handleCancel}>
   <Modal.Header>
-    <Modal.Title><b>Are you sure to delete this repository?</b></Modal.Title>
+    <Modal.Title><b>{title}</b></Modal.Title>
   </Modal.Header>
   <Modal.Footer>
     <Button variant="secondary" onClick={handleCancel}>
@@ -59,6 +59,7 @@ const ConfirmDialog = ({showBox, handleConfirm, handleCancel}) => <Modal show={s
 
 ConfirmDialog.propTypes={
   showBox: PropTypes.bool,
+  title: PropTypes.string.isRequired,
   handleConfirm: PropTypes.func,
   handleCancel: PropTypes.func
 };

diff --git a/src/main/webui/src/app/components/content/common/StoreControlPanels.jsx b/src/main/webui/src/app/components/content/common/StoreControlPanels.jsx
@@ -102,7 +102,9 @@ const StoreViewControlPanel = function({store}){
         <button name="delete" onClick={showConfirmLog} className="del-button cp-button">
           Delete
         </button>
-        <ConfirmDialog showBox={showConfirmBox} handleCancel={cancelConfirmLog} handleConfirm={handleRemove} />
+        <ConfirmDialog showBox={showConfirmBox}
+         title="Are you sure to delete this repository?"
+         handleCancel={cancelConfirmLog} handleConfirm={handleRemove} />
       </div>
     </div>
   );
@@ -175,7 +177,9 @@ const StoreEditControlPanel = ({mode, store, handleSubmit, validate, changelog})
         <button name="delete" onClick={showConfirmLog} className="del-button cp-button">
           Delete
         </button>
-        <ConfirmDialog showBox={showConfirmBox} handleCancel={cancelConfirmLog} handleConfirm={handleRemove} />
+        <ConfirmDialog showBox={showConfirmBox}
+         title="Are you sure to delete this repository?"
+         handleCancel={cancelConfirmLog} handleConfirm={handleRemove} />
       </React.Fragment>
     }
     <ChangeLogDialog showBox={showChangeBox} handleCancel={cancelCommitMsg} handleSave={handleSave} changelog={changelog} />