feat(client): implement accepted status codes UI in create monitor form

client/src/Hooks/useMonitorForm.ts

@@ -45,6 +45,7 @@ export const getMonitorDefaults = (
 				matchMethod: data?.matchMethod || "",
 				expectedValue: data?.expectedValue || "",
 				jsonPath: data?.jsonPath || "",
+				customUpCodes: data?.customUpCodes || [],
 			};
 			break;
 		case "ping":
@@ -138,6 +139,7 @@ export const getMonitorDefaults = (
 				matchMethod: "",
 				expectedValue: "",
 				jsonPath: "",
+				customUpCodes: [],
 			};
 	}
 

client/src/Pages/CreateMonitor/index.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from "react";
 import { useEffect } from "react";
 import { logger } from "@/Utils/logger";
+import { ALL_HTTP_STATUS_CODES } from "@/Utils/statusCode";
 import { useParams, useLocation, useNavigate } from "react-router";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -1090,6 +1091,68 @@ const CreateMonitorPage = () => {
 					subtitle={t("pages.createMonitor.form.advanced.description")}
 					rightContent={
 						<Stack spacing={theme.spacing(LAYOUT.MD)}>
+							<Controller
+								name="customUpCodes"
+								control={control}
+								render={({ field }) => {
+									const selectedOptions = ALL_HTTP_STATUS_CODES.filter((option) =>
+										field.value?.includes(option.id)
+									);
+									return (
+										<Stack spacing={theme.spacing(LAYOUT.MD)}>
+											<Autocomplete
+												multiple
+												autoHighlight
+												options={ALL_HTTP_STATUS_CODES}
+												value={selectedOptions}
+												getOptionLabel={(option) => option.name}
+												isOptionEqualToValue={(option, value) => option.id === value.id}
+												onChange={(
+													_: unknown,
+													newValue: typeof ALL_HTTP_STATUS_CODES
+												) => {
+													field.onChange(newValue?.map((v) => v.id) || []);
+												}}
+												fieldLabel={t(
+													"pages.createMonitor.form.advanced.option.customUpCodes.label"
+												)}
+											/>
+											{selectedOptions.length > 0 && (
+												<Stack
+													flex={1}
+													gap={theme.spacing(SPACING.MD)}
+													width="100%"
+												>
+													{selectedOptions.map((option, index) => (
+														<Stack
+															direction="row"
+															alignItems="center"
+															key={option.id}
+															width="100%"
+														>
+															<Typography flexGrow={1}>{option.name}</Typography>
+															<IconButton
+																size="small"
+																onClick={() => {
+																	field.onChange(
+																		field.value?.filter((id) => id !== option.id)
+																	);
+																}}
+																aria-label={t(
+																	"pages.createMonitor.form.advanced.option.customUpCodes.removeAriaLabel"
+																)}
+															>
+																<Trash2 size={16} />
+															</IconButton>
+															{index < selectedOptions.length - 1 && <Divider />}
+														</Stack>
+													))}
+												</Stack>
+											)}
+										</Stack>
+									);
+								}}
+							/>
 							<Controller
 								name="useAdvancedMatching"
 								control={control}

client/src/locales/en.json

@@ -505,6 +505,10 @@
 							"equal": "Equal",
 							"include": "Include",
 							"regex": "Regex"
+						},
+						"customUpCodes": {
+							"label": "Accepted status codes",
+							"removeAriaLabel": "Remove status code"
 						}
 					},
 					"title": "Advanced settings"