feat(edge/jobs): migrate item view to react [EE-2220] (#11887)

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

@@ -1,6 +1,5 @@
 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';
@@ -14,15 +13,19 @@ 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';
+import {
+  toRecurringRequest,
+  toRecurringViewModel,
+} from '../components/EdgeJobForm/parseRecurringValues';
+
+import { FormValues } from './types';
+import { useValidation } from './useValidation';
 
 export function CreateEdgeJobForm() {
   const mutation = useCreateEdgeJobMutation();
@@ -35,16 +38,12 @@ export function CreateEdgeJobForm() {
       validateOnMount
       initialValues={{
         name: '',
-        recurring: false,
-        cronExpression: '',
-        recurringOption: defaultCronExpression,
         method: 'editor',
-        cronMethod: 'basic',
-        dateTime: new Date(),
         edgeGroupIds: [],
         environmentIds: [],
         file: undefined,
         fileContent: '',
+        ...toRecurringViewModel(),
       }}
       onSubmit={(values) => {
         mutation.mutate(getPayload(values.method, values), {
@@ -122,6 +121,7 @@ function InnerForm({ isLoading }: { isLoading: boolean }) {
         isValid={isValid}
         data-cy="edgeJobCreate-addJobButton"
         loadingText="In progress..."
+        errors={errors}
       />
     </Form>
   );
@@ -162,42 +162,7 @@ function getPayload(
       name: values.name,
       edgeGroups: values.edgeGroupIds,
       endpoints: values.environmentIds,
-      ...getRecurringConfig(values),
+      ...toRecurringRequest(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/cron-method-options.tsx

@@ -1,22 +0,0 @@
-import { Calendar, Edit } from 'lucide-react';
-
-import { BoxSelectorOption } from '@@/BoxSelector';
-
-export const cronMethodOptions: ReadonlyArray<BoxSelectorOption<string>> = [
-  {
-    id: 'config_basic',
-    value: 'basic',
-    icon: Calendar,
-    iconType: 'badge',
-    label: 'Basic configuration',
-    description: 'Select date from calendar',
-  },
-  {
-    id: 'config_advanced',
-    value: 'advanced',
-    icon: Edit,
-    iconType: 'badge',
-    label: 'Advanced configuration',
-    description: 'Write your own cron rule',
-  },
-] as const;

app/react/edge/edge-jobs/CreateView/types.ts

@@ -0,0 +1,20 @@
+import { EdgeGroup } from '@/react/edge/edge-groups/types';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { timeOptions } from '../components/EdgeJobForm/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/CreateView/useValidation.ts

@@ -0,0 +1,69 @@
+import {
+  SchemaOf,
+  array,
+  boolean,
+  date,
+  mixed,
+  number,
+  object,
+  string,
+} from 'yup';
+import { useMemo } from 'react';
+
+import { file } from '@@/form-components/yup-file-validation';
+
+import { useNameValidation } from '../components/EdgeJobForm/NameField';
+import { cronValidation } from '../components/EdgeJobForm/AdvancedCronFieldset';
+import { timeOptions } from '../components/EdgeJobForm/RecurringFieldset';
+
+import { FormValues } from './types';
+
+export function useValidation(): SchemaOf<FormValues> {
+  const nameValidation = useNameValidation();
+  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]
+  );
+}