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>({

app/react/edge/edge-jobs/CreateView/CreateEdgeJobForm.tsx

@@ -0,0 +1,203 @@
+import { Form, Formik, useFormikContext } from 'formik';
+import { useRouter } from '@uirouter/react';
+import moment from 'moment';
+
+import { EdgeGroupsSelector } from '@/react/edge/edge-stacks/components/EdgeGroupsSelector';
+import { AssociatedEdgeEnvironmentsSelector } from '@/react/edge/components/AssociatedEdgeEnvironmentsSelector';
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { FormActions } from '@@/form-components/FormActions';
+import { FormSection } from '@@/form-components/FormSection';
+import { BoxSelector } from '@@/BoxSelector';
+import { editor, upload } from '@@/BoxSelector/common-options/build-methods';
+import { WebEditorForm } from '@@/WebEditorForm';
+import { FileUploadForm } from '@@/form-components/FileUpload';
+
+import { NameField } from '../components/EdgeJobForm/NameField';
+import { FormValues } from '../components/EdgeJobForm/types';
+import { useValidation } from '../components/EdgeJobForm/useValidation';
+import { JobConfigurationFieldset } from '../components/EdgeJobForm/JobConfigurationFieldset';
+import {
+  BasePayload,
+  CreateEdgeJobPayload,
+  useCreateEdgeJobMutation,
+} from '../queries/useCreateEdgeJobMutation/useCreateEdgeJobMutation';
+import { defaultCronExpression } from '../components/EdgeJobForm/RecurringFieldset';
+
+export function CreateEdgeJobForm() {
+  const mutation = useCreateEdgeJobMutation();
+  const validation = useValidation();
+  const router = useRouter();
+
+  return (
+    <Formik<FormValues>
+      validationSchema={validation}
+      validateOnMount
+      initialValues={{
+        name: '',
+        recurring: false,
+        cronExpression: '',
+        recurringOption: defaultCronExpression,
+        method: 'editor',
+        cronMethod: 'basic',
+        dateTime: new Date(),
+        edgeGroupIds: [],
+        environmentIds: [],
+        file: undefined,
+        fileContent: '',
+      }}
+      onSubmit={(values) => {
+        mutation.mutate(getPayload(values.method, values), {
+          onSuccess: () => {
+            notifySuccess('Success', 'Edge job successfully created');
+            router.stateService.go('^');
+          },
+        });
+      }}
+    >
+      <InnerForm isLoading={mutation.isLoading} />
+    </Formik>
+  );
+}
+
+const buildMethods = [editor, upload];
+
+function InnerForm({ isLoading }: { isLoading: boolean }) {
+  const { values, setFieldValue, isValid, errors } =
+    useFormikContext<FormValues>();
+
+  return (
+    <Form className="form-horizontal">
+      <NameField errors={errors.name} />
+
+      <JobConfigurationFieldset />
+
+      <FormSection title="Job content">
+        <BoxSelector
+          value={values.method}
+          options={buildMethods}
+          onChange={(value) => setFieldValue('method', value)}
+          radioName="build-method"
+        />
+      </FormSection>
+
+      {values.method === 'editor' && (
+        <WebEditorForm
+          data-cy="edge-job-editor"
+          id="edge-job-editor"
+          onChange={(value) => setFieldValue('fileContent', value)}
+          value={values.fileContent}
+          placeholder="Define or paste the content of your script file here"
+          shell
+          error={errors.fileContent}
+        />
+      )}
+
+      {values.method === 'upload' && (
+        <FileUploadForm
+          data-cy="edge-job-upload"
+          description="You can upload a script file from your computer."
+          onChange={(value) => setFieldValue('file', value)}
+          value={values.file}
+          required
+        />
+      )}
+
+      <EdgeGroupsSelector
+        onChange={(value) => setFieldValue('edgeGroupIds', value)}
+        value={values.edgeGroupIds}
+        error={errors.edgeGroupIds}
+      />
+
+      <FormSection title="Target environments">
+        <AssociatedEdgeEnvironmentsSelector
+          onChange={(value) => setFieldValue('environmentIds', value)}
+          value={values.environmentIds}
+        />
+      </FormSection>
+
+      <FormActions
+        submitLabel="Add edge job"
+        isLoading={isLoading}
+        isValid={isValid}
+        data-cy="edgeJobCreate-addJobButton"
+        loadingText="In progress..."
+      />
+    </Form>
+  );
+}
+
+function getPayload(
+  method: 'upload' | 'editor',
+  values: FormValues
+): CreateEdgeJobPayload {
+  switch (method) {
+    case 'upload':
+      if (!values.file) {
+        throw new Error('File is required');
+      }
+
+      return {
+        method: 'file',
+        payload: {
+          ...getBasePayload(values),
+          file: values.file,
+        },
+      };
+    case 'editor':
+      return {
+        method: 'string',
+        payload: {
+          ...getBasePayload(values),
+          fileContent: values.fileContent,
+        },
+      };
+
+    default:
+      throw new Error(`Unknown method: ${method}`);
+  }
+
+  function getBasePayload(values: FormValues): BasePayload {
+    return {
+      name: values.name,
+      edgeGroups: values.edgeGroupIds,
+      endpoints: values.environmentIds,
+      ...getRecurringConfig(values),
+    };
+  }
+
+  function getRecurringConfig(values: FormValues): {
+    recurring: boolean;
+    cronExpression: string;
+  } {
+    if (values.cronMethod !== 'basic') {
+      return {
+        recurring: true,
+        cronExpression: values.cronExpression,
+      };
+    }
+
+    if (values.recurring) {
+      return {
+        recurring: true,
+        cronExpression: values.recurringOption,
+      };
+    }
+
+    return {
+      recurring: false,
+      cronExpression: dateTimeToCron(values.dateTime),
+    };
+
+    function dateTimeToCron(datetime: Date) {
+      const date = moment(datetime);
+      return [
+        date.minutes(),
+        date.hours(),
+        date.date(),
+        date.month() + 1,
+        '*',
+      ].join(' ');
+    }
+  }
+}

app/react/edge/edge-jobs/CreateView/CreateView.tsx

@@ -0,0 +1,28 @@
+import { PageHeader } from '@@/PageHeader';
+import { Widget } from '@@/Widget';
+
+import { CreateEdgeJobForm } from './CreateEdgeJobForm';
+
+export function CreateView() {
+  return (
+    <>
+      <PageHeader
+        title="Create edge job"
+        breadcrumbs={[
+          { label: 'Edge jobs', link: 'edge.jobs' },
+          'Create edge job',
+        ]}
+      />
+
+      <div className="row">
+        <div className="col-sm-12">
+          <Widget>
+            <Widget.Body>
+              <CreateEdgeJobForm />
+            </Widget.Body>
+          </Widget>
+        </div>
+      </div>
+    </>
+  );
+}

app/react/edge/edge-jobs/components/EdgeJobForm/AdvancedCronFieldset.tsx

@@ -0,0 +1,40 @@
+import { useField } from 'formik';
+import { string } from 'yup';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Input } from '@@/form-components/Input';
+
+import { TimeTip } from './TimeTip';
+
+export function AdvancedCronFieldset() {
+  const [{ value, onChange, name, onBlur }, { error }] =
+    useField<string>('cronExpression');
+
+  return (
+    <>
+      <FormControl label="Cron rule" inputId="edge_job_cron" errors={error}>
+        <Input
+          data-cy="edge-job-cron-input"
+          id="edge_job_cron"
+          placeholder="e.g. 0 2 * * *"
+          required
+          value={value}
+          onChange={onChange}
+          name={name}
+          onBlur={onBlur}
+        />
+      </FormControl>
+
+      <TimeTip />
+    </>
+  );
+}
+/** https://regexr.com/573i2 */
+const cronRegex =
+  /(@(annually|yearly|monthly|weekly|daily|hourly|reboot))|(@every (\d+(ns|us|µs|ms|s|m|h))+)|((((\d+,)+\d+|(\d+(\/|-)\d+)|\d+|\*) ){4,6}((\d+,)+\d+|(\d+(\/|-)\d+)|\d+|\*))/;
+
+export function cronValidation() {
+  return string()
+    .default('')
+    .matches(cronRegex, 'This field format is invalid.');
+}

app/react/edge/edge-jobs/components/EdgeJobForm/BasicCronFieldset.tsx

@@ -0,0 +1,31 @@
+import { useFormikContext } from 'formik';
+
+import { SwitchField } from '@@/form-components/SwitchField';
+
+import { FormValues } from './types';
+import { RecurringFieldset, defaultCronExpression } from './RecurringFieldset';
+import { ScheduledDateFieldset } from './ScheduledDateFieldset';
+
+export function BasicCronFieldset() {
+  const { values, setFieldValue } = useFormikContext<FormValues>();
+  return (
+    <>
+      <div className="form-group">
+        <div className="col-sm-12">
+          <SwitchField
+            label="Recurring Edge job"
+            checked={values.recurring}
+            onChange={(value) => {
+              setFieldValue('recurring', value);
+              if (value) {
+                setFieldValue('recurringOption', defaultCronExpression);
+              }
+            }}
+            data-cy="edgeJobCreate-recurringSwitch"
+          />
+        </div>
+      </div>
+      {values.recurring ? <RecurringFieldset /> : <ScheduledDateFieldset />}
+    </>
+  );
+}

app/react/edge/edge-jobs/components/EdgeJobForm/JobConfigurationFieldset.tsx

@@ -0,0 +1,37 @@
+import { useFormikContext } from 'formik';
+
+import { FormSection } from '@@/form-components/FormSection';
+import { BoxSelector } from '@@/BoxSelector';
+
+import { cronMethodOptions } from '../../CreateView/cron-method-options';
+
+import { FormValues } from './types';
+import { AdvancedCronFieldset } from './AdvancedCronFieldset';
+import { BasicCronFieldset } from './BasicCronFieldset';
+
+export function JobConfigurationFieldset() {
+  const { values, setFieldValue } = useFormikContext<FormValues>();
+
+  return (
+    <>
+      <FormSection title="Edge job configuration">
+        <BoxSelector
+          slim
+          radioName="configuration"
+          value={values.cronMethod}
+          options={cronMethodOptions}
+          onChange={(value) => {
+            setFieldValue('cronMethod', value);
+            setFieldValue('cronExpression', '');
+          }}
+        />
+      </FormSection>
+
+      {values.cronMethod === 'basic' ? (
+        <BasicCronFieldset />
+      ) : (
+        <AdvancedCronFieldset />
+      )}
+    </>
+  );
+}

app/react/edge/edge-jobs/components/EdgeJobForm/NameField.tsx

@@ -0,0 +1,46 @@
+import { Field, FormikErrors } from 'formik';
+import { string } from 'yup';
+import { useMemo } from 'react';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Input } from '@@/form-components/Input';
+
+import { useEdgeJobs } from '../../queries/useEdgeJobs';
+import { EdgeJob } from '../../types';
+
+export function NameField({ errors }: { errors?: FormikErrors<string> }) {
+  return (
+    <FormControl label="Name" required errors={errors} inputId="edgejob_name">
+      <Field
+        as={Input}
+        name="name"
+        placeholder="e.g. backup-app-prod"
+        data-cy="edgejob-name-input"
+        id="edgejob_name"
+      />
+    </FormControl>
+  );
+}
+
+export function useNameValidation(id?: EdgeJob['Id']) {
+  const edgeJobsQuery = useEdgeJobs();
+
+  return useMemo(
+    () =>
+      string()
+        .required('Name is required')
+        .matches(
+          /^[a-zA-Z0-9][a-zA-Z0-9_.-]+$/,
+          'Allowed characters are: [a-zA-Z0-9_.-]'
+        )
+        .test({
+          name: 'is-unique',
+          test: (value) =>
+            !edgeJobsQuery.data?.find(
+              (job) => job.Name === value && job.Id !== id
+            ),
+          message: 'Name must be unique',
+        }),
+    [edgeJobsQuery.data, id]
+  );
+}

app/react/edge/edge-jobs/components/EdgeJobForm/RecurringFieldset.tsx

@@ -0,0 +1,40 @@
+import { useField } from 'formik';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Select } from '@@/form-components/Input';
+
+export const defaultCronExpression = '0 * * * *' as const;
+
+export const timeOptions = [
+  {
+    label: 'Every hour',
+    value: defaultCronExpression,
+  },
+  {
+    label: 'Every 2 hours',
+    value: '0 */2 * * *',
+  },
+  {
+    label: 'Every day',
+    value: '0 0 * * *',
+  },
+] as const;
+
+export function RecurringFieldset() {
+  const [{ value, onChange, name, onBlur }, { error }] =
+    useField<string>('recurringOption');
+
+  return (
+    <FormControl label="Edge job time" inputId="edge_job_value" errors={error}>
+      <Select
+        id="edge_job_value"
+        data-cy="edge-job-time-select"
+        name={name}
+        options={timeOptions}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+      />
+    </FormControl>
+  );
+}

app/react/edge/edge-jobs/components/EdgeJobForm/ScheduledDateFieldset.tsx

@@ -0,0 +1,25 @@
+import { useField } from 'formik';
+
+import { DateTimeField } from '@@/DateTimeField';
+
+import { TimeTip } from './TimeTip';
+
+export function ScheduledDateFieldset() {
+  const [{ value }, { error }, { setValue }] = useField<Date | null>(
+    'dateTime'
+  );
+  return (
+    <>
+      <DateTimeField
+        value={value}
+        onChange={(date) => setValue(date)}
+        error={error}
+        label="Scheduled date"
+        name="dateTime"
+        data-cy="edge-job-date-time-picker"
+      />
+
+      <TimeTip />
+    </>
+  );
+}

app/react/edge/edge-jobs/components/EdgeJobForm/TimeTip.tsx

@@ -0,0 +1,9 @@
+import { TextTip } from '@@/Tip/TextTip';
+
+export function TimeTip() {
+  return (
+    <TextTip color="blue">
+      Time should be set according to the chosen environments&apos; timezone.
+    </TextTip>
+  );
+}

app/react/edge/edge-jobs/components/EdgeJobForm/types.ts

@@ -0,0 +1,20 @@
+import { EdgeGroup } from '@/react/edge/edge-groups/types';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { timeOptions } from './RecurringFieldset';
+
+export interface FormValues {
+  name: string;
+  recurring: boolean;
+  edgeGroupIds: Array<EdgeGroup['Id']>;
+  environmentIds: Array<EnvironmentId>;
+
+  method: 'editor' | 'upload';
+  fileContent: string;
+  file: File | undefined;
+
+  cronMethod: 'basic' | 'advanced';
+  dateTime: Date; // basic !recurring
+  recurringOption: (typeof timeOptions)[number]['value']; // basic recurring
+  cronExpression: string; // advanced
+}

app/react/edge/edge-jobs/components/EdgeJobForm/useValidation.ts

@@ -0,0 +1,72 @@
+import {
+  SchemaOf,
+  array,
+  boolean,
+  date,
+  mixed,
+  number,
+  object,
+  string,
+} from 'yup';
+import { useMemo } from 'react';
+
+import { file } from '@@/form-components/yup-file-validation';
+
+import { EdgeJob } from '../../types';
+
+import { FormValues } from './types';
+import { useNameValidation } from './NameField';
+import { cronValidation } from './AdvancedCronFieldset';
+import { timeOptions } from './RecurringFieldset';
+
+export function useValidation({
+  id,
+}: { id?: EdgeJob['Id'] } = {}): SchemaOf<FormValues> {
+  const nameValidation = useNameValidation(id);
+  return useMemo(
+    () =>
+      object({
+        name: nameValidation,
+        recurring: boolean().default(false),
+        cronExpression: string().default('').when('cronMethod', {
+          is: 'advanced',
+          then: cronValidation().required(),
+        }),
+        edgeGroupIds: array(number().required()),
+        environmentIds: array(number().required()),
+
+        method: mixed<'editor' | 'upload'>()
+          .oneOf(['editor', 'upload'])
+          .default('editor'),
+        file: file().when('method', {
+          is: 'upload',
+          then: object().required('This field is required.'),
+        }),
+        fileContent: string()
+          .default('')
+          .when('method', {
+            is: 'editor',
+            then: (schema) => schema.required('This field is required.'),
+          }),
+
+        cronMethod: mixed<'basic' | 'advanced'>()
+          .oneOf(['basic', 'advanced'])
+          .default('basic'),
+        dateTime: date()
+          .default(new Date())
+          .when(['recurring', 'cronMethod'], {
+            is: (recurring: boolean, cronMethod: 'basic' | 'advanced') =>
+              !recurring && cronMethod === 'basic',
+            then: (schema) => schema.required('This field is required.'),
+          }),
+        recurringOption: mixed()
+          .oneOf(timeOptions.map((o) => o.value))
+          .when(['recurring', 'cronMethod'], {
+            is: (recurring: boolean, cronMethod: 'basic' | 'advanced') =>
+              recurring && cronMethod === 'basic',
+            then: (schema) => schema.required('This field is required.'),
+          }),
+      }),
+    [nameValidation]
+  );
+}

app/react/edge/edge-jobs/queries/useCreateEdgeJobMutation/createJobFromFile.ts

@@ -0,0 +1,39 @@
+import axios, {
+  json2formData,
+  parseAxiosError,
+} from '@/portainer/services/axios';
+import { EdgeGroup } from '@/react/edge/edge-groups/types';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { EdgeJob } from '../../types';
+import { buildUrl } from '../build-url';
+
+/**
+ * Payload to create an EdgeJob from a file
+ */
+export type FileUploadPayload = {
+  Name: string;
+  CronExpression: string;
+  Recurring: boolean;
+
+  EdgeGroups: Array<EdgeGroup['Id']>;
+  Endpoints: Array<EnvironmentId>;
+  File: File;
+};
+
+export async function createJobFromFile(payload: FileUploadPayload) {
+  try {
+    const { data } = await axios.post<EdgeJob>(
+      buildUrl({ action: 'create/file' }),
+      json2formData(payload),
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      }
+    );
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e as Error);
+  }
+}

app/react/edge/edge-jobs/queries/useCreateEdgeJobMutation/createJobFromFileContent.ts

@@ -0,0 +1,31 @@
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EdgeGroup } from '@/react/edge/edge-groups/types';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { EdgeJob } from '../../types';
+import { buildUrl } from '../build-url';
+
+/**
+ * Payload for creating an EdgeJob from a string
+ */
+export interface FileContentPayload {
+  name: string;
+  cronExpression: string;
+  recurring: boolean;
+
+  edgeGroups: Array<EdgeGroup['Id']>;
+  endpoints: Array<EnvironmentId>;
+  fileContent: string;
+}
+
+export async function createJobFromFileContent(payload: FileContentPayload) {
+  try {
+    const { data } = await axios.post<EdgeJob>(
+      buildUrl({ action: 'create/string' }),
+      payload
+    );
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e as Error);
+  }
+}

app/react/edge/edge-jobs/queries/useCreateEdgeJobMutation/useCreateEdgeJobMutation.ts

@@ -0,0 +1,62 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { EdgeGroup } from '@/react/edge/edge-groups/types';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { createJobFromFile } from './createJobFromFile';
+import { createJobFromFileContent } from './createJobFromFileContent';
+
+export function useCreateEdgeJobMutation() {
+  return useMutation(createEdgeJob);
+}
+
+export type BasePayload = {
+  name: string;
+  cronExpression: string;
+  recurring: boolean;
+
+  edgeGroups: Array<EdgeGroup['Id']>;
+  endpoints: Array<EnvironmentId>;
+};
+
+export type CreateEdgeJobPayload =
+  | {
+      method: 'file';
+      payload: BasePayload & {
+        /** File to upload */
+        file: File;
+      };
+    }
+  | {
+      method: 'string';
+      payload: BasePayload & {
+        /** Content of the Job file */
+        fileContent: string;
+      };
+    };
+
+function createEdgeJob({ method, payload }: CreateEdgeJobPayload) {
+  switch (method) {
+    case 'file':
+      return createJobFromFile({
+        CronExpression: payload.cronExpression,
+        Recurring: payload.recurring,
+        Name: payload.name,
+        EdgeGroups: payload.edgeGroups,
+        Endpoints: payload.endpoints,
+        File: payload.file,
+      });
+
+    case 'string':
+      return createJobFromFileContent({
+        cronExpression: payload.cronExpression,
+        recurring: payload.recurring,
+        name: payload.name,
+        edgeGroups: payload.edgeGroups,
+        endpoints: payload.endpoints,
+        fileContent: payload.fileContent,
+      });
+    default:
+      throw new Error('Invalid method');
+  }
+}

app/react/portainer/environments/update-schedules/ListView/columns/scheduled-time.tsx

@@ -1,6 +1,6 @@
 import { formatDate } from '@/portainer/filters/filters';
 
-import { FORMAT } from '../../common/ScheduledTimeField';
+import { FORMAT } from '@@/DateTimeField';
 
 import { columnHelper } from './helper';
 

app/react/portainer/environments/update-schedules/common/ScheduledTimeField.tsx

@@ -1,8 +1,6 @@
-import DateTimePicker from 'react-datetime-picker';
-import { Calendar, X } from 'lucide-react';
+import { useField } from 'formik';
 import { useMemo } from 'react';
 import { string } from 'yup';
-import { useField } from 'formik';
 
 import {
   isoDate,
@@ -10,25 +8,18 @@ import {
   TIME_FORMAT,
 } from '@/portainer/filters/filters';
 
-import { FormControl } from '@@/form-components/FormControl';
-import { Input } from '@@/form-components/Input';
+import { DateTimeField, FORMAT } from '@@/DateTimeField';
 import { TextTip } from '@@/Tip/TextTip';
 
 import { FormValues } from './types';
 
-import 'react-datetime-picker/dist/DateTimePicker.css';
-import 'react-calendar/dist/Calendar.css';
-
 interface Props {
   disabled?: boolean;
 }
 
-export const FORMAT = 'YYYY-MM-DD HH:mm';
-
 export function ScheduledTimeField({ disabled }: Props) {
   const [{ name, value }, { error }, { setValue }] =
     useField<FormValues['scheduledTime']>('scheduledTime');
-
   const dateValue = useMemo(() => parseIsoDate(value, FORMAT), [value]);
 
   if (!value) {
@@ -37,31 +28,19 @@ export function ScheduledTimeField({ disabled }: Props) {
 
   return (
     <>
-      <FormControl label="Schedule date & time" errors={error}>
-        {!disabled ? (
-          <DateTimePicker
-            format="y-MM-dd HH:mm"
-            className="form-control [&>div]:border-0"
-            onChange={(date) => {
-              const dateToSave =
-                date || new Date(Date.now() + 24 * 60 * 60 * 1000);
-              setValue(isoDate(dateToSave.valueOf(), FORMAT));
-            }}
-            name={name}
-            value={dateValue}
-            calendarIcon={<Calendar className="lucide" />}
-            clearIcon={<X className="lucide" />}
-            disableClock
-            minDate={new Date(Date.now() - 24 * 60 * 60 * 1000)}
-          />
-        ) : (
-          <Input
-            defaultValue={value}
-            disabled
-            data-cy="update-schedules-time-input"
-          />
-        )}
-      </FormControl>
+      <DateTimeField
+        label="Schedule date & time"
+        minDate={new Date(Date.now() - 24 * 60 * 60 * 1000)}
+        onChange={(date) => {
+          const dateToSave = date || new Date(Date.now() + 24 * 60 * 60 * 1000);
+          setValue(isoDate(dateToSave.valueOf(), FORMAT));
+        }}
+        error={error}
+        disabled={disabled}
+        name={name}
+        value={dateValue}
+        data-cy="update-schedules-time-input"
+      />
       {!disabled && value && (
         <TextTip color="blue">
           If time zone is not set on edge agent then UTC+0 will be used.