Add Dropdown for system type

Replaces the test system checkbox
dennis531 · Aug 1, 2024 · c1f0a71 · c1f0a71
1 parent 86328a6
commit c1f0a71
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 19 deletions.
diff --git a/src/components/shared/RegistrationModal.tsx b/src/components/shared/RegistrationModal.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { Formik } from "formik";
 import { Field } from "./Field";
 import TermsOfUsePage from "./modals/TermsOfUsePage";
-import { countries, states } from "../../configs/adopterRegistrationConfig";
+import { countries, states, systemTypes } from "../../configs/adopterRegistrationConfig";
 import cn from "classnames";
 import { AdopterRegistrationSchema } from "../../utils/validate";
 import {
@@ -31,7 +31,7 @@ const RegistrationModal = ({
 	// initial values for Formik
 	const [initialValues, setInitialValues] = useState<Registration & { agreedToPolicy: boolean, registered: boolean }>({
 		contactMe: false,
-		isTestSystem: false,
+		systemType: "",
 		allowsStatistics: false,
 		allowsErrorReports: false,
 		organisationName: "",
@@ -569,21 +569,37 @@ const RegistrationModal = ({
 											<fieldset>
 												<legend>
 													{t(
-														"ADOPTER_REGISTRATION.MODAL.FORM_STATE.TEST_SYSTEM_HEADLINE"
+														"ADOPTER_REGISTRATION.MODAL.FORM_STATE.SYSTEM_TYPE_HEADLINE"
 													)}
 												</legend>
-												<div className="form-group form-group-checkbox">
-													<Field
-														type="checkbox"
-														name="isTestSystem"
-														id="is_test_system"
-														className="form-control"
-													/>
-													<label htmlFor="is_test_system">
-														{t(
-															"ADOPTER_REGISTRATION.MODAL.FORM_STATE.TEST_SYSTEM"
-														)}
-													</label>
+												<div className="row">
+													<div className="form-group">
+														<Field
+															style={{color: "#666", fontWeight: "600"}}
+															id="system_type"
+															name="systemType"
+															as="select"
+															className="form-control"
+														>
+															<option value=""/>
+															{systemTypes.map((systemType, key) => (
+																<option key={key} value={systemType.value}>
+																	{t(systemType.name)}
+																</option>
+															))}
+														</Field>
+														<label
+															className="form-control-placeholder"
+															htmlFor="system_type"
+															style={
+																formik.values.systemType ? styleWithContent : {}
+															}
+														>
+															{t(
+																"ADOPTER_REGISTRATION.MODAL.FORM_STATE.SYSTEM_TYPE"
+															)}
+														</label>
+													</div>
 												</div>
 											</fieldset>
 											<fieldset>

diff --git a/src/configs/adopterRegistrationConfig.ts b/src/configs/adopterRegistrationConfig.ts
@@ -154,6 +154,17 @@ export const states = {
 	},
 };
 
+export const systemTypes = [
+	{
+		value: "production",
+		name: "ADOPTER_REGISTRATION.MODAL.FORM_STATE.SYSTEM_TYPE_PRODUCTION",
+	},
+	{
+		value: "test",
+		name: "ADOPTER_REGISTRATION.MODAL.FORM_STATE.SYSTEM_TYPE_TEST",
+	},
+];
+
 // countries that an adopter can choose as country of origin
 export const countries = [
 	{

diff --git a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
@@ -422,8 +422,10 @@
 				"ADDITIONAL_ADRESS_INFO": "Add. adress information",
 				"MAIL": "Email",
 				"CONTACT_ME": "Contact me for updates and secruity issues",
-				"TEST_SYSTEM_HEADLINE": "Is this a test system?",
-				"TEST_SYSTEM": "This is a test system",
+				"SYSTEM_TYPE_HEADLINE": "For what purpose do you use this system?",
+				"SYSTEM_TYPE": "System Type",
+				"SYSTEM_TYPE_PRODUCTION": "Production System",
+				"SYSTEM_TYPE_TEST": "Test System",
 				"WHICH_DATA_TO_SHARE": "Which data do you want to share?",
 				"POLICY_HEADLINE": "Privacy policy and terms of use",
 				"USAGE_STATISTICS": "Usage statistcs",

diff --git a/src/utils/adopterRegistrationUtils.ts b/src/utils/adopterRegistrationUtils.ts
@@ -17,7 +17,7 @@ export const fetchAdopterStatisticsSummary = async () => {
 
 export type Registration = {
 	contactMe: boolean,
- 	isTestSystem: boolean,
+ 	systemType: string,
 	allowsStatistics: boolean,
 	allowsErrorReports: boolean,
 	organisationName: string,
@@ -40,7 +40,7 @@ export const postRegistration = async (
 	// build body
 	let body = new URLSearchParams();
 	body.append("contactMe", values.contactMe.toString());
-	body.append("isTestSystem", values.isTestSystem.toString());
+	body.append("systemType", values.systemType);
 	body.append("allowsStatistics", values.allowsStatistics.toString());
 	body.append("allowsErrorReports", values.allowsErrorReports.toString());
 	body.append("organisationName", values.organisationName);