From f76bdc4f230b04c6cf1b68de9eb4997e326169ad Mon Sep 17 00:00:00 2001
From: Harsh Modi <hmodi@redhat.com>
Date: Mon, 5 Feb 2024 18:24:02 -0500
Subject: [PATCH] make sure available are valid

Remove the package itself from available list
Remove duplicates if there are any
Remove all other packages of not the same type

Signed-off-by: Harsh Modi <hmodi@redhat.com>
---
 .../content/common/PackageTypeSelect.jsx      | 20 +++-
 .../components/content/group/GroupEdit.jsx    | 93 ++++++++-----------
 2 files changed, 58 insertions(+), 55 deletions(-)

diff --git a/src/main/webui/src/app/components/content/common/PackageTypeSelect.jsx b/src/main/webui/src/app/components/content/common/PackageTypeSelect.jsx
index 21f023c..d572cff 100644
--- a/src/main/webui/src/app/components/content/common/PackageTypeSelect.jsx
+++ b/src/main/webui/src/app/components/content/common/PackageTypeSelect.jsx
@@ -21,7 +21,7 @@ import {Utils} from '#utils/AppUtils';
 
 const {statsRes} = IndyRest;
 
-export const PackageTypeSelect = ({register, formErrors}) =>{
+export const PackageTypeSelect = ({register, formErrors, updatePackageType}) =>{
   const [state, setState] = useState({
     pkgTypes: []
   });
@@ -43,9 +43,22 @@ export const PackageTypeSelect = ({register, formErrors}) =>{
   if(register){
     registered = register("packageType", {required: true});
   }
+
+  const {onChange, onBlur, name, ref} = registered;
+
+  const change = e => {
+    setSelected(e.target.value);
+    if (typeof updatePackageType === "function") {
+      updatePackageType(e.target.value);
+    }
+    if (typeof onChange === "function") {
+      onChange(e);
+    }
+  };
+
   return <span>
     <select role="pkgTypeSel" value={selected}
-      onChange={e => setSelected(e.target.value)} {...registered}>
+      onChange={change} onBlur={onBlur} name={name} ref={ref}>
       <option value=""></option>
       {
         state.pkgTypes.map(type => <option key={`pkgType:${type}`} value={type}>{type}</option>)
@@ -57,5 +70,6 @@ export const PackageTypeSelect = ({register, formErrors}) =>{
 
 PackageTypeSelect.propTypes = {
   register: PropTypes.func,
-  formErrors: PropTypes.object
+  formErrors: PropTypes.object,
+  updatePackageType: PropTypes.func,
 };
diff --git a/src/main/webui/src/app/components/content/group/GroupEdit.jsx b/src/main/webui/src/app/components/content/group/GroupEdit.jsx
index 18f8579..2171390 100644
--- a/src/main/webui/src/app/components/content/group/GroupEdit.jsx
+++ b/src/main/webui/src/app/components/content/group/GroupEdit.jsx
@@ -29,20 +29,15 @@ import {IndyRest} from '#utils/RestClient.js';
 const {statsRes, storeRes, disableRes} = IndyRest;
 
 const EditConstituents = ({store, currentAvailable}) => {
-  const [, setItems] = useState({
-    'constituents': store.constituents,
-    'currentAvailble': currentAvailable,
-  });
+  console.log('rendering edit with', store);
+  const [state, setState] = useState(false);
 
   const addConstituent = available => {
     let idx = currentAvailable.indexOf(available);
     store.constituents.push(available);
     // element.addClass('hidden');
     currentAvailable.splice(idx, 1);
-    setItems({
-      'constituents': store.constituents,
-      'currentAvailble': currentAvailable,
-    });
+    setState(!state);
   };
 
   const removeConstituent = constituent => {
@@ -53,10 +48,7 @@ const EditConstituents = ({store, currentAvailable}) => {
     store.constituents.splice(idx, 1);
 
     Utils.sortEndpoints(currentAvailable);
-    setItems({
-      'constituents': store.constituents,
-      'currentAvailble': currentAvailable,
-    });
+    setState(!state);
   };
 
   const moveItem = (from, to) => {
@@ -68,10 +60,7 @@ const EditConstituents = ({store, currentAvailable}) => {
     let idx = store.constituents.indexOf(constituent);
     if (idx > 0) {
       moveItem(idx, idx - 1);
-      setItems({
-        'constituents': store.constituents,
-        'currentAvailble': currentAvailable,
-      });
+      setState(!state);
     }
   };
 
@@ -79,29 +68,20 @@ const EditConstituents = ({store, currentAvailable}) => {
     let idx = store.constituents.indexOf(constituent);
     if (idx < store.constituents.length - 1) {
       moveItem(idx, idx + 1);
-      setItems({
-        'constituents': store.constituents,
-        'currentAvailble': currentAvailable,
-      });
+      setState(!state);
     }
   };
 
   const top = constituent => {
     let idx = store.constituents.indexOf(constituent);
     moveItem(idx, 0);
-    setItems({
-      'constituents': store.constituents,
-      'currentAvailble': currentAvailable,
-    });
+    setState(!state);
   };
 
   const bottom = constituent => {
     let idx = store.constituents.indexOf(constituent);
     moveItem(idx, store.constituents.length - 1);
-    setItems({
-      'constituents': store.constituents,
-      'currentAvailble': currentAvailable,
-    });
+    setState(!state);
   };
 
   return <div className="fieldset">
@@ -147,7 +127,7 @@ const EditConstituents = ({store, currentAvailable}) => {
     <ol className="right-half detail-value detail-edit-list">
       <lt><label>Available:</label><span className="hint">(click to add to constituents)</span></lt>
       {
-        currentAvailable && currentAvailable.map(item => <li key={`available-${item}`}><div className="available">
+        currentAvailable && currentAvailable.map(item => store.packageType !== "" && item.startsWith(store.packageType) && <li key={`available-${item}`}><div className="available">
           <a href="" title="Add to constituents" className="surround-cp-action" onClick={e => {
             e.preventDefault();
             addConstituent(item);
@@ -167,7 +147,7 @@ EditConstituents.propTypes = {
 };
 
 export default function GroupEdit() {
-  const [store, setStore] = useState({"packageType": "maven", "type": "group", "constituents": []});
+  const [store, setStore] = useState({"type": "group", "constituents": []});
   const [available, setAvailable] = useState([]);
   const location = useLocation();
   const {packageType, name} = useParams();
@@ -182,6 +162,21 @@ export default function GroupEdit() {
   const path = location.pathname;
   const mode = path.match(/.*\/new$/u) ? 'new' : 'edit';
   useEffect(() => {
+    const fetchAvailable = async () => {
+      // get available Store data
+      const availableRes = await statsRes.getAllEndpoints();
+      let allAvailable = new Set();
+      if (availableRes.success) {
+        let availableResult = availableRes.result.items;
+        availableResult.forEach(item => {
+          allAvailable.add(item.packageType + ':' + item.type + ':' + item.name);
+        });
+      } else {
+        Utils.logMessage(`Getting available constituents failed! Error reason: ${statsRes.error.message}`);
+      }
+      return allAvailable;
+    };
+
     if (mode === 'edit') {
       const fetchStore = async () => {
         // get Store data
@@ -190,16 +185,9 @@ export default function GroupEdit() {
           const raw = res.result;
           const storeView = Utils.cloneObj(raw);
           storeView.disabled = raw.disabled === undefined ? false : raw.disabled;
-          // get available Store data
-          const availableRes = await statsRes.getAllEndpoints();
-          let allAvailable = new Set();
-          if (availableRes.success) {
-            let availableResult = availableRes.result.items;
-            availableResult.forEach(item => allAvailable.add(item.packageType + ':' + item.type + ':' + item.name));
-            raw.constituents.forEach(item => allAvailable.delete(item));
-          } else {
-            Utils.logMessage(`Getting available constituents failed! Error reason: ${statsRes.error.message}`);
-          }
+          let allAvailable = await fetchAvailable();
+          raw.constituents.forEach(item => allAvailable.delete(item));
+          allAvailable.delete(raw.key);
           // get Store disablement data
           const timeoutRes = await disableRes.getStoreTimeout(packageType, "group", name);
           const cloned = Utils.cloneObj(storeView);
@@ -222,22 +210,23 @@ export default function GroupEdit() {
       fetchStore();
     }
 
-    if (mode === 'new') {
+    if (mode === "new") {
       (async () => {
-        // get available Store data
-        const availableRes = await statsRes.getAllEndpoints();
-        let allAvailable = new Set();
-        if (availableRes.success) {
-          let availableResult = availableRes.result.items;
-          availableResult.forEach(item => allAvailable.add(item.packageType + ':' + item.type + ':' + item.name));
-          setAvailable(Array.from(allAvailable));
-        } else {
-          Utils.logMessage(`Getting available constituents failed! Error reason: ${statsRes.error.message}`);
-        }
+        let allAvailable = await fetchAvailable();
+        setAvailable(Array.from(allAvailable));
       })();
     }
   }, [packageType, name, mode, reset]);
 
+  const updatePackageType = newPackageType => {
+    let newStore = store;
+    newStore.packageType = newPackageType;
+    newStore.constituents = [];
+    console.log("setting store to", store);
+    setStore(newStore);
+    reset(store);
+  };
+
   const changelog = register("changelog");
   return (
     <form onSubmit={e => e.preventDefault()}>
@@ -253,7 +242,7 @@ export default function GroupEdit() {
             <label>Package Type:</label>
             {
               mode === 'new' ?
-                <PackageTypeSelect register={register} formErrors={errors} /> :
+                <PackageTypeSelect register={register} formErrors={errors} updatePackageType={updatePackageType}/> :
                 <span className="key">{store.packageType}</span>
             }
           </div>