Merge pull request #120 from ligangty/popup

Add ChangeLog Diaglog Component

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

@@ -19,6 +19,30 @@ import {PropTypes} from 'prop-types';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 
+const ChangeLogDialog = ({showBox, handleSave, handleCancel, changelog}) => <Modal show={showBox} onHide={handleCancel}>
+    <Modal.Header closeButton>
+      <Modal.Title><b>Enter a summary for this change:</b></Modal.Title>
+    </Modal.Header>
+    <Modal.Body>
+      <textarea cols="20" rows="5" style={{height: "130px"}} {...changelog}></textarea>
+    </Modal.Body>
+    <Modal.Footer>
+      <Button variant="secondary" onClick={handleCancel}>
+        Cancel
+      </Button>
+      <Button variant="primary" onClick={handleSave}>
+        Save
+      </Button>
+    </Modal.Footer>
+  </Modal>;
+
+ChangeLogDialog.propTypes={
+  showBox: PropTypes.bool,
+  handleSave: PropTypes.func,
+  handleCancel: PropTypes.func,
+  changelog: PropTypes.object
+};
+
 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>
@@ -39,4 +63,4 @@ ConfirmDialog.propTypes={
   handleCancel: PropTypes.func
 };
 
-export {ConfirmDialog};
+export {ChangeLogDialog, ConfirmDialog};

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

@@ -16,11 +16,12 @@
 
 import React, {useState} from 'react';
 import {useNavigate} from 'react-router-dom';
+// import {Modal} from 'bootstrap';
 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';
+import {ChangeLogDialog, ConfirmDialog} from './PopupDialogs.jsx';
 
 const save = (store, mode, postSuccessHandler) => {
   const saveUrl = `${STORE_API_BASE_URL}/${store.packageType}/${store.type}/${store.name}`;
@@ -112,9 +113,8 @@ StoreViewControlPanel.propTypes={
   store: PropTypes.object
 };
 
-const StoreEditControlPanel = ({mode, store, handleSubmit}) =>{
+const StoreEditControlPanel = ({mode, store, handleSubmit, validate, changelog}) =>{
   const navigate = useNavigate();
-  const postSuccessHandler = st => navigate(`/${st.type}/${st.packageType}/view/${st.name}`);
 
   const handleCancel = () => {
     if(mode === 'edit'){
@@ -132,30 +132,63 @@ const StoreEditControlPanel = ({mode, store, handleSubmit}) =>{
     }
   };
 
+  const postSuccessHandler = st => navigate(`/${st.type}/${st.packageType}/view/${st.name}`);
   let handleSave = () => save(store, mode, postSuccessHandler);
   if(handleSubmit && typeof handleSubmit === 'function'){
     // console.log(handleSubmit);
     handleSave = handleSubmit(data=>{
       data.disabled = !data.enabled;
       data.enabled = undefined;
+      if(data.changelog && data.changelog.trim() !== ''){
+        if(store.metadata){
+          store.metadata.changelog = data.changelog;
+        }else{
+          store.metadata = {changelog: data.changelog};
+        }
+        data.changelog = undefined;
+      }
       Utils.rewriteTargetObject(data, store);
       save(store, mode, postSuccessHandler);
     });
   }
+
+  const [showChangeBox, setShowChange] = useState(false);
+  const showCommitMsg = () =>{
+    validate().then(valid => valid && setShowChange(true));
+  };
+  const cancelCommitMsg = ()=>{
+    setShowChange(false);
+  };
+
+  const [showConfirmBox, setShowConfirm] = useState(false);
+  const showConfirmLog = () =>{
+    validate().then(valid => valid && setShowConfirm(true));
+  };
+  const cancelConfirmLog = ()=>{
+    setShowConfirm(false);
+  };
+
   return <div className="cp-row">
-    <button name="save" onClick={handleSave} className="cp-button">Save</button>{'  '}
+    <button name="save" onClick={showCommitMsg} className="cp-button">Save</button>{'  '}
     <button name="cancel" onClick={handleCancel} className="cp-button">Cancel</button>{'  '}
     {
-      mode==="edit" && <button name="del" onClick={handleRemove} className="del-button cp-button">
-        Delete
-      </button>
+      mode==="edit" && <React.Fragment>
+        <button name="delete" onClick={showConfirmLog} className="del-button cp-button">
+          Delete
+        </button>
+        <ConfirmDialog showBox={showConfirmBox} handleCancel={cancelConfirmLog} handleConfirm={handleRemove} />
+      </React.Fragment>
     }
+    <ChangeLogDialog showBox={showChangeBox} handleCancel={cancelCommitMsg} handleSave={handleSave} changelog={changelog} />
   </div>;
 };
+
 StoreEditControlPanel.propTypes={
   mode: PropTypes.string,
   store: PropTypes.object,
-  handleSubmit: PropTypes.func
+  handleSubmit: PropTypes.func,
+  validate: PropTypes.func,
+  changelog: PropTypes.object
 };
 
 export {StoreViewControlPanel, StoreEditControlPanel};

src/main/webui/src/app/components/content/remote/RemoteEdit.jsx

@@ -80,6 +80,7 @@ export default function RemoteEdit() {
   const {
     register,
     reset,
+    trigger,
     handleSubmit,
     formState: {errors}
   } = useForm();
@@ -149,10 +150,12 @@ export default function RemoteEdit() {
     setUseX509(event.target.checked);
   };
 
+  const changelog = register("changelog");
   return (
     <form onSubmit={e => e.preventDefault()}>
       <div className="control-panel">
-        <EditControlPanel mode={mode} store={store} handleSubmit={handleSubmit} />
+        <EditControlPanel mode={mode} store={store}
+         handleSubmit={handleSubmit} validate={trigger} changelog={changelog} />
       </div>
 
       <div className="content-panel">