Merge pull request #116 from ligangty/hook-form

RemoteEdit: start to use react-hook-form
Commonjava · Dec 12, 2023 · fb3d77d · fb3d77d
2 parents 16237b7 + 543767a
commit fb3d77d
Show file tree

Hide file tree

Showing 10 changed files with 193 additions and 78 deletions.
diff --git a/src/main/webui/package-lock.json b/src/main/webui/package-lock.json
diff --git a/src/main/webui/package.json b/src/main/webui/package.json
@@ -23,6 +23,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.1",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.48.2",
     "react-json-pretty": "^1.7.9",
     "react-router": "^6.16.0",
     "react-router-bootstrap": "^0.26.2",

diff --git a/src/main/webui/src/app/components/ComponentConstants.js b/src/main/webui/src/app/components/ComponentConstants.js
@@ -28,5 +28,12 @@ const hostedOptionLegend = [
 
 const STORE_API_BASE_URL = "/api/admin/stores";
 
+const PATTERNS={
+  URL: /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_+.~#?&/=]*)$/u
+};
 
-export {remoteOptionLegend, hostedOptionLegend, STORE_API_BASE_URL};
+
+export {remoteOptionLegend,
+   hostedOptionLegend,
+   STORE_API_BASE_URL,
+   PATTERNS};
diff --git a/src/main/webui/src/app/components/content/common/PackageTypeSelect.jsx b/src/main/webui/src/app/components/content/common/PackageTypeSelect.jsx
@@ -19,10 +19,11 @@ import {PropTypes} from 'prop-types';
 import {jsonRest} from '#utils/RestClient.js';
 import {Utils} from '#utils/AppUtils';
 
-export const PackageTypeSelect = ({packageType,vauleChangeHandler}) =>{
+export const PackageTypeSelect = ({register, formErrors}) =>{
   const [state, setState] = useState({
     pkgTypes: []
   });
+  const [selected, setSelected] = useState();
 
   useEffect(()=>{
     const fetchPkgTypes = async () =>{
@@ -37,18 +38,23 @@ export const PackageTypeSelect = ({packageType,vauleChangeHandler}) =>{
     fetchPkgTypes();
   }, []);
 
-  const selectedValue = packageType || "maven";
-  const onChangeHandler = vauleChangeHandler || (()=>{});
+  let registered = {};
+  if(register){
+    registered = register("packageType", {required: true});
+  }
   return <span>
-    <select value={selectedValue} onChange={onChangeHandler}>
+    <select role="pkgTypeSel" value={selected}
+      onChange={e => setSelected(e.target.value)} {...registered}>
+      <option value=""></option>
       {
         state.pkgTypes.map(type => <option key={`pkgType:${type}`} value={type}>{type}</option>)
       }
-    </select>
+    </select>{' '}
+    {formErrors && formErrors.packageType?.type === "required" && <span className="alert">Package Type is required</span>}
   </span>;
 };
 
 PackageTypeSelect.propTypes = {
-  packageType: PropTypes.string,
-  vauleChangeHandler: PropTypes.func
+  register: PropTypes.func,
+  formErrors: PropTypes.object
 };
diff --git a/src/main/webui/src/app/components/content/common/PackageTypeSelect.test.jsx b/src/main/webui/src/app/components/content/common/PackageTypeSelect.test.jsx
@@ -41,36 +41,36 @@ describe('PackageTypeSelect tests', () => {
       expect(screen.getByRole("option", {name: "npm"})).toBeInTheDocument();
       expect(screen.getByRole("option", {name: "generic-http"})).toBeInTheDocument();
 
-      expect(screen.getByRole("option", {name: "maven"}).selected).toBe(true);
-      expect(screen.getByRole("combobox")).toHaveValue("maven");
+      expect(screen.getByRole("option", {name: ""}).selected).toBe(true);
+      expect(screen.getByRole("pkgTypeSel")).toHaveValue("");
     });
   });
 
-  it("Verify PackageTypeSelect for npm selected", async ()=>{
-    render(<PackageTypeSelect packageType="npm" />);
-    await waitFor(()=>{
-      expect(screen.getByRole("option", {name: "maven"})).toBeInTheDocument();
-      expect(screen.getByRole("option", {name: "npm"})).toBeInTheDocument();
-      expect(screen.getByRole("option", {name: "generic-http"})).toBeInTheDocument();
+  // it("Verify PackageTypeSelect for npm selected", async ()=>{
+  //   render(<PackageTypeSelect packageType="npm" />);
+  //   await waitFor(()=>{
+  //     expect(screen.getByRole("option", {name: "maven"})).toBeInTheDocument();
+  //     expect(screen.getByRole("option", {name: "npm"})).toBeInTheDocument();
+  //     expect(screen.getByRole("option", {name: "generic-http"})).toBeInTheDocument();
 
-      expect(screen.getByRole("combobox")).toHaveValue("npm");
-      expect(screen.getByRole("option", {name: "npm"}).selected).toBe(true);
-    });
-  });
+  //     const pkgSelect = screen.getByRole("pkgTypeSel");
+  //     expect(pkgSelect).toHaveValue("npm");
+  //     expect(screen.getByRole("option", {name: "npm"}).selected).toBe(true);
+  //   });
+  // });
 
   it("Verify PackageTypeSelect for value change", async ()=>{
     const {selectOptions} = userEvent.setup();
     let value = "";
-    const vauleChangeHandler = e => {
-      value = e.target.value;
-    };
-    render(<PackageTypeSelect vauleChangeHandler={vauleChangeHandler}/>);
+    render(<PackageTypeSelect />);
     expect(value).toBe("");
     await waitFor(() => {
-      expect(screen.getByRole("option", {name: "maven"}).selected).toBe(true);
+      expect(screen.getByRole("pkgTypeSel")).toHaveValue("");
+    });
+    await waitFor(() => {
       expect(screen.getByRole("option", {name: "npm"})).toBeInTheDocument();
-      selectOptions(screen.getByRole("combobox"), "npm");
-      expect(value).toBe("npm");
+      selectOptions(screen.getByRole("pkgTypeSel"), "npm");
+      expect(screen.getByRole("pkgTypeSel")).toHaveValue("npm");
     });
   });
 

diff --git a/src/main/webui/src/app/components/content/common/StoreControlPanels.jsx b/src/main/webui/src/app/components/content/common/StoreControlPanels.jsx
@@ -66,9 +66,9 @@ StoreViewControlPanel.propTypes={
   store: PropTypes.object
 };
 
-const StoreEditControlPanel = ({mode, store}) =>{
+const StoreEditControlPanel = ({mode, store, handleSubmit}) =>{
   const navigate = useNavigate();
-  const handleSave = () => {
+  const save = () => {
     const saveUrl = `${STORE_API_BASE_URL}/${store.packageType}/${store.type}/${store.name}`;
     const saveStore = async () => {
       let response = {};
@@ -115,6 +115,16 @@ const StoreEditControlPanel = ({mode, store}) =>{
     }
   };
 
+  let handleSave = () => save();
+  if(handleSubmit && typeof handleSubmit === 'function'){
+    // console.log(handleSubmit);
+    handleSave = handleSubmit(data=>{
+      data.disabled = !data.enabled;
+      data.enabled = undefined;
+      Utils.rewriteTargetObject(data, store);
+      save();
+    });
+  }
   return <div className="cp-row">
     <button name="save" onClick={handleSave} className="cp-button">Save</button>{'  '}
     <button name="cancel" onClick={handleCancel} className="cp-button">Cancel</button>{'  '}
@@ -127,7 +137,8 @@ const StoreEditControlPanel = ({mode, store}) =>{
 };
 StoreEditControlPanel.propTypes={
   mode: PropTypes.string,
-  store: PropTypes.object
+  store: PropTypes.object,
+  handleSubmit: PropTypes.func
 };
 
 export {StoreViewControlPanel, StoreEditControlPanel};