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

app/react/edge/edge-jobs/ItemView/UpdateEdgeJobForm/UpdateEdgeJobForm.tsx

@@ -0,0 +1,123 @@
+import { Form, Formik, useFormikContext } from 'formik';
+import { useRouter } from '@uirouter/react';
+
+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 { WebEditorForm } from '@@/WebEditorForm';
+
+import { NameField } from '../../components/EdgeJobForm/NameField';
+import { JobConfigurationFieldset } from '../../components/EdgeJobForm/JobConfigurationFieldset';
+import {
+  UpdatePayload,
+  useUpdateEdgeJobMutation,
+} from '../../queries/useUpdateEdgeJobMutation';
+import {
+  toRecurringRequest,
+  toRecurringViewModel,
+} from '../../components/EdgeJobForm/parseRecurringValues';
+import { EdgeJobResponse } from '../../queries/useEdgeJob';
+import { useEdgeJobFile } from '../../queries/useEdgeJobFile';
+import { useValidation } from '../useValidation';
+
+import { FormValues } from './types';
+
+export function UpdateEdgeJobForm({ edgeJob }: { edgeJob: EdgeJobResponse }) {
+  const fileQuery = useEdgeJobFile(edgeJob.Id);
+  const mutation = useUpdateEdgeJobMutation();
+  const validation = useValidation({ id: edgeJob.Id });
+  const router = useRouter();
+
+  if (!fileQuery.isSuccess) {
+    return null;
+  }
+
+  return (
+    <Formik<FormValues>
+      validationSchema={validation}
+      validateOnMount
+      initialValues={{
+        name: edgeJob.Name,
+
+        edgeGroupIds: edgeJob.EdgeGroups || [],
+        environmentIds: edgeJob.Endpoints || [],
+        fileContent: fileQuery.data,
+        ...toRecurringViewModel({
+          cronExpression: edgeJob.CronExpression,
+          recurring: edgeJob.Recurring,
+        }),
+      }}
+      onSubmit={(values) => {
+        mutation.mutate(
+          { id: edgeJob.Id, payload: getPayload(values) },
+          {
+            onSuccess: () => {
+              notifySuccess('Success', 'Edge job successfully updated');
+              router.stateService.go('^');
+            },
+          }
+        );
+      }}
+    >
+      <InnerForm isLoading={mutation.isLoading} />
+    </Formik>
+  );
+}
+
+function InnerForm({ isLoading }: { isLoading: boolean }) {
+  const { values, setFieldValue, isValid, errors } =
+    useFormikContext<FormValues>();
+
+  return (
+    <Form className="form-horizontal">
+      <NameField errors={errors.name} />
+
+      <JobConfigurationFieldset />
+
+      <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}
+      />
+
+      <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="Update edge job"
+        isLoading={isLoading}
+        isValid={isValid}
+        data-cy="updateJobButton"
+        loadingText="In progress..."
+        errors={errors}
+      />
+    </Form>
+  );
+}
+
+function getPayload(values: FormValues): UpdatePayload {
+  return {
+    name: values.name,
+    edgeGroups: values.edgeGroupIds,
+    endpoints: values.environmentIds,
+    fileContent: values.fileContent,
+    ...toRecurringRequest(values),
+  };
+}

app/react/edge/edge-jobs/ItemView/UpdateEdgeJobForm/getPayload.tsx

@@ -0,0 +1,14 @@
+import { UpdatePayload } from '../../queries/useUpdateEdgeJobMutation';
+import { toRecurringRequest } from '../../components/EdgeJobForm/parseRecurringValues';
+
+import { FormValues } from './types';
+
+export function getPayload(values: FormValues): UpdatePayload {
+  return {
+    name: values.name,
+    edgeGroups: values.edgeGroupIds,
+    endpoints: values.environmentIds,
+    fileContent: values.fileContent,
+    ...toRecurringRequest(values),
+  };
+}

app/react/edge/edge-jobs/ItemView/UpdateEdgeJobForm/types.ts

@@ -0,0 +1,18 @@
+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>;
+
+  fileContent: string;
+
+  cronMethod: 'basic' | 'advanced';
+  dateTime: Date; // basic !recurring
+  recurringOption: (typeof timeOptions)[number]['value']; // basic recurring
+  cronExpression: string; // advanced
+}