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

@@ -0,0 +1,7 @@
+export enum BrowserType {
+    Chrome = 'Chrome',
+    Firefox = 'Firefox',
+    Safari = 'Safari',
+}
+
+export default BrowserType;

Common/Types/Monitor/SyntheticMonitors/BrowserType.ts

@@ -0,0 +1,3 @@
+import BrowserType from "../../BrowserType";
+
+export default BrowserType;

Common/Types/Monitor/SyntheticMonitors/ScreenSizeType.ts

@@ -0,0 +1,3 @@
+import ScreenSizeType from "../../ScreenSizeType";
+
+export default ScreenSizeType;

Common/Types/ScreenSizeType.ts

@@ -0,0 +1,7 @@
+enum ScreenSizeType {
+    Mobile = 'Mobile',
+    Tablet = 'Tablet',
+    Desktop = 'Desktop'
+}
+
+export default ScreenSizeType;

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>;
@@ -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