Merge pull request #119 from ligangty/popup

Add PopupDialogs Components

src/main/webui/src/app/components/content/common/PopupDialogs.jsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright (C) 2023 Red Hat, Inc. (https://github.com/Commonjava/indy-ui-service)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {PropTypes} from 'prop-types';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+
+const ConfirmDialog = ({showBox, handleConfirm, handleCancel}) => <Modal show={showBox} onHide={handleCancel}>
+  <Modal.Header>
+    <Modal.Title><b>Are you sure to delete this repository?</b></Modal.Title>
+  </Modal.Header>
+  <Modal.Footer>
+    <Button variant="secondary" onClick={handleCancel}>
+      No
+    </Button>
+    <Button variant="primary" onClick={handleConfirm}>
+      Yes
+    </Button>
+  </Modal.Footer>
+  </Modal>;
+
+ConfirmDialog.propTypes={
+  showBox: PropTypes.bool,
+  handleConfirm: PropTypes.func,
+  handleCancel: PropTypes.func
+};
+
+export {ConfirmDialog};

src/main/webui/src/app/components/content/common/StoreControlPanels.jsx

@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, {useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 import {PropTypes} from 'prop-types';
 import {Utils} from '#utils/AppUtils';
 import {jsonRest,http, logErrors} from '#utils/RestClient';
 import {STORE_API_BASE_URL} from '../../ComponentConstants';
+import {ConfirmDialog} from './PopupDialogs.jsx';
 
 const save = (store, mode, postSuccessHandler) => {
   const saveUrl = `${STORE_API_BASE_URL}/${store.packageType}/${store.type}/${store.name}`;
@@ -80,8 +81,15 @@ const StoreViewControlPanel = function({store}){
   };
   const [enableText, enableHandler] = store.disabled?["Enable",handleEnable]:["Disable",handleDisable];
 
-  const [pkgType, storeType, storeName] = [store.packageType, store.type, store.name];
+  const [showConfirmBox, setShowConfirm] = useState(false);
+  const showConfirmLog = () =>{
+    setShowConfirm(true);
+  };
+  const cancelConfirmLog = ()=>{
+    setShowConfirm(false);
+  };
   const handleRemove = () => remove(store, st => navigate(`/${st.type}/${st.packageType}`));
+  const [pkgType, storeType, storeName] = [store.packageType, store.type, store.name];
 
   return(
     <div className="cp-row-group">
@@ -91,9 +99,10 @@ const StoreViewControlPanel = function({store}){
       <div className="cp-row">
         <button onClick={()=>navigate(`/${storeType}/${pkgType}/edit/${storeName}`)}>Edit</button>{'  '}
         <button onClick={()=>navigate(`/${storeType}/new`)}>New...</button>{'  '}
-        <button name="del" onClick={handleRemove} className="del-button cp-button">
+        <button name="delete" onClick={showConfirmLog} className="del-button cp-button">
           Delete
         </button>
+        <ConfirmDialog showBox={showConfirmBox} handleCancel={cancelConfirmLog} handleConfirm={handleRemove} />
       </div>
     </div>
   );