From 4f12019dfb45bc4354f370601c714e595854a70c Mon Sep 17 00:00:00 2001
From: Harsh Modi <hmodi@redhat.com>
Date: Wed, 10 Jan 2024 18:34:20 -0500
Subject: [PATCH] implement group UI

Signed-off-by: Harsh Modi <hmodi@redhat.com>
---
 .../components/content/group/GroupEdit.jsx    | 199 +++++++++++++++++-
 .../components/content/group/GroupList.jsx    | 107 +++++++++-
 2 files changed, 301 insertions(+), 5 deletions(-)

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 b03752c..449fbdf 100644
--- a/src/main/webui/src/app/components/content/group/GroupEdit.jsx
+++ b/src/main/webui/src/app/components/content/group/GroupEdit.jsx
@@ -14,8 +14,203 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, {useState, useEffect} from "react";
+import {useLocation, useParams} from "react-router-dom";
+import {useForm} from "react-hook-form";
+import {PropTypes} from "prop-types";
+import {StoreEditControlPanel as EditControlPanel} from "../common/StoreControlPanels.jsx";
+import {DisableTimeoutHint, Hint} from "../common/Hints.jsx";
+import {PackageTypeSelect} from "../common/PackageTypeSelect.jsx";
+// import ViewJsonDebugger from './Debugger.jsx';
+import {Utils} from "#utils/AppUtils.js";
+import {IndyRest} from "#utils/RestClient.js";
+
+const {storeRes, disableRes} = IndyRest;
 
 export default function GroupEdit() {
-  return <div>This is not implemented yet!</div>;
+  const [state, setState] = useState({
+    store: {},
+    storeView: {},
+  });
+  const location = useLocation();
+  const {packageType, name} = useParams();
+  const {
+    register,
+    reset,
+    trigger,
+    handleSubmit,
+    formState: {errors},
+  } = useForm();
+
+  const path = location.pathname;
+  const mode = path.match(/.*\/new$/u) ? "new" : "edit";
+  // Give a default packageType
+  let store = {packageType: "maven", type: "group"};
+  useEffect(() => {
+    if (mode === "edit") {
+      const fetchStore = async () => {
+        // get Store data
+        const res = await storeRes.get(packageType, "group", name);
+        if (res.success) {
+          const raw = res.result;
+          const storeView = Utils.cloneObj(raw);
+          storeView.disabled =
+            raw.disabled === undefined ? false : raw.disabled;
+          // get Store disablement data
+          const timeoutRes = await disableRes.getStoreTimeout(
+            packageType,
+            "group",
+            name,
+          );
+          const cloned = Utils.cloneObj(storeView);
+          if (timeoutRes.success) {
+            const timeout = timeoutRes.result;
+            cloned.disableExpiration = timeout.expiration;
+          } else {
+            Utils.logMessage(`disable timeout getting failed! Error reason: ${timeoutRes.error.message}`,);
+          }
+          // Change state and re-rendering
+          setState({
+            storeView: cloned,
+            store: raw,
+          });
+          reset(raw);
+        } else {
+          // TODO: find another way to do error handling
+          Utils.logMessage(`Failed to get store data. Error reason: ${res.error.status}->${res.error.message}`,);
+        }
+      };
+
+      fetchStore();
+    }
+  }, [packageType, name, mode, reset]);
+
+  if (mode === "edit") {
+    store = state.store;
+  }
+
+  const changelog = register("changelog");
+  return (
+    <form onSubmit={e => e.preventDefault()}>
+      <div className="control-panel">
+        <EditControlPanel
+          mode={mode}
+          store={store}
+          handleSubmit={handleSubmit}
+          validate={trigger}
+          changelog={changelog}
+        />
+      </div>
+
+      <div className="content-panel">
+        <div className="fieldset-caption">Basics</div>
+        <div className="fieldset">
+          <div className="detail-field">
+            <label>Package Type:</label>
+            {mode === "new" ?
+              <PackageTypeSelect register={register} formErrors={errors} />
+             :
+              <span className="key">{store.packageType}</span>
+            }
+          </div>
+          <div className="detail-field">
+            <label>Name:</label>
+            {mode === "new" ?
+              <span>
+                <input
+                  type="text"
+                  size="25"
+                  {...register("name", {required: true, maxLength: 50})}
+                />{" "}
+                {errors.name?.type === "required" &&
+                  <span className="alert">Name is required</span>
+                }
+                {errors.name?.type === "maxLength" &&
+                  <span className="alert">
+                    Name&apos;s length should be less than 50
+                  </span>
+                }
+              </span>
+             :
+              <span className="key">{store.name}</span>
+            }
+          </div>
+
+          <div className="detail-field">
+            <input
+              type="checkbox"
+              defaultChecked={!store.disabled}
+              {...register("enabled")}
+            />{" "}
+            <label>Enabled?</label>
+            {store.disabled && store.disableExpiration &&
+              <span>
+                <Hint hintKey="Set to automatically re-enable at {TimeUtils.timestampToDateFormat(store.disableExpiration)}" />
+              </span>
+            }
+          </div>
+          <div className="detail-field">
+            <input
+              type="checkbox"
+              defaultChecked={store.prepend_constituent}
+              {...register("prepend_constituent")}
+            />{" "}
+            <label>Prepend Constituents?</label>
+              <span>
+                <Hint hintKey="If enabled, all new constituents which are added not manually(like promotion) will be at the top of constituents list" />
+              </span>
+          </div>
+
+          <div className="sub-fields">
+            <div className="detail-field">
+              <label>Disable Timeout:</label>
+              <input
+                type="number"
+                defaultValue={store.disable_timeout}
+                {...register("disable_timeout", {min: -1, max: 999999999})}
+              />{" "}
+              {errors.disable_timeout &&
+                <span className="alert">Not a valid number</span>
+              }
+              <br />
+              <DisableTimeoutHint />
+            </div>
+          </div>
+        </div>
+
+        <div className="fieldset-caption">Description</div>
+        <div className="fieldset">
+          <textarea
+            rows="3"
+            className="text-description"
+            {...register("description")}
+          >
+            {store.description}
+          </textarea>
+        </div>
+
+        <div className="fieldset-caption">Constituents</div>
+        <div className="fieldset">
+          <ol className="left-col detail-value detail-edit-list">
+              <lt><label>Current:</label><span className="hint">(hover for controls)</span></lt>
+              {store.constituents.map((constituent, i) => <li key={i} className="detail-value-list-item">{constituent}</li>)}
+
+          </ol>
+          <ol className="right-col detail-value detail-edit-list">
+              <lt><label>Available:</label><span className="hint">(click to add to constituents)</span></lt>
+              {store.available.map((available, i) => <li key={i} className="detail-value-list-item">{available}</li>)}
+          </ol>
+        </div>
+      </div>
+      {
+        // <ViewJsonDebugger enableDebug={enableDebug} storeJson={storeJson} rawJson={rawJson}
+      }
+    </form>
+  );
 }
+
+GroupEdit.propTypes = {
+  store: PropTypes.object,
+  location: PropTypes.object,
+  match: PropTypes.object,
+};
diff --git a/src/main/webui/src/app/components/content/group/GroupList.jsx b/src/main/webui/src/app/components/content/group/GroupList.jsx
index f7b207d..a8910ef 100644
--- a/src/main/webui/src/app/components/content/group/GroupList.jsx
+++ b/src/main/webui/src/app/components/content/group/GroupList.jsx
@@ -14,8 +14,109 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, {useEffect, useState} from "react";
+import {useParams} from "react-router-dom";
+import {ListJsonDebugger} from "../common/Debugger.jsx";
+import ListControl from "../common/ListControl.jsx";
+import {groupOptionLegend as options} from "../../ComponentConstants.js";
+import {StoreListingWidget} from "../common/StoreListingWidget.jsx";
+import {LoadingSpiner} from "../common/LoadingSpiner.jsx";
+import {Utils} from "#utils/AppUtils.js";
+import {IndyRest} from "#utils/RestClient.js";
 
-export default function GruopList() {
-  return <div>This is not implemented yet!</div>;
+const {storeRes, disableRes} = IndyRest;
+
+const handlers = {
+  handleDebug: (event, setState) => {
+    setState({
+      enableDebug: event.target.checked,
+    });
+  },
+  handleSearch: (event, rawList, setState) => {
+    setState({
+      rawList,
+      listing: Utils.searchByKeyForNewStores(event.target.value, rawList),
+    });
+  },
+  handleSortBy: (event, rawList, setState) => {
+    setState({
+      rawList,
+      listing: Utils.sortByPropForStores(event.target.value, rawList),
+    });
+  },
+};
+
+export default function GroupList() {
+  const {packageType} = useParams();
+  const [state, setState] = useState({
+    rawList: [],
+    listing: [],
+    disabledMap: {},
+    enableDebug: false,
+    message: "",
+  });
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    const fetchdData = async () => {
+      const res = await storeRes.getStores(packageType, "group");
+      if (res.success) {
+        const timeoutRes = await disableRes.getAllStoreTimeout();
+        let disabledMap = {};
+        if (timeoutRes.success) {
+          const timeoutData = timeoutRes.result;
+          disabledMap = Utils.setDisableMap(timeoutData);
+        } else {
+          Utils.logMessage(`disable timeout get failed in group listing! Error reason: ${timeoutRes.error.message}`,);
+        }
+        let data = res.result;
+        if (typeof data === "string") {
+          data = JSON.parse(data);
+        }
+        setState({
+          rawList: data.items,
+          listing: data.items,
+          disabledMap,
+        });
+      } else {
+        setState({
+          message: res.error.message,
+        });
+      }
+      setLoading(false);
+    };
+    fetchdData();
+  }, [packageType]);
+
+  if (loading) {
+    return <LoadingSpiner />;
+  }
+
+  return (
+    <React.Fragment>
+      <ListControl
+        type="group"
+        legends={options}
+        handleSearch={event => handlers.handleSearch(event, state.rawList, setState)
+        }
+        handleDebug={event => handlers.handleDebug(event, setState)}
+        handleSortBy={event => handlers.handleSortBy(event, state.rawList, setState)
+        }
+      />
+      {state.listing ?
+        <StoreListingWidget
+          storeList={state.listing}
+          disableMap={state.disabledMap}
+          storeType="group"
+        />
+       :
+        <div className="container-fluid">No content fetched!</div>
+      }
+      <ListJsonDebugger
+        enableDebug={state.enableDebug}
+        jsonObj={state.listing}
+      />
+    </React.Fragment>
+  );
 }