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

app/edge/__module.js

@@ -122,7 +122,7 @@ angular
       url: '/new',
       views: {
         'content@': {
-          component: 'createEdgeJobView',
+          component: 'edgeJobsCreateView',
         },
       },
     };

app/edge/components/edge-job-form/edgeJobForm.html

@@ -36,7 +36,7 @@
   <!-- edge-job-method-select -->
   <div class="col-sm-12 form-section-title"> Edge job configuration </div>
 
-  <box-selector slim="true" radio-name="'configuration'" value="$ctrl.formValues.cronMethod" options="$ctrl.cronMethods" on-change="($ctrl.onCronMethodChange)"></box-selector>
+  <box-selector slim="true" radio-name="'configurationold'" value="$ctrl.formValues.cronMethod" options="$ctrl.cronMethods" on-change="($ctrl.onCronMethodChange)"></box-selector>
 
   <!-- !edge-job-method-select -->
   <!-- basic-edge-job -->
@@ -44,9 +44,10 @@
     <div class="form-group">
       <label for="recurring" class="col-sm-2 control-label text-left">Recurring Edge job</label>
       <div class="col-sm-10">
-        <label class="switch"
-          ><input type="checkbox" name="recurring" ng-model="$ctrl.model.Recurring" data-cy="recurring-edge-job-checkbox" /><span class="slider round"></span
-        ></label>
+        <label class="switch">
+          <input type="checkbox" name="recurring" ng-model="$ctrl.model.Recurring" id="recurring" data-cy="recurring-edge-job-checkbox" />
+          <span class="slider round"></span>
+        </label>
       </div>
     </div>
     <!-- not-recurring -->
@@ -135,7 +136,7 @@
   <!-- execution-method -->
   <div ng-if="!$ctrl.model.Id">
     <div class="col-sm-12 form-section-title"> Job content </div>
-    <box-selector value="$ctrl.formValues.method" options="$ctrl.buildMethods" radio-name="buildMethod" on-change="($ctrl.onBuildMethodChange)" slim="true"></box-selector>
+    <box-selector value="$ctrl.formValues.method" options="$ctrl.buildMethods" radio-name="'buildMethodolds'" on-change="($ctrl.onBuildMethodChange)" slim="true"></box-selector>
   </div>
   <!-- !execution-method -->
 

app/edge/components/edge-job-form/edgeJobFormController.js

@@ -9,8 +9,8 @@ export class EdgeJobFormController {
     this.$scope = $scope;
     this.$async = $async;
 
-    this.cronMethods = cronMethodOptions;
-    this.buildMethods = [editor, upload];
+    this.cronMethods = cronMethodOptions.map((o) => ({ ...o, id: o.id + '-old' }));
+    this.buildMethods = [editor, upload].map((o) => ({ ...o, id: o.id + '-old' }));
 
     this.state = {
       formValidationError: '',
@@ -70,10 +70,12 @@ export class EdgeJobFormController {
 
   onChangeModel(model) {
     const defaultTime = moment().add('hours', 1);
+    const scheduled = this.scheduleValues.find((v) => v.cron === model.CronExpression);
+
     this.formValues = {
       datetime: model.CronExpression ? cronToDatetime(model.CronExpression, defaultTime) : defaultTime,
-      scheduleValue: this.formValues.scheduleValue,
-      cronMethod: model.Recurring ? 'advanced' : 'basic',
+      scheduleValue: scheduled || this.scheduleValues[0],
+      cronMethod: model.Recurring && !scheduled ? 'advanced' : 'basic',
       method: this.formValues.method,
     };
   }

app/edge/react/views/jobs.ts

@@ -4,10 +4,12 @@ import { r2a } from '@/react-tools/react2angular';
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { withUIRouter } from '@/react-tools/withUIRouter';
 import { ListView } from '@/react/edge/edge-jobs/ListView';
+import { CreateView } from '@/react/edge/edge-jobs/CreateView/CreateView';
 
 export const jobsModule = angular
   .module('portainer.edge.react.views.jobs', [])
+  .component('edgeJobsView', r2a(withUIRouter(withCurrentUser(ListView)), []))
   .component(
-    'edgeJobsView',
-    r2a(withUIRouter(withCurrentUser(ListView)), [])
+    'edgeJobsCreateView',
+    r2a(withUIRouter(withCurrentUser(CreateView)), [])
   ).name;

app/edge/views/edge-jobs/createEdgeJobView/createEdgeJobView.html

@@ -1,20 +0,0 @@
-<page-header title="'Create Edge job'" breadcrumbs="[{label:'Edge Jobs', link:'edge.jobs'}, 'Create Edge job']"> </page-header>
-
-<div class="row">
-  <div class="col-sm-12">
-    <rd-widget>
-      <rd-widget-body>
-        <edge-job-form
-          model="$ctrl.model"
-          groups="$ctrl.groups"
-          tags="$ctrl.tags"
-          edge-groups="$ctrl.edgeGroups"
-          form-action="$ctrl.create"
-          form-action-label="Create edge job"
-          action-in-progress="$ctrl.state.actionInProgress"
-          is-editor-dirty="$ctrl.state.isEditorDirty"
-        ></edge-job-form>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>

app/edge/views/edge-jobs/createEdgeJobView/createEdgeJobViewController.js

@@ -1,86 +0,0 @@
-import { confirmWebEditorDiscard } from '@@/modals/confirm';
-
-export class CreateEdgeJobViewController {
-  /* @ngInject */
-  constructor($async, $q, $state, $window, EdgeJobService, GroupService, Notifications, TagService) {
-    this.state = {
-      actionInProgress: false,
-      isEditorDirty: false,
-    };
-
-    this.model = {
-      Name: '',
-      Recurring: false,
-      CronExpression: '',
-      Endpoints: [],
-      FileContent: '',
-      File: null,
-      EdgeGroups: [],
-    };
-
-    this.$async = $async;
-    this.$q = $q;
-    this.$state = $state;
-    this.$window = $window;
-    this.Notifications = Notifications;
-    this.GroupService = GroupService;
-    this.EdgeJobService = EdgeJobService;
-    this.TagService = TagService;
-
-    this.create = this.create.bind(this);
-    this.createEdgeJob = this.createEdgeJob.bind(this);
-    this.createAsync = this.createAsync.bind(this);
-  }
-
-  create(method) {
-    return this.$async(this.createAsync, method);
-  }
-
-  async createAsync(method) {
-    this.state.actionInProgress = true;
-
-    try {
-      await this.createEdgeJob(method, this.model);
-      this.Notifications.success('Success', 'Edge job successfully created');
-      this.state.isEditorDirty = false;
-      this.$state.go('edge.jobs', {}, { reload: true });
-    } catch (err) {
-      this.Notifications.error('Failure', err, 'Unable to create Edge job');
-    }
-
-    this.state.actionInProgress = false;
-  }
-
-  createEdgeJob(method, model) {
-    if (method === 'editor') {
-      return this.EdgeJobService.createEdgeJobFromFileContent(model);
-    }
-    return this.EdgeJobService.createEdgeJobFromFileUpload(model);
-  }
-
-  async uiCanExit() {
-    if (this.model.FileContent && this.state.isEditorDirty) {
-      return confirmWebEditorDiscard();
-    }
-  }
-
-  async $onInit() {
-    try {
-      const [groups, tags] = await Promise.all([this.GroupService.groups(), this.TagService.tags()]);
-      this.groups = groups;
-      this.tags = tags;
-    } catch (err) {
-      this.Notifications.error('Failure', err, 'Unable to retrieve page data');
-    }
-
-    this.$window.onbeforeunload = () => {
-      if (this.model.FileContent && this.state.isEditorDirty) {
-        return '';
-      }
-    };
-  }
-
-  $onDestroy() {
-    this.state.isEditorDirty = false;
-  }
-}

app/edge/views/edge-jobs/createEdgeJobView/index.js

@@ -1,7 +0,0 @@
-import angular from 'angular';
-import { CreateEdgeJobViewController } from './createEdgeJobViewController';
-
-angular.module('portainer.edge').component('createEdgeJobView', {
-  templateUrl: './createEdgeJobView.html',
-  controller: CreateEdgeJobViewController,
-});