feat(edge/jobs): migrate create view to react [EE-2221] (#11867)

app/react/components/DateTimeField.tsx

@@ -0,0 +1,57 @@
+import DateTimePicker from 'react-datetime-picker';
+import { Calendar, X } from 'lucide-react';
+
+import { isoDate } from '@/portainer/filters/filters';
+import { AutomationTestingProps } from '@/types';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Input } from '@@/form-components/Input';
+
+import 'react-datetime-picker/dist/DateTimePicker.css';
+import 'react-calendar/dist/Calendar.css';
+
+export const FORMAT = 'YYYY-MM-DD HH:mm';
+
+export function DateTimeField({
+  error,
+  label,
+  disabled,
+  name,
+  value,
+  onChange,
+  minDate,
+  'data-cy': dataCy,
+}: {
+  error?: string;
+  disabled?: boolean;
+  name: string;
+  value: Date | null;
+  onChange: (date: Date | null) => void;
+  label: string;
+  minDate?: Date;
+} & AutomationTestingProps) {
+  return (
+    <FormControl label={label} errors={error}>
+      {!disabled ? (
+        <DateTimePicker
+          format="y-MM-dd HH:mm"
+          className="form-control [&>div]:border-0"
+          name={name}
+          value={value}
+          onChange={onChange}
+          calendarIcon={<Calendar className="lucide" />}
+          clearIcon={<X className="lucide" />}
+          disableClock
+          data-cy={dataCy}
+          minDate={minDate}
+        />
+      ) : (
+        <Input
+          defaultValue={isoDate(value?.valueOf(), FORMAT)}
+          disabled
+          data-cy={`${dataCy}-disabled-value`}
+        />
+      )}
+    </FormControl>
+  );
+}

app/react/components/WebEditorForm.tsx

@@ -59,6 +59,7 @@ interface Props extends AutomationTestingProps {
   id: string;
   placeholder?: string;
   yaml?: boolean;
+  shell?: boolean;
   readonly?: boolean;
   titleContent?: React.ReactNode;
   hideTitle?: boolean;
@@ -77,6 +78,7 @@ export function WebEditorForm({
   hideTitle,
   readonly,
   yaml,
+  shell,
   children,
   error,
   versions,
@@ -108,6 +110,7 @@ export function WebEditorForm({
               placeholder={placeholder}
               readonly={readonly}
               yaml={yaml}
+              shell={shell}
               value={value}
               onChange={onChange}
               versions={versions}

app/react/components/form-components/Input/Select.tsx

@@ -11,7 +11,7 @@ export interface Option<T extends string | number>
 }
 
 interface Props<T extends string | number> extends AutomationTestingProps {
-  options: Option<T>[];
+  options: Array<Option<T>> | ReadonlyArray<Option<T>>;
 }
 
 export function Select<T extends number | string>({