Show registration modal only when unregistered

src/components/Header.tsx

@@ -6,6 +6,12 @@ import languages from "../i18n/languages";
 import opencastLogo from "../img/opencast-white.svg?url";
 import { setSpecificServiceFilter } from "../slices/tableFilterSlice";
 import { getErrorCount, getHealthStatus } from "../selectors/healthSelectors";
+import {
+	getRegistrationLoaded,
+	getRegistration,
+	getAbleToRegister,
+	getAgreedLatestToU,
+} from "../selectors/registrationSelectors";
 import {
 	getOrgProperties,
 	getUserBasicInfo,
@@ -20,6 +26,11 @@ import HotKeyCheatSheet from "./shared/HotKeyCheatSheet";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useAppDispatch, useAppSelector } from "../store";
 import { HealthStatus, fetchHealthStatus } from "../slices/healthSlice";
+import {
+	fetchRegistration,
+	fetchLatestToU,
+	fetchIsUpToDate,
+} from "../slices/registrationSlice";
 import { UserInfoState } from "../slices/userInfoSlice";
 import { Tooltip } from "./shared/Tooltip";
 import { HiOutlineTranslate } from "react-icons/hi";
@@ -54,7 +65,11 @@ const Header = () => {
 
 	const healthStatus = useAppSelector(state => getHealthStatus(state));
 	const errorCounter = useAppSelector(state => getErrorCount(state));
+	const isAbleToRegister = useAppSelector(state => getAbleToRegister(state));
+	const agreedLatestToU = useAppSelector(state => getAgreedLatestToU(state));
 	const user = useAppSelector(state => getUserInformation(state));
+	const registrationLoaded = useAppSelector(state => getRegistrationLoaded(state));
+	const registration = useAppSelector(state => getRegistration(state));
 	const orgProperties = useAppSelector(state => getOrgProperties(state));
 	const displayTerms = (orgProperties["org.opencastproject.admin.display_terms"] || "false").toLowerCase() === "true";
 
@@ -66,6 +81,10 @@ const Header = () => {
 		setMenuHelp(false);
 	};
 
+	const hideNotificationMenu = () => {
+		setMenuNotify(false);
+	};
+
 	const showRegistrationModal = () => {
 		registrationModalRef.current?.open();
 	};
@@ -138,18 +157,24 @@ const Header = () => {
 	}, []);
 
 	useEffect(() => {
-  			if (!user) { return; }
-
-  			const isAdmin = user.isAdmin || user.isOrgAdmin;
-	        const isLocalhost = window.location.hostname === "localhost";
-  			const lastDismissed = localStorage.getItem("adopterModalDismissed");
-  			const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
-  			const dismissedLongEnough = !lastDismissed || Date.now() - parseInt(lastDismissed) > THIRTY_DAYS;
-
-  			if (isAdmin && !isLocalhost && dismissedLongEnough) {
-  			  showRegistrationModal();
-  			}
-			}, [user]);
+		dispatch(fetchRegistration());
+		dispatch(fetchLatestToU());
+		dispatch(fetchIsUpToDate());
+	}, [dispatch]);
+
+	useEffect(() => {
+		if (!user) { return; }
+
+		const isAdmin = user.isAdmin || user.isOrgAdmin;
+		const isLocalhost = window.location.hostname === "localhost";
+		const lastDismissed = localStorage.getItem("adopterModalDismissed");
+		const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
+		const dismissedLongEnough = !lastDismissed || Date.now() - parseInt(lastDismissed) > THIRTY_DAYS;
+
+		if (isAdmin && !isLocalhost && dismissedLongEnough && registrationLoaded && registration == null) {
+		  showRegistrationModal();
+		}
+	}, [user, registration, registrationLoaded]);
 	return (
 		<>
 			<header className="primary-header">
@@ -214,9 +239,9 @@ const Header = () => {
 							<Tooltip active={!displayMenuNotify} title={t("SYSTEM_NOTIFICATIONS")}>
 								<BaseButton onClick={() => setMenuNotify(!displayMenuNotify)} className="nav-dd-element">
 									<LuBell className="header-icon"/>
-									{errorCounter !== 0 && (
+									{(errorCounter !== 0 || !agreedLatestToU || !isAbleToRegister) && (
 										<span id="error-count" className="badge">
-											{errorCounter}
+											{errorCounter + (!agreedLatestToU || !isAbleToRegister ? 1 : 0)}
 										</span>
 									)}
 								</BaseButton>
@@ -225,6 +250,10 @@ const Header = () => {
 							{displayMenuNotify && (
 								<MenuNotify
 									healthStatus={healthStatus}
+									registering={isAbleToRegister}
+									updatedToU={agreedLatestToU}
+									showRegistrationModal={showRegistrationModal}
+									hideNotificationMenu={hideNotificationMenu}
 								/>
 							)}
 						</div>
@@ -326,9 +355,18 @@ const MenuLang = ({ handleChangeLanguage }: { handleChangeLanguage: (code: strin
 
 const MenuNotify = ({
 	healthStatus,
+	registering,
+	updatedToU,
+	showRegistrationModal,
+	hideNotificationMenu,
 }: {
 	healthStatus: HealthStatus[],
+	registering: boolean,
+	updatedToU: boolean,
+	showRegistrationModal: () => void,
+	hideNotificationMenu: () => void,
 }) => {
+	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 	const navigate = useNavigate();
 
@@ -338,6 +376,13 @@ const MenuNotify = ({
 		navigate("/systems/services");
 	};
 
+	// show Adopter Registration Modal and hide drop down
+	const showAdoptersRegistrationModal = () => {
+		showRegistrationModal();
+		hideNotificationMenu();
+	};
+
+
 	return (
 		<ul className="dropdown-ul">
 			{/* For each service in the serviceList (Background Services) one list item */}
@@ -361,6 +406,26 @@ const MenuNotify = ({
 					)}
 				</li>
 			))}
+			{!registering &&
+				<li>
+					<ButtonLikeAnchor
+						onClick={() => showAdoptersRegistrationModal()}
+					>
+						<span className="wide-text">Registration</span>
+						<span className="multi-value multi-value-yellow">{t("ADOPTER_REGISTRATION.NOTIFICATION.UNREGISTERED")}</span>
+					</ButtonLikeAnchor>
+				</li>
+			}
+			{registering && !updatedToU &&
+				<li>
+					<ButtonLikeAnchor
+						onClick={() => showAdoptersRegistrationModal()}
+					>
+						<span className="wide-text">Registration</span>
+						<span className="multi-value multi-value-yellow">{t("ADOPTER_REGISTRATION.NOTIFICATION.UPDATED_TOU")}</span>
+					</ButtonLikeAnchor>
+				</li>
+			}
 		</ul>
 	);
 };

src/components/shared/RegistrationModal.tsx

@@ -1,18 +1,26 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Formik } from "formik";
+import { useAppDispatch, useAppSelector } from "../../store";
 import { Field } from "./Field";
 import TermsOfUsePage from "./modals/TermsOfUsePage";
 import { countries, states, systemTypes } from "../../configs/adopterRegistrationConfig";
 import cn from "classnames";
 import { AdopterRegistrationSchema } from "../../utils/validate";
 import {
 	Registration,
+	Statistics,
+	fetchRegistration,
+	fetchStatistics,
+	postAdopterRegistration,
 	deleteAdopterRegistration,
-	fetchAdopterRegistration,
-	fetchAdopterStatisticsSummary,
-	postRegistration,
-} from "../../utils/adopterRegistrationUtils";
+} from "../../slices/registrationSlice";
+import {
+	getRegistrationLoaded,
+	getRegistration,
+	getStatisticsLoaded,
+	getStatistics,
+} from "../../selectors/registrationSelectors";
 import ModalContent from "./modals/ModalContent";
 import { Modal, ModalHandle } from "./modals/Modal";
 import { ParseKeys } from "i18next";
@@ -47,11 +55,17 @@ const RegistrationModal = ({
 
 const RegistrationModalContent = () => {
 	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
+
+	const registrationLoaded = useAppSelector(state => getRegistrationLoaded(state));
+	const registration = useAppSelector(state => getRegistration(state));
+	const statisticsLoaded = useAppSelector(state => getStatisticsLoaded(state));
+	const statistics = useAppSelector(state => getStatistics(state));
 
 	// current state of the modal that is shown
 	const [state, setState] = useState<keyof typeof states>("information");
 	// initial values for Formik
-	const [initialValues, setInitialValues] = useState<Registration & { agreedToPolicy: boolean, registered: boolean }>({
+	const [initialValues, setInitialValues] = useState<Registration & { registered: boolean, statistics: Statistics | null }>({
 		contactMe: false,
 		systemType: "",
 		allowsStatistics: false,
@@ -66,20 +80,27 @@ const RegistrationModalContent = () => {
 		street: "",
 		streetNo: "",
 		email: "",
+		termsVersionAgreed: "",
 		agreedToPolicy: false,
+		dateModified: "",
+		dateCreated: "",
 		registered: false,
+		statistics: null,
 	});
 
-	const [statisticsSummary, setStatisticsSummary] = useState<{
-		general: { [key: string]: unknown },
-		statistics: { [key: string]: unknown },
-	}>();
+	useEffect(() => {
+		if (!registrationLoaded) {
+			dispatch(fetchRegistration());
+		}
+		if (!statisticsLoaded) {
+			dispatch(fetchStatistics());
+		}
+	}, [registrationLoaded, statisticsLoaded, dispatch]);
 
 	useEffect(() => {
-		fetchRegistrationInfos().then(r => console.log(r));
-		fetchStatisticSummary();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+		setInitialValues(initialValues => ({ ...initialValues, ...registration, statistics: { ...statistics } }));
+	}, [registration, statistics]);
+
 
 	const onClickContinue = () => {
 		// if state is deleteSubmit then delete infos about adaptor else show next state
@@ -90,23 +111,13 @@ const RegistrationModalContent = () => {
 		}
 	};
 
-	const fetchRegistrationInfos = async () => {
-		const registrationInfo = await fetchAdopterRegistration();
-
-		// merge response into initial values for formik
-		setInitialValues({ ...initialValues, ...registrationInfo });
-	};
-
-	const fetchStatisticSummary = async () => {
-		const info = await fetchAdopterStatisticsSummary();
-
-		setStatisticsSummary(info);
-	};
 
 	const handleSubmit = (values: Registration) => {
 		// post request for adopter information
-		postRegistration(values)
+		postAdopterRegistration(values)
 			.then(() => {
+				// Refetch the registration data since otherwise what we just submitted does not show up if the user immediately returns to the modal
+				dispatch(fetchRegistration());
 				// show thank you state
 				return setState(states[state].nextState[0] as keyof typeof states);
 			})
@@ -616,7 +627,10 @@ const RegistrationModalContent = () => {
 							<p>{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.GENERAL_HEADER")}</p>
 							<div className="scrollbox">
 								<pre>
-									{JSON.stringify(formik.values, null, "\t")}
+									{JSON.stringify(Object.fromEntries(
+										Object.entries(formik.values)
+										.filter(([key, _]) => key != "statistics"))
+									, null, "\t")}
 								</pre>
 							</div>
 							<br />
@@ -626,7 +640,7 @@ const RegistrationModalContent = () => {
 								<p>{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.STATS_HEADER")}</p>
 								<div className="scrollbox">
 									<pre>
-										{JSON.stringify(statisticsSummary?.statistics, null, "\t")}
+										{JSON.stringify(formik.values.statistics, null, "\t")}
 									</pre>
 								</div>
 							</>

src/i18n/org/opencastproject/adminui/languages/lang-en_US.json

@@ -479,6 +479,10 @@
 			"DELETE_SUBMIT_STATE": {
 				"TEXT": "Are you sure you want to delete your registration data?"
 			}
+		},
+		"NOTIFICATION": {
+			"UNREGISTERED": "Unregistered",
+			"UPDATED_TOU": "Updated ToU"
 		}
 	},
 	"EVENTS": {

src/selectors/registrationSelectors.ts

@@ -0,0 +1,19 @@
+import { RootState } from "../store";
+
+/**
+ * This file contains selectors regarding information about the registration status
+ */
+export const getRegistrationLoaded = (state: RootState) => state.registration.registrationLoaded;
+// Are we registered at all
+export const getRegistration = (state: RootState) => state.registration.registration;
+
+export const getStatisticsLoaded = (state: RootState) => state.registration.statisticsLoaded;
+// Gather the system statistics reportable to the registration server
+export const getStatistics = (state: RootState) => state.registration.statistics;
+
+// Are we able to talk to register.opencast.org
+export const getAbleToRegister = (state: RootState) => state.registration.registrationLoaded &&
+                                                       state.registration.ableToRegister;
+export const getAgreedLatestToU = (state: RootState) => state.registration.registrationLoaded &&
+                                                        state.registration.registration != null && // this is correct because the *endpoint* returns a bare 'null' when the cluster isn't registered
+                                                        state.registration.registration.termsVersionAgreed == state.registration.latestToU;