Add Create, Edit, Delete for LifeCycle Policies

Instead of only being able to view lifecycle policies, this commit
lets you edit them, create new ones and even delete them.

Depends on changes to the backend.

Author: Arnei

package-lock.json

@@ -33,6 +33,7 @@
     "react-hotkeys-hook": "^4.4.4",
     "react-i18next": "^15.0.1",
     "react-icons": "^5.2.1",
+    "react-js-cron": "^5.0.1",
     "react-redux": "^7.2.9",
     "react-router-dom": "^6.26.1",
     "react-select": "^5.8.0",

package.json

@@ -24,6 +24,8 @@ import { lifeCyclePoliciesTemplateMap } from "../../configs/tableConfigs/lifeCyc
 import { fetchEvents } from "../../slices/eventSlice";
 import { setOffset } from "../../slices/tableSlice";
 import { fetchSeries } from "../../slices/seriesSlice";
+import NewResourceModal from "../shared/NewResourceModal";
+import { fetchLifeCyclePolicyActions, fetchLifeCyclePolicyTargetTypes, fetchLifeCyclePolicyTimings } from "../../slices/lifeCycleDetailsSlice";
 
 /**
  * This component renders the table view of policies
@@ -32,6 +34,7 @@ const LifeCyclePolicies = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 	const [displayNavigation, setNavigation] = useState(false);
+	const [displayNewPolicyModal, setNewPolicyModal] = useState(false);
 
 	const user = useAppSelector(state => getUserInformation(state));
 	const policiesTotal = useAppSelector(state => getTotalLifeCyclePolicies(state));
@@ -77,17 +80,44 @@ const LifeCyclePolicies = () => {
 
 		// Load policies on mount
 		loadLifeCyclePolicies().then((r) => console.info(r));
+
+		// Fetch policies repeatedly
+		let fetchInterval = setInterval(loadLifeCyclePolicies, 5000);
+
+		return () => clearInterval(fetchInterval);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
 	const toggleNavigation = () => {
 		setNavigation(!displayNavigation);
 	};
 
+	const showNewPolicyModal = async () => {
+		await dispatch(fetchLifeCyclePolicyActions());
+		await dispatch(fetchLifeCyclePolicyTargetTypes());
+		await dispatch(fetchLifeCyclePolicyTimings());
+
+		setNewPolicyModal(true);
+	};
+
+	const hideNewPolicyModal = () => {
+		setNewPolicyModal(false);
+	};
+
 	return (
 		<>
 			<Header />
 			<NavBar>
+				{
+					/* Display modal for new event if add event button is clicked */
+					displayNewPolicyModal && (
+						<NewResourceModal
+							handleClose={hideNewPolicyModal}
+							resource={"lifecyclepolicy"}
+						/>
+					)
+				}
+
 				{/* Include Burger-button menu*/}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
 
@@ -120,6 +150,15 @@ const LifeCyclePolicies = () => {
 						</Link>
 					)}
 				</nav>
+
+				<div className="btn-group">
+					{hasAccess("ROLE_UI_EVENTS_CREATE", user) && (
+						<button className="add" onClick={() => showNewPolicyModal()}>
+							<i className="fa fa-plus" />
+							<span>{t("LIFECYCLE.POLICIES.TABLE.ADD_POLICY")}</span>
+						</button>
+					)}
+				</div>
 			</NavBar>
 
 			<MainView open={displayNavigation}>

src/components/events/LifeCyclePolicies.tsx

@@ -2,12 +2,13 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { Tooltip } from "../../shared/Tooltip";
-import { LifeCyclePolicy } from "../../../slices/lifeCycleSlice";
+import { deleteLifeCyclePolicy, LifeCyclePolicy } from "../../../slices/lifeCycleSlice";
 import DetailsModal from "../../shared/modals/DetailsModal";
 import LifeCyclePolicyDetails from "./modals/LifeCyclePolicyDetails";
 import { hasAccess } from "../../../utils/utils";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { fetchLifeCyclePolicyDetails } from "../../../slices/lifeCycleDetailsSlice";
+import ConfirmModal from "../../shared/ConfirmModal";
 
 /**
  * This component renders the title cells of series in the table view
@@ -21,6 +22,7 @@ const LifeCyclePolicyActionCell = ({
 	const dispatch = useAppDispatch();
 
 	const [displayLifeCyclePolicyDetails, setLifeCyclePolicyDetails] = useState(false);
+	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
 
 	const user = useAppSelector(state => getUserInformation(state));
 
@@ -34,6 +36,18 @@ const LifeCyclePolicyActionCell = ({
 		setLifeCyclePolicyDetails(false);
 	};
 
+	const hideDeleteConfirmation = () => {
+		setDeleteConfirmation(false);
+	};
+
+	const showDeleteConfirmation = async () => {
+		setDeleteConfirmation(true);
+	};
+
+	const deletingPolicy = (id: string) => {
+		dispatch(deleteLifeCyclePolicy(id));
+	};
+
 	return (
 		<>
 			{/* view details location/recording */}
@@ -55,6 +69,27 @@ const LifeCyclePolicyActionCell = ({
 					<LifeCyclePolicyDetails />
 				</DetailsModal>
 			)}
+
+			{/* delete policy */}
+			{hasAccess("ROLE_UI_LIFECYCLEPOLICY_DELETE", user) && (
+				<Tooltip title={t("LIFECYCLE.POLICIES.TABLE.TOOLTIP.DELETE")}>
+					<button
+						onClick={() => showDeleteConfirmation()}
+						className="button-like-anchor remove"
+
+					/>
+				</Tooltip>
+			)}
+
+			{displayDeleteConfirmation && (
+				<ConfirmModal
+					close={hideDeleteConfirmation}
+					resourceName={row.title}
+					resourceType="LIFECYCLE_POLICY"
+					resourceId={row.id}
+					deleteMethod={deletingPolicy}
+				/>
+			)}
 		</>
 	);
 };