From a2033b94ddda43c7f4561dcd47584b50eb286c36 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Mon, 20 May 2024 21:37:27 +0100
Subject: [PATCH] feat: Add checkbox lists for browser type and screen type in
 SyntheticMonitor

This commit adds checkbox lists for selecting the browser type and screen type in the SyntheticMonitor step of the MonitorStep component. This allows users to choose the desired browser and screen type for running the test in SyntheticMonitor.
---
 Common/Types/BrowserType.ts                   |  7 +++
 .../Monitor/SyntheticMonitors/BrowserType.ts  |  3 ++
 .../SyntheticMonitors/ScreenSizeType.ts       |  3 ++
 Common/Types/ScreenSizeType.ts                |  7 +++
 .../Components/Form/Monitor/MonitorStep.tsx   | 45 +++++++++++++++++--
 5 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 Common/Types/BrowserType.ts
 create mode 100644 Common/Types/Monitor/SyntheticMonitors/BrowserType.ts
 create mode 100644 Common/Types/Monitor/SyntheticMonitors/ScreenSizeType.ts
 create mode 100644 Common/Types/ScreenSizeType.ts

diff --git a/Common/Types/BrowserType.ts b/Common/Types/BrowserType.ts
new file mode 100644
index 0000000000..2926512d9c
--- /dev/null
+++ b/Common/Types/BrowserType.ts
@@ -0,0 +1,7 @@
+export enum BrowserType {
+    Chrome = 'Chrome',
+    Firefox = 'Firefox',
+    Safari = 'Safari',
+}
+
+export default BrowserType;
\ No newline at end of file
diff --git a/Common/Types/Monitor/SyntheticMonitors/BrowserType.ts b/Common/Types/Monitor/SyntheticMonitors/BrowserType.ts
new file mode 100644
index 0000000000..fa148d12d8
--- /dev/null
+++ b/Common/Types/Monitor/SyntheticMonitors/BrowserType.ts
@@ -0,0 +1,3 @@
+import BrowserType from "../../BrowserType";
+
+export default BrowserType;
\ No newline at end of file
diff --git a/Common/Types/Monitor/SyntheticMonitors/ScreenSizeType.ts b/Common/Types/Monitor/SyntheticMonitors/ScreenSizeType.ts
new file mode 100644
index 0000000000..74bd9567a7
--- /dev/null
+++ b/Common/Types/Monitor/SyntheticMonitors/ScreenSizeType.ts
@@ -0,0 +1,3 @@
+import ScreenSizeType from "../../ScreenSizeType";
+
+export default ScreenSizeType;
\ No newline at end of file
diff --git a/Common/Types/ScreenSizeType.ts b/Common/Types/ScreenSizeType.ts
new file mode 100644
index 0000000000..d6afa8d012
--- /dev/null
+++ b/Common/Types/ScreenSizeType.ts
@@ -0,0 +1,7 @@
+enum ScreenSizeType {
+    Mobile = 'Mobile',
+    Tablet = 'Tablet',
+    Desktop = 'Desktop'
+}
+
+export default ScreenSizeType;
\ No newline at end of file
diff --git a/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx b/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
index 727decabdd..da56d2180b 100644
--- a/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
+++ b/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
@@ -27,6 +27,7 @@ import HorizontalRule from 'CommonUI/src/Components/HorizontalRule/HorizontalRul
 import Exception from 'Common/Types/Exception/Exception';
 import Hostname from 'Common/Types/API/Hostname';
 import Port from 'Common/Types/Port';
+import CheckBoxList from 'CommonUI/src/Components/CategoryCheckbox/CheckboxList';
 
 export interface ComponentProps {
     monitorStatusDropdownOptions: Array<DropdownOption>;
@@ -274,7 +275,7 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
                                 ) => {
                                     monitorStep.setRequestType(
                                         (value?.toString() as HTTPMethod) ||
-                                            HTTPMethod.GET
+                                        HTTPMethod.GET
                                     );
                                     setMonitorStep(
                                         MonitorStep.clone(monitorStep)
@@ -345,7 +346,7 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
                                     }}
                                     error={
                                         touched['requestBody'] &&
-                                        errors['requestBody']
+                                            errors['requestBody']
                                             ? errors['requestBody']
                                             : undefined
                                     }
@@ -382,13 +383,13 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
                     <FieldLabelElement
                         title={
                             props.monitorType ===
-                            MonitorType.CustomJavaScriptCode
+                                MonitorType.CustomJavaScriptCode
                                 ? 'JavaScript Code'
                                 : 'Playwright Code'
                         }
                         description={
                             props.monitorType ===
-                            MonitorType.CustomJavaScriptCode
+                                MonitorType.CustomJavaScriptCode
                                 ? 'Write your JavaScript code here.'
                                 : 'Write your Playwright code here. Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API.'
                         }
@@ -407,6 +408,42 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
                 </div>
             )}
 
+
+            {props.monitorType === MonitorType.SyntheticMonitor && (
+                <div className="mt-5">
+                    <FieldLabelElement
+                        title={
+                            'Browser Type'
+                        }
+                        description={
+                            'Select the browser type.'
+                        }
+                        required={true}
+                    />
+                    <div className="mt-1">
+                        <CheckBoxList />
+                    </div>
+                </div>
+            )}
+
+
+            {props.monitorType === MonitorType.SyntheticMonitor && (
+                <div className="mt-5">
+                    <FieldLabelElement
+                        title={
+                            'Screen Type'
+                        }
+                        description={
+                            'Which screen type should we use to run this test?'
+                        }
+                        required={true}
+                    />
+                    <div className="mt-1">
+                        <CheckBoxList />
+                    </div>
+                </div>
+            )}
+
             <div className="mt-5">
                 {props.monitorType !== MonitorType.IncomingRequest && (
                     <FieldLabelElement